类

代码：
在Model.js文件中：

  1. class Model{
  2.     //处于对象的自身上
  3.     constructor(options) {
  4.         this.data = options.data
  5.     }
  6.     //下面的函数是处于原型链中
  7.     create(){
  8.         console && console.error && console.error('你没有实现create')
  9.     }
  10.     delete(){
  11.         console && console.error && console.error('你没有实现delete')
  12.     }
  13.     update(){
  14.         console && console.error && console.error('你没有实现update')
  15.     }
  16.     get(){
  17.         console && console.error && console.error('你没有实现get')
  18.     }
  19. }
  21. export default Model

在app1.js文件中
代码：

  1. import Model from "./base/Model";
  3. const m = new Model({
  4.     data: {
  5.         n: parseInt(localStorage.getItem('n')) || 100
  6.     }
  7. })//对象里面放数据！
  8. m.update=()=>{
  9.     Object.assign(m.data, data)
  10.     eventBus.trigger('m:updated')
  11.     localStorage.setItem('n', m.data.n)
  12. }

用自身的函数覆盖原型链上函数

  1. //简化版的函数
  2. class Model{
  3.     //处于对象的自身上
  4.     constructor(options) {
  5.       //simplify function
  6.         ['data','update','create','delete','get'].foreach((key)=>{
  7.             if(key in options){
  8.                       this[key]=options
  9.               }
  10.         })
  11.       /*未简化的代码
  12.       this.data = options.data
  13.       this.update = options.data
  14.       this.create = options.create
  15.       this.delete = options.delete
  16.       this.get = options.get
  17.       */
  18.     }
  19.     //下面的函数是处于原型链中
  20.     create(){
  21.         console && console.error && console.error('你没有实现create')
  22.     }
  23.     delete(){
  24.         console && console.error && console.error('你没有实现delete')
  25.     }
  26.     update(){
  27.         console && console.error && console.error('你没有实现update')
  28.     }
  29.     get(){
  30.         console && console.error && console.error('你没有实现get')
  31.     }
  32. }
  33. export default Model

胶水层

image.png

继承

EventBus代码：

  1. import $ from 'jquery'
  2. class EventBus{
  3.     constructor() {
  4.         this._eventBus = $(window)
  5.     }
  6.     on(eventName,fn){
  7.         return this._eventBus.on(eventName,fn)
  8.     }
  9.     trigger(eventName,data){
  10.         return this._eventBus.trigger(eventName,data)
  11.     }
  12.     off(eventName,fn){
  13.         return this._eventBus.off(eventName,fn)
  14.     }
  15. }
  17. export default EventBus

Model代码：

  1. import EventBus from "./EventBus";
  3. class Model extends EventBus{
  4.         //处于对象的自身上
  5.         constructor(options) {
  6.             super()
  7.             const keys = ['data','create','delete','update','get']
  8.             keys.forEach((key)=>{
  9.                 if(key in options){
  10.                     this[key]=options[key]
  11.                 }
  12.             })
  13.         }
  14.         //下面的函数是处于原型链中
  15.         create(){
  16.             console && console.error && console.error('你没有实现create')
  17.         }
  18.         delete(){
  19.             console && console.error && console.error('你没有实现delete')
  20.         }
  21.         update(){
  22.             console && console.error && console.error('你没有实现update')
  23.         }
  24.         get(){
  25.             console && console.error && console.error('你没有实现get')
  26.         }
  27.     }
  30. export default Model

用法：

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

路由

image.png

程序的函数

console.dir()和console.log的区别：

  1. console.log()会在浏览器控制台打印出信息
  3. console.dir()可以显示一个对象的所有属性和方法

写代码时注意的地方：

1.写代码时不可以用”[“开头
原因：他会自动找上一行进行合并！
报错：

  1. (intermediate value)(intermediate value)[("data" , "create" , "delete" , "update" , "get")].forEach is not a function
  1. const fn=()=>[1,2,3,4]//函数返回一个数组
  2. fn()[0]
  3. answer：1

2.this.n中的n并不是函数！
当n变化的时候执行一个函数！

image.png