深入浅出js常见问题
2012-06-08 15:53
218 查看
今天我们来讨论js中常见的问题:
一、引言
a) 区分大小写
b) 单引号、双引号
c) 括号
d) 函数调用和引用
e) 作用域、闭包
f) 自己创建js库
二、具体介绍
a) 区分大小写:js中方法、变量、对象都是区分大小写的。
Function myFunction(){} 和 function MyFunction(){}是不同的两个函数。
Js中核心对象Array如果写成array,则不能识别;Object也是一样。
b) 单引号、双引号
Js中单引号和双引号没有特殊区别,都可以用来创建字符串。但是一般情况下,我们喜欢使用单引号。
*注:单引号中可以包含双引号,双引号也可以包含单引号。
下面的实例:我们想通过函数,显示变量temp和temp2的字符串值:
c) 在js中括号有两种作用:
i. 改变优先级,括号内的内容优先执行
ii. (function(){})(); function之前的一对括号作为分隔符,后面的括号表示立即执行这个方法
同样是上面的实例,我们也可以这样执行,后面的括号表示立即执行该函数</script>前面的小括号。
d) 函数调用和引用:
Var foo=example(); //foo表示函数的返回值;
Var foo=example; //表示将函数的引用赋给一个值foo1;
上面的实例,我们也可以将函数的指针指向onload事件。
e) 作用域、闭包:
下面的实例,我们想通过点击页面上的a标记链接,显示相应的i的值。然后这样做不能达到效果:
这是由于上面newInit函数中是通过onclick点击事件触发的,然而每次点击链接,函数中循环都执行完了。所以每次点击会显示相同的结果。
所以,我们应该换一种思路做。
registerListener每次被调用的时候,都会产生一个i的实例,这样就会使i的值不同,从而达到我们想要的效果。registerListener函数保证了每一个实例都保存了一个唯一的对象。
f) 自己创建js库:
大家都知道,网上有很多非常卓越的JavaScript库,像Prototype、JQuery等。有人觉得他们非常棒,但是有人觉得长期使用会对它产生依赖性,助长惰性。
既然如此,大家可以折中一下,借鉴这些非常好的库,然后建立自己需要的库:
上面是我建立的js库,从现在开始积累。
三、总结
1、学习js优雅的写法;
2、注意学习中的细节;
3、多多总结,有利无弊。
一、引言
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、多多总结,有利无弊。
相关文章推荐
- 深入浅出js常见问题
- js常见兼容性问题
- JSBinding + SharpKit / 常见问题
- 整理前端css/js/jq常见问题及解决方法(2)
- JS版常见问题(一)层遇到select框时?
- JS 调试中常见的报错问题解决方法
- js+css:43种常见的浏览器兼容性问题大汇总
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- JS解析XML代码备份---常见问题
- js中Window对象和常见js问题
- 收集关于angular与JS的一些常见问题 总结
- js常见兼容性问题举例包含完整代码
- JS常见问题集合(持续更新)
- 常见的JS和CSS问题
- js中的常见问题
- 入门 Vue.js会碰到的常见问题
- js 常见的一些小问题 需要注意的细节
- JS版常见问题(二)兼容版本的无提示关闭窗口!
- js中常见的问题
- JS常见问题整理(持续更新)