day188-MyVue-搭建基本架构

要点

  1. 发布订阅模式
  2. Vue基本架构,文件目录
  3. 架构细化,Dep.js、index.html、main.js、Watcher.js、Observer.js
  4. vue.js-获取data等,构建入口文件

发布订阅模式

class SimpleEvent {
constructor () {
this.listenerList = []
}
listen (listener) { // 订阅
this.listenerList.push(listener)
}
trigger () { // 发布
for (var i = 0; i < this.listenerList.length; i++) {
// this.listenerList[i].call(this)
this.listenerList[i].update()
}
}
}

var myEvent = new SimpleEvent()

// myEvent.listen(function () {
// console.log('谁订阅了我')
// })
// myEvent.trigger()

let eventObj = {
update () {
console.log('订阅之后更新了')
}
}

myEvent.listen(eventObj)
myEvent.trigger()

// 订阅之后更新了

Vue基本架构

MyVue
|
├─index.html # 页面
├─main.js # new Vue 实例化vue
├─vue.js # vue 入口文件
├─Dep.js # 发布订阅
├─Watcher.js # 订阅的事件,即Dep中listen(subs)的subs
├─Comlier.js # 模板编译,处理html文件相关数据
└─Observer.js # 观察者,set、get方法,绑定数据

架构细化

Dep.js


展开代码

class Dep {
constructor () {
this.listenerList = []
}
/**
* subs 传入Watcher,知道谁在监听
* @param {*} subs
*/
sub (subs) {
this.listenerList.push(subs)
}
notify () {
for (var i = 0; i < this.listenerList.length; i++) {
this.listenerList[i].update()
}
}
}

export default Dep


index.html


展开代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" v-model="message">
<br/>
{{message}}
<script src="bundle.js"></script>
</body>
</html>


main.js


展开代码

import MyVue from "./Vue";

new MyVue({
el: '#app',
data: {
message: 'my binding vue'
}
})


Watcher.js


展开代码

/**
* 订阅的人附到Dep
*/
class Watcher {
constructor () {}
}

export default Watchers


Observer.js


展开代码

/**
* 观察者,需要观察到的实例属性,通过set、get把数据发布者订阅者绑定在一起
*/
class Observer {
constructor () {}
}

export default Observer


Vue.js

获取data等
Vue.js


展开代码

import Observer from './Observer'
import Complier from './Complier'

class Vue {
constructor (options) {
// 拿到内部
this.$options = options
this.$el = this.$options.el
this._data = this.$options.data

// 绑定数据
new Observer(this._data)
// 编译,挂载
new Complier(this.$el, this)

// data上每个属性都做转换
Object.keys(this._data.forEach(key => {
this._proxy(key)
}))
}
// 函数解决调繁琐调用Vue.$options.data.message
_proxy (key) {
var self = this
Object.defineProperty(this, key, {
get () {
return self.data[key]
},
set (value) {
self.data[key] = value
}
})
}
}

export default Vue


文章作者: lmislm
文章链接: http://lmislm.com/2019/07/20/2019-07-20/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog