Недавнее обучение работе было выставлено в режиме подписки. Применение в этой идеологической программе тоже очень широкое, напримерVueЭтот шаблон проектирования также широко используется во Vue, поэтому я расскажу вам о своем поверхностном понимании в сочетании с исходным кодом Vue.
Каково основное содержание модели публикации-подписки?
- Опубликовать функцию, выполнить соответствующий обратный вызов при публикации
- Функция подписки, добавить подписчиков, передать функцию, которая будет выполняться при публикации, может содержать дополнительные параметры
- Список подписчиков кэша и функции обратного вызова подписчиков
- Отписаться (обсуждается в каждом конкретном случае)
Глядя на это таким образом, это на самом деле похоже наJavaScriptВ событийной модели мы привязываем функцию события к узлу DOM, и при ее срабатывании выполняется приложение режима публикации-подписки.
Давайте сначала реализуем один самостоятельно в соответствии с приведенным выше содержанием.ObserverОбъекты следующие:
//用于存储订阅的事件名称以及回调函数列表的键值对
function Observer() {
this.cache = {}
}
//key:订阅消息的类型的标识（名称），fn收到消息之后执行的回调函数
Observer.prototype.on = function (key,fn) {
if(!this.cache[key]){
this.cache[key]=[]
}
this.cache[key].push(fn)
}
//arguments 是发布消息时候携带的参数数组
Observer.prototype.emit = function (key) {
if(this.cache[key]&&this.cache[key].length>0){
var fns = this.cache[key]
}
for(let i=0;i<fns.length;i++){
Array.prototype.shift.call(arguments)
fns[i].apply(this,arguments)
}
}
// remove 的时候需要注意，如果你直接传入一个匿名函数fn，那么你在remove的时候是无法找到这个函数并且把它移除的，变通方式是传入一个
//指向该函数的指针，而 订阅的时候存入的也是这个指针
Observer.prototype.remove = function (key,fn) {
let fns = this.cache[key]
if(!fns||fns.length===0){
return
}
//如果没有传入fn，那么就是取消所有该事件的订阅
if(!fn){
fns=[]
}else {
fns.forEach((item,index)=>{
if(item===fn){
fns.splice(index,1)
}
})
}
}
//example
var obj = new Observer()
obj.on('hello',function (a,b) {
console.log(a,b)
})
obj.emit('hello',1,2)
//取消订阅事件的回调必须是具名函数
obj.on('test',fn1 =function () {
console.log('fn1')
})
obj.on('test',fn2 = function () {
console.log('fn2')
})
obj.remove('test',fn1)
obj.emit('test')
Зачем использовать модель публикации-подписки?Ее преимущества:
- выполнитьРазвязка во времени(Асинхронная связь между компонентами, модулями)
- Развязка между объектами, отношения связи между объектами управляются объектами публикации и подписки.
модель публикации-подписки вVueприложения в
-
VueПрименение методов экземпляра: (текущая версия: 2.5.16)
- Портал документации
- портал исходного кода
- Выдержка из исходного кода: (представьте flow.js для статической проверки типов)
// vm.$on
export function eventsMixin (Vue: Class<Component>) {
const hookRE = /^hook:/
//参数类型为字符串或者字符串组成的数组
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
const vm: Component = this
// 传入类型为数组
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.$on(event[i], fn)
//递归并传入相应的回调
}
} else {
//
(vm._events[event] || (vm._events[event] = [])).push(fn)
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash lookup
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
}
return vm
}
// vm.$emit
Vue.prototype.$emit = function (event: string): Component {
const vm: Component = this
if (process.env.NODE_ENV !== 'production') {
const lowerCaseEvent = event.toLowerCase()
if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
tip(
`Event "${lowerCaseEvent}" is emitted in component ` +
`${formatComponentName(vm)} but the handler is registered for "${event}". ` +
`Note that HTML attributes are case-insensitive and you cannot use ` +
`v-on to listen to camelCase events when using in-DOM templates. ` +
`You should probably use "${hyphenate(event)}" instead of "${event}".`
)
}
}
let cbs = vm._events[event]
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs
const args = toArray(arguments, 1)
for (let i = 0, l = cbs.length; i < l; i++) {
try {
cbs[i].apply(vm, args)// 执行之前传入的回调
} catch (e) {
handleError(e, vm, `event handler for "${event}"`)
}
}
}
return vm
}
Vueтакже понялvm.$once(прослушать один раз); иvm.$off(отписаться), посмотреть как это реализовано можно в этом же файле.
-
VueПрименение в механизме обновления данных
- Наблюдайте за атрибутами каждого объекта, добавляйте его в контейнер подписчика Dependency (Dep) и выдавайте уведомление об изменении данных.
- Наблюдатель: слушатель/подписчик данных атрибута, как только данные изменятся, он уведомит директиву (директиву) о перекомпиляции шаблона и визуализации пользовательского интерфейса.
- Часть исходного кода выглядит следующим образом:Исходный портал-обозреватель
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that has this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
} else {
this.walk(value)
}
}
/**
* Walk through each property and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
// 属性为对象的时候,observe 对象的属性
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
- Объект Dep: контейнер подписчика, отвечающий за поддержку наблюдателя.портал исходного кода
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = [] //存储订阅者
}
// 添加watcher
addSub (sub: Watcher) {
this.subs.push(sub)
}
// 移除
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
// 变更通知
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
Примеры малых и средних приложений в работе
- Сценарий: апплет на основе Wepy, поскольку сам проект недостаточно сложен, чтобы использовать предоставленный
reduxУправление состоянием, но между разными компонентами (не ограничиваясь сборкой сыновей), связано с наличием асинхронной работы, поэтому объект, смонтированный на объекте Observer, в данном случае начало реализовано как часть механизма связи между шиной сборки:
wepy.$bus = new Observer()
// 然后就可以在不同的模块和组件中订阅和发布消息了
Пункты к сведению
Конечно, у модели публикации-подписки есть и недостатки.
- Само создание подписки потребляет память, после подписки на сообщение, может быть, никогда не будет публикации, а подписчик всегда существует в памяти.
- При разделении между объектами их отношения также будут скрыты глубоко в коде, что приведет к определенным затратам на обслуживание.
Конечно, существование шаблонов проектирования должно помочь нам решать проблемы в конкретных сценариях, и научиться использовать их в правильных сценариях — это самое важное.
Широкая реклама
Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.