Johnqing

摘要：所谓浏览器的“潜规则”即我们常说到的浏览器模式，而关于各种浏览器模式，网上已经有许多文档和资料了，但是很少有能够完全将几个概念阐述清楚的。大部分的资料稍显过时，有些内容可能已经不再适用了。本文中笔者将尽可能将几个概念阐述清楚，并去掉一些过时的内容，仅保留必要的干货。

想必你一定知道浏览器有个标准（Standards）模式和一个怪异（Quirks）模式，或许你还听说过有个“准标准（Almost Standards）”模式。而当你打开Internet Explorer的时候，又看到了什么浏览器模式、文档模式，还有什么兼容性视图等等…

这些都是什么？啥是浏览器模式，啥是文档模式？标准模式和准标准的模式有什么区别？IE9兼容性视图和真正的IE9有什么区别？什么情况下会触发这些模式，又该怎样才能检测到浏览器当前处于哪种模式中呢？本文将详细为你解答这些疑问。

 

三种模式

Johnqing

目的:
  合理javascript开发风格。使别人轻松的阅读你的代码，并使代码更优雅。

1、空白
  永远都不要混用空格和Tab。
2、美化语法
  a、小括号, 花括号, 换行
  if/else/for/while/try 通常都有小括号、花括号和多行
  b、一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case, new) 之后, 不要使用括号;
3、赋值, 声明, 函数

Johnqing

/**
* @通用颜色
* @{color:@color-33;}
*/
@color-333:#333;
@color-666:#666;
@color-999:#999;
@color-ddd:#ddd;
@color-ccc:#ccc;
@color-c00:#c00;

Johnqing

1、前端逻辑越来越复杂
2、多人协同开放
3、变量污染
4、代码升级

Johnqing

（注意：本教程前提为未安装gruntjs其他版本，如果安装请删除！）
1.安装node（在此不做介绍）
2.运行命令: npm install -g grunt-cli（-g为全局安装，可在任何目录运行）
3.进入项目目录，运行命令: npm install grunt --save-dev
4.查看是否安装成功 grunt -version
  成功显示: grunt-cli v0.1.6 grunt v0.4.0
5.新建package.json
  如下：
  {
    "name": "51",

Johnqing

捕捉浏览器中的JS运行时错误，主要通过监听window.onerror来实现。但是对于不同的脚本执行方式以及不同的浏览器，能捕获到的信息会有区别。

window.onerror 讲接收3个参数：

• msg：错误描述，比如：a is not defined
• url：出错脚本所在的url
• lineNumber：出错脚本的行数

本文将对不同浏览器和不同的脚本执行方式进行测试，并总结这些区别。

Johnqing

/**
 * 合并目录下的文件
 */

var fs = require('fs');
var path = require('path');

/**
 * 遍历目录里面的所有文件
 *

Johnqing

//取得cookie
function getCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');//把cookie分割成组
 for(var i=0;i < ca.length;i++) {
 var c = ca[i];//取得字符串
 while (c.charAt(0)==' ') {//判断一下字符串有没有前导空格
 c = c.substring(1,c.length);//有的话，从第二位开始取
 }
 if (c.indexOf(nameEQ) == 0) {

Johnqing

var searchTableArea = $(".search_table_area");
function fwidth() {
  var c_width = searchTableArea.width(),
  snumTrs = searchTableArea.find("tr"),
	snumTrsLen = searchTableArea.find("tr").length;

	for(var i = 0 ;i < snumTrsLen; i++) {
		snumTrs.eq(i).find("td:eq(1)").css("width",(c_width -200 + "px"));	
	}
}

Johnqing

html:

<ul>
	<li>111</li>
	<li>111</li>
	<li>111</li>
	<li>111</li>
	<li>111</li>
</ul>