2016项目总结0729-0805

以下是在最近做项目时遇到的一些疑惑，于是搜集资料总结如下

题外话：js中的数据类型有undefined、boolean、number、string、object等5种，前4种为原始类型，第5种为引用类型。
（排序从简单到复杂）

1、undefined、NaN、null的联系与区别
　　<1>类型分析：
　　 (1)定义的值和定义未赋值的为undefined，
　　 (2)NaN是一种特殊的number，
　　 (3)null是一种特殊的object。

　　<2>比较运算：
　　 (1)undefined与null是相等，但是不全等；
　　 (2)NaN与任何值都不相等，与自己也不相等。

　　<3>主要分析undefined和null：
　　(1)null是关键字；undefined是Global对象的一个属性
　　 (2)null是对象(空对象, 没有任何属性和方法)；undefined是undefined类型的值
　　 (3)对象模型中，所有的对象都是Object或其子类的实例，但null对象不是
　　 (4)null“等值(==)”于undefined，但不“全等值(===)”于undefined
　　 (5)运算时null与undefined都可以被类型转换为false，但不等值于false

题外话：每一个元素都有一个盒模型，而世界上存在两种计算元素宽度的方式：
一种是W3C的标准（宽度及为元素的宽度，不包括padding和border），
另一种是传统的盒模型（宽度包括了了元素自身的宽度再加上padding和border）。

2、input框设置width:100%,溢出父类容器

box-sizing: border-box;表示元素的大小是包括border以内的所有宽度，即传统盒模型，
而box-sizing: content-box;表示元素的宽度即content的宽度，不包括padding、border。

/*设置所有元素为传统盒模型*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

3、移动端最佳使用单位
rem是非常好用的一个属性，可以根据html来设定基准值，而且兼容性也很不错。

4、模拟:hover伪类
移动端有touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。
使用Javascript：

  var myLinks = document.getElementsByTagName('a');
  for(var i = 0, len = myLinks.length ; i < len; i++){
　　    myLinks[i].addEventListener(’touchstart’, function(){
             this.className = “hover”;
       }, false);
　　    myLinks[i].addEventListener(’touchend’, function(){
             this.className = “”;
       }, false);
  }

用css增加hover效果：
a:hover {/* 你要的效果*/}

5、input类型为date情况下不支持placeholder

桌面端（Mac）
– Safari 不支持 datepicker，placeholder 正常显示。
– Firefox 不支持 datepicker，placeholder 正常显示。
– Chrome 支持 datepicker，显示年、月、日格式，忽略placeholder。
移动端
– iPhone5 iOS7 有 datepicker 功能，但是不显示 placeholder。
– Andorid 4.0.4 无 datepicker 功能，不显示 placeholder
解决方法：
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">

因为text是支持placeholder的。因此当用户focus的时候自动把type类型改变为date，这样既有placeholder也有datepicker了。

6、中文输入法输入英文，字母之间可能会出现一个六分之一空格

加上这句代码 this.value = this.value.replace(/\u2006/g, '');

>> 持续积累中…

2016项目总结0729-0805

推荐阅读