面向对象、模块化

面向对象

es5面向对象

1. 以函数的形式写对象，没有统一的写法
2. 需要在对象体外面声明方法

function Person(name,age){
            this.name=name;
            this.age=age;

            this.showName=function (){
                alert(this.name);
            };
            this.showAge=function (){
                alert(this.age);
            }
        }
        // 添加方法
        // Person.prototype.showName=function (){
        //     alert(this.name);
        // };
        // Person.prototype.showAge=function (){
        //     alert(this.age);
        // }
        
        //es5继承
        function Worker(name,age,job){
            Person.call(this,name,age);
            this.job = job;
        }
        Worker.prototype=new Person();
            Worker.prototype.constructor=Worker;

            Worker.prototype.showJob = function (){
                alert(this.job);
            }

            let w = new Worker("niko",20,"dududu");

es6面向对象

1. class 类声明
2. constructor 构造函数
3. extends 继承
4. super 父类/超类

class Person{
            // 有单独的类的声明，构造函数声明
            constructor(name,age){
                this.name = name;
                this.age = age;
            }

            showName(){
                alert(this.name);
            }

            showAge(){
                alert(this.age);
            }
        }

        // let p=new Person("niko",20);
        
        // p.showName();
        // p.showAge();

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

        let w = new Worker("niko",20,"dilili");
        w.showName();
        w.showAge();
        w.showJob();

es6模块

想要使用es6的话语言支持但是浏览器不支持，所以也需要编译(webpack)

1. 定义模块 export let a = 10
2. 引入模块，如果需要导入目标文件的所有导出的模块的话，这里假设目标文件为model.jsimport * as model from './model.js'（.js可以省略），前面的model相当于一个取名，这里使用变量a的话则用model.a
3. 这里还没办法使用因为浏览器不支持模块化，所以需要用webpack对其编译，创建一个配置文件webpack.config.js，对外输出一个json（给node看的）
4. 安装webpacknpm install webpack webpack-cli --save-dev
5. 使用webpack命令，它会自动寻找到webpack.config.js并识别其中的代码，完成编译的过程，从而生成build文件夹下的bundle.js文件
6. 最后将index.html首页引入的文件改为bundle.js即可
   webpack.config.js

const path = require('path')

module.export={
    mode:'development',   //生产模式
    entry:'./src/index.js',  //入口
    output:{
        path:path.resolve(__dirname,'build'),  //生成的路径
        filename:'bundle.js'    //生成的文件名
    }
}

导出（export）

//导出变量
export let a = 13

//导出一堆变量
let a,b,c = ...
export {a,b,c}

//导出函数
export function show(){}

//导出class
export class father{}

默认成员

//导入时不需要{}
export default 

导入（import）

//导入所有export命别名为model
import * as model from '×××'

//导入default成员
import model from '×××'

//导入自己需要的
import {a,b} from '×××'

//只引入，不使用
import '×××'

//异步引入
let p = await import('./model')