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 ...
随机推荐
- Commons-VFS 使用SFTP
http://pro.ctlok.com/2011/06/apache-commons-vfs-for-sftp.html
- YII用户注冊表单的实现熟悉前台各个表单元素操作方式
模还是必须定义两个基本方法.还有部分label标签映射为汉字,假设进行表单验证,还要定义一些验证规则: <? php /* * 用户模型 * */ class user extends CAct ...
- 使用 %matplotlib inline 出错？
%matplotlib inline 是一个魔法函数(Magic Functions).官方给出的定义是:IPython有一组预先定义好的所谓的魔法函数(Magic Functions),你可以通过命 ...
- 转：winform_webApiSelfHost及 OWIN WebAPI Service
winform_webApiSelfHost 窗本构造函数中添加以下代码: var baseAddress = ConfigurationManager.AppSettings["baseA ...
- mac下使用QuickTime录屏及上传youku注意事项
一,解决QuickTime录屏不能带声音的问题: mac下使用QuickTime屏幕 Soundflower->Audio Setup->soundflower(2ch),在其上鼠标右键, ...
- 通过WSDL命令，将WSDL生成代理类
VS2010 打开命令行窗口(开始-VS2010--Visual Studio Tools--Visual Studio Command Prompt) 输入: wsdl /l:cs /n:newN ...
- atitit.TokenService token服务模块的设计
atitit.TokenService token服务模块的设计 1. Token的归类1 2. Token的用途2 2.1. 访问控制2 2.2. 编译原理术语)编辑2 2.3. 数据处理2 1. ...
- C#检测浏览器类型 Detect Browser
private void Button1_Click(object sender, System.EventArgs e) { System.Web.HttpBrowserCapabilities b ...
- nyoj304 节能
节能 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 Dr.Kong设计的机器人卡多越来越聪明.最近市政公司交给卡多一项任务,每天早晨5:00开始,它负责关掉ZK大道右侧 ...
- waterfall.js
jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件.该瀑布流特效使用ajax调用来动态加载图片,达到无限加载的效果.它使用简单,兼容性好,值得推荐 ...