JS的“缺陷”

JS从诞生到现在已经二十几年了，在其演进中难免引入了一些bug，且积习难改。理解这些缺陷有助于避开那些新手陷阱。

typeof相关

Null和Undefined

他们都是基本类型，也都只对应一个常量值（分别是null和undefined）。

1
2
3
4
5
6
//已知:
typeof undefined === 'undefined'
//你可能会以为:
typeof null === 'null'//但，不是这样
//真相是:
typeof null === 'object'//null是指空对象，空对象也是对象！

Object、Array、Function、RegExp、Date、Error、…

这些本质上都是对象类型。

1
2
3
4
5
6
7
//已知：
typeof {} === 'object'
typeof function(){} === 'function'
//你可能会以为:
typeof [] === 'array'//但，不是这样的
//真相是：
typeof [] === 'object'//数组也是对象，基本类型外的除了函数都是对象。

typeof一览表

类型 Type 值 typeof
布尔 Boolean true ‘boolean’
数值 Number 1 ‘number’
字符串 String ‘’ ‘string’
符号 Symbol Symbol() ‘symbol’
未定义 Undefined undefined ‘undefined’
空* Null null ‘object’
对象 Object {} ‘object’
下列都属于 对象的派生类型
数组 Array [] ‘object’
函数* Function function(){} ‘function’
类 Function class{} ‘function’

相等比较

宽松比较==

相等操作符比较两个值是否可能相等，即如果类型不同则进行可能的类型转换。

1
2
3
4
5
6
7
8
9
0==''//true
0=='0'//true
0==false//true
[1,2]=='1,2'//true
null==undefined//true
!null && !undefined//true
//注意：null和undefined既不等于true也不等于false
null==true || null==false//false
undefined==true || undefined==false//false

严格比较===

全等操作符比较两个值是否严格相等，即要求类型一样，也要求值相同。

1
2
3
4
5
6
null===null//true
undefined===undefined//true
null===undefined//false
0==='0'//false
0===-0//true
NaN===NaN//false?--这个比较有性格

同值相等Object.is()比较

Object.js()比较的结果同全等操作符，除了下面这两个相反：

1
2
Objecct.is(NaN,NaN)//true
Objecct.is(0,-0)//false

A链接打开的新窗口无法显示内容？

通常，我们想要一个A链接跳转到新窗口的话，会这样写：

1
<a href="http://www.zybuluo.com" target="_blank">link to a new window</a>

如果href的url需要动态的话，需要用到javascript，会改写成这样：

1
<a href="javascript:openUrl();" target="_blank">link to a new window</a>

当然还需要额外的script定义openUrl()函数：

1
2
3
4
function openUrl(){
    var url = 'http://www.zybuluo.com';
    window.open(url, '_blank');
}

似乎一切OK。——我是在chrome下测试的，确实没问题。
但发现，在IE和Firefox下试不行：新窗口无法显示内容。

原因是忽视了a标签里的target="_blank"，去掉它就行了。

也就是说，借用A链接执行js的最好不要加target属性（虽然Chrome支持但其它浏览器不一定支持）。所以，还是在脚本里决定是否打开新窗口。

感想

  • 前端测试需顾及所有主流浏览器;
  • Chrome(google)的兼容性做得太好了:)

JS对象的克隆Clone

浅克隆[Plain Clone]：

1
2
3
4
5
6
var obj1 = {foo: "foo", bar: "bar"};
var obj2 = {foo: "foo2", bar: "bar2"};
var copy1 = {...obj1}; // Object {foo: "foo", bar: "bar"}
var copy2 = Object.assign({}, obj); //Object {foo: "foo2", bar: "bar2"}
var copySpread = {...obj1, ...obj2}; //Object {foo: "foo2", bar: "bar2"}
var copyAssign = Object.assign({}, obj2, obj1); //Object {foo: "foo", bar: "bar"}

JSON克隆[Json Clone]

1
2
var obj = { a: 0, b: { c: 0 } };
var copy = JSON.parse(JSON.stringify(obj));

深度克隆[Deep Clone]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function deepClone(obj) {
  var copy;
  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;
  // Handle Date
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }
  // Handle Array
  if (obj instanceof Array) {
    copy = [];
    for (var i = 0, len = obj.length; i < len; i++) {
        copy[i] = deepClone(obj[i]);
    }
    return copy;
  }
  // Handle Function
  if (obj instanceof Function) {
    copy = function() {
      return obj.apply(this, arguments);
    }
    return copy;
  }
  // Handle Object
  if (obj instanceof Object) {
      copy = {};
      for (var attr in obj) {
          if (obj.hasOwnProperty(attr)) copy[attr] = deepClone(obj[attr]);
      }
      return copy;
  }
  throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}

使用键盘事件(keypress)对输入框(input)做输入限制

需求

为避免用户输入非法数据，希望能对某些输入框的输入做限制。这里用价格输入框(只允许输入最多2位小数的非负数值)来做例子：

1
<input type="text" id="price" name="price" placeholder="请输入价格（最多2位小数）" required>

键盘事件处理代码(javascript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//用了jQuery
$(function(){
    //事件绑定
    $('#price').keypress(onPriceKeypress).keyup(onPriceKeyup);
    //按键处理
    function onPriceKeypress(e){
        var allowKeys = '0123456789+.';//只允许输入这些字符
        var keyCode = e.which;//键盘输入的字符码
        
        if (code<32 || (code>126 && code<160)){
            //在有些浏览器（如Firefox）下控制字符也会触发该事件
            return true;//允许输入控制字符，如退格、删除、tab等键
        }
        if (allowKeys.indexOf(String.fromCharCode(code))<0){//若是不允许的字符
			return false;//禁止输入
		}
		return true;
    }
    //起键处理
    function onPriceKeyup(e){
		var $ipt = $(this), val = $ipt.val();//取当前值
		if (!/^[+\d]?\d*\.?\d{0,2}$/.test(val)){//若当前值不是合法价格
			$ipt.val(/[+\d]?\d*\.?\d{0,2}/.exec(val));//去除不合法的内容
		}
    }
}

注：

  1. 只在input使用pattern属性（如：pattern="[+\d]?\d*\.?\d{0,2}"）只能限制最后的结果，不能限制输入不当的字符。
  2. 把input的type设为number可限制只能输入数字，但无法输入小数。
  3. 在有些浏览器（如Firefox）下控制字符也会触发keypress事件，待textinput事件普及后改用该事件就不用做特殊处理了。

使用electron开发桌面应用（笔记）

开发环境

  • nodejs + npm/cnpm 
    1
    安装node
  • electron
  • 开发工具
    • atom

      第三方(vendors)

  • jQuery
  • Bootstrap
  • Nedb

Q&A

  • 如何防止用户重复打开应用？
  • 执行Nedb操作有时无响应（callback不被调用）？
    • 上一次操作参数有误导致后面的操作都被挂起(参看BUG)
  • 路径问题：相对路径 v.s. 绝对路径？数据文件路径？
    • 界面(ui组件)载入使用相路径（相对于对于起始页index.html）
    • 业务(mdl&&dao)对象require使用绝对路径(appPath+对象.js)
    • 数据文件存放在userData路径下：app.getPath(‘userData’)