模塊化

時間 2019-11-13

標籤模塊化简体版

原文原文鏈接

不使用模塊化

一、util.js 封裝了一個getFormatDate函數

二、a-util.js 封裝了一個aGetFormateDate函數，這個函數使用了utils.js中的getFormatDate

三、a.js 使用了a-util.js中的aGetFormateDate

util.js

function getFormatDate(date, type){
　　if(type === 1) {
　　　　return '2017-06-15'
　　}
　　if(type === 2) {
　　　　return '2017年6月15日'
　　}
}

a-util.jscss

function aGetFormatDate(date) {
　　return getFormatDate(date, 2);
}

a.jshtml

var dt = new Date();
console.log(aGetFormatDate(dt))

index.html前端

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>Document</title>
　　</head>
　　<body>
　　　　<script src="util.js"></script>
　　　　<script src="a-util.js"></script>
　　　　<script src="a.js"></script>
　　</body>
</html>

＊：node

一、util.js，a-util.js，a.js三個js順序不能放錯，一放錯就用不了

二、這些代碼中的函數必須是全局變量，才能暴露給使用方，全局變量污染。很容易被沖掉，難找bug

三、a.js執導引用a-util.js。可是他不知道a-util.js還須要依賴於util.js

使用模塊化-AMD

util.js的方法吐出傳給我就好，不用暴露給全局

util.js

define(function() {
　　var util = {
　　　　getFormatDate: function(date, type){
　　　　　　if (type === 1) {
　　　　　　　　return '2017-06-20'
　　　　　　}
　　　　　　if (type === 2) {
　　　　　　　　return '2017年6月20日'
　　　　　　}
　　　　}
　　}
　　return util;
});

a-util.jswebpack

// 依賴於util.js，返回util
define(['./util.js'], function(util) {
　　var aUtil = {
　　　　aGetFormatDate: function(date) {
　　　　　　return util.getFormatDate(date,2);
　　　　}
　　}
　　return aUtil;
});

a.jses6

define(['./a-util.js'], function(aUtil) {
　　var a = {
　　　　printDate: function(date) {
　　　　　　console.log(aUtil.aGetFormatDate(date))
　　　　}
　　}
　　return a;
});

main.jsweb

require(['./a.js'], function(a){
　　var date = new Date();
　　a.printDate(date);
})

index.htmlnpm

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>Document</title>
　　</head>
　　<body>
　　　　<p>AMD test</p>
　　　　<script data-main='./main.js' src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js"></script>
　　</body>
</html>

＊：前端工程化

一、https://requirejs.org/

二、全局define函數

三、全局require函數。只有define後，才能被require

四、依賴的js會自動，異步加載

五、直接引入a.js就行。其餘的根據依賴關係自動引用

六、那兩個函數，不必作成全局變量，不會帶來污染和覆蓋

模塊化－CommonJS

nodejs模塊化規範，如今被大量前端使用

一、前端開發依賴的插件和庫，均可以從npm中獲取

二、構建工具的高度自動化，使得使用npm的成本很是低

三、commonjs不會異步加載js,不像amd那樣，而是同步一次性加載出來，他不須要異步，由於他不須要從服務器拉取文件，他直接就是在服務器上運行

util.js

module.exports = {
　　getFormatDate: function(date, type){
　　　　if (type === 1) {
　　　　　　return '2017-06-15'
　　　　}
　　　　if (type === 2) {
　　　　　　return '2017年6月15日'
　　　　}
　　}
}

a-util.js瀏覽器

var util = require('./util.js');
module.exports = {
　　aGetFormatDate: function(date){
　　　　return util.getFormatDate(date, 2);
　　}
}

AMD和CommonJS的使用場景

一、須要異步家在JS，使用AMD

二、使用了npm以後建議使用CommonJS

模塊化－ES Module

一、語法：import export (注意有無default)

二、環境：babel編譯es6語法，模塊化可用webpack和rollup

總結：

一開始沒有模塊化，須要什麼寫什麼，須要什麼引用什麼。固然是很很差，經過發展，有一套前端工程化的體系

一、AMD成爲標準，require.js(也有cmd)

後來有一個require.js這麼個東西，前端能夠經過一些語法定義，經過define,require這些函數的語法定義，完成模塊化的編寫。因此require,AMD慢慢成爲一個標準，什麼是標準，就是他的出現一統江湖，用的人多了，就成爲一個標準。好比就用define這個函數，就用require這個函數。define裏面有什麼參數，返回什麼，定義好了以後就成爲一個標準。

後來也有cmd。cmd的標準在社區裏面用的基本沒有了

二、前端打包工具，是的,nodejs模塊化能夠被使用

三、ES6出現，想統一如今全部模塊化標準

四、nodejs積極支持，瀏覽器還沒有統一