前端總結系列
- 前端總結·基礎篇·CSS（一）布局
- 前端總結·基礎篇·CSS（二）視覺
- 前端總結·基礎篇·CSS（三）補充
- 前端總結·基礎篇·JS（一）原型、原型鏈、構造函數和字符串（String）
- 前端總結·基礎篇·JS（二）數組深拷貝、去重以及字符串反序和數組（Array）
- 前端總結·基礎篇·JS（三）arguments、callee、call、apply、bind及函數封裝和構造函數
- 前端總結·基礎篇·JS（四）異步請求及跨域方案
- 前端總結·工具篇·管理（一）常用模塊化方案
一、模塊化規范
1.1 AMD規范（Asynchronous Module Definition）
1.2 CMD規范（Common Module Definition）
1.3 CommonJS規范（NodeJS模塊化方案）
1.4 ES6模塊（需要使用babel轉碼）
二、使用Webpack對模塊進行打包
2.1 安裝Webpack
2.2 導出的模塊都導出了什么？
2.3 打包JS模塊
2.4 更輕松的打包方式
2.5 打包CSS模塊
一、模塊化規范
1.1 AMD規范（Asynchronous Module Definition）
AMD規范的實現有RequireJS，下面是一個完整的示例。
index.html
---------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 引入require.js -->
<script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js
"></script>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
myName.js
---------------
// 定義模塊
define('myName',[],function () {
return 'My name is white.'
})
yourName.js
---------------
// 定義模塊
define('yourName',[],function () {
return 'Your name is lily.'
})
main.js
---------------
// 調用模塊
require(['myName','yourName'],function (myName,yourName) {
console.log(myName)
console.log(yourName)
})
1.2 CMD規范（Common Module Definition）
AMD規范的實現有SeaJS，下面是一個示例。
define(function(require, exports, module) {
var $ = require('jquery'); // 導入模塊
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ... // 導出模塊
})
1.3 CommonJS規范（NodeJS模塊化方案）
CommonJS規范主要用在NodeJS，下面是一個示例。
require('./test'); // 導入當前目錄中的模塊
require('jquery'); // 導入模塊目錄中的模塊
module.exports = {} // 導出模塊
1.4 ES6模塊（需要使用babel轉碼）
ES6模塊需要使用babel轉碼，下面是一個示例。
import './test'; // 導入當前目錄中的模塊
import 'jquery'; // 導入模塊目錄中的模塊
export function test() {} // 導出模塊
二、使用Webpack對模塊進行打包
JS文件可以直接使用CommonJS語法或者ES6（需要使用babel轉碼）進行模塊化。CSS，圖片等其他資源需要配備相應的Loader進行模塊化。
2.1 安裝Webpack
- -D等同於--save-dev，-S等同於--save。前者保存在npm配置文件（package.json）的dependencies，后者保存在devDependencies。
npm init -y // 生成npm配置文件
npm install webpack -D // 安裝Webpack
2.2 導出的模塊都導出了什么？
導出的內容可以是字符串，可以是對象，可以是函數。也可以是其他JS數據類型。但是每個文件只能導出一個模塊。
yourName.js
---------------
var str = 'Your name is lily.'
module.exports = str // 導出模塊
main.js
---------------
var yourName = require('./yourName') // 導入模塊
console.log(yourName) // 測試導出的模塊
下面我們來分別修改yourName.js中的module.exports的數據類型，然后輸入node main.js指令進行測試。
yourName.js（每個文件只能導出一個模塊，請逐個進行測試）
---------------
module.exports = 'hello' // 導出字符串 | 'hello'
module.exports = {a:1,b:2} // 導出對象 | { a: 1, b: 2 }
module.exports = function () { // 導出函數 | [Function]
console.log('hello')
}
main.js（對應的調用方法如下）
---------------
var yourName = require('./yourName')
console.log(yourName) // 'hello'
console.log(yourName.a) // 1
console.log(yourName()) // 'hello'
2.3 打包JS模塊
在同一目錄創建以下文件。all.js里面是沒有內容的，用來放置打包后的模塊。myName.js和yourName.js都會導出內容，main.js把這兩個文件導入。通過webpack main.js all.js指令把main.js以及導入的模塊，全部打包到all.js里面。
index.html
---------------
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 所有的JS都會打包到all.js -->
<script type="text/javascript" src="all.js"></script>
</body>
</html>
myName.js
---------------
var str = 'My name is white.' // 定義變量
module.exports = str // 輸出模塊
yourName.js
---------------
var str = 'Your name is lily.'
module.exports = str
main.js
---------------
var myName = require('./myName') // 導入模塊（當前目錄要使用./）
var yourName = require('./yourName')
console.log(myName) // 測試導入的模塊
console.log(yourName) //
webpack main.js all.js // 打包指令（左邊的文件打包到右邊）
2.4 更輕松的打包方式
上面的方式，每次都得輸入源文件，和打包后的文件，確實非常麻煩。你可以配置以下文件實現輸入webpack指令即可打包文件。
webpack.config
---------------
var webpack = require('webpack')
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'all.js'
}
}
2.5 打包CSS模塊
打包CSS模塊需要配置Loader。
// 安裝CSS Loader
npm install css-loader style-loader
// 配置CSS Loader
module: {
loaders: [
{css: /\.css$/, loader: 'style-loader!css-loader'}
]
}
webpack.config.js（Webpack配置文件）
---------------------
var webpack = require('webpack')
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'all.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
總結
文章主要參考以下網站
博客更的有點慢了，還會繼續更下去。博客算是半摘錄半總結，引用了較多內容的基本都留了原文鏈接。如果介意的話歡迎私信我。雖然寫的一系列文章，並非完全原創。但是這一段時間下來，感覺確實學到了很多。知識在逐步體系化，不會像以前那樣零散。Fighting。
下一篇總結異步。