标签: module-pattern

我一直在编写一个应用程序,我已经取得了很多成功,将不同的功能分解为所谓的"模块"模式,在这种模式中,你有一个自行执行的单例,包含公共和私有成员.

var WidgetModule = (function($, options) {

    // Private variable
    var someVar;

    // Private functions
    function somePrivateFunction() {

    }

    // Define the public members
    var self = {
        init: function() {

        },
        someFunction: function() {

        }
    };

    return self;

})(jQuery, options);

我现在遇到一个案例,我有几个模块,我希望能够创建多个实例.

我知道这个模式是基于单例,但我想知道是否有一种无痛的方法来修改这个模式以支持创建它们的实例？

我正在阅读有关JavaScript模块模式的内容.我的问题是我如何使用它制作子模块,即如何从中继承子模块,比如我有这个类

    var MODULE = (function () { 
    my = function(){
            this.params = ""
         }, 
    privateVariable = 1; 

    my.prototype.moduleMethod = function () {
        console.log("mod");
    }; 

    return my; 
}());

如何使用从父级继承的属性创建子类？我怎样才能对模块模式做同样的事情？

我可以使用下面的代码在模块模式中定义私有成员字段

    var myClass = function(){
       var private_field1,private_field_2;
       var private_func1 = function(){
            //.......
       } 
       //.........
       var myObj = {
         global_field1:2,
         global_field2:"something",
         global_func: function(){//......} 
       }
       return myObj;
    };
   var obj = myClass();

这种方法工作得很好，但这个问题的问题在于，每当我创建一个新对象时，所有函数的副本都会被创建并加载到内存中（不像 java 中同一类的所有对象共享相同的函数内存）

我尝试使用以下其他方法：

 var myClass = (function(){
           var private_field1,private_field_2;//private static fields
           var private_func1 = function(){
                //.......
           } 
           //.........
           var Constr = function(){
             //do something
           }
           Constr.prototype = {
             //................
             global_func: function(){//......} 
           }
           return Constr;
    }());
var obj1 = new myClass();
var obj2 = new myClass();

但是这种方法的问题是显然 obj1,obj2 共享私有字段的相同副本（因此它们实际上是静态的）。那么有没有办法在模块模式中定义私有字段，同时为对象使用相同的函数副本？

对于上面提到的第一种方法的继承，我首先需要在子类中创建一个对象，然后返回该对象。 …

• 通常,在开始之前,您不会开始查询DOM $(document).ready().
• 在下面的两个选项中,Widget被声明(并且元素被查询)在$(document).ready().
• 这个可以吗？我可以初始化jQuery元素(只要我不操作任何东西),就绪处理程序的OUTSIDE？
• 将整个Widget定义放入其中会更好$(document).ready()吗？
• 我应该等到Widget.init()查询元素吗？
• 注意:我是JS设计模式的新手,所以请注意我是否遗漏了一些东西

选项1

Widget = {
    ele : $('#ele'),
    init : function(){ ... }
};

$(document).ready(function(){
    Widget.init();
});

选项2

Widget = (function(){
    var privateEle = $('#privateEle');
    return {
        publicEle: $('#publicEle'),
        init: function(){ ... }
    };
}());

$(document).ready(function(){
    Widget.init();
});

我刚刚看到有人传入函数的这个问题window.Module = window.Module || {}.

例如:

(function(module){
    // do something with module
})(window.Module = window.Module || {});

我理解如果window.Module未定义(或者就此而言是假的)那么{}就会被传入,但是设置中的重点是什么window.Module呢？

对于发布答案的人:

我把代码读作:

if(!(window.Module = window.Module)) {
     // pass {} into function
}
else {
     // pass window.Module = window.Module into function 
     // (which makes NO sense to me)
}

当我运行我的应用程序时,我得到:"未捕获的TypeError:无法读取未定义的属性'init'"文档reasdy函数中的警报运行,所以我知道jQuery在那时被加载.但我不知道为什么任务未定义.

这是在MVC5应用程序中,并运行jQuery 1.10.2

请帮助,jsFiddle工作正常,JsHint没有显示错误.

    var Task = (function () {

    var initialize = function () {
        console.log($);
        bindEvents();
    };
    var postFilter = function () {
        console.log("clicked");
        var postData = {
            UserID: $('#user_select').val,
            TaskTypeID: $('#taskTypeSelect').val,
            TaskStatusID: $('#status_select').val,
            PriorityID: $('#priority_select').val
        };

        $.ajax({
            url: "/Tasks/_AllTaskView",
            data: postData,
            success: function (response) {
                $('#results').html(response);
            }

        });
    };

    var bindEvents = function () {
        $('#submit_filter').on('click', postFilter);
    };

    return
    {
        init : initialize

    };

})();

$(document).ready(function () {
    alert()
    Task.init();
});

我试图了解（显示）模块模式中public属性的工作方式。卡尔·丹利（Carl Danley）提出的“ 显露模块模式 ”的优点是：

var a = function() {
    var _private = null;
    var _public = null;
    function init() {
        _private = 'private';
        _public = 'public';
    }
    function getPrivate() {
        return _private;
    }
    return {
        _public : _public,
        init : init,
        getPrivate : getPrivate,
    }
}();

a.init();
console.log( a._public ); // null
console.log( a.getPrivate() ); // "private"