Javascript의 관찰자 패턴에 대한 심층 설명(그래픽 튜토리얼)

게시-구독 패턴이라고도 알려진 관찰자 패턴은 가장 일반적으로 사용되는 디자인 패턴 중 하나입니다. 다음 글에서는 주로 Javascript의 관찰자 패턴 관련 자료를 심도 있게 소개합니다.

소개

관찰자 패턴은 게시/구독 패턴이라고도 하며 일대다 관계를 정의하여 여러 관찰자 개체가 동시에 특정 주제 개체를 모니터링할 수 있도록 합니다. 이 토픽 객체의 상태 모든 관찰자 객체는 변경 사항이 발생할 때 알림을 받아 자동으로 업데이트될 수 있습니다. 솔직히 말해서 약간 낮은 수준의 코드를 작성하지 않았다면 사용하지 않을 수도 있습니다. 그러나 이를 사용하면 코드가 더욱 유연하고 규칙적으로 만들어지고 중복 코드가 줄어들며 모듈 및 기능 개발이 쉬워집니다.

관찰자 패턴 사용의 이점:

1. 간단한 브로드캐스트 통신을 지원하고 구독한 모든 개체에 자동으로 알림을 보냅니다.

2. 페이지가 로드된 후 대상 객체는 관찰자와 쉽게 동적인 관계를 가질 수 있어 유연성이 높아집니다.

3. 대상 객체와 관찰자 간의 추상 결합 관계는 독립적으로 확장 및 재사용이 가능합니다.

소개

프론트엔드 비즈니스에서 가장 일반적으로 사용되는 곳은 바로 커스텀 이벤트일 것입니다.
실제로 브라우저의 이벤트도 관찰자 모드에 있습니다

p.onclick = function click() {
 console.log('click')
}

여기서 click 함수는 p의 클릭 이벤트를 구독합니다. 마우스를 클릭하면 이벤트가 게시되고 해당 함수가 실행됩니다. 이 기능 클릭은 관찰자입니다.

구체적인 이해

사실 코드 구현만 봐도 쉽게 이해할 수 있습니다. 하지만 모든 것이 연결되어 있습니다. 이러한 프로그래밍 모델의 설계도 생활 경험에서 비롯됩니다. 따라서 구체적인 이해도 매우 중요한 경험입니다.

결혼식의 예를 들어보겠습니다. 예를 들어, 당신의 좋은 친구가 결혼합니다. "결혼하는 것"은 매일 일어나는 것이 아니라 일생에 한두 번(어쩌면 그 이상) 일어나는 일입니다. 따라서 우리의 "그의 결혼식에 가는 것"은 절대 일어나지 않습니다. 매일, 그러나 특정 시간에만. 매일 그에게 '오늘 결혼해요? 제가 연회에 갈게요'라고 물어볼 수는 없잖아요. 한두번이라도 괜찮아 매일 물어봐 sb. 만약 당신이 파트너를 찾을 수 없는 싱글 남성이고, 매일 나에게 이런 질문을 한다면, 나는 당신을 죽이지 않을 것입니다. .

그러면 여기서 '알림' 이벤트를 공개해야 합니다.

저희는 관찰자로서 그의 '결혼' 이벤트를 구독했고, 그의 결혼식에 꼭 참석할 예정입니다. 그러면 나는 관찰자이고, '결혼식에 간다'는 그에 상응하는 행동이다. '결혼' 이벤트를 구독하면 뭘 해야 하는지 매일 물어볼 필요도 없고, 여자를 데리러 오고, 저녁 데이트를 하고, 영화를 보고, 데이트... 뭐든지 할 필요가 없어요.

결혼 ​​이벤트 올리자 나한테 알림이 왔는데, 특정 시간에 '결혼식 참석' 액션 기능을 하러 갔는데...

//模拟代码
//我订阅了'marry' 事件
wo.on('marry',function(){
 //去参加婚礼酒席
})
//然后他发布。比如浏览器的点击
// 对应的我的 function就会执行

디커플링/모듈 /function

사실 코드상으로는 퍼블리싱과 구독을 관리하기 위해 중간 서비스와 유사한 미들맨이 필요합니다.

예를 들어 브라우저의 이벤트 핸들러는 구독 인터페이스를 제공한 다음 '이벤트' 신호를 수신하여 이를 게시합니다. js 코드가 브라우저와 접촉하고 상호작용하도록 하세요. 그러나 원래 그것들은 서로 다른 두 가지였습니다.

제 생각에는 관찰자 패턴의 가장 큰 이점은 디커플링입니다. 이를 통해 코드를 함수와 모듈로 분리할 수 있어 더 명확해지고 개발 비용이 낮아지며 유지 관리가 더 쉬워집니다.

예:

1 우리 프로젝트의 뷰 표시 레이어와 모델(데이터 처리) 로직 레이어의 경우 먼저 페이지, ajax, 문자열 접합을 작성하고 함께 구성할 인터페이스를 요청한 다음 제공합니다. 돔. 어쩌면 인터페이스를 요청하고 뷰 표시를 담당하는 js 파일과 함수가 있을 수도 있습니다.

var xhr = new XMLHttpRequest ()
 xhr.open('get',url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 ps.innerHTML = &#39;<p>&#39; + this.response + &#39;</p>&#39;
 //
 }
 }
 xhr.responseType = &#39;json&#39;
 xhr.send(null)

사실 요청은 디스플레이 렌더링과 분리되어야 합니다.

