ES6class中的静态属性和静态方法以及模块化开发

一、静态属性和静态方法

class中的静态属性和静态方法由类来直接调用和获取，不需要实例化对象来实现

使用static关键字来实现

			class Person{
				static num=1;
				constructor(name) {
				    this.name=name
				}
				static showPerson(){
					console.log("我是Person类里的静态方法")
				}
			}
			let p1=new Person("张三")
			Person.showPerson();//我是Person类里的静态方法
			console.log(Person.num);//1
			console.log(p1.num)//undefined
			p1.showPerson();//not a function

可以发现通过p1无法调用static定义的方法

这个可以实现，有关类的统计

案例：通过Person实例化了多少对象

			class Person{
				static num=0;
				constructor(name) {
				    this.name=name;
					Person.num++
				}
				static showSum(){
					console.log(Person.num)
				}
				
			}
			let p1=new Person("张三")
			let p2=new Person("张三")
			let p3=new Person("张三")
			let p4=new Person("张三")
			let p5=new Person("张三")
			let p6=new Person("张三")
			Person.showSum()//6

这样能快速的统计出通过该类实例化了多少对象

二、模块化开发

将复杂的功能，拆分成 n个小的功能模块，每一个小模块具有自己独一无二功能。比如点餐系统，有点餐页面，商品介绍，商家介绍，购物车，将每一个特殊的功能封装成一个模块。比如showList.js,goodThings.js等等

ES6中如何实现模块化：

一个页面 具有很多功能 a.js b.js c.js 整合 index.js

由于浏览器默认不支持模块化，所以需要使用开发工具webpack 代码压缩 将ES6语法转化为ES5

使用webpack之前需要配置webpack

新建一个webpack.config.js

//想要获取到当前的绝对路径 node环境中  path模块 用于获取路径
const path=require("path") //require引入模块  赋值给path变量
module.exports = {
    entry: "./js/index.js",
    output: {
        path: path.resolve(__dirname,"build"),//存放的路径
        filename:"build.js"//打包后的文件名称
    }
}

entry为入口文件，即需要压缩的文件，output为压缩完以后代码的配置，由于webpack需要使用绝对路径，但是每个电脑上的绝对路不一样，所以需要引入一个模块来设置路径，path为设置的路径，filename为打包完后的文件名

webpack配置完后写模块化开发的js文档

在子模块写类

//定义学生类 
class Student{
    constructor(name, age) {
        this.name = name
        this.age
    }
}
//模块 在书写基本业务后 ，其他页面 需要的内容导出
export {Student}

由于模块化开发需要导出其他页面所以需要使用的东西，需要使用export关键词

然后再总的模块中引入子模块

使用import关键字

//import 自定义变量名称 from 目标对象
//在接收使用的时候直接解构出自己想使用的student引入
import {Student} from "./student.js"
let s1 = new Student()
console.log(s1)
console.log(Student)

最后把总模块引入html文件

在外部文件夹打开命令行，输入webpack就会在build中生成一个build文件，这就是通过webpack打包完成的文件，然后再打开html文件即可完成