设计模式 面向对象（1）

1、学习内容概述

2、面向对象 ？

1、搭建开发环境

1、新建空文件夹 
2、npm 初始化 npm init -y 
3、新建一个 src文件夹 创建一个 index.js
4、安装 yarn add webpack webpack-cli --save-dev

    

5、简单配置一下 webpack 
module.exports = {
  entry: "./src/index.js", // 入口
  output: {
    path: __dirname, //当前文件
    filename: "./release/bundle.js", //打包后文件夹和文件
  },
};


6、scripts 需要配置一个 dev 指向刚才创建的config文件 
 "dev": "webpack --config ./webpack.dev.config.js --mode development"

7、执行 打包成功 这个 应该是最简单的webpack打包过程

8、安装 yarn add webpack-dev-server html-webpack-plugin --save-dev
9、根目录下新建 index.js  随意写一点内容就行
10、修改 dev-config文件 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js", // 入口
  output: {
    path: __dirname, //当前文件
    filename: "./release/bundle.js", //打包后文件夹和文件
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "./release"), //根目录下的release文件夹 打包后的文件
    open: true, //打开浏览器
    port: 9000,
  },
};

11、更改配置文件 使用 dev-server 
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
12、执行 yarn dev

• 执行 上面那个报错

• 查看官网 更改为 下面 static 那种表达即可

  devServer: {
    // contentBase: path.join(__dirname, "./release"), //根目录下的release文件夹 打包后的文件
    static: {
      directory: path.join(__dirname, "./release"),
    },
    open: true, //打开浏览器
    port: 9000,
  },

• 然后 yarn dev

• 非常nice

• 当更改 index.js 100--> 200 页面也会同步刷新

3、使用 babel 解析 es6

1、安装一堆插件

      yarn add babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

2、创建 .babelrc

• 添加 module

• 执行 后 查看

• 到此处 环境 ok es6处理也ok了

3、面向对象 ？

* class类（模版） 和 对象（new实例化出的实例 可有很多）

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

      eat() {
        console.log(`${this.name} eat some `);
      }

      speak() {
        console.log(`${this.name} has ${this.age} years old`);
      }
    }

    var xiaowang = new Person("jack", 18);
    xiaowang.eat();
    xiaowang.speak();

• 三要素

1、继承

• 继承的例子 重点在于constructor 和 super
• 继承 实际例子 xxx 组件 extends React.Component {} 继承自react 组件

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

      eat() {
        console.log(`${this.name} eat some `);
      }

      speak() {
        console.log(`${this.name} has ${this.age} years old`);
      }
    }

    class Student extends Person {
      constructor(name, age, number) {
        super(name, age);
        this.number = number;
      }

      study() {
        console.log(`${this.name} like study`);
      }

      speak() {
        console.log(`${this.name} also like speak`);
      }
    }

    var xiaoqiang = new Student("xiaojia", 18, "A6");
    xiaoqiang.study(); // xiaojia like study
    xiaoqiang.speak(); // xiaojia like study

• 需要注意的部分

2、封装

• 这个在 ts 中有效

• 可以在这个 网站 运行 ts

www.typescriptlang.org/zh/play?#co…

       class Person {
        name
        age
        protected weight
        private dog
      constructor(name, age, weight,dog) {
        this.name = name, this.age = age , this.weight = 120 , this.dog = 'ppx'
      }

      eat() {
        console.log(`${this.name} eat some `);
      }

      speak() {
        console.log(`${this.name} has ${this.age} years old`);
      }
    }

    class Student extends Person {
        number
        private friend
      constructor(name, age,weight, number, friend) {
        super(name, age,weight,dog);
        this.number = number
        this.friend = friend
      }

      study() {
        console.log(`${this.name} like study`);
      }

      speak() {
        console.log(`${this.name} also like speak`);
      }

      getWeight(){
          console.log(`get ok of ${this.weight}`)
      }

      getFriend(){
          console.log(`${this.friend}`)
      }

      getDog(){
          console.log(`${this.dog}`)
      }
    }

    var xiaoqiang = new Student("xiaojia", 18, 120,'A6', 'xiaoli');
    xiaoqiang.study(); // xiaojia like study
    xiaoqiang.speak(); // xiaojia like study
    xiaoqiang.getWeight()
    xiaoqiang.getFriend()
    xiaoqiang.getDog()

3、多态

• 定义 同一个 接口 在子类中可实现不同的功能

• 代码 示例

    class People {
      constructor(name) {
        this.name = name;
      }

      sayName() {
        console.log(this.name);
      }
    }

    // 都继承自People 但实例化后表现结果不一样
    let a = new People("a");
    a.sayName(); // a

    let b = new People("b");
    b.sayName(); // b

4、面向对象 实际案例 ?

*代码 演示一下

• 非常 nice 下面代码 起码学会了 2间事情

   1、面向对象在 jQuery 怎么应用的 ？
   2、如何实现 jQuery的思路 ？ 
   3、jQuery 就是一个类  ？
  

 <body>
    <p>啦啦啦-1</p>
    <p>啦啦啦-2</p>
    <p>啦啦啦-3</p>
  </body>
  <script>
    class jQuery {
      constructor(selector) {
        let slice = Array.prototype.slice;
        let dom = slice.call(document.querySelectorAll(selector)); // 拿到dom 并slice.call()转为 对象
        let len = dom ? dom.length : 0;
        for (let i = 0; i < len; i++) {
          this[i] = dom[i];
        }
        this.length = len;
        this.selector = selector || "";
      }

      append(node) {}
      addClass(name) {}
      html(data) {}

      // 省略更多 API
    }
    
    // 实例化 
    window.$ = function (selector) {
      return new jQuery(selector);
    };

    // test
    var $p = $("p");
    console.log($p); // jQuery {0: p, 1: p, 2: p, length: 3, selector: "p"}
    console.log($p.append); // ƒ append(node) {}
  </script>

5、为何使用 面向对象 ？

6、UML 类图 ？

• 动手试试

7、UML 类图 关系图（多个继承/关联关系） ？

• 演示代码

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

      saySomething(){}
    }

    class StudentA extends Person {
      constructor(name,houser) {
        super(name, house);
      }

      saySomething(){console.log('I am A ')}
    }

    class StudentB extends Person {
      constructor(name,house) {
        super(name, house);
      }

      saySomething(){console.log('I am B ')}
    }

    class House{
        constructor(city){
            this.city = city
        }
        showCity(){
            console.log(`${city}`)
        }
    }

• UML 类图 展示

8、总结 ?

1、开发前 画出 UML 类图 展示