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文件,如果引用了的话,也是可以调用的. 引用方式,你可以直接拖拽(我一般都是拖拽,因为路径准确 ...
随机推荐
- android meta_data配置数据
- ionic3 emoj表情包插件 emoji-picker
1.效果演示: 2.安装扩展包依赖 npm i @ionic-tools/emoji-picker --save 3.app.module.ts中导入插件 import { EmojiPickerMo ...
- 【JavaWeb项目】一个众筹网站的开发(四)后台用户注册功能
重点: 密码加密存储 使用jQuery插件做校验和错误提示等 密码不能明文存储,在数据库中是加密存储的 可逆加密:通过密文使用解密算法得到明文 DES AES 不可逆加密:通过密文,得不到明文 MD5 ...
- shell编程基础干货
变量及赋值 设置变量 A=‘china’ 取消变量 unset A 加上 export 关键字 代表全局变量 a=$(ls -l /root/bin) ##运行里面的命令,并把结 ...
- pro、pre、test、dev环境
开发过程中四个环境分别是:pro.pre.test.dev环境,中文名字:生产环境.灰度环境.测试环境.开发环境 环境介绍: pro环境:生产环境,面向外部用户的环境,连接上互联网即可访问的正式环境. ...
- Shiro学习(23)多项目集中权限管理
在做一些企业内部项目时或一些互联网后台时:可能会涉及到集中权限管理,统一进行多项目的权限管理:另外也需要统一的会话管理,即实现单点身份认证和授权控制. 学习本章之前,请务必先学习<第十章 会话管 ...
- 「CTS2019 | CTSC2019」随机立方体 解题报告
「CTS2019 | CTSC2019」随机立方体 据说这是签到题,但是我计数学的实在有点差,这里认真说一说. 我们先考虑一些事实 如果我们在位置\((x_0,y_0,z_0)\)钦定了一个极大数\( ...
- Linux环境下安装PHP的memced扩展
先下载libmemcached: wget https://launchpad.net/libmemcached/1.0/1.0.18/+download/libmemcached-1.0.18.t ...
- P1064 金明的预算方案 (分组背包稍稍变形)
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱就行”. ...
- access注入篇+sqlmap
access数据库的来历,我就不说了,因为我懒的记,就算记了感觉上也没大多用处,只要记得数据库的结构就行了.先是表名,然后是列名,再者就是数据,我发个实际的图吧,大概就是这么一个结构. 下面,开始说下 ...