JS基础规范

【基础知识】
1、
实际上程序的效率关键在于算法。
在HTML 中的JavaScript代码会明显增加文件大小，而且也不能对其进行缓存和压缩。
JavaScript文件引入应位于head中或者body最后。放在body最后可以减少因为载入脚本而造成页面其它内容载入被延迟的问题。

2、
增加代码：added by ***，修改代码：modified by ***，删除代码或者注释代码：commented by ***
函数名需用动词开头，首字母应小写，后面相应的单词首字母大写
function setContext(ServletContext context){
}
使用{}代替new Object()    使用[]代替new Array()
调用后台时必须捕捉异常，可以多个调用一起捕捉，特别是在初始化页面的时候。
不要修改内置对象如Object、Array、Function的原型对象。
使闭包操作DOM的时候，注意内存泄漏的问题。
统一使用[]获取集合类对象。

3、
对象是属性的集合，每个属性都由“名/值对”构成
数组和对象中都可以包含另一个数组或对象
当函数赋值给对象的属性，我们称为“方法”，所有的JavaScript对象都含有方法

4、JavaScript区分大小写，用Unicode字符集编写，HTML并不区分大小写（XHTML区分大小写）
除了数组类和函数类之外，JavaScript语言核心定义了其他三种有用的类：日期类、正则类、错误类
对象到字符串和对象到数字的转换方法：toString()  valueOf()
在JavaScript中。只有null和undefined是无法拥有方法的值
Math.round/ceil/floor
在JavaScript中以Infinity表示无穷大值，NaN表示非数字值
isNaN()  如果参数是NaN或者是一个非数字值（比如字符串和对象），则返回true
isFinite()  在参数不是NaN、Infinity或-Infinity的时候返回true
做显示类型转换最简单的方法就是使用Boolean()、Number()、String()或Object()函数
+转换为数字    ~按位求反    typeof检测操作数类型    delete删除属性    void返回undefined值
所有的数字都是浮点型的，除法运算的结果也是浮点型的

5、一个递归函数：
function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(10));

【Firebug调试（IE可以使用Firebug调试）】
1、
http://jingyan.baidu.com/album/c14654134e30d10bfcfc4c23.html
https://getfirebug.com/wiki/index.php/Console_api

2、而且在调试Ajax应用的时候也是特别有用，
你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、 URL，http头以及回馈的内容

3、
你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，
光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了

4、
如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，
可以尝试在CSS调试器中选中一个样式表属性，
然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。

5、可视化的CSS尺标

【规范】
JavaScript

文件名：
ZTEsoftDataTable.js、OrderDetail.js
只能包含英文字母，不能有空格，除专有名词外不允许数字。文件名命名采用“大驼峰”法则。文件名最好和相关联的JSP文件名对应。

注释的写法必须符合JS Duck的规范，方便导出API文档。

所有的变量必须在使用前进行声明。
    禁止在同一行定义多个变量或者常量，例如：
        var a = 1;
        var b = 2;
    而非：
        var a = 1, b = 2;
        var a = 1,
            b = 2;

禁止使用全局变量。
禁止使用全局函数如：btnOKOnclick();selNeTypeOnclick()。

变量的名称采用"小驼峰"法则
函数的命名遵循”小驼峰”法则。
function CreateOrder()
 addRecordToTreeList()//js函数

使用===和!==，禁止使用==和!=

使用parseInt()把字符串解析成数值时需要指定第二个参数：转换时使用的基数（即多少进制）。   

禁止使用for-in语句枚举数组。

一条有返回值的return 语句不要使用“( )”（括号）来括住返回值

禁止使用with语句。

if、for等语句的执行语句部分无论多少都要加括号{}


业务代码禁止使用eval。
禁止使用Function 构造器，它是另外一种形式的eval。
禁止给setTimeout 或者setInterval 传递字符串类型参数，否则这两个方法的行为就类似于eval。

禁止业务代码修改内置对象如Object、Array、Function的原型对象。

导入JavaScript文件时没有必要使用language属性，
但必须加入type和charset=”utf-8”属性：
<script type="text/javascript" src="filename.js" charset=”utf-8”>

