非常简单的js双向数据绑定框架(三):js model黑科技

初衷

之前我们要在js域更新model,需要这样:

model.set(‘name‘, ‘sub‘);

这实在太土了。。。

我们希望像angularjs一样,直接:

$scope.name = ‘sub‘;

然后bong, 视图就会更新!这样的黑科技必定是极好的。

目标

  1. 完成model更新黑科技
  2. 200行以内完成

实现

今次主要借鉴avalon“劫持”setter,getter的方法,链接:avalon简化版解读

虽说是简化过的avalon,还是挺难读的。

整理下思路,主要两大点:

1. vm对象 –> vModel对象,劫持vm各个属性的set,get方法

2. scanTag() –> 遍历dom树找关键字,去vModel找求值函数,注册到订阅者列表

其中去vModel这一点不是很清楚,这几天一定要搞清,自己mock一个出来

时间: 2024-11-05 12:27:24

非常简单的js双向数据绑定框架(三):js model黑科技的相关文章

Angular JS - 3 - Angular JS 双向数据绑定

一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从Model流向View 视图(View): 也就是我们的页面(主要是Andular指令和表达式) 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>

很easy的js双向绑定框架(二):控制器继承

初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. 父controller的Model能够在子controller里被訪问到 2. 子controller的model不影响父controller 3. controller继承关系在html中指定.而不是js中指定 目标 html里,用isi-controller属性去声明控制器: <body>

js双向数据绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双向数据绑定</title></head><body> <div id="all"> <input type="text" id="txt"> <p

Vue.js双向数据绑定模板渲染

准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Vuejs</title> <style> .finished { text-deco

angular-dragon-drop.js 双向数据绑定拖拽的功能

在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js 插件来实现.通过拖拽可以自动更新数组元素. // 比如 <script> var arr1=[{name:'wang',id:11,city:'beijing'},{name:'chang',id:22,'hangzhou'}]; var arr2=[]; </script> //a

node.js Web应用框架Express.js(一)

什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随取随用,创建强健.友好的API变得快速又简单,Express 不对 node.js 已有的特性进行二次抽象,只是在它之上扩展了Web应用所需的功能. 开篇,这里就只做简单的介绍,整理一些有关express.js的资源,与大家一起学习 Express.js中文社区:http://expressjs.j

非常简单的js双向绑定框架(二):控制器继承

初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档,在实际工程中必须要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. 父controller的Model可以在子controller里被访问到 2. 子controller的model不影响父controller 3. controller继承关系在html中指定,而不是js中指定 目标 html里,用isi-controller属性去声明控制器: <body> <d

angular.js双向数据绑定实现动画特效

一.HTML 1.引入必要的js文件,这个不多说了(注意由于之后要使用angular提供的动画效果和路由效果,所以要引入angular-animate.js和angular-route.js两个文件) 2.body内加入以下代码:  <div class="page {{pageClass}}" ng-view></div> ng-view不多说,class通过双向绑定的方式,通过controller动态控制class中的{{pageclass}} 另外不要忘了

JS自制SEO框架(js案例)

学习了JS一段时间,自己封装了一些日常码代码需要用到的框架,需要的小伙伴可以参考一下该框架主要功能有:阻止事件冒泡.阻止默认事件.获取元素.添加事件.删除事件.单个事件代理,多个事件代理.清除class.获取滚动距离等框架代码如下: var sEO={ $:function(exp){//获取对象(1个.多个) var el; if (/^#\w+$/.test(exp)){ el=document.querySelector(exp); } else { el=document.querySe