1：Node.js
1.1：安装node.js
https://nodejs.org/zh-cn/
尽量选择LTS(长期维护版本)，免安装的二进制文件包。
现在的node.js已经自带npm包管理器了。
1.2：模块化编程
导出exports：
1
2
3
| exports.add = function(a,b){
return a+b;
}
|
导入require：
1
2
| var logic = require('./logic')
var c = logic.add(100,200);
|
2：webpack
2.1：安装webpack
https://webpack.docschina.org/
安装指令：
npm install webpack -g
npm install webpack-cli -g
查看指令：
webpack -v
2.2：webpack指令（JS打包）
将多个js导包成一个，编写一个配置js文件，文件名为：webpack.config.js
请注意层级关系，该文件和src目录同级
1
2
3
4
5
6
7
8
9
| var path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
|
我们在配置文件同级目录下使用指令：webpack
然后他会生成目标文件：/dist/bundle.js
2.3：打包CSS文件
安装：
npm install style-loader css-loader –save-dev
随意编写一个css，例如：
1
2
3
| body{
background-color: pink;
}
|
在main.js中导入此css文件：
在配置文件webpack.config.js中加入下面代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
}
]
}
};
|
最后，再次执行指令：webpack
3：ES6
3.1：ES6语法下的导入和导出
导出：
1
2
3
4
5
| var fn0 = function(){
console.log("fn0...");
}
export{fn0}
|
导入：
1
2
3
| import {fn0} from './lib';
fn0();
|
但是直接运行会报错，随意我们需要加入babel。
3.2： 安装 babel
1）安装babel支持
npm install babel-preset-es2015 –save-dev
2）babel客户端全局安装
npm install babel-cli -g
3.3：编写配置文件.babelrc
1
2
3
| {
'presets':['es2015']
}
|
3.4：执行babel
babel-node demo.js
3.5：其他语法
3.5.1：函数作用域 let const
1
2
3
4
5
6
7
8
9
10
|
if(true){
var a = 1;
let b = 2;
const c = 3;
}
console.log(a);
console.log(b);
console.log(c);
|
我们一般情况下用let 和const代替var，因为var是函数作用域。
1
2
3
4
| function d(){
var e = 4;
}
console.log(e);
|
所以，作用域和我们一般理解的稍微有区别。
3.5.2：字符串注入变量
1
2
| let name = 'zhangSan'
console.log(`my name is ${name}`);
|
3.5.3：函数参数默认值
1
2
3
4
5
|
function add(a=1,b=2){
return a+b;
}
console.log(add());
|
3.5.4：箭头函数
1
2
3
4
5
6
7
8
9
10
11
12
|
const fn0 = function(){
console.log('这是一个方法Fn0');
}
const fn1 = () =>{
console.log('这是一个函数Fn1');
}
const fn2 = (a,b) =>{
console.log(`相加结果为：${a+b}`);
}
|
3.5.5：对象初始化属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function people(name,age){
return {
name:name,
age:age
}
}
let zhangsan = people('张三',18)
console.log(`姓名是：${zhangsan.name},年龄是${zhangsan.age}`)
function people2(name,age){
return {
name,
age
}
}
let lisi = people2('李四',20)
console.log(`姓名是：${lisi.name},年龄是${lisi.age}`);
|
私以为该函数只是返回了一个匿名类的对象
3.5.6：解构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| const people ={
name:'张三',
age:20
}
const {age,name} = people
const colors = ['red','blue','pink']
const [a,b,c] = colors
const arr = ['red','blue','pink']
const arr2 = [...arr,'green']
const obj1 = {name:'张三丰',age:18}
const obj2 = {...obj1,address:'武汉'}
const obj3 = {obj1,ipone:123456}
console.log(obj2);
console.log(obj3);
|