核心原则：

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

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

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

[代码]js代码：// 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" }

[代码]js代码：// 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(); }); }); });

[代码]js代码：// 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、消除了外链的约束，使得代码更容易重构。

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

[代码]js代码：// 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();

[代码]js代码：// 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 ); });