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文件,如果引用了的话,也是可以调用的. 引用方式,你可以直接拖拽(我一般都是拖拽,因为路径准确 ...
随机推荐
- [转] datetime.now、datetime.utcnow以及Django中的timezone.now之间的区别
https://blog.csdn.net/sinat_41898105/article/details/80984298 在我们使用Django做项目时经常会遇到时间的存储与读取不一致的问题 ...
- Android 增量更新完全解析 是增量不是热修复(转)
转自:http://blog.csdn.net/lmj623565791/article/details/52761658 本文在我的微信公众号:鸿洋(hongyangAndroid)首发. 转载请标 ...
- Nginx---配置系统(自己总结)
1.Nginx配置系统 Nginx的配置系统 由 一个主配置文件 和 其他一些辅助的配置文件 构成: 这些文件均为纯文本文件,全部位于nginx安装目录下的conf目录下: Nginx配置 ...
- DNS稳定保障系列1--服务双保障“辅助DNS”产品介绍
背景 2016 年 10 月 21 日,DNS 服务商 dyn 的服务器遭遇黑客大流量的 ddos 攻击,使得美国大量互联网公司如 twitter,github等都出现解析失败,无法提供服务.如下图可 ...
- NOIP模拟测试29(A)
T1: 题目大意:有一张有向无环图,第$x$次经过边$i$的代价为$a_ix+b_i$,最多经过$c_i$次,起点为1,$s$个点可作为终点,求走$k$次的最小代价. 我们新建一个汇点,将所有可做为终 ...
- Mac版本navicat premium彻底卸载的终端命令
Mac版本navicat premium彻底卸载的终端命令: sudo rm -Rf /Applications/Navicat\ Premium.app sudo rm -Rf /private/v ...
- jQuery Validate (1)
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- postgreSQL的主外键
--添加主键 alter table cities add PRIMARY KEY(name); --添加外键 alter table weather add FOREIGN key(city) RE ...
- 机器学习技法笔记:Homework #6 AdaBoost&Kernel Ridge Regression相关习题
原文地址:http://www.jianshu.com/p/9bf9e2add795 AdaBoost 问题描述 程序实现 # coding:utf-8 import math import nump ...
- 将本地已有的一个项目上传到新建的git仓库的方法
将本地已有的一个非git项目上传到新建的git仓库的方法一共有两种. 一. 克隆+拷贝 第一种方法比较简单,直接用把远程仓库拉到本地,然后再把自己本地的项目拷贝到仓库中去.然后push到远程仓库上去即 ...