1.sandbox沙盒模式
沙盒模式是一种比较常见的模式,YUI就是用这种模式实现的
沙盒模式特点:
1.沙盒模式提供了一个可用于模块运行的环境,并且不会对其他模式和个人沙盒造成任何影响
2.沙盒模式和命名空间模式对比把对单个全局变量的依赖变为对应用程序的全局变量依赖
3.按需加载需要的模块,代码模块性更强
sandbox的简单实现:(ps:sandbox只是一个构造函数)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function Sandbox() { //将传入的参数转化为一个数组 var args = Array.prototype.slice.call(arguments), //截取回调函数存为callback callback = args.pop(), //args代表的是加载模块列表数组(pop会删除数组元素),当args内不是模块字符串的时候,直接返回值 //args合法时,返回的就是加载模块列表数组 modules = (args[0] && typeof args[0] === 'string') ? args : args[0], //计数器 i; // 确保函数被当做构造函数调用(强制使用new) if (!(this instanceof Sandbox)) { return new Sandbox(modules, callback); } //需要向‘this’添加普通属性(添加默认属性,所有沙盒共用) //this指向sandbox实例化的对象 this.a = 1; this.b = 2; // 现在向该核心‘this’对象添加模块 // 不指定模块名称或指定“*”都表示加载所有模块 if (!modules || modules === '*') { modules = []; for (i in Sandbox.modules) { if (Sandbox.modules.hasOwnProperty(i)) { modules.push(i); } } } //初始化需要的模块,传递this为参数 for (i = 0; i < modules.length; i += 1) { Sandbox.modules[modules[i]](this); } //调用回调函数,参数为this,也就是说回调函数指定的形参就是实例化的sandbox对象 callback(this); } //给sandbox添加原型属性 Sandbox.prototype = { name: "xiaosi", version: '1.0', getName: function () { return this.name; } } //设置sandbox的模块,可加载项 Sandbox.modules = {}; //设置dom模块,这个模块在sandbox的实例化对象的时候调用,box是实例化的sandbox对象(调用的时候传入this) Sandbox.modules.dom = function (box) { //设置各自模块的不同的方法和属性 box.getElement = function () {}; box.getStyle = function () {}; box.foo = "bar"; } Sandbox.modules.event = function (box) { box.attachEvent = function () {}; box.dettachEvent = function () {}; } Sandbox.modules.ajax = function (box) { box.makerequest = function () {}; box.getRequest = function () {}; }
当我们需要使用沙盒模式的时候只需要
var xiaosi1= Sandbox('ajax',function(X){ window.X=X; }); console.log( xiaosi1===X); //true
这么执行就好了,‘ajax’代表的是我们需要的模块部分,加载之后我们就能使用ajax模块下的方法,并且是独立的
2.模拟静态成员
共有静态成员:即构造函数的成员,只要给构造函数添加属性就可以了
私有静态成员:通过闭包声明的内部成员可以实现
3.链模式
链模式是用于类似一个句子一样连起来调用函数方法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var obj={ value:1, increment:function(){ this.value+=1; return this; }, add:function(v){ this.value+=v; return this; }, shout:function(){ alert(this.value); } } obj.increment().add(3).shout();
jquery也大量使用这种模式方便使用