VUE学习之--观察者模式

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

一、观察者图例

二、小说

第零章 序

十年一剑情如梦,赢得生前身后名。

不知何年。只知临近八月,天有恶龙而多暴雨,地有恶鬼而多冤魂。江湖之中,征战纷纷,风雨飘摇。

华山掌门乌鱼子和嵩山掌门蛙奇,不日将会面于嵩山天下第一武道会,争夺最后的天下第一。

第一章 练剑

华山之巅,丹崖怪石,削壁奇峰,日浮于云,仙气飘飘。忽闻剑气之声,一人一声巨喝,又一声巨响,只见剑劈石裂,花火四溅。何人如此练剑?观之,此人身长八尺,约摸花甲之年,面若童颜,乃华山掌门乌鱼子是矣。

“最近在江湖中淘得一本武学残卷。此处无人,正好偷练。”乌鱼子自言自语道。

第二章 二痴

话说江湖之中,人人皆知嵩山有二奇人,嵩山本门之人称嵩山二侠,江湖之中戏称“嵩山二痴”或“嵩山二傻”。那是何二人?一人剑法拳法狗屁不通,十八般兵器全然不会,却练的个耳聪目明,身轻如燕的本事,专门做些偷鸡摸狗的勾当,这便是嵩山首徒欧不色武。另一奇人,幼年贫困,又被板砖所伤,无钱医治,导致筋脉错乱,突发异能,脑容极大,可存天下奇闻,却无比老实木讷,有问必答,无问必不答,这便是嵩山二徒地普。

此时华山掌门乌鱼子练剑,自以为无人看见,却不料欧不色武藏于暗影之中,偷偷观察,仔细记忆。

欧不色武不通剑法,不明剑理,看乌鱼子练剑又有何用?原来在嵩山之中,有两门武艺最为高明。一门武艺乃嵩山剑法,可惜后人无继,此时已有名无实;另一门武艺名曰“提防婆婆题”,此功甚是奇妙,非拳非脚,非刀非剑,乃将全身内力集中于脑,以致过目不忘,记忆过人。人皆问:为何取名“提防婆婆题”?是为提房婆婆出算术题?或是写此功夫者,名曰提房婆婆,最后题个名,所以叫“提房婆婆题”?具体已不可考。

欧不色武每日白天观察乌鱼子练剑,每发现乌鱼子有所变化,便集中精神,运“提防婆婆题”功记忆之。又于夜色离去,将乌鱼子之变化细细告知地普。

第三章 偷剑

地普脑容极大,又老老实实。每日嵩山掌门蛙奇问之,华山剑法如何如何,华山掌门乌鱼子又如何如何,地普便将乌鱼子之所作所为一一道来。乌鱼子练了“白虹贯日”,地普便说:“练了白虹贯日”,乌鱼子练了“太岳三清风”,地普便说:“练了太岳三清风”。乌鱼子减肥了,地普便说:“减肥了”。乌鱼子胡子掉了,地普便说:“胡子掉了”。蛙奇给了乌鱼子一耳光,说:“胡子掉了你跟我说什么,说武功!”

蛙奇每日听得地普言语,而后,勤练乌鱼子所练之武功,觉乌鱼子剑法之妙,已是嵩山剑法不可及。“这个傻逼不知从哪里淘到的神奇武学,”蛙奇暗暗惊叹,“却有一部分,感觉不甚清楚。”蛙奇懊恼。

第四章 比剑

转眼之间,八月有八。天下第一武道会已至。天空电闪雷鸣而无雨,大地暗黑阴冷而无风。嵩山之上,人山人海。嵩山擂台高地三尺,乌鱼子与蛙奇站于擂台之上,余下之人皆围于擂台四周。本来如此多人,应是人声鼎沸,此时却是鸦雀无声,所有人的目光都聚集在擂台之上。

只听“嗡”一声,乌鱼子与蛙奇同时出剑。两人相斗,剑花交锋。观之两人之招式,一会儿气象森严,便似千军万马奔驰而来,长枪大戟,黄沙千里;一会儿轻灵机巧,恰如春日双燕飞舞柳间,高低左右,回转如意。众人之中,或不明剑理,或剑法未有此等境界,只觉这二人剑法精美,妙不可言。却有数人突然发出“咦”的一声,为何华山剑和嵩山剑都是同样的招式?

乌鱼子亦是惊奇万分,为何我所练之剑,和嵩山这个老贼一模一样?难道我练剑之时,有人偷看?只有蛙奇淡定自若,将剑法一一使来。如此下去,若蛙奇针对乌鱼子之剑法,突然变招,乌鱼子如何承受得了?

第五章 胡子

两片柳剑有见机,一来一往无丝缝。两人斗得三百余合不分胜负,各自退后两步,站住阵脚。

突然,蛙奇一口红血,众人观之,只见蛙奇面色惨白,双手颤抖,须臾之间便倒下了。

“我所练之剑法,和你一模一样,为何败的是我。”蛙奇痛哭道。

“你派人监视我之所学,却不见我身体之变化。”乌鱼子摸了摸下巴,只见乌鱼子的胡须已经几乎掉光了。

“你...”

“是的,若练此功...”乌鱼子谄媚一笑。

三、总结

小说中,乌鱼子(View)所练的剑法便是View层所对应的数据变化。欧不色武(Observer)指的是一个监听器,通过提防婆婆题(DefineProperty)监听数据变化。地普(Dep)是一个观察者列表,专门收集(蛙奇)Watcher所想监听的数据,当劫持到数据变更的时候,通过回调通知订阅者Watcher进行update操作。

Watcher决定了需要监听哪些数据(武功),他不关心的问题不监听(如胡须的问题)。当然这里也有个分模块监听的问题。

当然,拿小说中的文字和观察者模式一一对应是不现实的,小说就是写着好玩啦!

原文地址:https://www.cnblogs.com/wujinpeter/p/9443779.html

时间: 2024-11-06 23:20:25

VUE学习之--观察者模式的相关文章

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Vue学习笔记目录

本文为转载,原文:Vue学习笔记目录 Vue介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

vue学习笔记——简单的介绍以及安装(一)

学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html 1.简单的介绍 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版

学习设计模式--观察者模式(C++)

1. 说说简单的函数回调 首先说说一种简单的函数回调机制(一种通过获取对象的指针来进行函数的调用方法)以下是代码演示--- 这是观察者(被回调)部分: class Observer { public: // 抽象观察者的纯虚函数 virtual void UpdateMessage() = 0; }; class ConcreteObserver : public Observer { public: // 实现抽象类的纯虚函数 void UpdateMessage(); } void Conc

【Vue学习笔记1】基于Vue2.2.6版本

记录一下自己关于Vue学习的过程,便于以后归纳整理以及复习. 1.下载引用vue.js 下载: npm install vue ,然后引用. 或直接线上引用: <script src="https://unpkg.com/vue/dist/vue.js"></script> 2.基于vue2.26版本 MVVM模式,M(模型),V(视图),VM(VideoModel)

设计模式学习之观察者模式(Observer,行为型模式)(7)

1.观察者模式又叫做发布-订阅模式. 2.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 3.使用观察者模式的好处:维护相关对象间的一致性.我们不希望为了维持一致性而使各类紧密耦合,这样会给维护.扩展和重用都带来不便.什么时候使用观察者模式:当一个对象的改变需要同时改变其他对象的时候,而且它不知道具体有多少对象有待改变时,应该考虑使用观察者模式. private static void M