for循环优化
var len=arr.length;
for(var i=0;i<len;i++） {

}
//因为js中执行.length属性的时候，效率比较低。

js的函数都是可变长参数，js的对象都是动态对象，充分利用这2点，可以设计出非常灵活的函数参数。

注释如放于上方则需与其上面的代码用空行隔开。

公共代码和函数必须使用jsduck进行文档化，jsduck是一个很好用的JS文档生成工具，最终生成的文档格式非常好用。jsduck在github主页上有，Extjs使用jsduck生成API文档。


JavaScript文件引入应位于head中或者body最后。放在body最后可以减少因为载入脚本而造成页面其它内容载入被延迟的问题。

避免每行超过 120个字符。

分页总记录数查询：
callRemoteQueryCountFunction

parseFolat()只解析十进制值，无需第二个参数

在JavaScript 中块没有域。只有函数有域。

获取Html元素的值
var name = document.getElementById("txtName").value;
访问元素的自定义属性

获取集合类对象：
document.getElementsByName(inputName)[1]

访问DOM元素的父元素
使用node.parentNode来访问node的父结点。   

访问DOM元素的子元素集合
使用node.childNodes来访问node的子结点。

设置Html元素的值
$("txtName").value = “JavaScript”;

设置Html元素的显示/隐藏   
$("txtName").style.display = "none";
$("txtName").style.display = "block";

设置Html元素的禁用与否
$("txtName").disabled = true;
$("txtName").disabled = false;  

设置元素的自定义属性
$("txtPrice").setAttribute("Unit","RMB");

设置元素的样式
var spanElement = $(“mySpan”);
spanElement.setAttribute(“style”, “font-weight:bold; color:red;”);

设置元素的class属性
var spanElement = $(“mySpan”);
spanElement.setAttribute(“class”, “styleClass”);

动态设置标签内容
$(“tdName”).innerHTML = “JavaScript”;

使表格追加一行
var newRow = $("tblCdr").insertRow(-1);
使行追加一单元格
var newCell = newRow.insertCell(-1);

使用{} 代替new Object()。使用[] 代替new Array()。
当成员名是一组有序的数字时使用数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

分页总记录数查询
使用 callRemoteQueryCountFunction或 callRemoteQueryRBCountFunction，不需要专门创建服务查询总记录数

调用父页面的方法时是否使用如下规范写法 window.parent.functionName();

访问父页面的变量时是否使用如下规范写法 window.parent.变量名;

获取select当前选中项的text是否使用如下规范写法   
$(id).options[$(id).selectedIndex].text

select添加Option 是否使用如下规范写法  
$(id).options.add(createElement('OPTION'))

清空select是否使用如下规范写法
$(id).options.length = 0

调用iframe的方法
$(iframeID).contentWindow.functionName();
访问iframe的变量
$(iframeID).contentWindow.变量名;

使用createElement、appendChild增加行、列
问题：IE中，不能将行直接增加到table
规范：将行增加到表体tbody；在table元素下建一个tbody的元素，tr元素增加到tbody元素。而不是直接增加到table元素下。
示例：
<table id=”myTable”>
    <tbody id=”myTableBody”></tbody>
</table>
增加方法：
var cell = document.createElement(“td”);
cell.appendChild(document.createTextNode(“foo”));
var row = document.createElement(“tr”);
row.appendChild(cell);
document.getElementById(“myTableBody”).appendChild(row);
注意appendChild的返回值。

---
界面规范
表单：包含表单项的区域
表单项：标签+表单元素
表单元素：输入框、下拉列表

【JS笔试题】
1、输出为什么是false
var a = "23" < "13";
console.log(a);

2、window对象的move(x,y)方法、resizeTo(x,y)方法、sersizeBy(x,y)方法
window 对象的 open 方法返回的是返回打开新窗口的对象

3、
setInterval(“alert(“dd”);”,1000)这段代码的意思是每隔一秒弹出一个对话框
setTimeout("alert("dd");",1000)等待一秒后弹出一个对话框

【JS开发工具】
使用spket作为JavaScript代码的开发工具，该工具可以作为Eclipse插件使用，也可以作为独立的IDE使用。
使用JSBuilder压缩JS代码。

【浏览器兼容】
2 浏览器兼容
    如果项目中使用了js框架，使用框架提供的浏览器兼容特性，而不自己编写与具体浏览器版本有关的代码。
    【推荐：在大量使用JavaScript的项目中，至少使用JQuery。】
    以下为常见的浏览器兼容问题，在没有使用框架的情况下适用。
2.1 DOM兼容
    不在应用中使用iframe。
    设计DOM操作工具类，处理HTML标签的CRUD操作，屏蔽浏览器差异。
2.2 CSS兼容
    使用设置class的方式批量设置CSS样式，而不使用代码一个一个操作样式表。
var spanElement = $(“mySpan”);
spanElement.setAttribute(“class”, “styleClass”);
spanElement.setAttribute(“className”, “styleClass”);
    由于CSS的样式设置方式存在浏览器差异，设计一个全局单例的CSS样式工具类来处理兼容问题。
2.3 事件兼容
    除动态创建的HTML标签之外，不推荐使用0级事件模型（不在标签里面写事件相关的代码，例如<div οnmοusemοve=”***”></div>）。
    提供统一的事件工具类EventManager做兼容处理，至少兼容标准事件模型和IE事件模型。
    示例：
        
2.4 Ajax兼容
    提供全局单例Ajax类，至少兼容标准接口和IE接口。

【JS框架、名词】
一、BootStrap

二、jquery

三、JSON

四、ajax