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. [转] datetime.now、datetime.utcnow以及Django中的timezone.now之间的区别

      https://blog.csdn.net/sinat_41898105/article/details/80984298   在我们使用Django做项目时经常会遇到时间的存储与读取不一致的问题 ...

  2. Android 增量更新完全解析 是增量不是热修复(转)

    转自:http://blog.csdn.net/lmj623565791/article/details/52761658 本文在我的微信公众号:鸿洋(hongyangAndroid)首发. 转载请标 ...

  3. Nginx---配置系统(自己总结)

    1.Nginx配置系统 Nginx的配置系统   由  一个主配置文件  和  其他一些辅助的配置文件  构成: 这些文件均为纯文本文件,全部位于nginx安装目录下的conf目录下: Nginx配置 ...

  4. DNS稳定保障系列1--服务双保障“辅助DNS”产品介绍

    背景 2016 年 10 月 21 日,DNS 服务商 dyn 的服务器遭遇黑客大流量的 ddos 攻击,使得美国大量互联网公司如 twitter,github等都出现解析失败,无法提供服务.如下图可 ...

  5. NOIP模拟测试29(A)

    T1: 题目大意:有一张有向无环图,第$x$次经过边$i$的代价为$a_ix+b_i$,最多经过$c_i$次,起点为1,$s$个点可作为终点,求走$k$次的最小代价. 我们新建一个汇点,将所有可做为终 ...

  6. Mac版本navicat premium彻底卸载的终端命令

    Mac版本navicat premium彻底卸载的终端命令: sudo rm -Rf /Applications/Navicat\ Premium.app sudo rm -Rf /private/v ...

  7. jQuery Validate (1)

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  8. postgreSQL的主外键

    --添加主键 alter table cities add PRIMARY KEY(name); --添加外键 alter table weather add FOREIGN key(city) RE ...

  9. 机器学习技法笔记:Homework #6 AdaBoost&Kernel Ridge Regression相关习题

    原文地址:http://www.jianshu.com/p/9bf9e2add795 AdaBoost 问题描述 程序实现 # coding:utf-8 import math import nump ...

  10. 将本地已有的一个项目上传到新建的git仓库的方法

    将本地已有的一个非git项目上传到新建的git仓库的方法一共有两种. 一. 克隆+拷贝 第一种方法比较简单,直接用把远程仓库拉到本地,然后再把自己本地的项目拷贝到仓库中去.然后push到远程仓库上去即 ...