什麼是代碼耦合？代碼耦合的表現是改了一點毛髮而牽動了全身，或者是想要改點東西，需要在一堆代碼裡面找半天。由於前端需要組織js/css/html，耦合的問題可能會更加明顯，下麵按照耦合的情況分別說明： 1. 避免全局耦合 這應該是比較常見的耦合。全局耦合就是幾個類、模塊共用了全局變數或者全局數據結構， ...
什麼是代碼耦合？代碼耦合的表現是改了一點毛髮而牽動了全身，或者是想要改點東西，需要在一堆代碼裡面找半天。由於前端需要組織js/css/html，耦合的問題可能會更加明顯，下麵按照耦合的情況分別說明：
1. 避免全局耦合
這應該是比較常見的耦合。全局耦合就是幾個類、模塊共用了全局變數或者全局數據結構，特別是一個變數跨了幾個文件。例如下麵，在html裡面定義了一個變數：
在html裡面定義全局變數 XHTML| 1 2 3 4 5 | <script> varPAGE=20; </script> <script src="main.js"></script> |
上面在head標簽裡面定義了一個PAGE的全局變數，然後在main.js裡面使用。這樣子PAGE就是一個全局變數，並且跨了兩個文件，一個html，一個js。然後在main.js裡面突然冒出來了個PAGE的變數，後續維護這個代碼的人看到這個變數到處找不到它的定義，最後找了半天發現原來是在xxx.html的head標簽裡面定義了。這樣就有點egg pain了，並且這樣的變數容易和本地的變數發生命名衝突。
所以如果需要把數據寫在頁面上的話，一個改進的辦法是在頁面寫一個form，數據寫成form裡面的控制項數據，如下：
JavaScript| 1 2 3 4 | <form id="page-data"> <input type="hidden"name="page"value="2"> <textarea name="list"style="display:none">[{"userName":""yin"},{}]</textarea> </form> |
上面使用了input和textarea，使用textarea的優點是支持特殊符號。再把form的數據序列化，序列化也是比較簡單的，可以查看Effective前端2：優化html標簽
第二種是全局數據結構，這種可能會使用模塊化的方法，如下：
JavaScript| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//data.js
module.exports={
houseList:null
}
//search.js 獲取houseList的數據
vardata=require("data");
data.houseList=ajax();
require("format-data").format();
//format-data.js 對houseList的數據做格式化
functionformat(){
vardata=require("data");
  更多相關文章
一周排行
 所有分類
|