javascript - 如何在我的应用程序中组织jQuery

Closed. This question is opinion-based。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。
                        
                        6年前关闭。
                                                                                            
                
        
因此，我到达了需要利用显示模块模式或对象文字模式的地步，或者它们是相同的模式吗？我不知道。我了解显示模块模式使用闭包，但我的知识还不很深。我过去研究过的揭示性模块模式对它有点熟悉。

我目前的情况是我正在使用jqGrid，我想将常见的设置和事件函数合并到一个core.js或global.js文件中，然后每次创建时都重复使用所有这些设置和回调函数（如onSortCol func）一个新的jqGrid。我希望能够添加或编辑jqGrid的默认设置/选项，这使我无法使用global.js文件中的默认设置使用对象文字模式或显示模块模式进行设置。

我在看这篇文章：

http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

很快我想更好地了解这段代码在做什么：

var myFeature = {
    config : {
        wrapper : '#myFeature',
        container : 'div',
        urlBase : 'foo.php?item='
    },

    init : function(config) {
        $.extend(myFeature.config, config);
        $(myFeature.config.wrapper).find('li').
            each(function() {
                myFeature.getContent($(this));
            }).
            click(function() {
                myFeature.showContent($(this));
            });
    },

    buildUrl : function($li) {
        return myFeature.config.urlBase + $li.attr('id');
    },

    getContent : function($li) {
        $li.append(myFeature.config.container);
        var url = myFeature.buildUrl($li);
        $li.find(myFeature.config.container).load(url);
    },

    showContent : function($li) {
        $li.find('div').show();
        myFeature.hideContent($li.siblings());
    },

    hideContent : function($elements) {
        $elements.find('div').hide();
    }
};

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

让我们从init函数开始。首先，配置“成员”是myFeature对象中的一个对象，这种措辞正确吗？其次，init“成员”还是myFeature对象文字中的对象还是由于它是一个函数，因此其概念与myFeature的配置“成员”不同吗？第三，像myFeature对象中一样，可以传递给init函数的config的范围是什么？查看此代码，我希望必须在doc.ready中执行此操作：

 $(document).ready(function() {
    var myF = new myF(); //new keyword not needed but can declared to emulate familiar
    object oriented programming concepts is what I think
    myF.init(myF.config); //I know I don't have to do this and this doesn't even make exact
    sense but just trying to express how my brain is working on this right now
 });

我将从那里开始，看看我得到什么样的答案，并相应地调整我的问题。

更新
因此，config和init是myFeature的属性，可以将init（）传递给可选的config对象，该对象将覆盖传递的config并将其附加到目标myFeature.Config。

下一个问题，在init实现中有$ .extend（myFeature.config，config）。为什么行$ .extend（this.config，config）不是？这是我想使用显示模块模式的地方，因为我可以定义一个名为“ self”的变量，并在myFeature的所有包含成员中都引用它。我不了解init属性如何在对象文字模式中访问函数中的myFeature。看来myFeature是全局范围的，任何人都可以随时访问其所有属性及其本身，我知道这是javascript的本质，但是...

提前致谢！

最佳答案

首先，那些“成员”是属性。


  “对象是属性的集合，并且具有单个原型对象。原型可以为空值。” ECMA 4.3.3 object


接下来，init只是一个分配给myFeature对象属性init的函数。函数也是对象brief demo的核心。


  函数是“对象类型的成员，它是标准内置函数构造函数的实例，可以作为子例程调用。除其命名属性外，函数还包含可执行代码和确定其行为方式的状态”调用时。”


第三，传入的config范围是您是否希望包含任何其他属性。 jQuery的扩展（$.extend(obj1,obj2)）从obj2（一个对象）获取属性，然后将它们放在obj1（也是一个对象，并且在总是myFeature.config的情况下，该对象预先配置）simple demo。