Watch.JS

javascript 观察者模式
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 管和志
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

一个比较有意思的 js 库,可以为javascript的对象实现观察者模式,以往我们使用javascript实现的观察者模式都是通过使用回调函数配合dom上的event事件来操作的,而“Watch.js”可以为javascript的对象实现观察者模式,监听对象的变化。

用麻雀虽小五脏俱全来描述Watch.js比较合适。“观察者”模式是我们在开发的时候经常需要用到的。使用Watch.js那么我们就可以实现在“每当对象属性改变的时候,执行你的函数”。虽然有很多其他的库可以实现相同的功能,但是Watch.js却可以不改变你平时书写代码的方式,并且实现属性改变的监听功能。

watch.js目前主要可以做如下这些事情:

 1,监听对象上一个或多个属性的改变,当改变后触发自定义事件。
 2,批量观察一个对象上所有的属性,当有任何一个改变时,触发自定义事件。
 3,可以取消订阅观察
 4,你可以在你需要的时候,不用改变对象上的属性值,就可手动触发观察器。
 5,可以与jquery兼容

  • watch vue中,使用watch来响应数据的变化。并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态 使用 1.常用方法 <template> <div> <p>name: {{name}}</p> <p>name: <input type="text" v-model="name"></p> </div> </template>

  • 假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou

  • 前言 从事前端开发工作从实习开始算起到现在也一年多了,然后也只会三大流行框架之一的vue.js以及小程序开发,工作之余也只是偶尔看看书,补充补充知识。最近开始考虑跳槽的时候才发现自己还真的只是一个菜鸟,因此想好好静下心来好好学习,沉淀自己,写这个博客记录一下自己的学习历程。 背景 学习vue早期源码学习系列之一的时候看到了WatchJS这个库可以做到监听数据的变化,于是也想学着youngwind介

  • 介绍JS 里面的watch watch函数其实是有三个变量的,第一个参数是需要监视的对象,第二个参数是在监视对象发生变化时需要调用的函数,实际上watch还有第三个参数,它在默认情况下是false。 当第三个参数是false时,其实watch函数监视的是数组的地址,而数组的内容的变化不会影响数组地址的变化,所以watch函数失灵了。 用法(主要是讲监听数组) 1、当要监听数组的时候,需要把第三个参

  • handler方法和immediate属性 这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?我们需要修改一下我们的 watch 写法,修改过后的 watch 代码如下: watch: { firstName: { handler(newName, oldName) {

  • Vue.js 的深度 watch 对渲染速度的影响很大,因为它需要监听多层对象的变化,进而触发重新渲染。如果你想优化深度 watch 对渲染速度的影响,可以考虑以下几种方法: 使用计算属性:将深度 watch 替换为计算属性,这样可以减少监听的层数。 使用额外的变量:在数据变化时使用额外的变量,以减少 watch 对渲染速度的影响。 使用 lazy:将 watch 的 deep 选项设置为 fal

  • ```javascript watch: { $route: { immediate: true, //加上此配置之后,watch即可以在首次进入或刷新之后执行handler (),即初始化即可执行监听 handler (to, from) { //监听之后执行的回调 if (to.path === '/login-pc' && this.a

  • vue.js watch监听,vue.js 监听watch     ================================ ©Copyright 蕃薯耀 2018年12月06日 http://fanshuyao.iteye.com/   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue 监听watch</tit

  •     Vue.js中的事件处理方法可以根据用户的需要自定义,能通过单击事件、 焦点事件、 鼠 标事件等触发条件来触发,但是不能自动监听当前Vue实例对象的状态变化。为了解决上述问题Vue.js提供了watch状态监听功能,只要监听到当前Vue实例中的数据变化,就会调 用当前数据所绑定的事件处理方法。 <head> <meta charset="utf-8"> <title></title> <!

 相关资料
  • 是否有一种设计模式可以形成一个“复合”观察者/可观察者? 我的意思是我有一个可观察的,它在某个变化时通知它的监听器。 每个监听器也是一个可观察的,并通知它自己的监听器(在某个动作上,它做了哪个动作是由第一个可观察的通知触发的)。 这种观察者/可观察的“链接”作为设计是可以的,还是有一个标准的模式?

  • 主要内容:介绍,实现,Subject.java,Observer.java,BinaryObserver.java,OctalObserver.java,HexaObserver.java,ObserverPatternDemo.java当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知依赖它的对象。观察者模式属于行为型模式。 介绍 意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知

  • 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。 介绍 意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 主要解决:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作。 何时使用:一个对象(目标对象)

  • 观察者模式是软件设计模式的一种。在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。 定义一个目标构造函数,并实现绑定、解绑和触发等方法: function Subject() { this.events = {}; this.count = 0; }​ Subj

  • 问题 当一个事件发生时你不得不向一些对象发布公告。 解决方案 使用观察者模式(Observer Pattern)。 class PostOffice constructor: () -> @subscribers = [] notifyNewItemReleased: (item) -> subscriber.callback(item) for s

  • 简介 观察者模式(有时又被称为发布/订阅模式)是软件设计模式的一种。在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。 抽象目标类别 此抽象类别提供一个界面让观察者进行添附与解附作业。此类别内有个不公开的观察者串炼,并透过下列函式(方法)进行作业 添附(Attach):新增观察

  • 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。 介绍 意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 主要解决:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作。 何时使用:一个对象(目标对象)

  • 另一个我们之前提到过的模式就是观察者(发布/订阅)模式.这种模式下,系统中的对象可以在关注的事件发生的时候给其他对象发送消息,也可以被其他对象所通知。 jQuery核心库很多年前就已经提供了对于类似于发布/订阅系统的支持,它们称之为定制事件。 jQuery的早期版本中,可以通过使用jQuery.bind()(订阅),jQuery.trigger()(发布),和jQuery.unbind()(取消订