优化代码

为什么要设计模式

Don’t Repeat Yourself - DRY原则

不要重复自己

代码级别重复

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

页面级别重复

类似页面做了很多次

MVC是什么

  • M - Model (数据模型)负责数据相关的任务
  1. m = {
  2.    data: { 程序需要操作的数据或信息 }，
  3.    create: { 增数据 },
  4.    delete: { 删数据 },
  5.    update: { 改数据},
  6.    get:{ 获取数据 } 
  7. }
  • V - View (视图) 负责所有用户界面
  1. v = {
  2.     el: 需要刷新的元素,
  3.     html: `<h1>M V C</h1>....显示在页面上的内容`
  4.     init(){
  5.        初始化元素
  6.     },
  7.     render(){ 刷新页面 }
  8. }
  • C - Controller (控制器)负责其他,负责监听用户事件，然后调用 M 和 V 更新数据和视图
  1. c = {
  2.    init(){
  3.       v.init() // View初始化
  4.       v.render() // 第一次渲染
  5.       c.autoBindEvents() // 自动的事件绑定
  6.    },
  7.    events:{ 事件以哈希表方式记录 }，
  8.    method() {
  9.       data = 改变后的新数据
  10.       m.update(data)
  11.    }，
  12.    autoBindEvents() { 自动绑定事件 }
  13. }

最小知识原则

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

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

引入一个模块需要引入js

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

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

代价

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

EventBus 有哪些 API

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

引入Jquery后 执行下面代码

  1. const eventBus = $(window)

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

触发事件

  1. eventBus.trigger('m:updated')

监听事件

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

取消监听

  1. eventBus.off('m:updated');

在网上搜的其他API

  1. _self.subscribeEvent
  2.     方法：subscribeEvent:function(event,fn,pointcut){}
  3.     描述：注册事件，并指定实现方法和插入点
  4.     参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾
  5.           fn：实现方法
  6.           插入点类型：after、overwrite、before
  1. _self.unSubscribeEvent
  2.     方法：unSubscribeEvent:function(event){}
  3.     描述：取消注册事件
  4.     参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾
  1. _self.fireEvent
  2.     方法：fireEvent:function(event){}
  3.     描述：触发某个具体事件，执行这个事件对于的实现方法队列
  4.     参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾
  5.     其他参数：可以增加一些后续参数

表驱动编程

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

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

  1.         function numbers(item) {
  2.             if (item === 1) {
  3.                 return '一'
  4.             } else if (item === 2) {
  5.                 return '二'
  6.             }
  7.         }
  9.         console.log(numbers(2));

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

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

我是如何理解模块化的

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