js面向对象整理

webpack环境配置

npm init
npm i
安装webpack
npm i webpack webpack-cli -D
创建webpack.dev.config.js 定义入口文件出口文件 npm i 看效果

搭建服务输出编译模板
npm i webpack-dev-server -D
引入node内置模块 path
输出html模板
npm i html-webpack-plugin -D

es6 转码
//https://www.babeljs.cn/docs/setup#installation 官网
npm install --save-dev babel-preset-es2015 babel-core babel-loader babel-polyfill babel-preset-latest
babel-preset-env babel-plugin-transform-runtime
{
"presets": ["es2015", "latest", "env"],//设置转码规则
"plugins": []//设置插件
}

package.json

{
  "name": "json",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  "author": "snow",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "hot-module-replacement": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "babel-runtime": "^6.26.0"
  }
}

webpack.dev.config

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const htmlTemplateTitle = 'my-first-templateTitle';

//http://www.css88.com/doc/webpack2/configuration/dev-server/ 文档地址
module.exports = {
    //入口文件
    entry: './src/index.js',
    //出口文件
    output: {
        path: __dirname,
        filename: './release/boundle.js'
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader'
        }]
    },
    plugins: [
        //输出的html模板  https://github.com/jantimon/html-webpack-plugin#third-party-addons
        new htmlWebpackPlugin({
            title: htmlTemplateTitle,
            template: './index.html'
        }),
    ],
    //启动服务
    devServer: {
        //告诉服务器从哪里提供内容
        contentBase: path.join(__dirname, './release'),
        //自动打开浏览器
        open: true,
        //端口
        port: 9000,
    }
}

.babelrc

{
    "presets": ["es2015", "latest", "env"],
    "plugins": []
}

目录结构

## 面向对象 


##三要素  封装 继承 多态
# 概念------类   对象------实例


继承 子类继承父类
封装 数据的权限和保密   类似typescript 我们有一些私有的方法或者变量不需要被继承  公开
多态 同一接口不同实现



##应用举例
##面向对象意义

console.log("index.js")


//概念------类
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    getName() {
        return this.name;
    }
}


//对象------实例
// let snow = new Person('snow', '18');
// console.log(snow.getName());

//对象------实例
// let kris = new Person('kris', '18');
// console.log(kris.getName());

class People {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    eat() {
        console.log(`${this.name} eat sonmething`);
    }
    speak() {
        console.log(`${this.name} speak sonmething`);
    }
}

class Student extends People {
    constructor(name, age, number) {
        super(name, age);
        this.number = number;
    }
    study() {
        console.log(`${this.name} study`);
    }
}


let snow = new Student('snow', 17, '01');
snow.eat();
snow.study();
let kris = new Student('kris', 18, '02');
kris.speak();
kris.study();

猜你喜欢