优化代码

为什么要设计模式

Don't Repeat Yourself - DRY原则

不要重复自己

代码级别重复

有相同的三行代码写了2遍

页面级别重复

类似页面做了很多次

MVC是什么

M - Model (数据模型)负责数据相关的任务

m = {
   data: { 程序需要操作的数据或信息 }，
   create: { 增数据 },
   delete: { 删数据 },
   update: { 改数据},
   get:{ 获取数据 } 
}

V - View (视图) 负责所有用户界面

v = {
    el: 需要刷新的元素,
    html: `<h1>M V C</h1>....显示在页面上的内容`
    init(){
       初始化元素
    },
    render(){ 刷新页面 }
}

C - Controller (控制器)负责其他,负责监听用户事件，然后调用 M 和 V 更新数据和视图

c = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
   },
   events:{ 事件以哈希表方式记录 }，
   method() {
      data = 改变后的新数据
      m.update(data)
   }，
   autoBindEvents() { 自动绑定事件 }
}

最小知识原则

引入一个模块需要引入html、Css、 js

引入一个模块需要引入html、js

引入一个模块需要引入js

你需要知道的知识越少越好

模块化为这一-点奠定了基础

代价

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

EventBus 有哪些 API

EventBus就是利用发布订阅者模式，达到任意之间的通信，让我们的代码书写变得简单。

引入Jquery后执行下面代码

const eventBus = $(window)

就能打印出EventBus　在原型上就有一些API，已经学到的API有 on（监听事件）、trigger（触发事件）、off（取消监听函数）

触发事件

eventBus.trigger('m:updated')

监听事件

eventBus.on('m:updated',()=>{v.render(m.data.n)})

取消监听

eventBus.off('m:updated');

在网上搜的其他API

_self.subscribeEvent
	方法：subscribeEvent:function(event,fn,pointcut){}
	描述：注册事件，并指定实现方法和插入点
	参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾
	      fn：实现方法
	      插入点类型：after、overwrite、before

_self.unSubscribeEvent
	方法：unSubscribeEvent:function(event){}
	描述：取消注册事件
	参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾

_self.fireEvent
	方法：fireEvent:function(event){}
	描述：触发某个具体事件，执行这个事件对于的实现方法队列
	参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾
	其他参数：可以增加一些后续参数

表驱动编程

当你看到大批类似但不重复的代码；把重要的数据做成哈希表，你的代码就简单了。

下面的代码输入一个小数返回大写，如果写入更多的数字，就会有更多的else if来操作，这样就显得麻烦。会有更简单的方法呀。

        function numbers(item) {
            if (item === 1) {
                return '一'
            } else if (item === 2) {
                return '二'
            }
        }

        console.log(numbers(2));

这里就用了表驱动编程。将所有的数字制作成一个hash表来。增加数字，就在items里面添加就是了。

        function numbers2(item) {
            let items = {
                1: '一',
                2: '二'
            }
            return items[item]
        }
        console.log(numbers2(1));

我是如何理解模块化的

一个网页有很多相似的功能或者多个网页有相似的功能，模块化就是将功能分离，然后再每个模块里面，又把数据，视图，控制分离。来做到，不用重复代码和在未来更好的阅读和维护代码。

MVC浅析