web前端开发笔记

1.网站测试工具

(1)http://www.webpagetest.org/

2.移动端点击不要绑定click

因为有的设备click的触发有延迟

3.实时监听input值改变：html5事件 oninput

4.判断是否是触屏设备

document.hasOwnProperty(“ontouchstart”)，android上返回时true，

但是在ios设备上这个值返回的是false，所以我又加了判断是否是ios设备来完善点击处理

现在发现在android上有些浏览器document.hasOwnProperty(“ontouchstart”)返回的也是false，所以我又加了一个是不是android设备的判断

5.jquery规范

原文地址

6.在线图片压缩

tinypng

7.Can I use？

8.腾讯X5浏览器 Can I use?

9.IE 兼容模式

IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

10.移动开发通用meta

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

11.for in

for in用来遍历对象，不要用for in遍历数组

12.不要与null比较

一搬情况下不要把值和null进行比较，因为和null比较并不能保证后续操作安全。在一种情况下可以和null比较，就是这个值你知道它的结果可能是null。判断时要用===或者！==。

13.检测原始值类型用typeof

typeof用于检测基本类型的变量，typeof返回值包括string、number、boolean、undefined和object。

14.typeof null和typeof 数组返回的都是object。

15.检测复杂类型的值用instanceof

instanceof不仅检测构造这个对象的构造器，还检测原型链。

16.float会让元素block化。

17.用css画出的各种形状

css shapes

18.html5教程资源

html5

19.Mozilla 开发者网络

链接

20.mate renderer

<meta name="renderer" content="webkit|ie-stand" />

webkit(WebKit内核)、ie-stand(IE内核-标准模式)、ie-comp(IE内核-兼容模式) 选择渲染内核，多个用|隔开，此时浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。

2016年3月24，今天测的360可以支持，但是搜高浏还是不支持。

21.阿里图标库

链接

22.link和@import的区别

1).形式不同

link是html标签，@import是css语法；

link除了css可以加载其他资源，@import只能加载css。

2).加载时间不同

link在页面加载的同时加载，@import需要在页面完全载入后加载。

3).link没有兼容问题，@import是css2.1提出的。

4).link支持使用javascript控制dom改变样式，@import不支持。

23.如何关闭iOS中键盘自动大写

在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

24.mouseenter和mouseover

mouseover和mouseenter都会在鼠标移进元素时触发，但是元素的移进子元素时候mouseover也会触发，mouseenter就不会触发。

mouseleave和mouseout也是同理。

25.减少if else 精简代码

1）使用 || 逻辑运算符

if(a){
a=a;
}else{
a=b;
}

可以写成

a = a || b;

2)使用三元操作符 ？：

if(a==b){
a=c;
}else{
a=d;
}

可以写成

a = a==b? c : d;

3)使用数组

例如后台返回数字代码，如

fruit：0

//0=苹果，1=梨子，2=桔子，3=柠檬，4=芒果。。。

这样写if else语句代码会很多

可以这样写

var fArray=["苹果","梨子","桔子","柠檬","芒果"];
var result=fArray[fruit];

4）使用hash表

if(key=="Apple"){
val="Jobs";
}else if(key=="microsoft"){
var="Gates";
}else if(key=="Google"){
val="Larry";
}

可以写成

var ceos={"Apple":"Jobs","microsoft":"Gates","Google":"Larry"};
val=ceos[key];

5)少使用else 使用if+return方式

6）如果情况比较多，使用switch，据说性能没什么区别