搭建开发环境
webpack-dev-server 配置
babel 安装和配置
1 定义
面向:oriented(朝向) Object Oriented(OO)
面向过程就是oriented progress
过程和函数的区别就是过程没有返回值
类就像是一个模板,我们可以通过这个模板定义很多有共性的对象
一个类包含属性(名词)、构造函数、方法(动词)
new一个类得到一个实例,这个实例就是一个对象
2 面向对象三要素
1 继承
子类继承父类 Class Student extends People。
优点:把公共的方法抽离出来,提高复用,减少冗余
父类 – 人(名字,年龄,吃饭)
子类 – 学生(学号,学习)
class Person{ constructor (name,age){ this.name=name this.age=age } getName(){ return this.name } getAge(){ return this.age } } class Student extends Person{ constructor (name,age,number){ super(name,age) this.number=number } getNumber(){ return this.number } } let p = new Person('安安') let xm= new Student('小明',18,20) console.log(p.getName()) console.log(xm.getName()) console.log(xm.getAge()) console.log(xm.getNumber())
2 封装
数据的权限和保密,封装的三个关键词public(完全开放)、protected(对子类开放)、private(对自己开放)。TS可以实现三种属性类型。
优点:减少耦合,不该外露的不外露,利于数据、接口的权限管理。
下面使用ts的语法举例:
class People{ name age // 默认public protected weight // 只对子类开放 } class Student extends People{ number private girlfriend // 只有类的内部可以访问 constructor(name, age, number){ super(name, age) this.number = number this.girlfreind = ‘xiaoli' } } let xiaoming = new Student(‘xiaoming’,10,’A1’) xiaoming.weight //可以访问 xiaoming.girfriend //报错
3 多态
同一接口不同实现
例如父类有个公共的sayName方法,2个子类可以同时调用这个公共方法,来实现不同的操作。比如打印出各自的姓名。
代码举例:
class Person { constructor(name){ this.name = name } sayName(){ console.log('I am Person') } } class A extends Person{ constructor(name){ super(name) } sayName(){ console.log('I am A') } } class B extends Person{ constructor(name){ super(name) } sayName(){ console.log('I am B') } } let a = new A() let b = new B() a.sayName() b.sayName()
优点:保持子类的开放性和灵活性,面向接口编程(去学JAVA)。
3 面向对象的应用案例
实现一个jquery的选择器
class jQuery{ constructor(seletor){ let slice =Array.prototype.slice let dom = slice.call(document.querySelectorAll(seletor)) let len = dom?dom.length:0 for(let i = 0; i < len; i++){ this[i] = dom[i] this.length = len this.seletor = seletor || '' } } append(node){ } addClass(name){ } html(data){ } } export default function (selector){ return new jQuery(selector) }
4 面向对象的意义
程序执行遵循顺序、判断、循环、goto(被淘汰) ——结构化
面向对象的意义就是数据结构化
对于计算机来说结构化的才是最简单的,比如DOM树
编程应该是简单和抽象