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 类图 展示
