js前端模塊化（一） commonjs

      隨着瀏覽器的發展，不少頁面邏輯遷移到了客戶端（表單驗證等），JavaScript卻沒有爲組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（module）了，JavaScript極其簡單的代碼組織規範不足以駕馭如此龐大規模的代碼。在java中有一個重要的概念--package邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的王國，不用擔憂命名衝突什麼的，外部若是使用就直接import對應的package就能夠了。JavaScript在設計時定位緣由，沒有提供相似的功能，開發者須要模擬出相似的功能，來隔離、組織複雜的JavaScript代碼，咱們稱爲模塊化。

    目前，通行的JavaScript模塊規範主要有兩種：CommonJS和AMD

   CommonJS模塊的特色以下。

• 全部代碼都運行在模塊做用域，不會污染全局做用域。
• 模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存了，之後再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。
• 模塊加載的順序，按照其在代碼中出現的順序。
• module.exports屬性表示當前模塊對外輸出的接口，其餘文件加載該模塊，實際上就是讀取module.exports變量

   下面主要介紹commonjs:require('路徑')

   //e:/2018/study/example.js 絕對路徑
  //./example 相對於當前文件的路徑
  //沒有/或者./則表示是一個默認的核心模塊

 

  //刪除單個模塊緩存 要先根據文件名找到絕對路徑

  console.log(require.resolve('./cache')) //e:/2018/study/cache.js
  //delete require.cache['e:/2018/study/cache.js'] //這樣是無效的 沒有刪除緩存
  delete require.cache[require.resolve('./cache')]// 必需要先將文件解析到絕對路徑

// // //刪除全部模塊緩存

// Object.keys(require.cache).forEach(function(key) {
// console.log(key)
// delete require.cache[key]
// })

 

 

//模塊循環調用 a加載b b加載a b加載的是部分a

a.js

module.exports.x = 'a1';
console.log('a.js',require('./b').x); //b2
console.log(23333333333,require.main) //index
module.exports.x = 'a2'

b.js

module.exports.x = 'b1';
console.log('b.js',require('./a').x); //a1
module.exports.x = 'b2'

index.js

console.log("index.js",require('./a').x) //a2
console.log("index.js",require('./b').x)//b2
console.log("index.js",require('./a').x) //a2
console.log("index.js",require('./b').x)//b2

第二次加載a.js和b.js時，會直接從緩存讀取exports屬性，因此a.js和b.js內部的console.log語句都不會執行了

 

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

var calcu = require('./calcu')
var count = calcu.count;
var iccCount = calcu.iccCount;
console.log(count)//3
iccCount();
console.log(count)//3

calcu.js

var count = 3;
function iccCount() {
count++;
}
module.exports = {
count:count,
iccCount:iccCount
}

 

 

 

參考文檔：http://javascript.ruanyifeng.com/nodejs/module.html#toc2

 http://www.cnblogs.com/dolphinX/p/4381855.html