好程序員分享JavaScript代碼組織結構良好的5個特點

  好程序員JavaScript代碼組織結構良好的5個特點,隨着JavaScript項目的成長,如果你不小心處理的話,他們往往會變得難以管理。我們發現自己常常陷入的一些問題: 當在創建新的頁面時發現,很難重用或測試之前寫的代碼。

  當我們更深處地研究這些問題,我們發現根本原因是無效的依賴管理造成的。比如,腳本A依賴腳本B,並且腳本B又依賴腳本C,當C沒有被正確引入時,整個依賴鏈就無法正常工作了。

  爲了解決這個問題,我們已經採取了異步模塊定義(AMD)的模式,並引入require.js到我們的技術堆棧。經過對AMD的進一步探索,我們已經基本確定,組織嚴密的JavaScript一般都呈現以下五個特點:

  始終聲明我們的依賴 爲第三方代碼庫添加shim(墊片) 定義跟調用應該分離 依賴應該異步加載 模塊不應依賴全局變量

  讓我們詳細討論一下。

  始終聲明我們的依賴

  我們最常碰到了的一個問題是,我們會經常忽略那些會被確定加載的依賴項。舉例來說,如果我們創建了一個jQuery插件,一般認爲沒有必要申報jQuery的依賴,因爲它在大多數頁面都是默認裝載的。雖然這似乎適用於大多數的網頁,但當我們試圖進行單元測試或在一個全新的頁面加載時,它就變成一個問題。

  始終聲明我們的依賴,我們就消除了JavaScript中90%的問題。可重用的代碼變得更可靠,單元測試的數量增加了4倍也是一個因素。

  爲第三方代碼庫添加shim(墊片)

  在管理JavaScript依賴時經常碰到的一個有趣問題是,較舊的第三方庫可能無法和您的依賴關係管理系統配合工作。例如,你們內部使用了jQuery的一個很酷的插件,但它對require.js一無所知。這會成爲一個問題,因爲第一個特點,我們來添加對這個插件的引用。
  解決的辦法是通過依賴管理工具爲這個插件製作一個墊片。在require.js中,這可以很容易地通過配置來完成:

  var require = {
1.

  "shim": {


2.

  "lib/cool-plugin": {


3.

  "deps": ["lib/jquery"]


4.

  }


5.

  }


6.

  }

  有了這個簡單的配置,每一個加載 lib/cool-plugin.js 的腳本都會自動加載jQuery。將有助於滿足所有相關性.

  最終的結果是代碼更容易測試和重用,因爲你總是有一個require()來調用所需的功能。

  定義跟調用應該分離

  這是限制JavaScript代碼的可重用性和可測試性的一個常見問題。問題表現在一個單一的文件即定義了一個類/函數又調用了它。考慮下面的代碼:

  ## js/User.js
1.

  define(functino(require) {


2.

  var User = function(name, greeter) {


3.

  this.name = name;


4.

  this.greeter = greeter;


5.

  };


6.

  User.prototype.sayHello = function() {


7.

  this.greeter("Hello, " + this.name);


8.

  };


9.

  var user = new User('Alice', window.alert);


10.

  user.sayHello();


11.

  });

  在這個例子中,一個單一的文件即定義了User類又調用它。這將很難重用這個代碼,因爲只要加載這個腳本就會出現alert。同樣greeter這個非常難以測試。

  解決的辦法是保持定義和執行的分離。這有助於確保可重用性和可測性:

  ## js/User.js
1.

  define(functino(require) {


2.

  var User = function(name, greeter) {


3.

  this.name = name;


4.

  this.greeter = greeter;


5.

  };


6.

  User.prototype.sayHello = function() {


7.

  this.greeter("Hello, " + this.name);


8.

  };


9.

  return User;


10.

  });


11.

  ## js/my-page.js


12.

  define(functino(require) {


13.

  var User = require('js/User');


14.

  var user = new User('Alice', window.alert);


15.

  user.sayHello();


16.

  });

  這種變化,User類可以安全地在許多腳本中重用。

  依賴應該異步加載

  因爲試圖同步加載腳本會導致瀏覽器鎖死,這是非常重要的,你的腳本和你的模塊應該使用異步加載機制。 Require.js在默認情況下,所有異步加載你的模塊,只有所有的的依賴都加載完以後纔會執行你的模塊代碼的函數。

  通過使用一個閉包,我們可以進一步利用“use strict”的好處。

  模塊不應依賴全局變量

  爲了進一步加強我們的JavaScript代碼庫,我們已經(幾乎)完全消滅了全局變量(除了由require.js提供的全局變量,如require()和define())。全局變量是臭名昭著的潛在的進入模塊的“隱藏的依賴關係”,它會使代碼很難重用或測試。

  Require.js也讓我們轉換第三方全局變量,require() - 通過墊補功能能模塊。在這個例子中,lib/calculator 創建一個全局的計算器對象,這個庫是被require化的。

  var require = {
1.

  "shim" : {


2.

  "lib/calculator": {


3.

  "export": "Calc"


4.

  }


5.

  }


6.

  }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章