起步
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()
}
