這篇文章的目的是通過演示一個簡單的例子來介紹在JS中實例化和定義一個庫的正確方法，以優(yōu)化他人編寫或維護自己的JS庫。

在我們深入之前，我做了兩點假設(shè)：

• 你知道簡單的JavaScript或C語言。
• 你不打算使用jQuery。通常情況下，一個JavaScript庫不需要任何依賴。

首先，我遇到了第一個麻煩，即如何正確的看待一個JavaScript庫。在C/C++中，一個庫是功能的集合，并且通常不需要很完美的結(jié)構(gòu)。
而JavaScript的工作方式有所不同，因此我做了一些研究。最后的結(jié)論是，一個JavaScript庫是一個包含在對象中的獨立的模塊，不會在自己的作用域以外定義函數(shù)來污染全局命名空間。

基于此，我們可以簡單的定義一個庫：

var Library = {name: "Candy",greet: function() {alert("Hello from the " + Library.name + " library.");} }

這個庫就是我們字面意思上所說的對象。調(diào)用greet函數(shù)，我們要用：

Library.greet();

因為greet是Library對象的成員。現(xiàn)在，如果我們期望name變量為Library私有，應(yīng)該怎么做呢？遺憾的是，這種庫的定義方式無法實現(xiàn)這一點。

而且，不僅僅是在其他文件中要通過Library.name來引用name變量，在Library中也要通過引用自己來引用name變量。這種解決方式看起來就很差勁。

解決這個問題的方法是將Library定義為一個函數(shù)，在函數(shù)中定義對象。這種方式允許我們創(chuàng)建并使用私有的變量和方法。如下：

function Library() {var name = "Candy";this.greet = function() {alert("Hello from the " + name + " library.");} }

在這種方式下，Library.name將不會暴露在全局，并且在Library內(nèi)部也能被簡單的引用。greet方法依然是公有的，因為通過關(guān)鍵字this將greet定義為Library的一個成員。

確定將什么暴露給誰，是架構(gòu)的簡單實踐。

但是，現(xiàn)在我們有了新的問題。在如下場景中，用戶已經(jīng)定義了一個Library對象，并且引用了你的庫。

//用戶自己的Library對象 var Library = {book_num: 1123,category: ["science","social"] }//調(diào)用Library庫中的方法 Library.greet();

這時，你的Library定義被覆蓋，用戶還將被告知“引用錯誤”。

我們有一個更好的解決方案：將你的library包裝在一個函數(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);

首先，我們解釋一下包裝整個library的閉包:

(function(window) {//CODE })(window);

它的工作原理是，它包裝了在它其中定義的代碼，因此它擁有自己的命名空間。它也將會自動執(zhí)行，因為末尾添加的(window)。

接著，我們介紹一下使用的use strict。這是一個可選配置，可以在這里了解更多相關(guān)知識。由于我們整個定義是一個閉包，所以只需聲明一次use strict，即可將嚴格模式應(yīng)用于整個library。

然后，我們在define_library()函數(shù)中定義了Library對象，并且在函數(shù)最后返回了該對象。

最后，我們通過typeof判斷當前是否有命名沖突，如果沒有，我們將初始化我們的Library對象。

---

要開始堅持寫文章啦。這是最近看到的一篇國外文章，覺得對自己有點幫助，就翻譯過來了，希望對大家也有所幫助，原文戳這里。

接下來的一篇文章，將封裝一個JS庫，實現(xiàn)購物網(wǎng)站上常見的圖片跟隨鼠標放大的功能。

to be continued. 喜歡就關(guān)注我吧。

總結(jié)

以上是生活随笔為你收集整理的优雅的创建一个JavaScript库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。