最近在了解前端子產品化開發,接下來會把相關的筆記/心得分幾片文章記錄下來。
一、為什麼要子產品化開發
- js越多,依賴越強,靈活性越小(如引入順序);
- 多人開發,容易出現命名沖突等問題;
- ... ...
二、解決方案:
- 匿名閉包;
- 解決了命名沖突;
- 代碼複用性變弱;
- 使用子產品作為出口;
其他成引入該js就能直接使用屬于自己子產品的屬性和方法:// 3.使用變量接收對象 var myModule = (function(){ // 1.在匿名函數内部定義一個對象; var obj = {}; var sum = function(a,b){ return a+b; } var flag = true; obj.sum = sum; obj.flag = flag; // 2.暴露對象; return obj; })();
if(myModule.flag){ console.log(myModule.sum(1,0)); }
- CommonJS
- 核心:導入,導出
- 導出示例:
module.exports={ flag: true, sum: function(a,b){ return a+b; } }
- 導入示例:
// 1.普通寫法 var someModule = require('./config.js'); if(someModule.flag){ someModule.sum(1,2); } // 2.解構指派 var {flag,sum} = require('./config.js'); if(flag){ sum(1,2); }
- ES6的子產品化:export/import
- 導出示例:
var flag = true; var sum = function(a,b){ return a+b; } // 導出方式1:報錯就寫export default // export default導出有且隻能有一個,導入的時候也變成了import from './config.js',也就是說名字可以省略,由導入者自己命名; export {flag,sum} // 預設導出函數,導入者不能省略名字,但是可以自己命名 export default function(){ console.log("export default function") } // 導出方式2: export var name = "wayne"; export function mul(a,b){ return a*b; } export class Person{ run(){ console.log("run away!") } }
- 導入示例:
// 注意檔案名簡寫的問題 import {flag,sum, Person} from './config.js'; if(flag){ console.log(sum(1,2)) } var p = new Person; p.run() // 導入的東西比較多的時候 import * as 自定義命名 from './config.js'
- 導出示例:
其他小記:
<!-- type="module"屬性會讓js檔案子產品化,其他js檔案不能通路其中的變量和方法 -->
<script src="./config.js" type="module"></script>
END;