YUI3的沙箱机制

Question

YUI2
在YUI2.x里，每一个模块功能的引入都会直接添加在全局的YAHOO里，例如dom.js里：

1. var Y = YAHOO.util;
2. Y.Dom = {...}

复制代码这样在整个页面范围内，YAHOO.util里就多了一个功能Dom。

YUI3-add()
在YUI3里，每一个模块引入时并没有把功能直接添加到全局的YUI里，看看YUI3里的dom.js：

1. YUI.add('dom-base', function(Y) {
2.     //在这里添加dom方法
3.     Y.DOM = {
4.         ...
5.     }
6. ...
7. }, '3.0.0' );

复制代码再看看yui.js里add的源码：

1. add: function(name, fn, version, details) {
3.     YUI.Env.mods[name] = {
4.         name: name,
5.         fn: fn,
6.         version: version,
7.         details: details || {}
8.     };
10.     return this; // chain support
11. }

复制代码所以YUI3里引入每个模块时只是把这个模块的内容储存在YUI.Evn.mods里。

YUI3-use()
需要使用某个模块时，在创建YUI实例以后，用use取出来执行模块里的程序，为这个YUI实例添加相应的方法：

1. YUI().use('dom-base', function(Y) {
2.     //这里可以用到模块dom-base里对YUI添加的方法Y.DOM
3.     alert(Y.DOM) //[object object]
4. })

复制代码而在同一个页面里，YUI实例里如果没有指明use(’dom-base’)，就没有Y.DOM这个方法

1. YUI().use('', function(Y) {
2.     alert(Y.DOM) //undefined
3. })

复制代码沙箱
这里YUI().use(”,function(Y){…})就是一个安全沙箱，可以确保这里面的Y是纯天然无污染的，Y实例里有什么功能完全取决于use里传进的模块名称，function(Y){}里面的程序跟外界是隔离的，在里面创建的变量（除了全局变量）以及对YUI的添加修改都不会影响到同个页面上其他人写的程序。

但是这个纯天然无污染是有点代价的，就是每次都要新建一个YUI实例，消耗内存，但如果不怕Y被污染，可以不每次都创建实例：

1. var Y = YUI();
2. Y.use('dom-base', function(Y) {
3.     //可以同时使用dom-base和oop模块里添加的方法
4. });
5. Y.use('oop', function(Y) {
6.     //可以同时使用dom-base和oop模块里添加的方法
7. });

复制代码add()和use()配合一些参数(例如require)和YUI Loader就成了YUI3模块化编程的基础。

最简化的YUI沙箱
去除了YUI Loader以及require等参数

1. if (typeof YUI === 'undefined' || !YUI) {
2.     YUI = function() {
3.         var Y = this;
5.         if (!(Y instanceof YUI)) {
6.             return new YUI();
7.         } else {
8.             Y._init();
9.             return Y;
10.         }
11.     };
12. }
13. //保存mod列表的静态属性
14. YUI.Env = {
15.     mods: {}
16. };
17. (function() {
18.     var SLICE = Array.prototype.slice;
19.     YUI.prototype = {
20.         _init: function() {
21.             var Y  = this,
22.                 G_Env = YUI.Env,
23.                 Env   = Y.Env;
24.             if(!Env) {
25.                 Y.Env = {
26.                     mods: {},
27.                     _used: {},
28.                     _attached: {}
29.                 };
30.                 Env = Y.Env;
31.             }
32.             Y.constructor = YUI;
34.         },
35.         add: function(name, fn, details) {
36.             YUI.Env.mods[name] = {
37.                 name: name,
38.                 fn: fn,
39.                 details: details || {}
40.             };
41.             return this; // chain support
42.         },
43.         _attach: function(r) {
45.             var mods = YUI.Env.mods,
46.                 Y = this,
47.                 attached = Y.Env._attached,
48.                 i, l = r.length, name, m, fn, d;
50.             for (i = 0; i < l; i = i+1) {
51.                 name = r[i];
52.                 m    = mods[name];
53.                 if (!attached[name] && m) {
54.                     attached[name] = true;
55.                     fn  = m.fn;
56.                     d   = m.details;
57.                     if (fn) {
58.                         fn(Y);
59.                     }
60.                 }
61.             }
63.         },
64.         use: function() {
66.             var Y = this,
67.                 a = SLICE.call(arguments, 0),
68.                 mods = YUI.Env.mods,
69.                 used = Y.Env._used,
70.                 callback = a[a.length-1],
71.                 i, l,
72.                 r = [],
73.                 process = function(name) {
74.                     // 添加模块至附加的模块列表
75.                     r.push(name);
76.                     // 一个模块仅附加一次
77.                     if (used[name]) {
78.                         return;
79.                     }
80.                     var m = mods[name];
81.                     if (m) {
82.                         used[name] = true;
83.                     }
84.                 },
85.                 onComplete;
87.             if (typeof callback === 'function') {
88.                 a.pop();
89.             } else {
90.                 callback = null;
91.             }
92.                         l = a.length;
93.                         for (i = 0; i < l; i = i + 1) {
94.                 process(a[i]);
95.             }
96.             Y._attach(r);
97.                         if (callback) {
98.                                 callback(Y);
99.                         }
100.             return Y; // chain support
101.         }
102.     };
103. })();
104. YUI().add('test',function(){document.write("<p>test module add() excute</p>")});
105. YUI().use('test',function(){document.write("<p>test module has executed completely.</p>")});

复制代码