JS自运行函数的写法和MVVM框架数据驱动的底层逻辑
1.JS自运行函数的写法
( function(){ console.log(111)} )( )
!function(){ console.log(111) }()
( function(){}() )
2,MVVM框架数据驱动的底层逻辑
用到的最底层逻辑为:
var cc = {bb: 6}
Object.defineProperty(cc,'bb',{
enumerable: true,
configurable: true,
get: function(val){return val},
set: function(newVal){console.log(newVal)}
})
cc.bb = '哈哈'
控制台输出‘哈哈’,
实现双向数据绑定,首先要对数据进行数据监听,需要一个监听器Observer,监听所有属性。如果属性发生变化,会调用setter和getter,再去告诉订阅者Watcher是否需要更新。由于订阅者有很多个,我们需要一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理。还有,我们需要一个指令解析器Complie,对每个元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或绑定相应函数。当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。
JS自运行函数的写法和MVVM框架数据驱动的底层逻辑的更多相关文章
- 剖析手写Vue,你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- vue.js学习笔记(一):什么是mvvm框架,vue.js的核心思想
一:MVVM框架 MVVM框架的应用场景: 1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...
- js自运行函数
学习闭包的基础知识: 函数声明 function fn(){ //这里是代码 }; fn(); //运行fn函数 与上面等价 var fn = function(){ //这里是代码 } fn(); ...
- js 自运行函数作用
var obj = new Object(); function test2() { for (var i=1;i<5;i++) { obj['f'+i] = function() { retu ...
- 手写MVVM框架 之vue双向数据绑定原理剖析
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 前端MVVM框架:Knockout.JS(一)
前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...
- 迷你MVVM框架 avalonjs1.5 入门教程
avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVV ...
- c++中带返回值函数没写return能通过编译但运行时会出现奇怪问题
c++中带返回值函数没写return能通过编译但运行时会出现奇怪问题 例如: string myFunc(){ theLogics(); } 发现调用: myFunc(); 崩溃. 但调用: cout ...
- 函数直接写在html页面的<script>里可以调用,但是单独放在js文件里不能调用
1.函数直接写在页面相当于是你本页调用,所以理所应当可以调用 2.js单独文件不能调用是因为你没有引用js文件,如果引用了的话,也是可以调用的. 引用方式,你可以直接拖拽(我一般都是拖拽,因为路径准确 ...
随机推荐
- (转)Http和Https的区别
1.什么是Http Http中文叫做超文本传输协议, 它完成客户端到服务端等一系列运作流程 1.1 与http关系密切的协议: IP, TCP和DNS 负责传输的IP协议 IP协议数据网络层, IP协 ...
- Lambda select 动态字段
直接上代码 //测试数据 public static List<User> myList = new List<User>() { , Name=,IsChild=false} ...
- Codeforces 1149C 线段树 LCA
题意:给你一个括号序列,这个括号序列将确定一颗二叉树.有q次询问,每次询问输出这颗树的直径. 思路:https://blog.csdn.net/Huah_2018/article/details/89 ...
- C++ 空类,默认产生哪些成员函数
C++ 空类,默认产生哪些成员函数. 默认构造函数.默认拷贝构造函数.默认析构函数.默认赋值运算符 这四个是我们通常大都知道的.但是除了这四个,还有两个,那就是取址运算符和 取址运算符 con ...
- ES5的 forEach, map 方法的实现
如果浏览器不支持forEach,map方法, 要我们自己封装一个, 该怎么操作呢? 1. forEach Array.prototype.forEach = function(fn) { if (th ...
- vue 同时使用过渡和动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- hive之基本架构
什么是Hive hive是建立在Hadoop体系架构上的一层SQL抽象,使得数据相关人员是用他们最为熟悉的SQL语言就可以进行海量的数据的处理.分析和统计工作,而不是必须掌握JAVA等变成语言和具备开 ...
- h5判断设备是ios还是android
var u = navigator.userAgent, app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 ...
- 线段树双tag+差分数组——cf1208E
写了一上午 /* 对于每个数组a[],先排序然后从大到小把a[i]放进线段树更新 设a[i]的位置是pos,那么其可更新的区间是[pos,w-(li-pos)] 线段树结点保存 tag=now表示当前 ...
- word文档操作
1.如何把word文档修改的地方标记出来 : https://zhidao.baidu.com/question/73648149.html 2.word 的几种 视图:https://zhid ...