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文件,如果引用了的话,也是可以调用的. 引用方式,你可以直接拖拽(我一般都是拖拽,因为路径准确 ...
随机推荐
- 消费kafka的消息,并将其SparkStreaming结果保存到mysql
将数据保存到mysql,需要用到jdbc.为了提高保存速度,我写了一个连接池 1.保存到mysql的代码 package test05 import org.apache.log4j.{Level, ...
- react使用总结
1.拿到页面首先需要设计好,每个组件该怎么实现,划分好组件可以减少重复代码,有的时候需要和后端确认才能形成正确的划分 2.页面上的需要展示的数据都是由后端数据而来,所以任何增删改查的数据都要从后端重新 ...
- org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8' not supported
最后找到我的问题,springmvc配置文件中没加 <mvc:annotation-driven/> java代码: @RequestMapping(value="/reques ...
- shell专用参数变量
- 【CSS】水平居中与垂直居中
有宽度的div水平居中 1.左右margin设为auto即可 .center { width: 960px; margin-left: auto; margin-right: auto; } 2.绝对 ...
- Python爬虫总结——常见的报错、问题及解决方案
在爬虫开发时,我们时常会遇到各种BUG各种问题,下面是我初步汇总的一些报错和解决方案. 在以后的学习中,如果遇到其他问题,我也会在这里进行更新. 各位如有什么补充,欢迎评论区留言~~~ 问题: IP被 ...
- 59. jdk1.5新特性之----增强for循环
/*jdk1.5新特性之----增强for循环:底层是一个迭代器 作用:简化迭代器书写格式 使用范围:实现了Iterable接口的对象或者数组对象 格式: for(变量类型 变量名 :遍历目标 ...
- 【Movist Pro】macOS上的绝佳媒体播放器
Movist Pro是适用于Mac的高性能电影播放器,如果比较流程和界面,则Movist与QuickTime非常相似.因此,采用播放器几乎不会有任何问题.使用Quicktime或FFmpeg解码电影并 ...
- go导入包
go导入包 go有很多内置的函数,例如println,不需要引用即可使用.但是如果不借助go的标准库或者第三方库,我们能做的事情有限.在go中,使用关键字import在代码中导入一个包并使用. 修改我 ...
- iOS导航栏的背景颜色设置
方法一: (1) self.navigationController.navigationBar.barStyle = UIBarStyleDefault; self.navigationContro ...