现在的位置: 首页 > 综合 > 正文

深入浅出js常见问题

2012年10月17日 ⁄ 综合 ⁄ 共 3161字 ⁄ 字号 评论关闭

       今天我们来讨论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 onload="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.onload=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.onclick=function(){
				alert("fadsf"+i);
			}
		}
	}
	window.onload=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.onclick=function(){
			alert("My anchor is anchor"+i);
		}
	}
	window.onload=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、多多总结,有利无弊。

【上篇】
【下篇】

抱歉!评论已关闭.