Javascript 学习书 推荐


Posted in Javascript onJune 13, 2009

Aaron Gustafson著,李松峰 李雅雯 等译。感觉绝对是一本值得看的书。感兴趣的朋友可以看一下。下面是我从其中抽出来的javascript常见陷阱和对象的概念整理出来的。希望对大家能有一些帮助。

Ø Javascript语法中常见的陷阱

² 区分大小写

² 单引号和双引号实际上是没有特殊的区别的,这点我是从看了这本书才开始真正的知道,虽然在以前写程序时写过‘'号的字符串形式,但是却没有先觉性的发现“哦,原来这样也可以。”

另外大多数情况下还都是用‘'来表示字符串的,因为XHTML规范要求所有XHTML属性值都用“”括起来。这样混合代码时会很清晰。

² 换行,千万不要忽略这一点。因为如果在一个字符串中你用了回车做换行那么对不起了,浏览器会告诉你我不认识你的字符串。因为它会自动将回车转换成”;“但是为了解决这个问题,还好它提供了一个转义字符作为替代。如下所示:

var='<h2 class=”a”>A list</h2>\

<ol>\

<li class=”a”></li>\

</ol>'

有人会说可以用加号的,这些我知道。用加号作为字符串的操作符。估计是底层进行了+号的重载(?!)。

² 可选的分号和花括号

如果你不相信,我告诉你这是可以的。可以说这点javascript做的还是比较智能的。但是和前述那本书作者一样,我想我们做程序员还是规规矩矩些比较好。

² 重载

有时候或许你会突发奇想曲做一个javascript的重载函数,你会发现这时候竟然只有最后一个可以运行,前面的都没有得到录用机会。这是什么原因呢?

原来,先前的某某已经被后面的给替换掉了。也就是通常说的覆盖。再进一步说就是程序只引用作用域链中的最后一个同名函数。

² 匿名函数

不得不说这个家伙很有用。

² 作用域解析和闭包

这个作用域相信大家都比较熟悉,因为每个编程语言都有这样的概念。

而作用域链是用来描述一种路径的属于,沿着该路径可以确定变量的值(或者当函数被调用时要使用的方法)

闭包是与作用域相关的一个概念,它指的是内部函数即使在外部哈数执行完成并终止以后,仍然可以访问其外部函数的属性。当引用一个变量或方法时,javascript会沿着由对象执行路径构成的作用域链进行解析,查找变量最近定义的值。一旦找到,即使用该值。

² 迭代对象

不要怀疑这用的不好的话,很可能会产生错误。不信就看这一个例子:

var all=document.getElementsByTagName(‘*');

for(i in all){

//对all[i]元素进行操作。

}

由于返回的会分别等于length、item和namedItem,而这个很可能会导致代码中出现意外错误。

这时要做一下处理。用hasOwnProperty进行属性过滤,这个函数在对象的属性或方法是非继承的时返回true。方法如下:

var all=document.getElementsByTagName(‘*');

for(i in all){

if(!all.hasOwnProperty(i)){continue;}

//对all[i]元素进行操作。

}

² 函数的调用和引用。

注意了,这是不同的,调用会执行,引用只会给变量一个copy(好像可以这样理解吧?)

看下这个:

var foo=exampleFunction();

var foo=exampleFunction;

这两句式不一样的。前一个是执行exampleFunction这个函数并将返回值赋给变量foo,而后一个却是将exampleFunction这个函数的引用赋给foo。

Ø Javascript对象

属性和方法的概念相信大家都晓得。下面讲下javascript中的对象和其中的玄奥妙义(讲的跟武侠似的)。

1. 继承

Javascript的继承让我很奇怪,但是想过之后感觉还是有道理的。而且和其他的还是一样的思想。其实javascript就是做了一个复制的操作。闲话不说看一个例子相信大家都会清楚了。

//创建一个person对象的实例

var person={};

person.getName=function(){……};

person.getAge=function(){……};

//创建一个employee对象的实例

var employee={};

employee.getTitle=function(){……};

enployee.getSalary=function(){……};
//从person对象中继承方法

employee.getName=person.getName;

employ.getAge=person.getAge;

2. 创建自己的对象

有两种方式可以创建自己的对象:

第一种:var myObject =new Object();

第二种:var myObject={};//是第一种的简写形式。实际上面已经用到了。

3. 创建构造函数

第一种:function myConstructor(a){

//代码

}

不要惊讶,想象前面说的javascript中到处都是对象,虽然有些夸张。这个函数一时一个对象。

第二种:

或许聪明的读者已经猜出来了,就是函数定义的另外两种类型:

var myConstructor=function(a){};

第三种也一起写出来吧:var myConstructor=new Function(‘a',/*某些代码*/);

不过对于这种方式,因为会导致性能问题,所以还是用function比较妥当。

最后给个书中的例子:

function myConstructor(message){

alert(message);

this.myMessage=message;

}

var myObject =new myConstructor(‘Instantiating myObject!');

4. 添加静态方法

var myObject={};

//添加属性

myObject.name=”Jeff”;

//添加方法

myObject.alertName=function(){

alert(this.name);

}

//执行方法

myObject.alertName();

相信大家都能看明白,不说了。

5. 想原型中添加公有方法

添加公有方法的方式是用prototype,注意这里的prototype可不是那个js库。

//创建构造函数

function myConstructor(message){

alert(message);

this.myMessage=message;

}

//添加一个公有方法

myConstructor.prototype.clearMessage=function(string){

this.myMessage+=''+string;

}

这里面要提的一点是 构造函数中凡是以var开头的变量全部是私有变量,不是以.号和prototype添加而是直接写入构造函数中的为私有函数。

6. 最后提一下对象字面量

对象字面量对于代码的重构,冗余度的减小都很有帮助。所以如果可能的话最好用这种

看下下面的例子:

var myObject={

propertyA:'value',

propertyB:'value',

methodA:function(){}

}

不得不同意作者的观点,这种方式很优雅。

怎么样?是不是对Javascript中的对象和陷阱有了一些基本的认识?希望这篇文章对你有所帮助。

Javascript 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
javascript 框架小结 个人工作经验
Jun 13 #Javascript
动态刷新 dorado树的js代码
Jun 12 #Javascript
firefo xml 读写实现js代码
Jun 11 #Javascript
犀利的js 函数集合
Jun 11 #Javascript
js 操作css实现代码
Jun 11 #Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 #Javascript
Javascript Tab 导航插件 (23个)
Jun 11 #Javascript
You might like
php SQL防注入代码集合
2008/04/25 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
跟老齐学Python之Import 模块
2014/10/13 Python
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python中常用的内置方法
2019/01/28 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
测试工程师程序员求职信范文
2014/02/20 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers