Object.defineProperties()
w
https://docs.microsoft.com/en-us/scripting/javascript/reference/object-defineproperty-function-javascript
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
双向绑定
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div id="app">
<form>
<input type="text" v-model="count"/>
<button type="button" v-click="increment">increment</button>
<button type="button" v-click="alert('Hello world')">alert</button>
</form>
<p v-bind="count"></p>
</div>
<script>
function Lue(options) {
this._init(options);
console.log(this)
} Lue.prototype._init = function (options) {
this.$options = options; //传入的实例配置
this.$el = document.querySelector(options.el); //实例绑定的根节点
this.$data = options.data; //实例的数据域
this.$methods = options.methods; //实例的函数域 //与DOM绑定的数据对象集合
//每个成员属性有一个名为_directives的数组，用于在数据更新时触发更新DOM的各directive
this._binding = {};
this._parseData(this.$data); this._compile(this.$el); //编译DOM节点
}; //遍历数据域，添加getter/setter
Lue.prototype._parseData = function (obj) {
var value;
for (var key in obj) {
//排除原型链上的属性，仅仅遍历对象本身拥有的属性
if (obj.hasOwnProperty(key)) {
this._binding[key] = { //初始化与DOM绑定的数据对象
_directives: []
};
value = obj[key];
this.convert(key, value);
}
}
}; /**对象属性重定义
* @param key 数据对象名称，本例为"count"
* @param val 数据对象的值
*/
Lue.prototype.convert = function (key, val) {
var binding = this._binding[key];
Object.defineProperty(this.$data, key, {
enumerable: true,
configurable: true,
get: function () {
console.log(`获取$
{
val
}`)
;
return val;
},
set: function (newVal) {
console.log(`更新$
{
newVal
}`)
;
if (val != newVal) {
val = newVal;
binding._directives.forEach(function (item) {
item.update();
})
}
}
})
}; function Directive(name, el, vm, exp, attr) {
this.name = name; //指令名称，例如文本节点，该值设为"text"
this.el = el; //指令对应的DOM元素
this.vm = vm; //指令所属lue实例
this.exp = exp; //指令对应的值，本例如"count"
this.attr = attr; //绑定的属性值，本例仅实验innerHTML this.update(); //首次绑定时更新
} Directive.prototype.update = function () {
//更新DOM节点的相应属性值
this.el[this.attr] = this.vm.$data[this.exp];
}; //解析DOM的指令
Lue.prototype._compile = function (root) {
var _this = this;
//获取指定作用域下的所有子节点
var nodes = root.children;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
//若该元素有子节点，则先递归编译其子节点
if (node.children.length) {
this._compile(node);
} if (node.hasAttribute("v-click")) {
node.onclick = (function () {
var attrVal = nodes[i].getAttribute("v-click");
var args = /\(.*\)/.exec(attrVal);
if (args) { //如果函数带参数,将参数字符串转换为参数数组
args = args[0];
attrVal = attrVal.replace(args, "");
args = args.replace(/[\(|\)|\'|\"]/g, '').split(",");
}
else args = [];
return function () {
_this.$methods[attrVal].apply(_this.$data, args);
}
})()
} if (node.hasAttribute(("v-model"))
&& node.tagName == "INPUT" || node.tagName == "TEXTAREA") {
//如果是input或textarea标签
node.addEventListener("input", (function (key) {
var attrVal = node.getAttribute("v-model");
//将value值的更新指令添加至_directives数
_this._binding[attrVal]._directives.push(new Directive(
"input",
node,
_this,
attrVal,
"value"
)) return function () {
_this.$data[attrVal] = nodes[key].value;
}
})(i));
} if (node.hasAttribute("v-bind")) {
var attrVal = node.getAttribute("v-bind");
//将innerHTML的更新指令添加至_directives数
_this._binding[attrVal]._directives.push(new Directive(
"text",
node,
_this,
attrVal,
"innerHTML"
))
}
}
} window.onload = function () {
var app = new Lue({
el: "#app",
data: {
count: 0,
},
methods: {
increment: function () {
this.count++;
},
alert: function (msg) {
alert(msg)
}
}
})
}
</script>
</body>
</html>
Object.defineProperties()的更多相关文章
- 分享一个Object.defineProperties 定义一个在原对象可读可写的方法
function A(){ this.name = 'hellow word'; } Object.defineProperties( A.prototype,{ doSomething2 : { v ...
- Object.defineProperties()和Object.defineProperty()方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法:Object.defineProperty(obj, pro ...
- JS Object.defineProperties()方法
JS Object.defineProperties()方法 描述: Object.defineProperties()方法为目标对象同时配置多个属性. 语法: Object.defineProper ...
- Object.defineProperties()与Proxy对象代理
Object.defineProperties() 了不起啊..vue.js通过它实现双向绑定的 Object.defineProperties(obj,props) 方法直接在一个对象上定义新的属性 ...
- Object.defineProperty和Object.defineProperties
添加属性到对象,或修改现有属性的特性 用法: Object.defineProperty(object, propertyName, descriptor); 参数: object ...
- Object.defineProperties——MEAN开发后台的Model层
Object.defineProperties是什么?有什么用? 这个问题比较听起来可能比较难以理解,确实我也是在项目中遇到的才会去想.以前看到<高级程序设计>的时候,有这么一种东西,定义 ...
- 定义多个属性 Object.defineProperties()
var book = {} Object.defineProperties(book,{ _year:{ value:2004 }, editable:{ value:1 }, year:{ get: ...
- js中Object.defineProperties 定义一个在原对象可读可写的方法
function A(){ this.name = 'hellow word'; } Object.defineProperties( A.prototype,{ doSomething2 : { v ...
- ES5 Object.defineProperties / Object.defineProperty 的使用
临时笔记,稍后整理 var obj = { v: , render: function () { console.log(") } }; // Object.defineProperties ...
随机推荐
- JDBC数据库常用操作(mysql)
JDBC英文名称:JavaDataBaseConnectivity中文名称:java数据库连接简称:JDBCJDBC是一种用于执行SQL语句的JavaAPI,可以为多种关系数据库提供统一访问,它由一组 ...
- 本文演示如何配置ASP.NET Core项目以在Visual Studio（VS）2017中使用Telerik UI for ASP.NET Core。
学习时使用的是VS2017+Core2.1了,不再讨论VS2015和core1.1的东西. 配置ASP.NET Core Web应用程序以使用Telerik UI for ASP.NET Core: ...
- tcp/ip ---以太网和IEEE 802封装
以太网 它是当今T C P / I P采用的主要的局域网技术.它采用一种称作C S M A / C D的媒体接入方法,其意思是带冲突检测的载波侦听多路接入(Carrier Sense, Multipl ...
- 使用NPOI读取Excel出错
使用NPOI读取Excel出错,错误信息:java.io.IOException: Invalid header signature; read 4503608217567241, expected ...
- unity, 慎用DontDestroyOnLoad
如果想让一个节点切换场景时不销毁,可以为它添加如下脚本: using UnityEngine;using System.Collections; public class dontDestroyOnL ...
- MAJOR-MINOR-MKDEV
标记一下,容易忘,以免每次查代码. ./include/linux/types.h:21:typedef __u32 __kernel_dev_t; ./include/linux/types.h:2 ...
- Unity3d Serialize问题
备忘: 1. ScriptableOjbect中,由于Serialization的原因,不能使用基类引用来存储子类对象,这样都会导致数据丢失 2. 无法直接对Unity的数据如,vector3, qu ...
- Colossal Fibonacci Numbers! UVA 11582 寻找循环节
/** 题目:Colossal Fibonacci Numbers! UVA 11582 链接:https://vjudge.net/problem/UVA-11582 题意:f[0] = 1, f[ ...
- 开源码应用之Eclipse篇
开写这篇的时候,恰逢Eclpse Mars(4.5)正式公布,最终由日蚀变登火星了,也离我開始基于Eclipse开发产品已经过去10年,这10年间,经历了Eclipse由私有核心框架到拥抱OSGi, ...
- HDU 5073 Galaxy 2014 Asia AnShan Regional Contest 规律题
推公式 #include <cstdio> #include <cmath> #include <iomanip> #include <iostream> ...