1. 程式人生 > 其它 >面向物件/閉包/ES6的模組化

面向物件/閉包/ES6的模組化

一 面向物件
發展過程:機器語言->彙編->低階語言->高階語言->模組->框架->API
特點:
1.封裝性
Person 父類

class Person{
   constructor(name,age){
      this.name=name;
      this.age=age
    }
    show(){
      alert(this.name)
      alert(this.age)
    }
}

2.繼承性
Worker子類,繼承父類

class Worker extends Person(){
    constructor(name,age,job){
        super(name,age)
        this.job=job  
      }
    showJob(){
      alert(this.name,this.age,this,job)
      }
}

繼承的關鍵字
class 宣告類
constructor 宣告屬性
extends 繼承父類
super 繼承父類的屬性

class XX extends XXX(){
    constructor(a,b){
      super(a);
      this.b=b
    }
    fun(){}
}

3.多型性

二 閉包
1.底層:棧
2.高階:函式當作物件處理

本質:留著別刪

三 ES6的模組化
發展過程:沒有模組->CMD->AMD->ES6語言提供模組化支援
ES6的模組化->webpack

1.webpack
作用: 1>打包2>引入模組
webpack編譯:
1>.entry--入口地址
2>.output-輸出
path:絕對路徑
filename:檔名
3>.mode-模式
4>.所有的當前的路徑前面加./ (node.js的要求)

2.export輸出寫法
export let a=xx export const a=xx

```
let a=1,b=2,c=3
export{a,b,c}
```


`export tt(tt為檔名)`
匯出方法
`export function xxx(){}`
匯出類
```
export class XX{

}
```
預設匯出
`default export a`

3.import匯入

import * as mod from './mod'  //引入所有的成員
import {a,b,c} from './mod'      //引入a,b,c
import xxx from './mod'   //無xxx的話引入的是預設成員,命名為xxx

//模組的程式碼引入進來,不引入內部的成員

import "./1.jpg"
import "./1.css"

//非同步引入