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框架数据驱动的底层逻辑的更多相关文章

  1. 剖析手写Vue,你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  2. vue.js学习笔记(一):什么是mvvm框架,vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  3. js自运行函数

    学习闭包的基础知识: 函数声明 function fn(){ //这里是代码 }; fn(); //运行fn函数 与上面等价 var fn = function(){ //这里是代码 } fn(); ...

  4. js 自运行函数作用

    var obj = new Object(); function test2() { for (var i=1;i<5;i++) { obj['f'+i] = function() { retu ...

  5. 手写MVVM框架 之vue双向数据绑定原理剖析

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 前端MVVM框架:Knockout.JS(一)

    前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...

  7. 迷你MVVM框架 avalonjs1.5 入门教程

    avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVV ...

  8. c++中带返回值函数没写return能通过编译但运行时会出现奇怪问题

    c++中带返回值函数没写return能通过编译但运行时会出现奇怪问题 例如: string myFunc(){ theLogics(); } 发现调用: myFunc(); 崩溃. 但调用: cout ...

  9. 函数直接写在html页面的<script>里可以调用,但是单独放在js文件里不能调用

    1.函数直接写在页面相当于是你本页调用,所以理所应当可以调用 2.js单独文件不能调用是因为你没有引用js文件,如果引用了的话,也是可以调用的. 引用方式,你可以直接拖拽(我一般都是拖拽,因为路径准确 ...

随机推荐

  1. 2018年分享的Spring Cloud 2.x系列文章

    还有几个小时2018年就要过去了,盘点一下小编从做做公众号以来发送了273篇文章,其中包含原创文章90篇,虽然原创的有点少,但是2019年小编将一如既往给大家分享跟多的干货,分享工作中的经验,让大家在 ...

  2. 学习笔记-es5新增的一些数组的API(不全)-字符串-字符串API(不全)

    ### es5新增的数组的api + indexOf() 搜索数组中的元素,并返回它所在的位置. arr.indexOf(str,index) 参数: str为要查找的字符串 index为开始查找的下 ...

  3. 小程序图片在安卓上拉伸的问题&导航&返回首页

      今天提了一个bug,有几张图片在安卓上面加载会先变大拉伸再恢复正常 出现这样的问题应该是用widthFix造成的 具体原因还不是很清楚,因为都是本地图片,所以我就直接把高也设置好就暂时没有这个问题 ...

  4. postgresql 两表关联更新

    UPDATE 要更新的表 SET 字段1 = cqt.字段1, 字段2 = cqt.字段2, FROM 数据来源表 cqt WHERE 要更新的表.bsm = cqt.bsm

  5. tar - tar 档案文件管理程序的 GNU 版本。

    总览 tar [ - ] A --catenate --concatenate | c --create | d --diff --compare | r --append | t --list | ...

  6. Codeforces 1167F 计算贡献

    题意:给你一个函数f,计算∑(i = 1 to n)(j = i to n) f(i, j).f(i, j)的定义是:取出数组中i位置到j位置的所有元素,排好序,然后把排好序的位置 * 元素 加起来. ...

  7. Vuex白话教程第六讲:Vuex的管理员Module(实战篇)

    写在前面 这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲.如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点. ...

  8. vue之ref

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. 1.ref ...

  9. informix 计算 日期之差

    原文地址:http://blog.chinaunix.net/uid-678894-id-3138829.html https://blog.csdn.net/zhengqiqiqinqin/arti ...

  10. loj2471[九省联考2018]一双木棋

    题意:在一个n*m的棋盘上,A和B轮流放置棋子.一个位置能够放置棋子当且仅当它上面没有棋子并且它的上面和左边一格都已经放了棋子(不难发现是一个上三角阶梯状).每个格子有两个权值,当A在上面放置棋子时A ...