Javascript 设计模式 应用级讲解
首先npm init一路回车 新建webpack.dev.config.js,修改package.json文件,安装webpack-dev-server可以帮助你在代码发生变化后自动编译代码
修改package.json文件
"scripts": { "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development" },
webpack.dev.config.js
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: __dirname, filename: './release/bundle.js' // release 会自动创建 }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' // bundle.js 会自动注入 }) ], devServer: { contentBase: path.join(__dirname, "./release"), // 根目录 open: true, // 自动打开浏览器 port: 9000, // 端口 proxy: { '/api/*': { target: 'http://localhost:8880' } } }, module: { rules: [{ test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader' }] } }
package.json 依据上面的方式,安装以下依赖
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-latest": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^4.8.3", "webpack-cli": "^2.1.3", "webpack-dev-server": "^3.1.4" }, "dependencies": { "javascript-state-machine": "^3.0.1", "jquery": "^3.3.1" } }
面向对象三要素:封装、多态、继承,子类继承父类,封装对数据的权限和保密,多态,同一个接口不同的实现,不从事后台开发很难真正理解这几个概念。
class People { constructor(name, age) { this.name = name this.age = age } eat() { alert(`${this.name} eat something`) } speak() { alert(`My name is ${this.name}, age ${this.age}`) } } class Student extends People { //继承关键字extends constructor(name, age, number) { super(name, age) //super 传给父类执行 this.number = number } study() { alert(`${this.name} study`) } } let xiaoming = new Student('xiaoming', 10, 'A1') xiaoming.study() console.log(xiaoming.number) let xiaohong = new Student('xiaohong', 11, 'A2') xiaohong.study()
实际应用就是提取公共部分,复用代码。
关于封装,public完全开发、protected对子类开放、private对自己开放,目前es6还不支持。
相关推荐
gloria0 2020-10-26
yqoxygen 2020-06-02
逍遥友 2020-11-20
hellowordmonkey 2020-11-02
zyshappy 2020-08-16
pythonwangjunji 2020-08-16
Equation 2020-08-09
iamjiyu 2020-07-21
winxcoder 2020-07-18
lepton 2020-07-04
zzdadexiaoha 2020-06-28
ajuan 2020-06-25
tosim 2020-06-24
wghou 2020-06-21
yudiewenyuan 2020-06-21
JessePinkmen 2020-06-14
heimu 2020-06-12
limx 2020-06-11