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. 消费kafka的消息,并将其SparkStreaming结果保存到mysql

    将数据保存到mysql,需要用到jdbc.为了提高保存速度,我写了一个连接池 1.保存到mysql的代码 package test05 import org.apache.log4j.{Level, ...

  2. react使用总结

    1.拿到页面首先需要设计好,每个组件该怎么实现,划分好组件可以减少重复代码,有的时候需要和后端确认才能形成正确的划分 2.页面上的需要展示的数据都是由后端数据而来,所以任何增删改查的数据都要从后端重新 ...

  3. org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8' not supported

    最后找到我的问题,springmvc配置文件中没加 <mvc:annotation-driven/> java代码: @RequestMapping(value="/reques ...

  4. shell专用参数变量

  5. 【CSS】水平居中与垂直居中

    有宽度的div水平居中 1.左右margin设为auto即可 .center { width: 960px; margin-left: auto; margin-right: auto; } 2.绝对 ...

  6. Python爬虫总结——常见的报错、问题及解决方案

    在爬虫开发时,我们时常会遇到各种BUG各种问题,下面是我初步汇总的一些报错和解决方案. 在以后的学习中,如果遇到其他问题,我也会在这里进行更新. 各位如有什么补充,欢迎评论区留言~~~ 问题: IP被 ...

  7. 59. jdk1.5新特性之----增强for循环

    /*jdk1.5新特性之----增强for循环:底层是一个迭代器 作用:简化迭代器书写格式 使用范围:实现了Iterable接口的对象或者数组对象 格式:    for(变量类型  变量名 :遍历目标 ...

  8. 【Movist Pro】macOS上的绝佳媒体播放器

    Movist Pro是适用于Mac的高性能电影播放器,如果比较流程和界面,则Movist与QuickTime非常相似.因此,采用播放器几乎不会有任何问题.使用Quicktime或FFmpeg解码电影并 ...

  9. go导入包

    go导入包 go有很多内置的函数,例如println,不需要引用即可使用.但是如果不借助go的标准库或者第三方库,我们能做的事情有限.在go中,使用关键字import在代码中导入一个包并使用. 修改我 ...

  10. iOS导航栏的背景颜色设置

    方法一: (1) self.navigationController.navigationBar.barStyle = UIBarStyleDefault; self.navigationContro ...