温故而知新：javascript 技巧与习惯总结
更加简洁且高效的代码习惯
例如对象：
普通模式
var myobj = new Object();
myobj.colour = 'red';
myobj.wheels = 4;
myobj.hubcaps = 'spinning';
myobj.age = 4;
高效简洁模式
var myobj = {
colour:'red',
wheels:4,
hubcaps:'spinning',
age:4
};
这种写法简洁得多，而且不需要重复写对象名称。
内部元素最后一个不要加“,”，IE会报错的，IE的问题总是另你困扰，但是变量的最后应该习惯加分号，为了日后可以顺利压缩。
数组的简洁写法
var myArr = new Array("元素1","元素2","元素3");
var myArr=["元素一","元素二"];
var myArr = new Array();
myArr['a']='小兔';
myArr['b']='大兔';
//遍历数组键值
for(var key in myArr){
alert(myArr[key]);
}
逻辑判断
var a;
if(y=='ok'){a=1 ;}else{a=0 ;}
如果逻辑只是一个简单的值判断，可以采用三元运算，例如：
var a;
a = (y=='ok') ? 1 : 0;
好的变量的定义习惯：
有意义的命名,大小写规范；
//采用范围+意义+属性 的模式；同级变量可以一行定义；对象高、宽.....
var objLength=0,objWidth=0;objPositionX=0,objPositionY=0;
定义函数范围，避免冲突;
var name = 'appname';
var age = '24';
var sexy = 'male';
var myApplication = {
createMember : function(userName,userAge,userSexy)
{
name = userName ;
age = userAge;
sexy = userSexy;
},
getAge : function()
{
return age;
},
getName : function()
{
return name;
},
getSexy : function()
{
return sexy;
}
}
myApplication.createMember('alisa',20,'female');
alert(myApplication.getName());
alert(myApplication.getAge());
保护变量范围，对象模式
var myApplication = function(){
var Member = new Array();
Member['name'] = 'Chris';
Member['age'] = '34';
Member['sexy'] = 'male';
function createMember(userName,userAge,userSexy){
Member['name'] = userName;
Member['age'] = userAge;
Member['sexy'] = userSexy;
}
function getMemberDetails(){
return Member;
}
return{
create:createMember,
get:getMemberDetails
}
}();
myApplication.create('lisa','22','female');
myMember = myApplication.get()
alert(myMember['name']);
尽可能使用内置函数
//数组函数特别值得注意，内置函数一般效率会比二次函数高
//javascript数组函数包括以下4个函数：
//(1)join函数：转换并连接数组中的所有元素为一个字符串。例:
function JoinDemo()
{
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");//分隔符
return(b);//返回的b=="0-1-2-3-4"
}
//(2)langth函数：返回数组的长度。例：
function LengthDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.length;
return(l);//l==5
}
// (3)reverse函数：将数组元素顺序颠倒。例：
function ReverseDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.reverse();
return(l);
}
// (4)sort函数：将数组元素重新排序。例：
function SortDemo()
{
var a, l;
a = new Array("X" ,"y" ,"d", "Z", "v","m","r");
l = a.sort();
return(l);
}
// (5)max函数：快速找到数组中最大数值var numbers = [3,342,23,22,124]; var max = 0; for(var i=0;i<numbers.length;i++){ if(numbers[i] > max){ max = numbers[i]; } } alert(max);
//这是一个方法，但是有更加简单的办法：
Math.max(12,123,3,2,433,4); // returns 433
另外应该记得的内置函数
1.常规函数
javascript常规函数包括以下9个函数：
(1)alert函数：显示一个警告对话框，包括一个OK按钮。
(2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
(3)escape函数：将字符转换成Unicode码。
(4)eval函数：计算表达式的结果。
(5)isNaN函数：测试是(true)否(false)不是一个数字。
(6)parseFloat函数：将字符串转换成符点数字形式。
(7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。
(8)prompt函数：显示一个输入对话框，提示等待用户输入。例如：
<script language="javascript">
<!--
alert("输入错误");
prompt("请输入您的姓名","姓名");
confirm("确定否！");
//-->
</script>
(9)unescape函数：解码由escape函数编码的字符。
2.数组函数
javascript数组函数包括以下4个函数：
(1)join函数：转换并连接数组中的所有元素为一个字符串。例:
function JoinDemo()
{
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");//分隔符
return(b);//返回的b=="0-1-2-3-4"
}
(2)langth函数：返回数组的长度。例：
function LengthDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.length;
return(l);//l==5
}
(3)reverse函数：将数组元素顺序颠倒。例：
function ReverseDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.reverse();
return(l);
}
(4)sort函数：将数组元素重新排序。例：
function SortDemo()
{
var a, l;
a = new Array("X" ,"y" ,"d", "Z", "v","m","r");
l = a.sort();
return(l);
}
3.日期函数
javascript日期函数包括以下20个函数：
(1)getDate函数：返回日期的“日”部分，值为1～31。例：
function DateDemo()
{
var d, s = "Today's date is: ";
d = new Date();
s += (d.getMonth() + 1) + "/";
s += d.getDate() + "/";
s += d.getYear();
return(s);
}
(2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，...，6表示星期六。例：
function DateDemo()
{
var d, day, x, s = "Today is: ";
var x = new Array("Sunday", "Monday", "Tuesday");
var x = x.concat("Wednesday","Thursday", "Friday");
var x = x.concat("Saturday");
d = new Date();
day = d.getDay();
return(s += x[day]);
}
(3)getHours函数：返回日期的“小时”部分，值为0～23。例。
function TimeDemo()
{
var d, s = "The current local time is: ";
var c = ":";
d = new Date();
s += d.getHours() + c;
s += d.getMinutes() + c;
s += d.getSeconds() + c;
s += d.getMilliseconds();
return(s);
}
(4)getMinutes函数：返回日期的“分钟”部分，值为0～59。见上例。
(5)getMonth函数：返回日期的“月”部分，值为0～11。其中0表示1月，2表示3月，...，11表示12月。见前面的例子。
(6)getSeconds函数：返回日期的“秒”部分，值为0～59。见前面的例子。
(7)getTime函数：返回系统时间。
function GetTimeTest()
{
var d, s, t;
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
d = new Date();
t = d.getTime();
s = "It's been "
s += Math.round(t / DyMilli) + " days since 1/1/70";
return(s);
}
(8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。
function TZDemo()
{
var d, tz, s = "The current local time is ";
d = new Date();
tz = d.getTimezoneOffset();
if (tz < 0)
s += tz / 60 + " hours before GMT";
else if (tz == 0)
s += "GMT";
else
s += tz / 60 + " hours after GMT";
return(s);
}
(9)getYear函数：返回日期的“年”部分。返回值以1900年为基数，例如1999年为99。前面有例子。
(10)parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。
function GetTimeTest(testdate)
{
var d, s, t;
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
d = new Date();
t = Date.parse(testdate);
s = "There are "
s += Math.round(Math.abs(t / DyMilli)) + " days "
s += "between " + testdate + " and 1/1/70";
return(s);
}
(11)setDate函数：设定日期的“日”部分，值为0～31。
(12)setHours函数：设定日期的“小时”部分，值为0～23。
(13)setMinutes函数：设定日期的“分钟”部分，值为0～59。
(14)setMonth函数：设定日期的“月”部分，值为0～11。其中0表示1月，...，11表示12月。
(15)setSeconds函数：设定日期的“秒”部分，值为0～59。
(16)setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
(17)setYear函数：设定日期的“年”部分。
(18)toGMTString函数：转换日期成为字符串，为GMT格林威治标准时间。
(19)setLocaleString函数：转换日期成为字符串，为当地时间。
(20)UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准时间计算。
4.数学函数
javascript数学函数其实就是Math对象，它包括属性和函数(或称方法)两部分。其中，属性主要有下列内容。
Math.e:e(自然对数)、Math.LN2（2的自然对数)、Math.LN10(10的自然对数)、Math.LOG2E(e的对数，底数为2)、Math.LOG10E(e的对数，底数为10)、Math.PI(π)、Math.SQRT1_2(1/2的平方根值)、Math.SQRT2(2的平方根值)。
函数有以下18个：
(1)abs函数：即Math.abs(以下同)，返回一个数字的绝对值。
(2)acos函数：返回一个数字的反余弦值，结果为0～π弧度(radians)。
(3)asin函数：返回一个数字的反正弦值，结果为-π/2～π/2弧度。
(4)atan函数：返回一个数字的反正切值，结果为-π/2～π/2弧度。
(5)atan2函数：返回一个坐标的极坐标角度值。
(6)ceil函数：返回一个数字的最小整数值(大于或等于)。
(7)cos函数：返回一个数字的余弦值，结果为-1～1。
(8)exp函数：返回e(自然对数)的乘方值。
(9)floor函数：返回一个数字的最大整数值(小于或等于)。
(10)log函数：自然对数函数，返回一个数字的自然对数(e)值。
(11)max函数：返回两个数的最大值。
(12)min函数：返回两个数的最小值。
(13)pow函数：返回一个数字的乘方值。
(14)random函数：返回一个0～1的随机数值。
(15)round函数：返回一个数字的四舍五入值，类型是整数。
(16)sin函数：返回一个数字的正弦值，结果为-1～1。
(17)sqrt函数：返回一个数字的平方根值。
(18)tan函数：返回一个数字的正切值。
5.字符串函数
javascript字符串函数完成对字符串的字体大小、颜色、长度和查找等文明作，共包括以下20个函数：
(1)anchor函数：产生一个链接点(anchor)以作超级链接用。anchor函数设定<A NAME...>的链接点的名称，另一个函数link设定<A HREF=...>的URL地址。
(2)big函数：将字体加到一号，与<BIG>...</BIG>标签结果相同。
(3)blink函数：使字符串闪烁，与<BLINK>...</BLINK>标签结果相同。
(4)bold函数：使字体加粗，与<B>...</B>标签结果相同。
(5)charAt函数：返回字符串中指定的某个字符。
(6)fixed函数：将字体设定为固定宽度字体，与<TT>...</TT>标签结果相同。
(7)fontcolor函数：设定字体颜色，与<FONT COLOR=color>标签结果相同。
(8)fontsize函数：设定字体大小，与<FONT SIZE=n>标签结果相同。
(9)indexOf函数：返回字符串中第一个查找到的下标index，从左边开始查找。
(10)italics函数：使字体成为斜体字，与<I>...</I>标签结果相同。
(11)lastIndexOf函数：返回字符串中第一个查找到的下标index，从右边开始查找。
(12)length函数：返回字符串的长度。(不用带括号)
(13)link函数：产生一个超级链接，相当于设定<A HREF=...>的URL地址。
(14)small函数：将字体减小一号，与<SMALL>...</SMALL>标签结果相同。
(15)strike函数：在文本的中间加一条横线，与<STRIKE>...</STRIKE>标签结果相同。
(16)sub函数：显示字符串为下标字(subscript)。
(17)substring函数：返回字符串中指定的几个字符。
(18)sup函数：显示字符串为上标字(superscript)。
(19)toLowerCase函数：将字符串转换为小写。
(20)toUpperCase函数：将字符串转换为大写。
应该了解的JS框架：Prototype、jQuery、YUI、ExtJS 和 MooTools。
Prototype 是少数几个不提供开箱即用 UI 组件和 UX 增强功能的 JavaScript 框架之一。它将这些内容转移到其兄弟库 script.aculo.us（最新版本是 Scripty2）中。Script.aculo.us 还添加了对 Prototype 中的各种效果和行为的支持。包括 highlighting、morphing、folding、shaking、sliding、puffing 等等。Script.aculo.us 还提供拖放支持，例如滑块、in-place Ajax 编辑器和 autocompleters。与其他框架不同，Script.aculo.us 将所有控件（例如滑块和 autocompleters）的设计留给开发人员，并且未提供标准界面。
jQuery(轻量级，灵活的，一般应用足以支持，再加上历年发展，企业级或许也可以)
与 Prototype 不同，jQuery 核心库中包含一些基本的 UX 增强。这些增强与 script.aculo.us 中的一些基本效果类似。例如 sliding 和 fading。然而，要获得更高级的 UX 特性，就需要下载 jQuery UI 库，它包含比 jQuery 核心库更多的效果，以及交互特性，如拖放、调整大小和排序。与 script.aculo.us 不同的是，jQuery UI 还包含一些小部件或组件，它们使开发具有吸引力的界面变得更加容易。目前，这些组件包括 Accordion、Datepicker、Dialog、Progressbar、Slider 和 Tabs。这些小部件都可以划分主题，并且 jQuery UI 包含各种各样的主题，可以适合您自己的特定 Web 站点或 Web 应用程序的组件。图 1 演示了 jQuery UI Datepicker 小部件的例子，该小部件的主题为 Cupertino。
Prototype 和 jQuery 不包含开箱即用的 UI 小部件，但是 Yahoo! User Interface 库
(YUI) 包含一个 bucketload。除了支持拖放和调整大小外，YUI 第二版还包含 autocompleters、calendar
控件、carousel 组件、绘图、对话框、进度条、富文本编辑器（所见即所得文本区）、滑块、选项卡、树等等。在撰写本文时，上述小部件都没有包含在
YUI 第三版中。图 2 是结合使用这些组件的一个例子。
和 YUI 一样，ExtJS 包含大量开箱即用的组件，其中有很多功能强大的网格控件，支持内联编辑、分页、筛选、分组、汇总、缓冲和数据绑定。ExtJS 组件具有非常专业的外观，并且分门别类。其他小部件包括选项卡、图表、窗口（对话框）、树、布局管理器、增强的表单控件、工具栏和菜单、拖放操作和直接远 程功能（direct remoting）。这仅仅是 ExtJS 所提供的一小部分，如果要查找更多 RIA 组件，请登录 ExtJS 网站。图 3 是用 ExtJS 开发的 Web 桌面程序示例，展示了这个库的丰富特性。
MooTools 和 Prototype、jQuery 一样，也不包含开箱即用的 UI 控件和小部件。与 jQuery
一样，它包含一组有限的效果。其更高级的 UX 增强包含在 MooTools.More.js 扩展中。这个扩展不仅仅是简单的 UX/UI
插件，而是包含对 Array、Date、Hash 和 String 类以及额外的 Element
扩展的一些有趣的附加功能。至于 UX 增强功能，MooTools.More.js 包含拖放支持以及一些其他效果。这些附加功能还包括一些 UI
控件，如 accordion、可排序的 HTML 表、scroller、工具提示和 Ajax spinner overlays。然而，与
script.aculo.us 一样，您需要自己设计这些控件。
置于选择什么样的框架，始终由你确定
浙公网安备 33010602011771号