仿照vue实现简易的MVVM框架(一)

代码github地址: https://github.com/susantong/myMVVM

主要的方法有:

  1. compile
    深度遍历前端界面的节点,将其复制进一个addQuene队列中

  2. pasers
    遍历所有的节点,并将节点包装成一个含有本节点、自定义属性及属性值的对象。要想实现双向绑定,重要的一步是,为自定义s-model的节点绑定事件(input框的双向绑定,监听oninput事件)

  3. observe
    可是说是最为关键的一步,它是MVVM框架实现双向绑定的基础。我们知道,是通过es5中的Object.defineproperty()去实现,劫持set和get属性,以此来通知所有订阅者做出改变。这一步也踩了一些坑,不过是一些比较小而基础的错误,以此看出基础的重要性,打好基础是关键啊!这里展示出关键代码:

    this.watch = function(obj, callback) {this.$observeObj = function() {var that = this;this.callback = callback;//console.log(Object.keys(obj));Object.keys(obj).forEach(function(prop) {var val = obj[prop];Object.defineProperty(obj, prop, {get: function() {return val;},set: function(newVal) {var temp = val;//console.log(newVal);val = newVal;//通知所有订阅者改变that.cache.forEach(function(item) {if (item[prop]) {item[prop] = newVal;}});that.callback();},enumerable: true,configurable: true});});}this.$observeObj();};this.observe = function() {this.watch(data, this.render);};
  1. render
    刚开始渲染或数据发生改变时需要重新渲染。这个函数的主要点在于,对于指令的实现,比如s-text,就是简单的数据展现,s-show需要操作css的display属性等,这些都可以通过查看官网去看细节,然后去操作数据,以达到相同的效果。

初期的效果已经实现,更多的指令需要去拓展,看懂了就不会觉得vue如此神秘了~

转载于:https://www.cnblogs.com/susantong/p/6883167.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/254537.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tomcat 启动时内存溢出

在tomcat_home/bin目录下找到catalina.bat,用文本编辑器打开,加上下面一行: set JAVA_OPTS -Xms1024M -Xmx1024M -XX:PermSize256M -XX:MaxNewSize256M -XX:MaxPermSize256M 解释一下各个参数: -Xms1024M:初始化堆内存…

@angular/platform-browser-dynamic

/** experimental */ export declare class JitCompilerFactory implements CompilerFactory {createCompiler(options?: CompilerOptions[]): Compiler; }export declare const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) > PlatformRef;…

牛人项目失败的总结

tom_lt: 遇到的失败项目比较多!让人郁闷!! 仔细分析原因,主要在于: 1.项目开始需求不明确。领导决定动手,就开始启动项目,造成和客户需要差距太大,导致失败; 2.需求变更没…

Android:日常学习笔记(8)———探究UI开发(5)

Android:日常学习笔记(8)———探究UI开发(5) ListView控件的使用 ListView概述 A view that shows items in a vertically scrolling list. The items come from the ListAdapter associated with this view. 1.关于ArrayAdapter&#xff1a; ArrayAdapter<T> 是 ListAd…

Geometric-Transformations图像几何变换halcon算子,持续更新

目录affine_trans_imageaffine_trans_image_sizeconvert_map_typemap_imagemirror_imagepolar_trans_image_extpolar_trans_image_invprojective_trans_imageprojective_trans_image_sizerotate_imagezoom_image_factorzoom_image_sizeaffine_trans_image 功能&#xff1a;把任…

hibernate inverse属性的作用

hibernate配置文件中有这么一个属性inverse&#xff0c;它是用来指定关联的控制方的。inverse属性默认是false&#xff0c;若为false&#xff0c;则关联由自己控制&#xff0c;若为true&#xff0c;则关联由对方控制。见例子&#xff1a; 一个Parent有多个Child,一个Child只能有…

分布式锁与实现(一)——基于Redis实现

概述 目前几乎很多大型网站及应用都是分布式部署的&#xff0c;分布式场景中的数据一致性问题一直是一个比较重要的话题。分布式的CAP理论告诉我们“任何一个分布式系统都无法同时满足一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和…

浅析软件项目管理中十个误区(来自:http://manager.csdn.net/n/20051213/30907.html)

随着计算机硬件水平的不断提高&#xff0c;计算机软件的规模和复杂度也随之增加。计算机软件开发从“个人英雄”时代向团队时代迈进&#xff0c;计算机软件项目的管理也从“作坊式”管理向“软件工厂式”管理迈进。这就要求软件开发人员特别是软件项目管理人员更深一步地理解和…

俩孩随笔

俩孩随笔 有人给我贴了技术男加奶爸的标签&#xff0c;不过这两项都不是我的强项。我深知自己最大的长处在哪&#xff1a;普通&#xff0c;扔人堆里&#xff0c;不是认不出来&#xff0c;而是压根看不着。想把事情做好&#xff0c;常常会用力过度。工作平平淡淡&#xff0c;需…

Inpainting图像修复halcon算子,持续更新

目录harmonic_interpolationinpainting_anisoinpainting_cedinpainting_ctinpainting_mcfinpainting_textureharmonic_interpolation 功能&#xff1a;对一个图像区域执行谐波插值。 inpainting_aniso 功能&#xff1a;通过各向异性扩散执行图像修复。 inpainting_ced 功能…

算法(伪代码)的书写

q ⇒ Queue&#xff08;队列&#xff09;, s ⇒ Set&#xff08;集合&#xff09;pq ⇒ PriorityQueue&#xff08;优先队列&#xff09;d ⇒ distance1. initialization 变量&#xff0c;数据结构的定义&#xff0c;及初始值的赋值&#xff1b;比如著名的 Dijkstra &#xff0…

第八次作业——系统设计与团队分配(个人)

团队作业地址&#xff1a;https://www.cnblogs.com/clio-hhhhhhl/p/9079157.html 个人码云地址&#xff1a;https://gitee.com/Cliohl/events 团队码云地址&#xff1a;https://gitee.com/Cliohl/zhuoyue 项目进展&#xff1a; 上礼拜进展&#xff1a;把部分前端页面实现出来&a…

深入理解Activity启动流程(二)–Activity启动相关类的类图

本文原创作者:Cloud Chou. 欢迎转载&#xff0c;请注明出处和本文链接 本系列博客将详细阐述Activity的启动流程&#xff0c;这些博客基于Cm 10.1源码研究。 在介绍Activity的详细启动流程之前&#xff0c;先为大家介绍Activity启动时涉及到的类&#xff0c;这样大家可以有大概…

Lines色线halcon算子,持续更新

目录bandpass_imagelines_colorlines_facetlines_gaussbandpass_image 功能&#xff1a;使用带通滤波器提取边缘。 lines_color 功能&#xff1a;检测色线和它们的宽度。 lines_facet 功能&#xff1a;使用面模型检测线。 lines_gauss 功能&#xff1a;检测线和它们的宽…

疑问+软件

问题 1学好软件工程需要打好哪些基础&#xff1f; 2怎样学好软件工程&#xff1f; 3软件工程的发展前景如何&#xff1f; 4软件工程具体能从事哪些职业&#xff1f; 5怎样准确的找到自己的定位&#xff1f; 软件 1支付宝 优点&#xff1a;支付便捷&#xff0c;转账方便&#xf…

成功的项目管理

内容提要 第一讲 项目与项目管理 1.项目的基本概念 2.项目管理的概念 3.项目管理的重要性 第二讲 项目管理的最新发展 1.现代项目管理的创立过程 2.现代项目管理的发展趋势 3.项目管理流行的原因 第三讲 信息时代的项目管理 1.信息时代的特点 2.信息时代项目管理的特点 3.按项目…

5月23日

11.1 LAMP架构介绍一、LAMP架构介绍LAMP是LinuxApache(httpd)MySQLPHP的简写&#xff0c;即把Apache、MySQL以及PHP安装在linux系统上&#xff0c;组成一个运行环境来运行PHP脚本语言&#xff0c;通常是网站。比如Google、淘宝、百度、51cto博客、猿课论坛等就是用PHP语言写出来…

Kotlin入门简介

Kotlin的“简历” 来自于著名的IDE IntelliJ IDEA(Android Studio基于此开发) 软件开发公司 JetBrains(位于东欧捷克)起源来自JetBrains的圣彼得堡团队&#xff0c;名称取自圣彼得堡附近的一个小岛(Kotlin Island)一种基于JVM的静态类型编程语言语法简单&#xff0c;不啰嗦 1 2…

LaTeX基础一:安装与基本操作

一、安装 1.首先下载texlive2015.iso文件。再在解压的镜像文件中运行install-tl-advanced.bat批处理命令。注意要关闭杀毒软件&#xff0c;否则可能会出现错误。2.可以修改一下安装路径&#xff0c;只要更改一个&#xff0c;其他也随之更改&#xff1a;3.把不要安装的语言包去掉…

Match图像匹配halcon算子,持续更新

目录exhaustive_matchexhaustive_match_mggen_gauss_pyramidmonotonyexhaustive_match 功能&#xff1a;模板和图像的匹配。 exhaustive_match_mg 功能&#xff1a;在一个分辨率塔式结构中匹配模板和图像。 gen_gauss_pyramid 功能&#xff1a;计算一个高斯金字塔。 mono…