双向数据绑定是非常重要的特性 —— 将js模型与html视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生js实现双向绑定 —— 一种为Object.observe(译注:现已废弃,作者写博客时为14年11月),另一种为覆盖get / set。PS: 第二种更好,详情请参阅底部的TL;DR(译注:too long;don't read. 直译为“太长,不想看”,意译为“简单粗暴来吧”)。
Object.observe()是一种新特性,其在ES7中实现,但在最新的Chrome中已可用 —— 允许对JS对象进行响应式更新。简单说就是 —— 只要对象(的属性)发生变化就调用回调函数。
一般用法为:
log = console.log
user = {}
Object.observe(user, function(changes){
changes.forEach(function(change) {
user.fullName = user.firstName + " " + user.lastName;
});
});
user.firstName = 'Bill';
user.lastName = 'Clinton';
user.fullName // 'Bill Clinton'
这很方便,且能实现响应式编程 —— 保证所有内容都是最新的。
如下:
//<input id="foo">
user = {};
div = $("#foo");
Object.observe(user, function(changes){
changes.forEach(function(change) {
var fullName = (user.firstName || "") + " " + (user.lastName || "");
div.text(fullName);
});
});
user.firstName = 'Bill';
user.lastName = 'Clinton';
div.text() //Bill Clinton
如上,我们自己实现了模型到数据的绑定!封装一下(译注:此处原文为Let’s DRY ourselves with a helper function. DRY即 don't repeat yourself):
//<input id="foo">
function bindObjPropToDomElem(obj, property, domElem) {
Object.observe(obj, function(changes){
changes.forEach(function(change) {
$(domElem).text(obj[property]);
});
});
}
user = {};
bindObjPropToDomElem(user,'name',$("#foo"));
user.name = 'William'
$("#foo").text() //'William'
换一种方式 —— 将DOM元素与JS值绑定起来。简单的方法是使用jQuery.change
//<input id="foo">
$("#foo").val("");
function bindDomElemToObjProp(domElem, obj, propertyName) {
$(domElem).change(function() {
obj[propertyName] = $(domElem).val();
alert("user.name is now "+user.name);
});
}
user = {}
bindDomElemToObjProp($("#foo"), user, 'name');
//enter 'obama' into input
user.name //Obama.
简直不要太方便,在实际开发时,可以将两者结合,通过函数来创建一个双向数据绑定:
function bindObjPropToDomElem(obj, property, domElem) {
Object.observe(obj, function(changes){
changes.forEach(function(change) {
$(domElem).text(obj[property]);
});
});
}
function bindDomElemToObjProp(obj, propertyName, domElem) {
$(domElem).change(function() {
obj[propertyName] = $(domElem).val();
console.log("obj is", obj);
});
}
function bindModelView(obj, property, domElem) {
bindObjPropToDomElem(obj, property, domElem)
bindDomElemToObjProp(obj, propertyName, domElem)
}
注意:在双向绑定时,需正确进行DOM操作,因为不同的DOM元素(input,div,textarea,select)有不同的取值方式(text,val)。同时注意:双向数据绑定并不是必须的 —— “输出型”元素一般不需要视图到模型的绑定,而“输入型”元素一般不需要模型到视图的绑定。
下面为第二种方式:
上面的解决方法并不完美。比如直接的修改并不会自动触发jQuery的“change”事件 —— 例如,直接通过代码对DOM进行修改,比如以下代码不起作用:
$("#foo").val('Putin')
user.name //still Obama. Oops.
现在,我们来用一种更激进的方式实现 —— 重写getter和setter。因为我们不仅要监测变化,我们将重写JS最底层的功能,即get/setting变量的能力,所以不那么“安全”。后面我们将会看到,这种元编程的方式有多强大。
那么,如果我们可以重写get和set对象值的方法会怎么样呢?这也是数据绑定的实质。用 Object.defineProperty() 即可实现.
其实,以前就有已废弃且非标准实现方式,但通过Object.defineProperty的实现方式更好(最重要的是标准),如下所示:
user = {}
nameValue = 'Joe';
Object.defineProperty(user, 'name', {
get: function() { return nameValue },
set: function(newValue) { nameValue = newValue; },
configurable: true //to enable redefining the property later
});
user.name //Joe
user.name = 'Bob'
user.name //Bob
nameValue //Bob
现在user.name是nameValue的别名。但可做的不仅仅是创建新的变量名 - 我们可以通过它来保证模型和视图的一致。如下:
//<input id="foo">
Object.defineProperty(user, 'name', {
get: function() { return document.getElementById("foo").value },
set: function(newValue) { document.getElementById("foo").value = newValue; },
configurable: true //to enable redefining the property later
});
user.name现在绑定到#foo元素。这种底层的方式非常简洁 —— 通过定义(或扩展)变量属性的get / set实现。由于实现非常简洁,因此可以根据情况轻松扩展/修改代码 —— 仅绑定或扩展get / set中的一个,比如绑定其他数据类型。
可封装如下:
function bindModelInput(obj, property, domElem) {
Object.defineProperty(obj, property, {
get: function() { return domElem.value; },
set: function(newValue) { domElem.value = newValue; },
configurable: true
});
}
使用:
user = {};
inputElem = document.getElementById("foo");
bindModelInput(user,'name',inputElem);
user.name = "Joe";
alert("input value is now "+inputElem.value) //input is now 'Joe';
inputElem.value = 'Bob';
alert("user.name is now "+user.name) //model is now 'Bob';
注意:上面的domElem.value只对input元素有效。(可在bindModelInput中扩展,对不同的DOM类型使用对应的方法来设置它的值)。
思考:
(译注:SPOT简单翻译为“单点原则”,即引起变化最好的是由单一入口引起的,而不是由多个入口引起的,比如一个函数,其返回结果最好仅由参数决定,这样输入和输出才能一致,而不会由于其他变化导致用一个输入会出现不同的输出)
这种自己实现的数据绑定方法与Knockout或Angular等框架的数据绑定相比,有一些优点,例如:
缺点是由于不是真正的绑定(没有脏检查),有些情况会失败 —— 视图更新时不会触发模型中的数据,所以当试着同步视图中的两个DOM元素时将会失败。也就是说,将两个元素绑定到同一个模型上时,只有更新模型,则两个元素才会被正确更新。可以通过自定义一个更新函数来实现:
//<input id='input1'>
//<input id='input2'>
input1 = document.getElementById('input1')
input2 = document.getElementById('input2')
user = {}
Object.defineProperty(user, 'name', {
get: function() { return input1.value; },
set: function(newValue) { input1.value = newValue; input2.value = newValue; },
configurable: true
});
input1.onchange = function() { user.name = user.name } //sync both inputs.
当需要使用原生JS创建模型和视图的双向数据绑定时,如下:
function bindModelInput(obj, property, domElem) {
Object.defineProperty(obj, property, {
get: function() { return domElem.value; },
set: function(newValue) { domElem.value = newValue; },
configurable: true
});
}
//<input id="foo">
user = {}
bindModelInput(user,'name',document.getElementById('foo')); //hey presto, we now have two-way data binding.
感谢阅读,本文也发布在 JavaScript Weekly, 可在reddit回复我
翻译来源: 原生JS数据绑定
原文出处 native_javascript_data_binding
今天在vue的项目中引入Highcharts,想做一个大数据量的实时刷新曲线图,发现当数据量超过1000就无法显示。经过排查发现 Highcharts为了保证更好的性能设置了一个性能阈值检查
JS 的 Number 精度只有 「-2^52 ~ 2^52 - 1」,可以通过 Number.MAX_SAFE_INTEGER 查看 JS 的安全运算范围。由于这个原因,在一些需要更精确运算的应用场景中,JS Number 精度就不够了,例如需要把 64 位数字写入到 buffer 数组中。
WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型。成员都是对象;.成员都是弱引用;不能遍历
随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受。因此,对于前端的监控不容忽视。
由于js为弱类型语言拥有动态类型,这意味着相同的变量可用作不同的类型。 typeof 运算符返回一个用来表示表达式的数据类型的字符串,目前typeof返回的字符串有以下这些: undefined、boolean、string、number、object、function、“symbol
将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html;通过将json遍历进行字符串拼接,将字符串输出到csv文件
在执行 I/O 操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。
在最近的一个项目中,要求对 redux 数据做持久化处理,经过研究后成功实现,在此记录一下过程,我们可以使用 redux-persist 对数据做持久化处理,安装npm i --save redux-persist
爬虫类的需求,基本上在各个公司都会有,难免就会落在前端开发的头上。今天我们就来看看 Node 如何爬数据。其实抓取数据对于前端来说,就是 ajax 请求一个接口,只不过返回值有 text/html
什么是protobuf?Protobuf是Google开源的一款类似于Json,XML数据交换格式,其内部数据是纯二进制格式。这篇文章主要介绍google protobuf的特点与使用
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!