结构良好，组织有序的Jquery插件编写Demo

作为后台人员去开发前端js，大都是直接$(function(){})，或者直接在<script>标签内敲代码，完全没有考虑写的js代码是否会有兼容或者冲突，可扩展等问题，完成任务就好的感觉。那有什么写法可以解决呢，又方便又能兼容可扩展性的js插件写法？

下面js框架刚好能解决这些问题，直接摞代码吧！

Jquery插件编写Demo

;(function($, window, document, undefined) {
    //定义Myfun的构造函数
    var Myfun = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Myfun的方法
    Myfun.prototype = {
        render: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在插件中使用Myfun对象
    $.fn.myPlugin = function(options) {
        //创建Myfun的实体
        var myfun = new Myfun(this, options);
        //调用其方法
        return myfun.render();
    }
})(jQuery, window, document);

调用

<div class="demo">演示内容</div>

// js调用
$(".demo").myPlugin({
  'color': '#f00',
  'fontSize': '12px'
});