什么是设计模式

• 将通用的代码整合使用（一般而言比较抽象）

为什么要有设计模式

• Don't Repeat Yourself - DRY 原则

怎么算重复

代码级别的重复

• 把相同的几行代码写了几遍
• 应该选择重构它

页面级别

• 把类似的页面做了十遍
• 那么就该想出一个万金油写法

MVC 就是一个万金油

• 所有的页面都可以使用 MVC 来优化代码结构

MVC 是什么

• M - Model（数据模型）负责操作所有数据
• V - View（视图）负责所有 UI 界面
• C - Controller（控制器）负责其他

学习中遇到的知识

JS 引入 CSS

• import '名称.css'
• vscode 拼写检测插件：Code Spell Checker
• 引入 jQuery:

    // 方法一
    yarn init
    yarn add jquery
    
    // 方法二
    npm i jquery

• 接上面 JS 引入 jQuery：import $ from 'jquery
• 存入 localStorage：localStorage.setItem('存入的名称', 存入的变量)
• 初始化要存入 localStorage 的数据：localStorage.getItem('存入的名称')
• 初始化列表：ol, ul {list-style: none;}
• 滚动条像素：14-19px
• 模块化：把相关代码放到文件里，然后引用进来
• 监听父元素，操控子元素：

    const $tabBar = $('#app2 .tab-bar')
    
    $tabBar.on('click', 'li', (e)=>{
        // e.target
        const $li = $(e.currentTarget)
        // 获取点击元素的序列
        const index = $li.index()
        console.log(index)
    })

• toggleClass() 切换效果。如果不存在则添加类，如果已设置则删除之。
• 标记数据： data-index= "0"
• js 的代码不能以 ' [ ' 开头

抽象思维1

最小知识原则

• 引入一个模块需要引入 html、css、js
• 引入一个模块需要引入 html、js
• 引入一个模块需要引入 js
• 你需要知道的知识越少越好
• 模块化为这一点奠定基础

代价

• 这样做会使得页面一开始是空白的，没内容和样式
• 解决方法：加菊花、骨架、占位内容等

抽象思维2

view = render(data)

• 比起操作 DOM 对象，直接 render 简单多了
• 只要改变 data，就可以得到对应的 view

代价

• render 粗犷的渲染肯定比 DOM 操作浪费性能
• 可以用虚拟DOM，只更新该更新的地方

抽象思维3

以不变应万变

• 每个模块都可以用 m + v + c 搞定

代价

• 有时候会有多余的用不到的代码
• 有时候特殊情况不知道怎么变通，比如没有 html 的模块怎么做 MVC

eventBus 对象间通信

    const eventBus = $(window)
    
    // 需要监听的地方
    eventBus.on('xxx')
    
    // 需要触发的地方
    eventBus.trigger('xxx')

抽象思维4

表驱动编程

• 当你看到大批类似但不重复的代码
• 看看哪些数据才是重要的
• 把重要的数据做成哈希表

    events: {
        'click #add1': 'add',
        'click #minus1': 'minus',
        'click #mul2': 'mul',
        'click #divide2': 'div'
    }