//请求
function getData () {
 var xhr = new XMLHttpRequest ()
 xhr.open('get',url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 this.emit('渲染')
 // 发布
 }
 }
 xhr.responseType = 'json'
 xhr.send(null)
}
//渲染
function view () {}
xhr.on('渲染',view)

상태 코드 200에 직접 콜백을 배치하여 수행할 수도 있습니다. 하지만 서로 다른 작업을 처리하는 두 개의 렌더링 함수가 있는 경우 매번 다른 함수로 변경해야 합니까? 동일한 요청 프로세스를 다시 작성해야 합니까?

관찰자 용어로 말하자면

function view1 () {}
function view2 () {}
function view3 () {}
function view4 () {}
if(我要渲染view1) {
 xhr.on('渲染',view1) //订阅
 xhr.on('渲染',view2)
}else{
 xhr.on('渲染',view3)
 xhr.on('渲染',view4)
}

내 getData 함수는 데이터 요청만 담당하고 메서드를 추가할 수 있는 인터페이스를 노출한다는 장점이 있습니다. 이러한 방식으로 내 getData는 상황이 아무리 많아도 내 getData의 코드는 변경되지 않는 비교적 완전한 기능 모듈입니다.

때때로 우리는 비즈니스를 구현하고 새로운 기능을 추가하기 위해 이전에 작성한 코드를 변경하여 원래 기능 모듈이 인식할 수 없을 정도로 변경되는 경우가 많습니다.

그리고 중복된 코드도 많을 거예요.

프로세스? 아니면 모듈?

물론 훌륭하고 완전한 기능 모듈을 봉인하는 것은 상당히 어렵지만 적어도 시작은 해야 합니다.

메서드를 추가하고 이벤트 풀이 게시되면 실행하려면 구독하세요.

2. MV* 클래스 프레임워크

MVC也是一种设计模式，这里面也都应用了观察者。

他内部也都是各种发布订阅，好像是一个观察者模型，从而实现了一个模拟的内存中的dom改变，计算出那个DOM节点应该改变。当然具体实现要做好多事情…就不…

3、redux

简单实现一个createstore函数

//这是一个工厂函数，可以创建store
const createStore = (reducer) => {
 let state; // 定义存储的state
 let listeners = [];
 // getState的作用很简单就是返回当前是state
 const getState = ()=> state;
 //定义一个派发函数
 //当在外界调用此函数的时候，会修改状态
 const dispatch = (action)=>{
 //调用reducer函数修改状态，返回一新的状态并赋值给这个局部状态变量
 state = reducer(state,action);
 //依次调用监听函数，通知所有的监听函数
 listeners.forEach(listener => listener());
 }
 //订阅此状态的函数，当状态发生变化的时候记得调用此监听函数
 const subscribe = function(listener){
 //先把此监听 加到数组中
 listeners.push(listener);
 //返回一个函数，当调用它的时候将此监听函数从监听数组移除
 return function(){
  listeners = listeners.filter(l => l != listener);
 }
 }
 //默认调用一次dispatch给state赋一个初始值
 dispatch();
 return {
 getState,
 dispatch,
 subscribe
 }
}
let store = createStore(reducer);
//把数据渲染到界面上
const render = () => {
 document.body.innerText = store.getState();
}
// 订阅状态变化事件，当状态变化时用监听函数
store.subscribe(render);
render();
var INCREASE_ACTION = {type: 'INCREMENT'};
document.addEventListener('click', function (e) {
 //触发一个Action
 store.dispatch(INCREASE_ACTION);
})

4、在node 中的作用 大多数时候我们不会直接使用 EventEmitter，而是在对象中继承它。包括fs、net、 http 在内的，只要是支持事件响应的核心模块都是 EventEmitter 的子类。

实现一个可以发布订阅的类

'use strict'
class EmitterEvent {
 constructor() {
 //构造器。实例上创建一个事件池
 this._event = {}
 }
 //on 订阅
 on (eventName, handler) {
 // 根据eventName，事件池有对应的事件数组，
 就push添加，没有就新建一个。
 // 严谨一点应该判断handler的类型，是不是function
 if(this._event[eventName]) {
 this._event[eventName].push(handler)
 } else {
 this._event[eventName] = [handler]
 }
 }
 emit (eventName) {
 // 根据eventName找到对应数组
 var events = this._event[eventName];
 // 取一下传进来的参数，方便给执行的函数
 var otherArgs = Array.prototype.slice.call(arguments,1)
 var that = this
 if(events) {
 events.forEach((event) => {
 event.apply(that, otherArgs)
 })
 }
 }
 // 解除订阅
 off (eventName, handler) {
 var events = this._event[eventName]
 if(events) {
 this._event[eventName] = events.filter((event) => {
 return event !== handler
 })
 }
 }
 // 订阅以后，emit 发布执行一次后自动解除订阅
 once (eventName, handler) {
 var that = this
 function func () {
 var args = Array.prototype.slice.call(arguments,0)
 handler.apply(that, args)
 this.off(eventName,func)
 }
 this.on(eventName, func)
 }
}
var event = new EmitterEvent()
function a (something) {
 console.log(something,'aa-aa')
}
function b (something) {
 console.log(something)
}
 event.once('dosomething',a)
 event.emit('dosomething', 'chifan')
 //event.emit('dosomething')
// event.on('dosomething',a)
// event.on('dosomething',b)
// event.emit('dosomething','chifan')
// event.off('dosomething',a)
// setTimeout(() => {
// event.emit('dosomething','hejiu')
// },2000)

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS DOM元素常见增删改查操作详解

JS刷新页面方法总结

JS callback回调函数使用案例详解

위 내용은 Javascript의 관찰자 패턴에 대한 심층 설명(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!