学堂在线部分 课笔记—Web前端攻城狮

学堂在线部分 课笔记

• Web前端攻城狮
• • 第七章 JavaScript进阶
  • • 7.1 组件封装
    • • .eg.：轮播图设计：
      • • 结构设计：HTML
        • 结构设计：CSS
        • API设计
        • 控制流设计
        • 整体代码见课件7_01_组件封装.pdf或者访问：https://code.h5jun.com/reba/embedtml （ 址截于课件内）
      • 优化1：插件化：
      • 优化2：模板化：
      • 优化3：组件模型：
    • 7.2各司其职
    • • 版本一：
      • • 整体代码见课件7_02_各司其职.pdf或者访问：https://code.h5jun.com/hefaj/embedtml（ 址截于课件内）
      • 版本二：
      • 版本三：
    • 7.3过程抽象
    • • 过程抽象：
      • 控制代码执行次数：
      • once：
      • 高阶函数：
      • 一些高阶函数：
      • • Throttle整体代码见课件7_03_过程抽象.pdf或者访问：https://code.h5jun.com/gale/1/embedtml（ 址截于课件内）
        • Debounced整体代码见课件7_03_过程抽象.pdf或者访问：https://code.h5jun.com/wik/3/embedtml（ 址截于课件内）
        • Consumer整体代码见课件7_03_过程抽象.pdf或者访问：https://code.h5jun.com/roka/embedtml（ 址截于课件内）
        • Consumer2整体代码见课件7_03_过程抽象.pdf或者访问：https://code.h5jun.com/bucu/3/embedtml（ 址截于课件内）
      • 命令式与声明式：
      • iterative：
      • • toggle (imperative)整体代码见课件7_03_过程抽象.pdf或者访问：https://code.h5jun.com/tuda/2/embedtml（ 址截于课件内）
        • toggle (declarative)整体代码见课件7_03_过程抽象.pdf或者访问：https://code.h5jun.com/nal/3/embedtml（ 址截于课件内）
        • toggle (三态)整体代码见课件7_03_过程抽象.pdf或者访问：https://code.h5jun.com/foqo/2/embedtml（ 址截于课件内）
  • 第八章 前端调试
  • • 8.1前端调试（1）
    • • 01页面调试
      • • 1.Elements
        • 2.Console
        • 3、Source
        • 4、Network
        • 5、Application
        • 6、模拟与仿真
        • 7、移动真机调试
      • 02审查 站性能
      • 03监控性能和 错
      • • 1.错误收集
        • 2.性能数据收集：
        • 3.部署位置
  • 第九章 络技术基础
  • • 9.1 URL & HTTP协议
    • • 概览
      • 01 URL
      • • HTTP URL：
        • URL示例（清华大学部分端口 示例）：
        • HTTP URL基本结构：
        • 绝对URL与相对URL：
        • 常见应用：
      • 02 HTTP协议
      • • 1.请求消息格式
        • 2.响应消息格式
        • 方法：
        • 状态码
        • HTTP Headers
        • HTTP Body
        • 实体头 Content-Type
        • 请求头 Cookie
        • 响应头 Set-Cookie
        • Cookie安全策略
        • 浏览器同源策略（Same-origin policy）
        • 同源策略限制范围
        • 跨域 HTTP 请求
      • 03 DNS
      • • 域名（Domain Name）
        • 域名结构
        • 购买域名
        • 因特 域名空间
        • hosts文件（DNS的前身）
        • DNS服务器（Name Server）
        • DNS服务器的基本工作
        • hosts文件和DNS的关系
        • DNS解析过程
        • DNS预解析
      • 04 TCP/IP协议栈
      • • 协议栈
        • 套接字(socket)
        • 收发数据
      • 05 TLS/SSL
      • • HTTPS
        • TLS/SSL
        • HTTPS 的优势
        • 混合内容（Mixed Content）
  • 第十一章 前端工程化
  • • 11.1 ESLint基础
    • • 01 解决什么问题
      • 02 工作原理
      • 03 如何使用
      • • （1）安装和初始化
        • （2）配置规则
        • • 警告级别：
          • 全局变量：
        • （3）检验代码
      • 发展趋势：
    • 11.2 git基础
    • • 01 什么是git
      • • Git与之前的版本控制软件的差异
        • Git的简史
      • 02 基本原理
      • • 对象状态
        • 1）对象数据库
        • 2）树对象
        • 3）提交对象
        • 4）引用对象
        • 5）git对象
      • 03 常见操作
      • • 如何提交变更
        • 临时保留修改
        • 撤销修改
        • 分支管理
        • 分支合并
        • 与远程协作

Web前端攻城狮

第七章 JavaScript进阶

7.1 组件封装

1.组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

.eg.：轮播图设计：

结构设计：HTML

? 首先设计HTML结构。轮播图是一个典型的列表结构，我们可以使用无序列表

• 元素来实现。

结构设计：CSS

1.使用css绝对定位将图片重叠在同一位置
2.轮播图切换的状态使用修饰符（modifier）
3.轮播图的切换动画使用 css transition

API设计

API设计应保证原子操作，职责单一，满足灵活性。
getSeletedItem() 可以将当前轮播到的图片元素获取到
getSelectedItemIndex() 当前播放到几张图了，获得下标
slideTo() 指定播放到某一张图片的1位置去
slideNext() 结合slideTo()
slidePrevious() 结合slideTo()

控制流设计

设置控制结构，响应用户操作。可以使用自定义事件来解耦行为。

优化2：模板化：

将HTML模版化，更易于扩展。