摘要:通常情況下,一個(gè)庫(kù)不需要任何依賴。在中,一個(gè)庫(kù)是功能的集合,并且通常不需要很完美的結(jié)構(gòu)。最后的結(jié)論是,一個(gè)庫(kù)是一個(gè)包含在對(duì)象中的獨(dú)立的模塊,不會(huì)在自己的作用域以外定義函數(shù)來(lái)污染全局命名空間。這種方式允許我們創(chuàng)建并使用私有的變量和方法。
這篇文章的目的是通過(guò)演示一個(gè)簡(jiǎn)單的例子來(lái)介紹在JS中實(shí)例化和定義一個(gè)庫(kù)的正確方法,以優(yōu)化他人編寫或維護(hù)自己的JS庫(kù)。
在我們深入之前,我做了兩點(diǎn)假設(shè):
你知道簡(jiǎn)單的JavaScript或C語(yǔ)言。
你不打算使用jQuery。通常情況下,一個(gè)JavaScript庫(kù)不需要任何依賴。
首先,我遇到了第一個(gè)麻煩,即如何正確的看待一個(gè)JavaScript庫(kù)。在C/C++中,一個(gè)庫(kù)是功能的集合,并且通常不需要很完美的結(jié)構(gòu)。
而JavaScript的工作方式有所不同,因此我做了一些研究。最后的結(jié)論是,一個(gè)JavaScript庫(kù)是一個(gè)包含在對(duì)象中的獨(dú)立的模塊,不會(huì)在自己的作用域以外定義函數(shù)來(lái)污染全局命名空間。
基于此,我們可以簡(jiǎn)單的定義一個(gè)庫(kù):
var Library = { name: "Candy", greet: function() { alert("Hello from the " + Library.name + " library."); } }
這個(gè)庫(kù)就是我們字面意思上所說(shuō)的對(duì)象。調(diào)用greet函數(shù),我們要用:
Library.greet();
因?yàn)?b>greet是Library對(duì)象的成員?,F(xiàn)在,如果我們期望name變量為Library私有,應(yīng)該怎么做呢?遺憾的是,這種庫(kù)的定義方式無(wú)法實(shí)現(xiàn)這一點(diǎn)。
而且,不僅僅是在其他文件中要通過(guò)Library.name來(lái)引用name變量,在Library中也要通過(guò)引用自己來(lái)引用name變量。這種解決方式看起來(lái)就很差勁。
解決這個(gè)問(wèn)題的方法是將Library定義為一個(gè)函數(shù),在函數(shù)中定義對(duì)象。這種方式允許我們創(chuàng)建并使用私有的變量和方法。如下:
function Library() { var name = "Candy"; this.greet = function() { alert("Hello from the " + name + " library."); } }
在這種方式下,Library.name將不會(huì)暴露在全局,并且在Library內(nèi)部也能被簡(jiǎn)單的引用。greet方法依然是公有的,因?yàn)橥ㄟ^(guò)關(guān)鍵字this將greet定義為Library的一個(gè)成員。
確定將什么暴露給誰(shuí),是架構(gòu)的簡(jiǎn)單實(shí)踐。
但是,現(xiàn)在我們有了新的問(wèn)題。在如下場(chǎng)景中,用戶已經(jīng)定義了一個(gè)Library對(duì)象,并且引用了你的庫(kù)。
//用戶自己的Library對(duì)象 var Library = { book_num: 1123, category: [ "science", "social" ] } //調(diào)用Library庫(kù)中的方法 Library.greet();
這時(shí),你的Library定義被覆蓋,用戶還將被告知“引用錯(cuò)誤”。
我們有一個(gè)更好的解決方案:將你的library包裝在一個(gè)函數(shù)中,這個(gè)函數(shù)將在不存在命名沖突時(shí)被調(diào)用。如下:
(function(window) { "use strict"; function define_library() { var Library = {}; var name = "Candy"; Library.greet = function() { alert("Hello from the " + name + " library."); } return Library; } if (typeof(Library) === "undefined") { window.library = define_library(); } else { console.log("Library is already defined."); } })(window);
首先,我們解釋一下包裝整個(gè)library的閉包:
(function(window) { //CODE })(window);
它的工作原理是,它包裝了在它其中定義的代碼,因此它擁有自己的命名空間。它也將會(huì)自動(dòng)執(zhí)行,因?yàn)槟┪蔡砑拥?b>(window)。
接著,我們介紹一下使用的use strict。這是一個(gè)可選配置,可以在這里了解更多相關(guān)知識(shí)。由于我們整個(gè)定義是一個(gè)閉包,所以只需聲明一次use strict,即可將嚴(yán)格模式應(yīng)用于整個(gè)library。
然后,我們?cè)?b>define_library()函數(shù)中定義了Library對(duì)象,并且在函數(shù)最后返回了該對(duì)象。
最后,我們通過(guò)typeof判斷當(dāng)前是否有命名沖突,如果沒(méi)有,我們將初始化我們的Library對(duì)象。
要開(kāi)始堅(jiān)持寫文章啦。這是最近看到的一篇國(guó)外文章,覺(jué)得對(duì)自己有點(diǎn)幫助,就翻譯過(guò)來(lái)了,希望對(duì)大家也有所幫助,原文戳這里。
接下來(lái)的一篇文章,將封裝一個(gè)JS庫(kù),實(shí)現(xiàn)購(gòu)物網(wǎng)站上常見(jiàn)的圖片跟隨鼠標(biāo)放大的功能。
to be continued. 喜歡就關(guān)注我吧。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/84737.html
摘要:通常情況下,一個(gè)庫(kù)不需要任何依賴。在中,一個(gè)庫(kù)是功能的集合,并且通常不需要很完美的結(jié)構(gòu)。最后的結(jié)論是,一個(gè)庫(kù)是一個(gè)包含在對(duì)象中的獨(dú)立的模塊,不會(huì)在自己的作用域以外定義函數(shù)來(lái)污染全局命名空間。這種方式允許我們創(chuàng)建并使用私有的變量和方法。 這篇文章的目的是通過(guò)演示一個(gè)簡(jiǎn)單的例子來(lái)介紹在JS中實(shí)例化和定義一個(gè)庫(kù)的正確方法,以優(yōu)化他人編寫或維護(hù)自己的JS庫(kù)。 在我們深入之前,我做了兩點(diǎn)假設(shè): ...
摘要:數(shù)據(jù)可視化庫(kù)超過(guò)的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫(kù)。是一組組件,用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式,可以利用組件來(lái)支持實(shí)際的數(shù)據(jù)可視化。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你! React Native 組件庫(kù) 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...
摘要:轉(zhuǎn)載來(lái)源包管理器管理著庫(kù),并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想,使開(kāi)發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來(lái)源:https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù),并提供讀取和打包它們的工具。?npm – npm 是 javasc...
摘要:轉(zhuǎn)載來(lái)源包管理器管理著庫(kù),并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想,使開(kāi)發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來(lái)源:https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù),并提供讀取和打包它們的工具。?npm – npm 是 javasc...
閱讀 1631·2021-10-27 14:13
閱讀 1868·2021-10-11 10:59
閱讀 3367·2021-09-24 10:26
閱讀 1925·2019-08-30 12:48
閱讀 3041·2019-08-30 12:46
閱讀 2033·2019-08-30 11:16
閱讀 1414·2019-08-30 10:48
閱讀 2740·2019-08-29 16:54