JavaScript 高级_day01 day01_JavaScript高级

JavaScript面向对象 面向对象编程介绍ES6中的类和对象类的继承面向对象案例 面向对象编程介绍ES6中的类和对象类的继承面向对象案例 要点提示 JavaScript面向对象导读 掌握程度 了解 1 1JavaScript面向对象对象导读 面向对象与面向过程的概念面向对象与面向过程的比较 要点提示 面向对象编程介绍 掌握程度 理解 1 2面向对象编程介绍 面向过程就是分析出解决问题所需要的步骤 然后用函数把这些步骤一步一步实现 使用的时候再一个一个的依次调用就可以了 面向对象是把事务分解成为一个个对象 然后由对象之间分工与合作 两者比较面向过程性能比面向对象高 适合跟硬件联系很紧密的东西 但是不易维护 不易复用 不易扩展 面向对象易维护 易复用 易扩展 由于面向对象有封装 继承 多态性的特性 可以设计出低耦合的系统 使系统更加灵活 更加易于维护 但是性能比面向过程低 1 3面向对象和面向过程概念总结 课堂问答 知识总结 面向对象编程介绍ES6中的类和对象类的继承面向对象案例 类和对象的区别 要点提示 类和对象 掌握程度 了解 2 1类和对象 对象是由属性和方法组成的 是一个无序键值对的集合 指的是一个具体的事物两者比较在ES6中新增加了类的概念 可以使用class关键字声明一个类 之后以这个类来实例化对象 类抽象了对象的公共部分 它泛指某一大类 class 对象特指某一个 通过类实例化一个具体的对象 2 2类和对象的区别总结 课堂问答 知识总结 类的创建通过创建的实现实例的生成 要点提示 创建类和生成实例 掌握程度 应用 2 3创建类和生成实例 练习 创建明星类并生成一个实例 提示 class关键字创建一个类在类中使用constructor来放置属性通过new关键字完成实例的创建 5分钟 2 4创建明星类并生成一个实例 创建明星类并生成一个实例 为类添加共有方法 并能使用实例访问 要点提示 类中添加共有方法 掌握程度 应用 2 5类中添加共有方法 练习 在创建明星类的基础上添加方法 提示 class关键字创建一个类在类中使用constructor来放置属性为类添加一个方法 注意没有逗号隔开通过new关键字完成实例的创建 3分钟 2 6在上一个案例创建的明星类添加方法 创建明星类并添加方法后创建实例 面向对象编程介绍ES6中的类和对象类的继承面向对象案例 使用extends进行类的继承使用super调用父类的构造函数 要点提示 类继承extends和super关键字 掌握程度 应用 3 1类继承extends和super关键字 extends关键字可以实现子类继承父类super可以实现子类继承父类的方法和构造函数 3 2extends和super关键字总结 课堂问答 知识总结 使用super调用父类的构造函数了解继承属性方法的查找原则 要点提示 super调用父类普通函数以及继承中属性方法查找原则 掌握程度 应用 3 3super调用父类普通函数以及继承中属性方法查找原则 super关键字可以调用父类普通函数和构造函数继承中的属性或者方法查找原则四个字 就近原则 3 4super总结 课堂问答 知识总结 super的放置位置 要点提示 super必须放到子类this之前 掌握程度 应用 3 5super必须放到子类this之前 练习 子类继承父类中的属性和方法 提示 class关键字创建一个类使用extends和super子类继承父类的属性和方法注意super的位置 10分钟 3 6属性与方法的继承案例 属性与方法的继承案例 定义类和创建实例顺序问题类中的共有属性和方法this问题 要点提示 使用类2个注意点 掌握程度 应用 3 7使用类2个注意点 this指向问题 要点提示 类里面this指向问题 掌握程度 应用 3 8类里面this指向问题 在ES6中类没有变量提升 所以必须先定义类 才能通过类实例化类里面的共有的属性和方法一定要加this使用this问题constructor里面的this指向的是创建的实例对象方法中的this指向不清楚 只有在调用的时候才清楚 this指向调用者 3 9继承注意问题 课堂问答 知识总结 练习 子类继承父类中的属性和方法 并且为子类添加自己的方法 提示 class关键字创建一个父类使用extends和super子类继承父类的属性和方法为子类添加自己的方法注意super的位置和this 10分钟 3 9子类继承父类属性和方法 并扩展子类方法 子类继承父类属性和方法 并扩展子类方法案例 上午复习 用哪个关键字创建类 子类如何继承父类关键字 调用父类中的构造函数与普通函数关键字是 JavaScript高级01天上午复习 上午复习 用哪个关键字创建类 class 子类如何继承父类关键字 extends 调用父类中的构造函数与普通函数关键字是 super JavaScript高级01天上午复习 面向对象编程介绍ES6中的类和对象类的继承面向对象案例 分析整体页面结构布局分析案例的切换 修改 添加 删除等功能 要点提示 面向对象tab栏 思路分析以及布局介绍 掌握程度 了解 4 1面向对象tab栏 思路分析以及布局介绍 4 2面向对象tab栏案例布局与功能总结 课堂问答 知识总结 结构整体布局上下结构上结构中分左右需求点击tab栏 可以切换效果点击 号 可以添加tab项和内容项 点击x号 可以删除当前的tab项和内容项 双击tab项文字或者内容项文字 可以修改里面的文字内容 利用面向对象的方式实现切换 增加 删除 修改模块的划分初步实现点击 要点提示 面向对象tab栏 模块划分 掌握程度 应用 4 3面向对象tab栏 模块划分 定义一个tab的类 为该类添加切换 添加 删除 修改方法实例化对象 获取到需要操作的元素 整个个容器 tab标题栏 tab内容 添加初始化方法 为tab标题绑定点击事件获取到对应的下标 4 4模块划分总结 课堂问答 知识总结 练习 实现tab栏类的定义 并初始化 添加切换 添加 删除 修改方法 并获取需要操作的元素绑定事件 提示 定义一个tab的类 为该类添加切换 添加 删除 修改方法实例化对象 获取到需要操作的元素 整个个容器 tab标题栏 tab内容 添加初始化方法 为tab标题绑定点击事件获取到对应的下标 5分钟 4 5定义tab类添加方法 定义tab类并添加方法 实现点击每个标题 切换内容的功能排他思想注意this指向问题 要点提示 面向对象tab栏 切换功能模块 掌握程度 应用 5 1面向对象tab栏 切换功能模块 为tab标题绑定的事件触发切换功能的方法在切换的方法中将点击的tab标题添加激活的类样式 为当前点击的tab标题对应的content元素添加激活的类样式需要使用排他先将所有的激活样式清除 再为点击的元素添加单独定义一个清除所有元素激活的方法因为this指向发生了变化 需要先将this进行保存 5 2切换功能总结 课堂问答 知识总结 练习 实现点击tab标题对应的tab内容切换效果 提示 为tab标题绑定的事件触发切换功能的方法在切换的方法中将点击的tab标题添加激活的类样式 为当前点击的tab标题对应的content元素添加激活的类样式注意this指向的修改 5分钟 5 3切换功能练习 切换功能练习 点击添加按钮 实现标题栏的添加注意this指向的问题insertAdjacentHTML方法的作用 将指定的文本解析问html结构插入到dom中 要点提示 面向对象tab栏 添加功能模块 上 掌握程度 应用 5 4面向对象tab栏 添加功能模块 上 为添加按钮绑定点击事件创建新的tab标题 并将把创建标题追加到对应的父元素中 利用insertAdjacentHTML 可以直接把字符串格式元素添加到父元素中 5 5添加功能 标题的添加总结 课堂问答 知识总结 初步实现标题与内容的添加排他思想 要点提示 面向对象tab栏 添加功能模块 中 掌握程度 应用 5 6面向对象tab栏 添加功能模块 中 获取到tab内容的父元素在添加的方法中创建新的tab内容 并将把创建的元素利用insertAdjacentHTML 追加到对应的父元素中 因为添加也要做排他处理 所有需要在添加方法中调用清除激活类样式的方法 5 7添加功能 内容的添加总结 课堂问答 知识总结 练习 实现点击 添加标题和内容功能 提示 为添加按钮绑定点击事件创建新的tab标题和新的tab内容 并将把创建的两个元素利用insertAdjacentHTML 追加到对应的父元素中注意清除之前所有兄弟元素的激活类样式 5分钟 5 8添加功能练习 添加功能练习 解决新增元素多个激活类样式同时出现的bug 要点提示 面向对象tab栏 添加功能模块 下 掌握程度 应用 6 1面向对象tab栏 添加功能模块 下 因为添加过后的tab标题和内容未及时更新 会出现多个激活的bug单独定义一个更新的方法在初始化的时候调用在点击添加的时候再次调用初始化的方法 6 2添加功能 内容的添加总结 课堂问答 知识总结 练习 完美实现实现点击添加功能 提示 因为添加过后的tab标题和内容未及时更新 会出现多个激活的bug单独定义一个更新的方法在初始化的时候调用在点击添加的时候再次调用初始化的方法 5分钟 6 3添加功能bug解决练习 添加功能bug解决练习 为每一个标题的删除按钮绑定点击事件注意索引的查找和事件冒泡获取到对应的点击的标题的索引要在更新的方法中实时的获取标题关闭按钮的数量 要点提示 面向对象tab栏 删除功能模块 上 掌握程度 应用 6 4面向对象tab栏 删除功能模块 上 获取所有tab标题的x按钮并为每一个tab标题的x号绑定点击事件 一定记得是在更新的方法中获取 否则新添加的tab栏获取不到 代码会报错 在tab类的删除方法中处理 点击x获取对应的索引 注意获取的索引号是当前x号的父元素的索引 要读取parentNode index因为tab标题本身有点击事件 x号的点击事件会向上传递 需要阻止事件冒泡 6 5删除功能 获取点击当前的索引总结 课堂问答 知识总结 练习 为每一个tab标题的x绑定点击事件 获取当前x的父元素的索引 提示 获取到所有的按钮循环绑定点击事件 注意获取的位置 点击当前按钮获取索引号 获取的是当前元素的父元素的索引号 注意事件冒泡的处理 5分钟 6 6删除功能获取当前索引练习 点击x按钮获取索引 要点提示 面向对象tab栏 删除功能模块 中 掌握程度 应用 6 7面向对象tab栏 删除功能模块 中 根据索引删除对应的标题的内容设置删除当前的标题后让前一个标题高亮 将记录下来的索引找到对应的tab标题和tab内容删除重新初始化tab标题与tab内容的数量优化 点击删除选中状态的tab的标题后让前一个tab标题选中将索引自减手动调用click事件 6 8删除功能 删除对应的标题与内容总结 课堂问答 知识总结 删除的标签是未激活状态的状态 原来选中状态的标签的激活样式不变 要点提示 面向对象tab栏 删除功能模块 下 掌握程度 应用 7 1面向对象tab栏 删除功能模块 下 如果删除的tab标题未激活 那么原来选中激活的tab标题不变判断当前有没有没选中的tab标题 有就直接终止代码执行 7 2删除功能 删除未激活的标题总结 课堂问答 知识总结 练习 为每一个tab标题的x绑定点击事件 删除对应的tab标题和tab内容 提示 点击删除选中状态的tab的标题后让前一个tab标题选中如果删除的tab标题未激活 那么原来选中激活的tab标题不变 5分钟 7 3删除功能练习 点击x按钮获取索引 修改功能的实现为标题添加双击功能 在标题中生成一个文本框 要点提示 面向对象tab栏 编辑功能模块 上 掌握程度 应用 7 4面向对象tab栏 编辑功能模块 上 在更新的方法中获取到所有的盛放文本的span标签通过遍历绑定双击事件dblclick触发编辑的方法在编辑的方法中首先禁止选中文本使用window getSelection window getSelection removeAllRanges document selection empty 在当前span中创建一个文本框 7 5编辑功能 双击标题文字生成文本框总结 课堂问答 知识总结 练习 点击包裹文字的span修改内容 提示 获取到所有包裹文本的span绑定双击事件 对应触发类中的编辑方法在编辑方法中设置禁止选中文本生成一个文本框 5分钟 7 6编辑功能修改文本练习 编辑功能修改文本 将生成的文本框的值设置为标题的原有值当文本框失去焦点的时候将文本框的值赋值给标题 要点提示 面向对象tab栏 编辑功能模块 中 掌握程度 应用 7 7面向对象tab栏 编辑功能模块 中 在编辑方法中先将之前span标签的文字存储 然后将存储的文字赋值给文本框的value值并且文本默认选中 调用select 方法当文本框失去焦点的时候 将修改的内容设置给span 7 8编辑功能 实现tab标题的修改总结 课堂问答 知识总结 实现回车完成标题文本的修改