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文件,如果引用了的话,也是可以调用的. 引用方式,你可以直接拖拽(我一般都是拖拽,因为路径准确 ...
随机推荐
- Vue之自建管理后台(一)准备工作
完成最基础的Vue环境及新建一个vue项目. 一般来说,我们拿到一个项目需求或者得到一个需求的时候,第一件应该做的事情不是立马坐在电脑前面去写代码,如果你这么做的,好吧...我只能暂时认定你为一个刚上 ...
- docker build 时 alpine 无法安装软件问题的解决
使用 alpine 作为 docker 基础镜像时,运行 apk add ..... 遇到如下错误: WARNING: Ignoring http://dl-cdn.alpinelinux.org/a ...
- Codeforces 348D DP + LGV定理
题意及思路:https://www.cnblogs.com/chaoswr/p/9460378.html 代码: #include <bits/stdc++.h> #define LL l ...
- printf sscanf进阶
printf ; printf (3d", a);//将打印 035 printf(“%-*s”, width, string): “*”: 在这里用width代替,其实和printf(“% ...
- koa 中间件 koa-art-template 的使用
例子 const Koa = require('koa'); const render =require('koa-art-template'); const path= require('path' ...
- php获取微信openid
使用微信接口,无论是自动登录还是微信支付我们首先需要获取的就是openid,获取openid的方式有两种,一种是在关注的时候进行获取,这种订阅号就可以获取的到,第二种是通过网页授权获取,这种获取需要的 ...
- 管理员技术(七): Linux管理员 综合测试
一.Linux管理员 综合测试 目标: 根据本文提供的练习步骤完成所有练习案例. 方案: 开始练习之前,先依次重置虚拟机环境. [root@room9pc13 ~]# rht-vmctl reset ...
- 基础课(一)Cisco Packet Tracer Student模拟器简单的运用
一.相同设备之间用交叉线,不同设备之间用直通线 如上图中的简单的两个PC机相连,交叉线相连的两个PC机是能ping同,直通线相连的两台PC机不通,ipconfig可以查看本机设备的网络配置 time= ...
- C++ STL(一)介绍及string
STL: C++标准模板库的简称,它是C++的一部份.标准C++库的所有的标识符都是在一个名为std的命名空间中定义的 在使用STL中相关模板时,需要包含相关头文件,然后using namespace ...
- php开发面试题---vue面试题(vue.js的好处及作用)
php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...