ES5程序设计转ES6 笔记

课程链接

1. 立即执行函数

特点：执行结束，立即销毁；独立作用域
执行符号（）只能跟在表达式后面，不能放在函数声明后
分号可以写在前面/后面
document为传入实参，doc为形参

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

2. init函数

模块初始化函数init管理模块执行
用函数专门去绑定事件处理函数
在init中执行绑定事件处理函数
让功能性的东西能复用

3. webpack 自动化解决方案

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 开发环境安装包

$ 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的每个参数，从左至右看成cd操作理解

3.4 use的执行顺序

从下到上、从右到左 → 先经过css-loader，再到style-loader

1、作用①：压缩代码，混淆js代码；
2、作用②：浏览器不支持ES5以上的语法，webpack可以安装一系列依赖包将之翻译成ES5
3、作用③：将less、sass编译成css
4、所需依赖：

【三大件】webpack、webpack-cli（脚手架）、webpack-dev-server（开发者服务器插件）

【六件套】处理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 （安装在开发环境下的，线上不跑）

–save 简写 -S （安装在生成环境下的，线上代码也需要的，如ejs）

6、配置安装包 webpack.config文件
特*：所有plugin结尾的依赖，一般要require导入、loader则不用
plugins: [ new HtmlWebpackPlugin( { } ) ]
7、用命令跑配置文件webpack.config，在package.json的script里（跑脚本）
8、webpack的path模块解决绝对路径
9、webpack上线时，mode变为production
10、export{ }用到了结构赋值

4.

addEventListener
立即执行函数
绑定属性，getAttribute
装饰器
组件化（类的形式）
proxy

ES5程序设计转ES6 笔记相关推荐

ES6笔记（1） -- 环境配置支持
系列文章 -- ES6笔记系列虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看 ES6新特性支持度 Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持 ...
ES6笔记（4）-- Symbol类型
系列文章 -- ES6笔记系列 Symbol是什么?中文意思是标志.记号,顾名思义,它可以用了做记号. 是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值. 由此,JS的数据 ...
《POSIX多线程程序设计》读书笔记
<POSIX多线程程序设计>读书笔记一．概述 1. 一个UNIX进程可以理解为一个线程加上地址空间.文件描述符和其他数据: 2. 多个线程可以共享一个地址空间,而 ...
《python 程序设计》读书笔记
<python 程序设计>读书笔记笔者对于csdn博客的运用还是不太熟练,希望大家能够见谅.以后会不断提升写作的手法.这篇博客是我在学习python程序设计时候的笔记.我也是选择学习了大 ...
《JavaScript高级程序设计》读书笔记 -12.1 window对象
<JavaScript高级程序设计>读书笔记 -12.1 window对象 12.1 window对象 12.1.1 Global作用域 12.1.2 窗口关系[不是很懂] 12.1.3 ...
理解 ES5, ES2015（ES6）和 TypeScript
理解 ES5, ES2015(ES6) 和 TypeScript 本文转载自:众成翻译译者:kayson 链接:http://www.zcfy.cc/article/1332 原文:https:// ...
Windows程序设计_Chap02_Unicode_学习笔记
Windows程序设计_Chap02_Unicode_学习笔记 ――By: Neicole(2013.05.24) 01. 开篇 <Windows程序设计>的第2章,主要内容为Unicod ...
《JavaScript高级程序设计》读书笔记【8章~】【持更】
文章目录上一篇:<JavaScript高级程序设计>读书笔记 [1~7章] 8. BOM 8.1. window对象窗口位置窗口大小打开窗口间歇调用与超时调用系统对话框 8.2 ...
深入理解ES6笔记（九）JS的类（class）
主要知识点:类声明.类表达式.类的重要要点以及类继承 <深入理解ES6>笔记目录 ES5 中的仿类结构 JS 在 ES5 及更早版本中都不存在类.与类最接近的是:创建一个构造器,然后将方 ...

ES5程序设计转ES6 笔记

1. 立即执行函数

2. init函数

3. webpack 自动化解决方案

3.1 npm init后生成package.json文件

3.2 开发环境安装包

3.3 path模块

3.4 use的执行顺序

4.

ES5程序设计转ES6 笔记相关推荐

最新文章

热门文章