`
caibinghong
  • 浏览: 143368 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

YUI3 中的沙箱实现 方式

阅读更多

http://www.planabc.net/2010/04/08/study_sandbox_pattern_in_yui3/

 

简化了一下 YUI3 中的沙箱实现 方式:

 

if (typeof Sandbox === 'undefined' || !Sandbox) {
    Sandbox = function(o) {
        var self = this;

        if (!(self instanceof Sandbox)) { // 允许没有 new 操作符的实例化
            return new Sandbox(o);
        } else {
            self._init();
            self._config(o);

            // 预加载某些指定模块
            /* self._setup(); */

            // 返回实例本身,支持链式模式
            return self;
        }
    };
}

// Sandbox的(类)静态属性
Sandbox.Env = {
    /* sidx: 0 , */
    mods: {}
};

(function() {
    var p, i,
        SLICE         = Array.prototype.slice,
        /* instances     = {}, */
        time          = new Date().getTime(),
        win           = window,
        doc           = document;

    Sandbox.prototype = {

        // 格式化配置参数
        // NOTE:本着简单适用的原则,取消了原先 YUI 中对 loader 的支持
        _config: function(o) {

            var c = this.config, i, j, m, mods;

            o = o || {};

            // mods = c.modules;

            for (i in o) {
                if (i == 'win') {
                    c[i]  = o[i].contentWindow || o[i];
                    c.doc = c[i].document;
                } else {
                    c[i]  = o[i];
                }
            }
        },

        /**
         * 初始化沙箱实例
         * @private
         */
        _init: function() {

            var self  = this,
                G_Env = Sandbox.Env,
                Env   = self.Env;

            if(!Env) {
                self.Env = {
                    mods: {},
                    _used: {},
                    _attached: {},
                    _loaded: {}
                };

                Env = self.Env;

                /* if (G_Env && self !== Sandbox ) {
                    Env._sidx  = ++ G_Env.sidx;
                    Env._guid = ('sandbox_' + Env._sidx + '_' + time).replace(/\./g, '_');
                }

                self.id = Env._guid;
                instances[self.id] = self; */
            }

            self.constructor = Sandbox;

            self.config = {
                win: win || {},
                doc: doc || {}
            };

        },

        // 预留预加载某些指定模块,接口可根据实际需要扩展
        /* _setup: function(o) {}, */

        /**
         * 添加模块
         * @method add
         * @param name {string} 模块名
         * @param fn {Function} 模块对应的函数
         * @param version {string}
         * @param details 可选配置:
         *     requires   -  {array}  在本模块执行之前附加的必须的模块数组
         *     use  - {array} 在本模块执行之后附加的模块数组
         *
         */
        add: function(name, fn, details) {
            Sandbox.Env.mods[name] = {
                name: name,
                fn: fn,
                details: details || {}
            };

            return this; // chain support
        },

        /**
         * 执行与 Sandbox 实例相关联的模块:details.requires--》fn--》details.use
         * @method _attach
         * @param r {array} 模块列表数组
         * @private
         */

        _attach: function(r) {

            var mods = Sandbox.Env.mods,
                self = this,
                attached = self.Env._attached,
                i, l = r.length, name, m, fn, d, req, use;

            for (i = 0; i < l; i = i+1) {

                name = r[i];
                m    = mods[name];

                if (!attached[name] && m) {

                    attached[name] = true;

                    fn  = m.fn;
                    d   = m.details;
                    req = d.requires;
                    use = d.use;

                    if (req) {
                        self._attach(req);
                    }

                    if (fn) {
                        fn(self);
                    }

                    if (use) {
                        self._attach(use);
                    }
                }
            }

        },

        /**
         * 绑定模块至 Sandbox 实例
         * @param modules* {string} 1-n 个模块 (uses arguments array)
         * @param *callback {function} callback function  如果包括,必须是最后一个参数。
         *
         * Sandbox().use('planabc.net')
         * Sandbox().use('planabc.net',function(){})
         * Sandbox().use('planabc.net','planabc.com')
         * Sandbox().use('planabc.net','planabc.com',function(){})
         * Sandbox().use('*'); // use all available modules
         *
         */
        use: function() {

            var self = this,
                a = SLICE.call(arguments, 0),
                mods = Sandbox.Env.mods,
                used = self.Env._used,
                loader,
                firstArg = a[0],
                callback = a[a.length-1],
                k, i, l,
                r = [],
                process = function(name) {

                    // 添加模块至附加的模块列表
                    r.push(name);

                    // 一个模块仅附加一次
                    if (used[name]) {
                        return;
                    }

                    var m = mods[name], req, use, j, jl, t, tl,
                        d = m.details;

                    if (m) {
                        used[name] = true;

                        req = d.requires;
                        use = d.use;
                    }

                    // 附加上 requires 模块
                    if (req) {
                        for (j = 0,jl = req.length ; j < jl; j = j + 1) {
                            process(req[j]);
                        }
                    }

                    // 附加上 use 模块
                    if (use) {
                        for (t = 0, tl = use.length; t < tl; t = t + 1) {
                            process(use[t]);
                        }
                    }

                },

                onComplete;

            if (typeof callback === 'function') {
                a.pop();
            } else {
                callback = null;
            }

            onComplete = function() {
                if (callback) {
                    callback(self);
                }
            };

            // Sandbox().use('*');
            if (firstArg === "*") {
                a = [];
                for (k in mods) {
                    if (mods.hasOwnProperty(k)) {
                        a.push(k);
                    }
                }

                if (callback) {
                    a.push(callback);
                }

                return self.use.apply(self, a);
            }

            l = a.length;

            // 处理所有必须和附加的模块
            for (i = 0; i < l; i = i + 1) {
                process(a[i]);
            }

            self._attach(r);
            onComplete();

            return self; // chain support
        }
    };

})();

测试页面:http://www.planabc.net/lab/yui/sandbox.html

分享到:
评论

相关推荐

    YUI3 中tree的两种实现

    NULL 博文链接:https://ttwang.iteye.com/blog/1741631

    yui3-master.zip

    yui3-master.zip

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...

    YUI3 dialog组件

    基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com

    YUI 入门教程YUI 入门教程YUI 入门教程

    YUI教程YUI 入门教程YUI 入门教程YUI 入门教程

    YUI中文文档CHM

    YAHOO YUI 中文文档 AJAX 详细 比较好用

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    YUI3 完整包

    Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。

    经典的YUI 示例中文文档

    里面包含了YUI的所有实例(element、event等一系列的实例)

    dwr-yui实现分页

    dwr-yui实现分页,dwr-yui实现分页,dwr-yui实现分页

    YUi文档(中文的哦)

    YUI中文文档 详细介绍YUI的使用,真的是中文,真的是中文。

    雅虎 用户接口库YUI

    动画(Animation):在你的页面中通过指定位置,大小,透明度或者页面元素的其他特性来创建一个“电影效果(cinematic effects)”。 这些效果将在你的页面发生变化的时候给用户更好的体验。 连接管理(Connection...

    使用YUI2.8 实现多选 ,支持Ctrl 和Shift

    使用YUI2.8 仿照JQuery UI 的select插件写的一个函数 详情见我的博客http://hi.baidu.com/hjzheng

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用...YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具: YUI Compressor (压缩) 和 YUI Doc (JavaScripts代码的文档引擎)。

    支持中文的 YUI Compressor Ant 任务

    YUI Compressor 任务时出现了中文乱码,请下载此资源,用这里边 dist 目录里边的 YUIAnt-zh_CN.jar 替换掉官方提供的 YUIAnt.jar ,然后在对应的 Ant 任务中,用 encoding="xxx" 指定源文件的字符编码集即可。

    yui3-3.17.2最新版

    yui对于开发者来说是绝对的好用,开发者福利,特献上最新版

    使用YUI2.8 实现多个LI拖拽

    这是对YUI拖拽例子的改编,大家可以去访问的博客 http://hi.baidu.com/hjzheng

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    支持中文的 YUI Compressor Ant 任务驱动 - Shane版

    如果用 Ant 执行 YUI Compressor 任务时出现了中文乱码,请下载此资源,用这里边 dist 目录里边的 YUIAnt-zh_CN.jar 替换掉官方提供的 YUIAnt.jar ,然后在对应的 Ant 任务中,用 encoding="xxx" 指定源文件的字符...

Global site tag (gtag.js) - Google Analytics