今天我们来讨论js中常见的问题:
一、引言
a) 区分大小写
b) 单引号、双引号
c) 括号
d) 函数调用和引用
e) 作用域、闭包
f) 自己创建js库
二、具体介绍
a) 区分大小写:js中方法、变量、对象都是区分大小写的。
Function myFunction(){} 和 function MyFunction(){}是不同的两个函数。
Js中核心对象Array如果写成array,则不能识别;Object也是一样。
b) 单引号、双引号
Js中单引号和双引号没有特殊区别,都可以用来创建字符串。但是一般情况下,我们喜欢使用单引号。
*注:单引号中可以包含双引号,双引号也可以包含单引号。
下面的实例:我们想通过函数,显示变量temp和temp2的字符串值:
<script language="javascript" type="text/javascript">
/*var array =new Array();*/
var temp='aj"abc"';
var temp2="a'acb'";
function Init(){
alert(temp);
alert(temp2);
};
</script>
<body οnlοad="Init();"></body>
c) 在js中括号有两种作用:
i. 改变优先级,括号内的内容优先执行
ii. (function(){})(); function之前的一对括号作为分隔符,后面的括号表示立即执行这个方法
同样是上面的实例,我们也可以这样执行,后面的括号表示立即执行该函数</script>前面的小括号。
<script language="javascript" type="text/javascript">
var temp='aj"abc"';
var temp2="a'acb'";
(function Init(){
alert(temp);
alert(temp2);
})();
</script>
d) 函数调用和引用:
Var foo=example(); //foo表示函数的返回值;
Var foo=example; //表示将函数的引用赋给一个值foo1;
上面的实例,我们也可以将函数的指针指向onload事件。
<script language="javascript" type="text/javascript">
/*var array =new Array();*/
var temp='aj"abc"';
var temp2="a'acb'";
function Init(){
alert(temp);
alert(temp2);
};
window.οnlοad=Init;//把函数的指针指向onload
</script>
e) 作用域、闭包:
下面的实例,我们想通过点击页面上的a标记链接,显示相应的i的值。然后这样做不能达到效果:
<script language="javascript" type="text/javascript">
function newInit(){
for(var i=1;i<=3;i++){
var anchor=document.getElementById("anchor"+i);
anchor.οnclick=function(){
alert("fadsf"+i);
}
}
}
window.οnlοad=newInit;
</script>
<body>
<a id="anchor1" href="#">abc</a><br/>
<a id="anchor2" href="#">abc</a><br/>
<a id="anchor3" href="#">abc</a><br/>
</body>
这是由于上面newInit函数中是通过onclick点击事件触发的,然而每次点击链接,函数中循环都执行完了。所以每次点击会显示相同的结果。
所以,我们应该换一种思路做。
<script language="javascript" type="text/javascript">
function newInit(){
for(var i=1;i<=3;i++){
var anchor=document.getElementById("anchor"+i);
registerListener(anchor,i);
}
}
function registerListener(anchor,i){
anchor.οnclick=function(){
alert("My anchor is anchor"+i);
}
}
window.οnlοad=newInit;
</script>
<body>
<a id="anchor1" href="#">abc</a><br/>
<a id="anchor2" href="#">abc</a><br/>
<a id="anchor3" href="#">abc</a><br/>
</body>
registerListener每次被调用的时候,都会产生一个i的实例,这样就会使i的值不同,从而达到我们想要的效果。registerListener函数保证了每一个实例都保存了一个唯一的对象。
f) 自己创建js库:
大家都知道,网上有很多非常卓越的JavaScript库,像Prototype、JQuery等。有人觉得他们非常棒,但是有人觉得长期使用会对它产生依赖性,助长惰性。
既然如此,大家可以折中一下,借鉴这些非常好的库,然后建立自己需要的库:
// JavaScript Document
(function(){
//构造命名空间
window['IC']={}
function $(){
var elements=new Array();
//arguments当前函数的参数数组。参数
for(var i=0;i<arguments.length;i++){
var element=arguments[i];
if(typeof element=='string'){
element=document.getElementById(element);
}
if(arguments.length==1){
return element;
}
elements.push(element);
}
return elements;
}
//注册命名空间
window['IC']['$']=$;
function getElementsByClassName(className,tag){
var allTags=document.getElementsByTagName(tag);
var matchingElements=new Array();
className=className.replace(/\-/g,"\\-");
var regex=new RegExp("(^|\\s)"+className+ "(\\s|$)");
var element;
for(var i=0;i<allTags.length;i++){
element=allTags[i];
if(regex.test(element.className)){
matchingElements.push(element);
}
}
return matchingElements;
}
window['IC']['getElementsByClassName']=getElementsByClassName;
})();
上面是我建立的js库,从现在开始积累。
三、总结
1、学习js优雅的写法;
2、注意学习中的细节;
3、多多总结,有利无弊。