jQuery插件写法总结以及面向对象方式写法总结

前两个是jQuery插件，后面2个是以对象的形式开发，都类似。

写法一

(function($, window){
    // 初始态定义
    var _oDialogCollections = {};
 
    // 插件定义
    $.fn.MNDialog = function (_aoConfig) {
        // 默认参数，可被重写
        var defaults = {
            // string
            sId : "",
            // num
            nWidth : 400,
            // bollean
            bDisplayHeader : true,
            // object
            oContentHtml : "",
            // function
            fCloseCallback : null
        };
 
        var _oSelf = this,
            $this = $(this);
 
        // 插件配置
        this.oConfig = $.extend(defaults, _aoConfig);
 
        // 初始化函数
        var _init = function () {
            if (_oDialogCollections) {
                // 对于已初始化的处理
                // 如果此时已经存在弹框，则remove掉再添加新的弹框
            }
            // 初始化弹出框数据
            _initData();
            // 事件绑定
            _loadEvent();
            // 加载内容
            _loadContent();            
        }
        // 私有函数
        var _initData = function () {};
        var _loadEvent = function () {};
        var _loadContent = function () {
            // 内容（分字符和函数两种，字符为静态模板，函数为异步请求后组装的模板，会延迟，所以特殊处理）
            if($.isFunction(_oSelf.oConfig.oContentHtml)) {
                _oSelf.oConfig.oContentHtml.call(_oSelf, function(oCallbackHtml) {
                    // 便于传带参函数进来并且执行
                    _oSelf.html(oCallbackHtml);
                    // 有回调函数则执行
                    _oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
                });
            } else if ($.type(_oSelf.oConfig.oContentHtml) === "string") {
                _oSelf.html(_oSelf.oConfig.oContentHtml);
                _oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
            } else {
                console.log("弹出框的内容格式不对，应为function或者string。");
            }
        };
 
        // 内部使用参数
        var _oEventAlias = {
            click         : 'D_ck',
            dblclick     : 'D_dbl'
        };
 
        // 提供外部函数
        this.close = function () {
            _close();
        }        
 
        // 启动插件
        _init();
 
        // 链式调用
        return this;        
    };
    // 插件结束
})(jQuery, window);


//调用
var MNDialog = $("#header").MNDialog({
    sId : "#footer",        //覆盖默认值
    fCloseCallback : dialog,//回调函数
    oContentHtml : function(_aoCallback){
            _aoCallback(_oEditGrpDlgView.el);
        }
    }
});
// 调用提供的函数
MNDialog.close;
function dialog(){
 
}

分析

1. 自调用匿名函数

(function($, window) {
  // jquery code
})(jQuery, window);

　　用处：通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

2. 匿名函数为什么要传入window

通过传入window变量，使得window由全局变量变为局部变量，当在jQuery代码块中访问window时，不需要将作用域链回退到顶层作用域，这样可以更快的访问window；这还不是关键所在，更重要的是，将window作为参数传入，可以在压缩代码时进行优化，看看jquery.min.js：

(function(a,b){})(jQuery, window); // jQuery被优化为a, window 被优化为 b

3. 全局变量this定义

var _oSelf = this,
$this = $(this);

　　使得在插件的函数内可以使用指向插件的this

4. 插件配置

this.oConfig = $.extend(defaults, _aoConfig);

　　设置默认参数，同时也可以再插件定义时传入参数覆盖默认值

5. 初始化函数

     一般的插件会有init初始化函数并在插件的尾部初始化

6. 私有函数、公有函数

      私有函数：插件内使用，函数名使用”_”作为前缀标识共有函数：可在插件外使用，函数名使用”this.”作为前缀标识，作为插件的一个方法供外部使用

7. return this

    最后返回jQuery对象，便于jQuery的链式操