JavaScript | OurJS

使用JavaScript的Proxy监听对象属性变化并进行类public/private的访问控制

by ourjs keys JS学习 JavaScript 1559991024343

Proxy是ES6的引入的一个对象监听机制。可视为JavaScript对象的一个代理中间件。用户在访问对象时，会触发自定义行为。

Proxy最简单的用法是可以监听对象属性的变化，比如下面的，当 obj 的 visit 属性改变时，自动更新页面上相应的 input元素值。

var obj = {}

var handler = {
  set: function(target, name, value) {    
    //改变被代理对象的值，使之保持一致
    target[name] = value

    var input = document.querySelector('[name=' + name + ']')
    if (input) {
      input.value = value
    }
  }
}

var proxy = new Proxy(obj, handler);
proxy.visit = 100

JavaScript求一个字符串的字节长度

by ourjs keys JS学习 JavaScript 1559174024852

某些场景可能会对输入内容的字节长度有限制，比如说RSA加密算法。但 String.prototype.length 只会统计字符串的字符个数，并不是字节长度。

同样的字符数，中文要比英文多占用1倍的空间。此时可以通过chartCodeAt来统计字符长度。

JavaScript中将字符串true或false转换成Boolean类型

by ourjs keys JS学习 JavaScript 1556256679552

JavaScript中可以使用parseInt方法将字符串转换成整型。但布尔型没有相关方法。可使用JSON解析：

JSON.parse("true");

jQuery用$.prop,$.attr方法来获取或设置checkbox当前选中状态

by ourjs keys JS学习 JavaScript 1555422521248

使用$.fn.attr来获取或设置html的checkbox元素的状态。但是界面上此复选框并没有反映到界面上，因为这个只是改变html的DOM结构，并不改变当前选中状态。这时使用 prop 即可

$('#chb_data_binding').prop('checked', true)
$('#chb_data_binding').prop('checked')
> true

Node.JS中用concat和push连接两个或多个数组的性能比较

by ourjs keys JS学习 JavaScript 1555299868703

JavaScript中连接两个数组成一旧新数组，常用concat方法，比如：
借用apply方法，push、splice也可和来连接数组。因为push没有创建新数组，如果想要保挂原对象的引用，可使用push方法。
那么两者在node.js的性能如何？我们做了一组测试数据，两种分别测试100万次。

判断是否为对象typeof abc == 'object' 与 instanceof 性能比较

by ourjs keys JS学习 JavaScript 1555041449637

我们通常使用 typeof obj == 'object' 来判断变量是否为对象。但也可通过 obj instanceof Object 来判断，那么二者的性能如何？

我们写一个简单的测试用例，分别试100万次，结果使用 instance 比 typeof 快近10倍。

typeof判断参数是否为undefined与全等判断法性能比较

by ourjs keys JS学习 JavaScript 1546590563530

通过我们使用 typeof 来判断参数是不是未定义，比如 typeof abc == 'undefined'，但也可通过全等式判断，如 abc === undefined，那么二者的性能如何？
我们写一个简单的测试用例，分别试100万次。

JavaScript不刷新查找当前网址上的querystring并修改查询字符串变量

by ourjs keys JS学习 JavaScript 1544853102332

经常有些场景需要从网址获取变量，有时侯需要修改某个变量，有非常多的JS库可以实现，其实用简单的几行代码即可实现：

qs.get('param1')
> test1
qs.set('param1', 'newvalue')
# 当前网址更新为:  http://ourjs.com?param1=newvalue&param2=test2

JavaScript无引用复制一个Array数组的每一个元素到另一个数组

by ourjs keys JS学习 JavaScript 1542092009789

如果目标数组不存在，可使用 slice/ concat 复制

var destinationArray = sourceArray.slice();
var destinationArray = sourceArray.concat();

如果目标数组存在，且想保持引用，可使用 push

destinationArray.push.apply(destinationArray, sourceArray);

JavaScript使用类似break机制中断forEach循环

by ourjs keys JS学习 JavaScript 1542069544477

JavaScript数组对象，有一个forEach方法，可枚举每一个数组元素，但并不支持类似for循环的break语法，中断循环：

[1,2,3].forEach(function(item) {
    // if(!item) break; 不支持
});

近期热门 - 点击最多

全端社区 - 最新回复

开源的 OurJS

关注我们