課程鏈接

1. 立即執(zhí)行函數(shù)

• 特點(diǎn)：執(zhí)行結(jié)束，立即銷毀；獨(dú)立作用域
• 執(zhí)行符號(hào)（）只能跟在表達(dá)式后面，不能放在函數(shù)聲明后
• 分號(hào)可以寫在前面/后面
• document為傳入實(shí)參，doc為形參

;(function(doc){...const init = ()=>{bindEvent()}function bindEvent(){obj.addEventListener('click', onClick, false)}init() })(document)

2. init函數(shù)

• 模塊初始化函數(shù)init管理模塊執(zhí)行
• 用函數(shù)專門去綁定事件處理函數(shù)
• 在init中執(zhí)行綁定事件處理函數(shù)
• 讓功能性的東西能復(fù)用

3. webpack 自動(dòng)化解決方案

3.1 npm init后生成package.json文件

{"name": "calculator-webpack","version": "1.0.0","description": "webpack study","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"repository": {"type": "git","url": "https://gitee.com/ying9481/calculator-webpack.git"},"keywords": ["webpack"],"author": "hyy","license": "MIT" }

3.2 開發(fā)環(huán)境安裝包

$ cnpm i -D webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader node-sass css-loader style-loader ejs-loader html-webpack-plugin

3.3 path模塊

path.resolve的每個(gè)參數(shù)，從左至右看成cd操作理解

3.4 use的執(zhí)行順序

從下到上、從右到左 → 先經(jīng)過css-loader，再到style-loader

1、作用①：壓縮代碼，混淆js代碼；
2、作用②：瀏覽器不支持ES5以上的語法，webpack可以安裝一系列依賴包將之翻譯成ES5
3、作用③：將less、sass編譯成css
4、所需依賴：

【三大件】webpack、webpack-cli（腳手架）、webpack-dev-server（開發(fā)者服務(wù)器插件）

【六件套】處理ES6 ES7… 裝飾器：
. babel-loader@7、babel-core、babel-preset-env （babel8版本和babel-core不兼容）
. babel-plugin-transform-runtime
. babel-plugin-transform-decorators、 babel-plugin-transform-decorators-legacy

【四大件】處理樣式sass：
. sass-loader、node-sass、css-loader、style-loader ( postcss-loader autoprefixer )

處理模板：ejs-loader

處理HTML: html-webpack-plugin

5、安裝指令：

• –save-dev 簡寫 -D （安裝在開發(fā)環(huán)境下的，線上不跑）
• –save 簡寫 -S （安裝在生成環(huán)境下的，線上代碼也需要的，如ejs）

6、配置安裝包 webpack.config文件
特*：所有plugin結(jié)尾的依賴，一般要require導(dǎo)入、loader則不用
plugins: [ new HtmlWebpackPlugin( { } ) ]
7、 用命令跑配置文件webpack.config，在package.json的script里（跑腳本）
8、webpack的path模塊 解決絕對路徑
9、webpack上線時(shí)，mode變?yōu)閜roduction
10、export{ }用到了結(jié)構(gòu)賦值

4.

• addEventListener
• 立即執(zhí)行函數(shù)
• 綁定屬性，getAttribute
• 裝飾器
• 組件化（類的形式）
• proxy

總結(jié)

以上是生活随笔為你收集整理的ES5程序设计转ES6 笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。