`
caibinghong
  • 浏览: 149868 次
  • 性别: 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的两种实现

    在YUI3中,Tree View是一个重要的组件,用于展示层次结构数据,比如文件系统、组织结构等。这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView...

    yui3-master.zip

    YUI3的Node模块是对DOM操作的进一步抽象,它提供了一种链式调用的方式,使DOM操作更为简洁。在“yui3-master.zip”的“node”模块中,可以找到`Y.Node`, `Y.all`等方法,它们使得DOM操作更加符合JavaScript的编程...

    YUI3 dialog组件

    Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,常用于提示信息、确认操作、展示详细内容等场景。 ### 1. Dialog组件的基本结构 Dialog组件由几个关键部分组成: - **容器(Container)**...

    yui3-3.17.2最新版

    在YUI 3中,主要强调了模块化和轻量化设计,它采用了CommonJS规范,允许开发者按需加载所需的功能,降低了页面的加载时间。YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等...

    从YUI2到YUI3看前端的演变 pdf

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

    经典的YUI 示例中文文档

    本文档主要介绍了YUI的核心功能及其在网页开发中的应用。 #### YAHOO工具库提供的方法 ### 1.1. 命名空间管理 - **`znamespace`**:YUI提供了一种简单的方式来管理全局命名空间。例如,在使用YUI时,默认会自动...

    YUI+Ant 实现JS CSS压缩

    标题:“YUI+Ant 实现JS CSS压缩” 在Web开发中,为了提高页面加载速度和优化用户体验,开发者通常会使用代码压缩工具来减少JavaScript(JS)和CSS文件的大小。YUI Compressor是 Yahoo! 推出的一款开源的压缩工具,...

    YUI3.6文档及示例

    1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...

    YUi文档(中文的哦)

    YUI模块作为YUI3中的单一核心模块,它充当了整个框架的基础。所有使用YUI3的页面都需要包含这个核心模块,以便能够动态地加载所需的其他模块及其依赖项。 - **YUI实例**: 每个页面可以共享一个YUI实例,也可以根据...

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    YUI3.7.3 最新版本 带API

    1. **模块系统**:YUI3引入了CommonJS风格的模块系统,允许开发者通过`YUI.use()`方法加载所需模块,实现按需加载,减少页面初始化时的加载量。 2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义...

    YUI中文文档CHM

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

    Yahoo YUI2.7中文API 完整版

    4. **事件处理**:YUI 提供了一套完善的事件系统,可以方便地监听和处理页面中的各种事件,如点击、滚动、键盘输入等。 5. **AJAX 支持**:通过 Connection Manager 提供 AJAX 功能,允许异步与服务器进行通信,...

    《YUI使用文档》汉语版的yui学习材料

    总的来说,YUI提供了一套完整的工具集,涵盖了从基本的DOM操作到复杂的UI构建和事件处理,是JavaScript开发者实现高效、可维护的前端应用的强大武器。这份汉语版的YUI使用文档对于中国开发者来说,无疑是一个宝贵的...

    yui 资源包

    在3.9.0 r2这个版本中,YUI提供了丰富的组件和工具,帮助开发者创建高效、可维护且用户体验优良的Web应用。 一、YUI的核心特性 1. **模块化**:YUI采用AMD(Asynchronous Module Definition)模块加载机制,允许...

    YAHOO YUI3简单入门

    这些方法与jQuery类似,但YUI3的设计更加面向对象,如`Node`和`Selector`模块,它们提供了更加高效和灵活的方式来处理DOM元素。 **事件处理** YUI3的事件系统支持DOM事件绑定、解绑和触发,以及自定义事件。它还...

    YUI3 完整包

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

    YUI3 Cookbook

    - **知识点**:YUI3允许开发者单独加载特定模块,这种方式可以实现按需加载,提高页面性能。 - **应用场景**:适用于大型应用,可以根据用户行为动态加载所需模块,提高用户体验。 4. **加载不同的默认皮肤** - ...

    yui.rar 例子

    在这个例子中,左中右三个模块的划分,正是通过YUI的Container组件和Grids CSS实现的,它们使得页面结构清晰,代码可读性强。 接下来,我们要讨论的是YUI的模块化设计。YUI遵循了“按需加载”的原则,这意味着...

Global site tag (gtag.js) - Google Analytics