JavaScript的Module模式

最新推荐文章于 2023-10-09 23:00:02 发布

ppxin

最新推荐文章于 2023-10-09 23:00:02 发布

阅读量1k

点赞数

分类专栏： JavaScript笔记 JQuery笔记文章标签：模块模式

JavaScript笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JQuery笔记

7 篇文章 0 订阅

订阅专栏

模块模式是单例模式的一种变体，它是Douglas Crockford创建的。该模式包含三个主要的组件：命名空间，立即执行的函数和函数的返回的对象。该返回对象中包含了共有方法和共有属性。代码如下：

//名称空间是myApp,传入jQuery对象以缩短查找过程
var myApp = function($) {
    //私有变量和方法，仅在该myApp中可用
    var message ="not directly accessible from outside the module";
    function multiplier(x, y) {
        return x*y;
    };
    
    //返回的对象包含了公有属性和公有方法
    return {
        init : function() {
            //初始化app
        },
        prop : "42", //公有属性
        specialNumber : function() {
            //访问私有方法
            var num = multiplier(7, 6);
            return "Our special number is definitely " + num;        
        },
        shareMessage : function(arg) {
            if (arg === "open sesame") {
                return message + ", unless you know the magic world.";
            else {
                throw new Error("You need to know the magic word.");
            }
        },
    };
} (jQuery);

Garber-Irish实现思路：

利用一个简短的工具脚本和<body>元素上的ID和CSS类、或者<body>元素上的HTML5的data属性，提供了一种根据网站的区块或页面类型，有选择性地触发init()事件的方法。

（1）最初的方案

myApp = {
    common : {
        init : function() {
            //当需要相关小节或特性时，在$(document).ready()方法中调用
        },
        finalize : function() {
            //写入需要尽快执行，但又不会影响到起始页面加载的代码
        }
    },
    dashboard : {
        init : function() {
            //dashboard初始化
        },
        settings : function() {
            //dashboard设置
        },
        render : function() {
            //呈现
        },
    },
};

工具代码：

Util = {

    fire : function(func, funcname, args) {
        var namespace = myApp; //指定对象字面量的名称空间
        funcname = (funcname === undefined) ? 'init' :funcname;
        if (func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function') {
            namespace[func][funcname](args);
        }
    },

    loadEvents : function() {
        var bodyId = document.body.id;
        //首先调用common
        Util.fire('common'); //第二个参数默认为init
        
        //对所有其它类执行调用
        $.each(document.body.className.split(/\s+), function(i, classnm) {
            Util.fire(classnm);
            Util.fire(classnm, bodyId);
        });
        
        Util.fire('common', 'finalize');
    }
};

//在这里触发所有执行
$(document).ready(Util.loadEvents);

（2）使用HTML5 data属性的方案

唯一区别在于，使用了HTML5的data属性来触发事件的执行。

<body data-controller="dashboard" data-action="render">

摘自：jQuery高级编程清华大学出版社.pdf

第 10 章编写高效的jQuery代码

10.2.2 Module模式

ppxin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的Module模式

模块模式是单例模式的一种变体，它是Douglas Crockford创建的。该模式包含三个主要的组件：命名空间，立即执行的函数和函数的返回的对象。该返回对象中包含了共有方法和共有属性。代码如下：//名称空间是myApp,传入jQuery对象以缩短查找过程var myApp = function($) { //私有变量和方法，仅在该myApp中可用 var message =...
复制链接

扫一扫