起步
cnpm install -g nrm
nrm use taobao
ES6
// 一旦定义了一个常量就意味着只能对其进行读取操作，即使能改变其内部也不要改变
const a = {};
a.name = "Aaayang";
console.log(a.name);
// 箭头函数没有arguments
// 表达式
let a = () => {};
// 直接返回
let b = () => ({
name: "Aaayang"
});
console.log(b().name);
// 箭头函数this指向函数所在的上下文环境
let b = {
name: "Aaayang"
};
b.fun = function() {
let a = () => {
return this;
}
return a();
}
console.log( b.fun() );// b对象
默认参数与rest
// 默认参数
function fn(a=5, b=6) {
console.log(a, b);
}
fn();
function test(normal, ...re) {// 剩余参数数组
console.log(normal, re);
}
test(1,2,3);
sprea(展开)
// 展开数组与对象
function fn(normal, ...re) {
ott(...re);
}
fn(1, 2, 3, 4);
function ott(a, b, c) {// 会自动展开...re
console.log(a + b + c);
}
模板字符串
let firstName = "Aaa",
lastName= "yang";
let str = `My name ${firstName}${lastName}`;
console.log(str);
解构赋值
let human = {
id: 0,
name: "Aaayang"
};
let {id, name} = human;
// 想改一下名字
let {id: id1, name: name1} = human;
console.log(id, name);
console.log(id1, name1);
let human = {
id: 0,
name: "Aaayang",
children: {
c1: "Rose",
c2: "Sally"
}
};
let {id, name, children: {c1, c2}} = human;
console.log(id, name, c1, c2);
类
class Animal {
constructor(a, b, c) {
this.a = a;
this.b = b;
this.c = c;
}
move() {
console.log('I can move');
}
}
let a1 = new Animal(1, 2, 3);
console.log(a1.a, a1.b, a1.c);
a1.move();
// super继承
class Human extends Animal {
constructor(name) {
super(2, 3, 4);// 继承的要点
this.name = name;
}
move() {// 会覆盖父类的方法
console.log('I am a man');
}
}
let human1 = new Human("Aaayang");
human1.move();
console.log(human1.a, human1.b, human1.c, human1.name);// 2, 3, 4
ES6模块化
a.js
import fnnn, {ep1, ep2} from './b.js';// fnnn是b.js默认导出的，不需要{}
fnnn();// 'fn from module b'
ep1();// 'ep1'
ep2();// 'ep2'
b.js
function ep1() {
console.log('ep1');
}
function ep2() {
console.log('ep2');
}
export {
ep1,
ep2
}
export default function fn() {
console.log('fn from module b');
}
CommonJS模块化
a.js
const Bbb = require('./b.js');
Bbb.ep1();// 'ep1'
Bbb.ep2();// 'ep2'
// b.js
function ep1() {
console.log('ep1');
}
function ep2() {
console.log('ep2');
}
module.exports = {
ep1,
ep2
}
webpack
// 生产依赖：放到浏览器仍然是需要的
// 开发依赖
npm init --yes
npm install lodash --save // 生产依赖
npm install gulp --save-dev // 开发依赖
npm uninstall lodash --save // 卸载
2.1.3
// 主版本：革命性更新，不兼容API
// 次版本：更新了功能，API向下兼容
// 修订号：BUG修复
~2.1.3// 版本限定
^2.1.3
// babel：JavaScript编译器
babel-core：核心（空白的操作系统）
plugins：es2015-arrow-functions（插件）
pressets：集成好的ES6的各种各样的插件（预设）
.babelrc：配置文件
// webpack：模块打包器
create new webpack.config.js file
create new package.json file
npm i webpack -D
aaac.png
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist/assets'),// 打包位置绝对路径
publicPath: '/assets/'
}
};
// 敲敲敲！！！
// 自定义属性以data开头
ReactDOM.render(
<div data-abc="aaa">hello worldd</div>,
document.getElementById("root")
);
// 定义组件
class Nav extends React.component { ... }
组件
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
require('../semantic/dist/semantic.css')
require('./common/style/main.css')
class Nav extends React.Component {
render() {
return (
<div className="ui menu">
<div className="item">Noods</div>
<div className="item">Home</div>
<div className="item">List</div>
</div>
);
}
}
class Body extends React.Component {
render() {
return (
<img className="img" src={ require('./common/img/128H.jpg') }/>
);
}
}
ReactDOM.render(
<div className="ui container">
<div className="ui dividing"></div>
<Nav/>
<Nav/>
<Body/>
</div>,
document.getElementById("root")
);
if(module.hot){
module.hot.accept()
}
