造輪子和用輪子：快速入門JavaScript模塊化

harriszh 發(fā)布于2019-08-19 17:52 / 3095人閱讀

摘要：此時使用一種叫做立即執(zhí)行函數(shù)的辦法，可以避免暴露私有成員。解決方法就是所謂寬放大模式與之前唯一的不同就是參數(shù)可以為空對象。受篇幅限制，本篇入門到此結束，我會在下一篇討論流行的模塊化規(guī)范。

前言

都說“不重復造輪子”，就像iPhone——它除了打電話還可以播放音樂——但是工程師不用從零開始做一個音樂播放功能，也許只要在iPhone的系統(tǒng)中整合一個ipod。

前端開發(fā)亦是如此，最理想化的開發(fā)狀態(tài)就是，工程師只寫核心業(yè)務代碼，其他通用的功能和組件都可以無縫加載別人寫好的代碼，就像很多那樣。

可是實際情況是，有個糟糕的 iPhone 工程師，他搞混了 iPhone 和 ipod 的系統(tǒng)，甚至把 iPhone 的 Home 鍵和 iPod 的音量鍵焊在同一個。

還有一些糟糕 JavaScript 開發(fā)者，一不小心聲明了全局變量，混亂了“命名空間”，都讓協(xié)作開發(fā)變得不那么友好，抑或他開發(fā)了一個通用模塊，用戶們卻發(fā)現(xiàn)載入了他的代碼之后，用戶自己的代碼被他搞得一團糟。

原始人寫法

比如下面這段代碼：

var mylove = "coding";

function getLove() {
  return mylove;
}

function sayLove(thing) {
  console.log(thing);
}

console.log(getLove());//>>> coding
sayLove("girl");//>>> girl

在 window 對象下聲明了一個變量mylove，然后使用getLove()函數(shù)去獲取這個變量，使用setLove()修改這個變量。
恩，功能是實現(xiàn)了。只是這樣做之后，說不定什么時候你由于粗心又在某個地方聲明了一次mylove，而你的粗心同事也不知道會在什么地方寫了一個同名函數(shù)——也許有3個參數(shù)的setLove()函數(shù)。

對象封裝寫法

怎么辦呢？你獲取想到了，把這些變量和函數(shù)都寫在一個對象里：

var loveThing = {
  mylove : "coding",
  getLove :function() {
    return this.mylove;
  },
  sayLove : function(thing) {
    console.log(thing);
  }
}

console.log(loveThing.getLove());//>>> coding
loveThing.sayLove("girl");//>>> girl

這種寫法已經(jīng)有點模塊的樣子了，一下就能看出這幾個函數(shù)和變量之間的聯(lián)系。缺點在于所有變量都必須聲明為公有，所以都要加this指示作用域以引用這些變量。更危險的是，在對象之外也能輕松更改里面的參數(shù)：

loveThing.mylove = "sleeping";
console.log(loveThing.getLove());//>>> sleeping

立即執(zhí)行函數(shù)

我向來不憚以最壞的惡意揣測程序員，你永遠想不到你的 partner 會不會真的在其他地方修改了你的參數(shù)，也不知道自己是否會在不經(jīng)意間修改了他的。我們必須在他下手之前——讓自己的模塊先執(zhí)行掉，不給對方可趁之機。此時使用一種叫做立即執(zhí)行函數(shù)的辦法，可以避免暴露私有成員。

var loveThing = (function(){
  var my = {};
  var love = "coding";
  my.getLove = function() {
    return love;
  }
  my.sayLove = function(thing) {
    console.log(thing);
  }
  return my;
})();

console.log(loveThing.getLove());//>>> coding
loveThing.sayLove("reading");//>>> reading

我們試著獲取里面的變量：

console.log(loveThing.love);//>>> undefined

果然，外部根本看不見里面的零件，只能使用提供的接口。這樣才能保證私有變量的安全。

放大模式

當然，一個項目要用到模塊化的時候，說明這個項目足夠大足夠復雜，一個模塊可能需要繼承另一個模塊，或者擴充模塊，這時候需要使用放大模式：

var loveThing = (function (o){
  o.sayOK = function () {
    console.log("OK");
  };
  return o;
})(loveThing);

loveThing.sayOK();//>>> OK!

寬放大模式

可是，瀏覽器是一個不按常理出牌的環(huán)境，你永遠不知道自己引用的模塊是否已經(jīng)加載。萬一我之前的loveThing沒有被加載，上面這段代碼就會報錯了（找不到對象）。解決方法就是所謂寬放大模式：

var loveThing = (function (o){
  o.sayOK = function () {};
  return o;
})(loveThing || {});

與之前唯一的不同就是參數(shù)可以為空對象。

至此，最基本的JavaScript模塊化寫法你已經(jīng)學會了，相信你也體會到自己原來的寫法有什么不足。

受篇幅限制，本篇入門到此結束，我會在下一篇討論流行的模塊化規(guī)范。

云服務器 GPU云服務器造輪子輪子 python輪子 ui輪子

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78923.html

React造輪子：拖拽排序組件「Dragact」

摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調整后臺的各種表盤位置。內的所有組件必須不能重疊，還要能自動排序某些組件要可以設定靜態(tài)的，也就是固定在那里，不被布局的任何變動而影響。為了快速獲得這種心態(tài)的轉變，你要做的就是造輪子。先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...

Charlie_Jade 2019-08-30 13:58 評論0 收藏0
React造輪子：拖拽排序組件「Dragact」

摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調整后臺的各種表盤位置。內的所有組件必須不能重疊，還要能自動排序某些組件要可以設定靜態(tài)的，也就是固定在那里，不被布局的任何變動而影響。為了快速獲得這種心態(tài)的轉變，你要做的就是造輪子。先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...

yangrd 2019-08-26 11:45 評論0 收藏0
React造輪子：拖拽排序組件「Dragact」

摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調整后臺的各種表盤位置。內的所有組件必須不能重疊，還要能自動排序某些組件要可以設定靜態(tài)的，也就是固定在那里，不被布局的任何變動而影響。為了快速獲得這種心態(tài)的轉變，你要做的就是造輪子。先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...

tracymac7 2019-08-01 18:35 評論0 收藏0
PHP相關

摘要：的機器學習庫的機器學習庫，包括算法交叉驗證神經(jīng)網(wǎng)絡等內容。在即將到來的大會上，她將和大家分享在機器學習領域的全新可能。入門總結入門相關，如安裝配置基本使用等。基于 Swoole 開發(fā) PHP 擴展 Swoole-1.9.7 增加了一個新特性，可以基于 Swoole 使用 C++ 語言開發(fā)擴展模塊，在擴展模塊中可以注冊 PHP 內置函數(shù)和類。現(xiàn)在可以基于 Swoole 來編寫 PHP ...

lewinlee 2019-06-28 14:39 評論0 收藏0