1 模块模式
模块模式是用来封装逻辑并避免全局命名空间污染的好方法，匿名函数也可以做到。
在匿名函数的逻辑都在闭包里面运行，为应用中的变量提供了局部的作用域和私有的运行环境
(function(){ })();
2 全局导入
定义在模块里的变量都是局部变量，因此在全局命名空间中时无法访问他们的，然而全局变量仍都是可用的
(function($){ })(jQuery);//导入jQuery
3 全局导出
全局导出需要用到window
(function($,exports){ exports.name = "Jackey Li"; })(jQuery,window);//导入jQuery,导入的window，可使用作为导出变量
4 添加少量上下文
<!DOCTYPE html> <html> <head> <title></title> <script src="js/jquery-2.1.1.js"></script> <style> #view{ width:600px; height: 600px; background: black; } .assets{width: 300px; height: 300px; background: white;} </style> </head> <body> <div id="view"> <div class="assets"></div> </div> </body> <script> (function($,exports){ var mod = {}; mod.load = function(func){ $($.proxy(func,this)); }; mod.load(function(){ this.view = $("#view"); }); mod.assetClick = function(e){ //处理点击 console.log('ddd'); }; mod.load(function(){ this.view.find(".assets").click( //$.proxy 代理的是assets的this，这句话的意思是将assetClick事件添加到.assets的dom上，这样就实现了click事件 $.proxy(this.assetClick,this) ); }); })(jQuery,window);//导入jQuery,导入的window，可使用作为导出变量 </script> </html>
(function($,exports){ var mod = function(includes){ if(includes) this.include(includes); }; mod.fn = mod.prototype; mod.fn.proxy = function(func){ return $.proxy(func,this); }; mod.fn.load = function(func){ $(this.proxy(func)); }; mod.fn.include = function(ob){ $.extend(this,ob); }; exports.Controller = mod; })(jQuery,window); (function($,Controller){ var mod = new Controller; mod.toggleClass = function(e){ console.log("ddd"); }; mod.load(function(){ this.view = $("#view"); this.view.mouseover('',this.proxy(this.toggleClass)); }); })(jQuery,Controller);
下面做一些分析：
mod.fn.proxy = function(func){ return $.proxy(func,this); };
上面使用代理把func添加到mod原型里面，与下文的this.proxy(this.toggleClass)，一起看，可以知道this.proxy会把toggleClass放到this里面。
mod.fn.load = function(func){ $(this.proxy(func)); };
load这个function把返回来的function委托给jQuery对象
文档加载完后加载控制器
var exports = this; (function($){ var mod = {}; mod.create = function(includes){ var result = function(){ this.init.apply(this,arguments); }; result.fn = result.prototype; result.fn.init = function(){}; result.proxy = function(func){ return $.proxy(func,this); }; result.fn.proxy = result.proxy; result.include = function(obj){ $.extend(this.fn,obj); }; result.extend = function(obj){ $.extend(this,obj); }; if(includes) result.include(includes); return result; }; exports.Controller = mod; //Controller 是一个object，里面的create是一个function })(jQuery); jQuery(function($){ //Controller.create({})，返回的是一个function，这个function的入口是init， //使用init这个function可以把参数都传到内部 var ToggleView = Controller.create({ init:function(view){ this.view = $(view); this.view.mouseover('',this.proxy(this.toggleClass)); }, toggleClass:function(){ console.log('dd'); } }); new ToggleView('#view'); });