前端模塊化詳解------commonjs

傳統開發  ：

  　　（1）<script src="app.js"><script>
  　　　　整個網頁寫了一個js文件  全部的特效都在裏面   
  　　　　缺點：耦合度過高代碼之間的關聯性太強，不便於後期維護 會形成全局污染
 
  　　（2）<script src="01.js"><script>
  　　　　  <script src="02.js"><script>
  　　　　  <script src="03.js"><script>
   　　　　　　這種寫法的弊端    發生的請求次數過多，依賴模糊，難於維護　　

模塊化開發：

　　先下載一個  node.js

　　1.什麼是模塊？

　　　　1.將一個複雜的程序依據必定的規則(規範)封裝成幾個塊(文件), 並進行組合在一塊兒

　　　　2.塊的內部數據與實現是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通訊

　　2.爲何使用模塊化開發

　　　　1.減小代碼之間的關聯度

　　　　2.部署方便

　　　　3.更好的分離，按需加載

　　　　4.避免命名衝突（減小命名空間污染），容易維護

　　　　5.更好的複用性

　　　　6.更好的維護性

　　3.模塊化規範

　　　　　　　node自帶規範（模塊） commonjs規範

　　　　　　　node -v 檢測mode版本

 

　　　　1.commonjs

　　　　

 

　　　　　　概述：node應用又模塊組成，採用commonjs模塊規範，每一個文件就是一個模塊，有本身的做用域。在一個文件裏面定義的變量、函數、類，都是私有的，對其餘文件不可見。在服務器端，模塊的加載是運行時同步加載的；在瀏覽器端，模塊須要提早編譯打包處理。

　　　　　　特色：1. 全部代碼都在運行在模塊做用域，不會污染全局做用域

　　　　　　　　　2. 模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存了，之後再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。

　　　　　　　　　3. 模塊加載的順序，按照其在代碼中出現的順序

　　　　　　基本語法：

　　　　　　　　暴露模塊： module.exports=value或exports.xxx=value

　　　　　　　　引入模塊： require（xxx），若是是第三方模塊，xxx爲模塊名；如是自定義模塊，xxx爲模塊文件路徑

　　　　　　commonjs暴露的模塊究竟是什麼？

　　　　　　　　　comonjs規範規定，每一個模塊內部，module變量表明當前模塊。這個變量是一個對象，他的exports屬性（即module.exports）是對外的接口，加載某個模塊，實際上是加載該模塊的module.exports

屬性。

　　

　　　　經過module.exports輸出變量x和函數addx

　　

　　

　　require 命令用於加載模塊文件，require命令的基本功能是，讀入並執行一個JavaScript文件，而後返回該模塊的exports對象。若是沒有發現指定模塊，會報錯。

　　模塊的加載機制：ommonJS模塊的加載機制是，輸入的是被輸出的值的拷貝。也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。