jQuery代码组织

摘要：代码之间通过，完成消息传递。封装代码组织的第一步就是把代码分成不同的部分。使用对象进行封装优点解决消除匿名函数，以配置参数为中心，更方便去重构和重用。消除了匿名函数的使用。在上面的例子中，我们自我执行一个匿名函数，返回一个对象。

1、代码必须分成不同的功能模块——服务和模块，避免把所有的代码都放在一个$( document ).ready()里。
2、不要重复代码。识别不同功能模块里面的相同代码并提取出来用继承的方法来避免重复。
3、尽管jquery是以DOM为中心，但javascript不是全部关于DOM的，不是所有的功能块需要或应该有一个DOM表示。
4、松耦合。代码之间通过 custom event，pub/sub完成消息传递。

代码组织的第一步就是把代码分成不同的部分。

优点：解决消除匿名函数，以配置参数为中心，更方便去重构和重用。比如对事件处理函数，定义为_开头的函数，隐含其为工具函数或私有函数，一个简单的实例：

// An object literal
var myFeature = {
    myProperty: "hello",
 
    myMethod: function() {
        console.log( myFeature.myProperty );
    },
 
    init: function( settings ) {
        myFeature.settings = settings;
    },
 
    readSettings: function() {
        console.log( myFeature.settings );
    }
};
 
myFeature.myProperty === "hello"; // true
 
myFeature.myMethod(); // "hello"
 
myFeature.init({
    foo: "bar"
});
 
myFeature.readSettings(); // { foo: "bar" }

上面例子就是通过赋值给一个对象来进行封装的，这个对象有几个属性和方法，所有的属性和方法都是公共的。
如何将对象应用在Jquery编写的程序中，一个典型的Jquery程序如下：

// Clicking on a list item loads some content using the
// list item"s ID, and hides content in sibling list items
$( document ).ready(function() {
    $( "#myFeature li" ).append( "
" ).click(function() {
        var item = $( this );
        var div = item.find( "div" );
        div.load( "foo.php?item=" + item.attr( "id" ), function() {
            div.show();
            item.siblings().find( "div" ).hide();
        });
    });
});

针对上面的代码，起码可以优化几点：
将和功能无关的部分独立，可以把url作为配置参数，最后链式操作也可以优化。

// Using an object literal for a jQuery feature
var myFeature = {
    init: function( settings ) {
        myFeature.config = {
            items: $( "#myFeature li" ),
            container: $( "
" ),
            urlBase: "/foo.php?item="
        };
 
        // Allow overriding the default config
        $.extend( myFeature.config, settings );
 
        myFeature.setup();
    },
 
    setup: function() {
        myFeature.config.items
            .each( myFeature.createContainer )
            .click( myFeature.showItem );
    },
 
    createContainer: function() {
        var item = $( this );
        var container = myFeature.config.container
            .clone()
            .appendTo( item );
        item.data( "container", container );
    },
 
    buildUrl: function() {
        return myFeature.config.urlBase + myFeature.currentItem.attr( "id" );
    },
 
    showItem: function() {
        myFeature.currentItem = $( this );
        myFeature.getContent( myFeature.showContent );
    },
 
    getContent: function( callback ) {
        var url = myFeature.buildUrl();
        myFeature.currentItem.data( "container" ).load( url, callback );
    },
 
    showContent: function() {
        myFeature.currentItem.data( "container" ).show();
        myFeature.hideContent();
    },
 
    hideContent: function() {
        myFeature.currentItem.siblings().each(function() {
            $( this ).data( "container" ).hide();
        });
    }
};
 
$( document ).ready( myFeature.init );

改完之后，可以看到：
1、我们把功能分成了很小的方法。以后如果我们想改变内容的展示，它是明确的，改变它。在原代码中，是很难做到的。
2、消除了匿名函数的使用。
3、将配置选项从代码的主体中移动，并将它们放在中心位置。
4、消除了外链的约束，使得代码更容易重构。

模块模式克服了对象封装的一些局限性，为变量和函数提供了隐私，同时公开了一个公共接口。

// The module pattern
var feature = (function() {
 
    // Private variables and functions
    var privateThing = "secret";
    var publicThing = "not secret";
 
    var changePrivateThing = function() {
        privateThing = "super secret";
    };
 
    var sayPrivateThing = function() {
        console.log( privateThing );
        changePrivateThing();
    };
 
    // Public API
    return {
        publicThing: publicThing,
        sayPrivateThing: sayPrivateThing
    };
})();
 
feature.publicThing; // "not secret"
 
// Logs "secret" and changes the value of privateThing
feature.sayPrivateThing();

在上面的例子中，我们自我执行一个匿名函数，返回一个对象。在函数的内部，我们定义了一些变量。因为变量被定义在函数的内部，除非我们把它们放在返回对象中，否则我们就无法访问它们。这意味着函数以外的任何代码无法访问的变量privateThing或变量changePrivateThing。然而，sayprivatething可以访问并获得privatething和changeprivatething，因为都是在相同的范围内定义为sayprivatething。
这种模式是强大的，因为你可以从变量名称中收集，它可以给你私人的变量和函数，同时暴露一个有限的API组成的返回的对象的属性和方法。
下面是一个修订版的前面的例子，展示了如何我们可以使用模块的格局：

// Using the module pattern for a jQuery feature
$( document ).ready(function() {
    var feature = (function() {
        var items = $( "#myFeature li" );
        var container = $( "
" );
        var currentItem = null;
        var urlBase = "/foo.php?item=";
 
        var createContainer = function() {
            var item = $( this );
            var _container = container.clone().appendTo( item );
            item.data( "container", _container );
        };
 
        var buildUrl = function() {
            return urlBase + currentItem.attr( "id" );
        };
 
        var showItem = function() {
            currentItem = $( this );
            getContent( showContent );
        };
 
        var showItemByIndex = function( idx ) {
            $.proxy( showItem, items.get( idx ) );
        };
 
        var getContent = function( callback ) {
            currentItem.data( "container" ).load( buildUrl(), callback );
        };
 
        var showContent = function() {
            currentItem.data( "container" ).show();
            hideContent();
        };
 
        var hideContent = function() {
            currentItem.siblings().each(function() {
                $( this ).data( "container" ).hide();
            });
        };
 
        items.each( createContainer ).click( showItem );
 
        return {
            showItemByIndex: showItemByIndex
        };
    })();
 
    feature.showItemByIndex( 0 );
});

原文：Code Organization Concepts