【基础知识】
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
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