Simple is Happiness
Less is more
JavaScript
使用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 1542095783270
有非常多的方法来清空一个已经存在的数组,这种方法会返回删除的所有元素,并形一个新的数组,不过对性能没有影响,并将保持对数组的引用。

var arr = [1,2,3,4];
arr.splice(0, arr.length)
JavaScript使用类似break机制中断forEach循环
by ourjs keys JS学习 JavaScript 1542069544477
JavaScript数组对象,有一个forEach方法,可枚举每一个数组元素,但并不支持类似for循环的break语法,中断循环:

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

 近期热门 - 点击最多
  1. React Native为http网络请求添加timeout超时异常处理: 用XMLHttpRequest替换fetch发送的区别
  2. React Native使用fetch发送http登陆验证请求失败:无法读取set-cookie并显示network request failed
  3. 克服Redux的缺点在React/Native中使用消息队列,pubsub-js更加简洁的组件间通信和状态传递方法
  4. Springboot+Gradle+Mysql+Jpa最简单实例教程
  5. SpringBoot+Spring6入门指南: 使用命令行快速搭建restful web api模板
  6. 如何通过 winax 的 ActiveXObject 或 Excel.Application 往 excel 中插入一张图片
  7. node.js用activex/com+自动化读写excel时查询接口、参数的调试方法
  8. TypeScript定义数字范围类型即仅包含【小时:分钟】的时间类型,每天指定时间点执行任务
  9. 比较测试:用百度文心一言和阿里通义千问写删除文件目录并且是async/await代码
  10. node.js使用TensorFlow入门教程二:什么是张量神经网络运算与矩阵的关系及基本入门代码

  全端社区 - 最新回复
  1. 使用PubSub-JS时ReactNative在后台运行一段时间唤醒后,组件无法scribe到publish的事件,typescript实现一个事件订阅发布组件
  2. React Native为http网络请求添加timeout超时异常处理: 用XMLHttpRequest替换fetch发送的区别
  3. ReactNative获取Android/iOS的MAC/IP地址: react-native-device-info模块的安装与使用
  4. React Native使用fetch发送http登陆验证请求失败:无法读取set-cookie并显示network request failed
  5. 克服Redux的缺点在React/Native中使用消息队列,pubsub-js更加简洁的组件间通信和状态传递方法
  6. Springboot+Gradle+Mysql+Jpa最简单实例教程
  7. SpringBoot+Spring6入门指南: 使用命令行快速搭建restful web api模板
  8. Paddle/abbyy等ocr比较:如何将图片生成可选择文字版PDF
  9. 如何通过 winax 的 ActiveXObject 或 Excel.Application 往 excel 中插入一张图片
  10. 如何用JavaScript获取某个元素copy selector的CSS选择器

  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA