摘要:代碼之間通過,完成消息傳遞。封裝代碼組織的第一步就是把代碼分成不同的部分。使用對象進行封裝優(yōu)點解決消除匿名函數(shù),以配置參數(shù)為中心,更方便去重構(gòu)和重用。消除了匿名函數(shù)的使用。在上面的例子中,我們自我執(zhí)行一個匿名函數(shù),返回一個對象。
核心原則:
1、代碼必須分成不同的功能模塊——服務(wù)和模塊,避免把所有的代碼都放在一個$( document ).ready()里。
2、不要重復(fù)代碼。識別不同功能模塊里面的相同代碼并提取出來用繼承的方法來避免重復(fù)。
3、盡管jquery是以DOM為中心,但javascript不是全部關(guān)于DOM的,不是所有的功能塊需要或應(yīng)該有一個DOM表示。
4、松耦合。代碼之間通過 custom event,pub/sub完成消息傳遞。
代碼組織的第一步就是把代碼分成不同的部分。
使用對象進行封裝優(yōu)點:解決消除匿名函數(shù),以配置參數(shù)為中心,更方便去重構(gòu)和重用。比如對事件處理函數(shù),定義為_開頭的函數(shù),隱含其為工具函數(shù)或私有函數(shù),一個簡單的實例:
// 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" }
上面例子就是通過賦值給一個對象來進行封裝的,這個對象有幾個屬性和方法,所有的屬性和方法都是公共的。
如何將對象應(yīng)用在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(); }); }); });針對上面的代碼,起碼可以優(yōu)化幾點:
將和功能無關(guān)的部分獨立,可以把url作為配置參數(shù),最后鏈?zhǔn)讲僮饕部梢詢?yōu)化。// 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、我們把功能分成了很小的方法。以后如果我們想改變內(nèi)容的展示,它是明確的,改變它。在原代碼中,是很難做到的。
2、消除了匿名函數(shù)的使用。
3、將配置選項從代碼的主體中移動,并將它們放在中心位置。
4、消除了外鏈的約束,使得代碼更容易重構(gòu)。模塊模式克服了對象封裝的一些局限性,為變量和函數(shù)提供了隱私,同時公開了一個公共接口。
// 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();在上面的例子中,我們自我執(zhí)行一個匿名函數(shù),返回一個對象。在函數(shù)的內(nèi)部,我們定義了一些變量。因為變量被定義在函數(shù)的內(nèi)部,除非我們把它們放在返回對象中,否則我們就無法訪問它們。這意味著函數(shù)以外的任何代碼無法訪問的變量privateThing或變量changePrivateThing。然而,sayprivatething可以訪問并獲得privatething和changeprivatething,因為都是在相同的范圍內(nèi)定義為sayprivatething。
這種模式是強大的,因為你可以從變量名稱中收集,它可以給你私人的變量和函數(shù),同時暴露一個有限的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
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86070.html
摘要:所以通常情況下當(dāng)你的庫需要依賴到例如,這樣的通用模塊時,我們可以不將它打包進,而是在的配置中聲明這就是在告訴請不要將這個模塊注入編譯后的文件里,對于我源代碼里出現(xiàn)的任何這個模塊的語句,請將它保留。 這篇文章討論Webpack打包library時經(jīng)常需要用到的一個選項external,它用于避免將一些很通用的模塊打包進你發(fā)布的library里,而是選擇把它們聲明成external的模塊,...
摘要:可重用的代碼變得更可靠,單元測試的數(shù)量增加了倍也是一個因素。模塊不應(yīng)依賴全局變量為了進一步加強我們的代碼庫,我們已經(jīng)幾乎完全消滅了全局變量除了由提供的全局變量,如和。 隨著JavaScript項目的成長,如果你不小心處理的話,他們往往會變得難以管理。我們發(fā)現(xiàn)自己常常陷入的一些問題: 當(dāng)在創(chuàng)建新的頁面時發(fā)現(xiàn),很難重用或測試之前寫的代碼。 當(dāng)我們更深處地研究這些問題,我們發(fā)現(xiàn)根本原因是無效...
摘要:本教程可能不是最精品的,但一定是最細(xì)致的。插件開發(fā)下面我們就來看第二種方式的插件開發(fā)。然后我們的插件代碼在這個方法里面展開。 要說jQuery 最成功的地方,我認(rèn)為是它的可擴展性吸引了眾多開發(fā)者為其開發(fā)插件,從而建立起了一個生態(tài)系統(tǒng)。這好比大公司們爭相做平臺一樣,得平臺者得天下。蘋果,微軟,谷歌等巨頭,都有各自的平臺及生態(tài)圈。 學(xué)會使用jQuery并不難,因為它簡單易學(xué),并且相信你接觸...
摘要:它的關(guān)鍵能力,是模塊及依賴管理。其次,保持局部變量風(fēng)格。我們很習(xí)慣通過和這樣的全局變量來訪問這樣的庫,但如果使用,它們都應(yīng)只作為局部變量這里的就只存在于這個文件的代碼范圍內(nèi)獨立的作用域。 引言 1. manually 以前,我新開一個網(wǎng)頁項目,然后想到要用jQuery,我會打開瀏覽器,然后找到j(luò)Query的官方網(wǎng)站,點擊那個醒目的Download jQuery按鈕,下載到.js文件,然...
摘要:點擊加減號按鈕可以顯示與隱藏當(dāng)前節(jié)點的子節(jié)點。源碼解析插件的寫法這里的可以取到調(diào)用時傳的參數(shù)最后附上地址歡迎 jquery插件 說明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果圖 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...
閱讀 2518·2021-09-24 10:29
閱讀 3799·2021-09-22 15:46
閱讀 2571·2021-09-04 16:41
閱讀 2977·2019-08-30 15:53
閱讀 1258·2019-08-30 14:24
閱讀 3052·2019-08-30 13:19
閱讀 2170·2019-08-29 14:17
閱讀 3520·2019-08-29 12:55