欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

掌握JavaScript基础编程技能

创建时间:2013年08月31日 20:22  阅读次数:(7644)
分享到:
(1)第一件事情,弄明白在哪儿写JavaScript代码
三种方式写JavaScript代码。
■ Inline JavaScript:直接将简短的JavaScript代码嵌入到HTML元素声明中:
<a  href="/about" onclick= " alert('this is the thing');" >About</a >  

■ Embedded JavaScript:将javaScript放到<script >元素中
<script  type="text/javascript" >   
//在此写JavaScript代码
</script >

■ 链接外部JavaScript文件:将JavaScript代码放到独立的.js文件中,然后在<script >元素引用它:
<script type="text/javascript" src="js/external.js" ></script >

(2)快速了解JavaScript语法基础
学习这部分内容,可以与C/Java/C#的基础语法相对照,重点关注其不同点就行了,以下是部分要点:
■ JavaScript定义了四种基本数据类型:numbers, strings, Booleans, undefined和null,其余所有的都是对象。
■ JavaScript所有的数都是64位浮点数,还有一个常量叫NaN(Not a Number),在编程中常用。
■ JavaScript有一些比较独特的运算符,列举几个:
      ===(严格判等运算符)、!!(把后面跟着的表达式变成一个bool值),方括号运算符(可以用于访问对象属性)

■ 变量的作用域:JavaScript没有块作用域,但有函数作用域。即:定义在函数中的参数和变量在函数外部不可见,并且在一个函数中的任何位置定义的变量在该函数中的任何地方都可见。这点与C和Java等编程语言都不一样。
■ ……

(3)比较独特与有用的内部对象
JavaScript本身提供了一些内部对象,可以在代码中直接使用,列举几个:
■ 数组:JavaScript其实没有传统意义上的数组,因此,你应该把它看成是“另外一种东西”,需要花点时间去明白它的特性。
■ 全局对象:JavaScript中有一个全局的global对象,除了那些有明确对象归属的成员,其它所有的东西都成为它的成员,在浏览器环境中,window对象就是全局对象。
■ 正则表达式:正则表达式在处理字符串上功能强大,花时间在这上面是值得的。
■ timer对象:可以用它实现定时调用
■ ……

(4)JavaScript代码调试方法
有几种方法可以调试JavaScript代码,最土的一种是使用alert()输出信息,比较专业的是使用console.log和设置断点。

每个Web开发者都一定要至少掌握一种浏览器所提供的调试工具:

Firebug(Firefox)、IE  Developer Tools(IE 8以后)、Opera Dragonfly( Opera 9.5以后)、WebKit Developer Tools( Safari和Chrome)

大多数浏览器调试工具都可以使用F12这个热键呼叫出来,并且其提供的功能都很强大。

另外,一些IDE(比如Visualstudio),也支持对JavaScript代码的跟踪与调试。

2 把握JavaScript编程语言的精华
在学习JavaScript的过程中,我建议别把JavaScript看成是一种OO语言,应把它看成是一种函数式语言!

另外,重点搞掂函数、对象、闭包三个东东,则JavaScript精华尽在我手!

首先,我们先来摆函数的龙门阵。

(1)函数
JavaScript中函数是“一等公民”。理解JavaScript的函数是打开这门编程语言奥秘的钥匙,由它可以引申出N多重要的特性。

函数是一个对象
JavaScript使用function关键字定义函数:
function add(x, y) {
return x + y;
}

函数可看成是一个“函数”对象。函数名是指向这一“函数”对象的指针,可以有多个变量引用同一个函数对象:
console.info(add(100,200));  //300
var other =add;  //other和add引用同一函数对象
console.info(other(300,400)); //700

函数中定义的变量是私有的,因此,JavaScript变量只有两种作用域:全局的和由函数所限制的局部作用域。这点非常重要。

函数可以没有名字,我们通常把这种“匿名”函数赋值给一个变量,通过变量来调用它:
var square = function (x) { return x * x; }
console.info(square(10)); //100

 牢记“函数是一个对象”,对看懂许多JavaScript代码至关重要。

返回函数的函数
由于函数是对象,因此,我们可以写出一个返回函数的函数,这是一种非常重要的编程技巧:
function func(x,y) {
    var value=300;
    return function () {
        return value + x + y;
    };
}
console.info(func(100, 200)()); //600

被返回给外界的“内部”函数能够直接访问外部函数的变量,并且需要时它还可以再返回另一个函数,这样便可以构成一个排成“一字长蛇阵”的连续函数调用语句,这在许多JavaScript库中都能看到。

函数的参数
JavaScript对函数的要求极其地宽松。
■ 定义函数时,不需要指定参数类型,对于参数值,JavaScript不会进行类型检查,任何类型的值都可以被传递给参数。
■ 对于函数参数,如果过少,没得到值的参数为undefined,如果过多,多的会被忽略掉。
JavaScript将所有传给函数的参数放到一个arguments对象中(它类似于数组,但JavaScript中没有传统意义上的数组,只能说是类似于数组的对象),使用它可以写出灵活的代码,比如模拟实现OO语言中的方法重载(method overload).

特别地,函数可以作为另一个函数的参数:
var values = [ 213, 16, 2058, 54, 10, 1965, 57, 9 ];
values.sort(function(value1,value2){return value2 - value1; });

如果有C#的delegate经验,看懂上述代码一点也不困难,反过来,理解了上述JavaScript代码,再学习C#的delegate和Lambda表达式也就没多少难度,这就是各种语言均有相通之处的一个例子。

this对象
JavaScript中的this与Java/C#中的不一样,在JavaScript中,每次对函数的调用都有一个上下文对象,this关键字引用它。如果函数归属于某个对象,则this关键字将引用此对象,它就是本次函数调用的上下文。

this引用的函数上下文对象是可以动态改变的,使用函数对象的call方法可以动态地指定它:
01.window.color = "red";  
var o = { color: "blue" };  
function  sayColor(){  
 alert(this.color);  
}  
  
sayColor(); //red    
sayColor.call(this); //red    
sayColor.call(window); //red   
sayColor.call(o); //blue 

不少JavaScript库中,使用这个特性玩出了许多花样。

(2)闭包
“闭包(closure)”是函数式编程的重要特性,这也是在学习时最让人难以理解的技术关键点之一。请费点脑筋看看以下代码:
function a() {
var i = 0;  
return function b() {  
console.info(++i);  
};  
};  
  
var c = a();  
for (var i = 0; i < 10; i++) { 
c();
}

上述代码中,内部函数b中的代码会访问外部函数a中的变量i, 最值得注意的是:执行完c=a()一句后,函数a()己经执行完毕,但由于c引用a()返回的函数b,因此,当前的执行环境被完整保存,从而让i保存上次调用的值!

这就是闭包的神奇特性。

闭包在JavaScript Library开发中被广泛使用。

有关对闭包内部机理的详细介绍,可以参看《Professional JavaScript For  Web Developer》一书。

(3)对象与原型
JavaScript的面向对象特性非常地独特,学习这部分内容时,己非常熟悉C#/C++/Java的朋友一定要Undo己有的知识,才能真正理解它们。

对象的创建
在JavaScript中,对象并不是以类为模板创建出来的,它可以看成是一堆属性的集合,每个属性都有一个name(就是它的属性名字)和Value。

正式地说,JavaScript中的对象是可变的键控集合(keyedcollections),既然是一个集合,所以它支持foreach遍历,也支持动态地给对象添加(直接赋值即可)和删除成员(使用delete内部函数)。

JavaScript中可以使用四种方式定义对象,用起来非常地灵活:

方式一:定义一个空对象,再给它添加成员:
var myObject = {};
myObject.name = “John”;
myObject.age = 29;

方式二:使用对象字面量直接创建对象:
var myObject = {
 name:"John",
 age:40
};

可以看到,这种形式非常类似于Json字串,事实上,JavaScript提供了相应的机制直接由JSON字串创建JavaScript对象(或反之) 

方式三:使用工厂函数构建

new一个空白对象,添加完成员之后,return给外界:
function createPerson(name, age, job){
      var o = new Object();
     o.name = name;   
    o.sayName = function(){
    alert(this.name);
};

return o;
}

方式四:通过对象构造函数创建
function Person(name, age, job){
this.name = name;
this.sayName = function(){
alert(this.name);
};
}

var person1 = new Person(“John”, 29, “Software Engineer”);

可以看到,这种方式使用this关键字给对象添加成员,使用new关键字调用并创建对象。

通常会把构造函数的首字母设置为大写的。

构造函数其实也是一个函数,不同之处在于调用它时必须要加一个“new”关键字,如果不加这个关键字,则对它的调用被认为是普通函数调用。

使用这种方法构造对象,每个对象都加了一个constructor属性:
alert(person1.constructor== Person); //true

JavaScript对象在运行时可以动态地创建和修改其成员,这就给编程带来了很强的灵活性,下面举一个例子,看看如何在函数内部构建一个数据缓冲区:
function getElements(name) {
if (!getElements.cache)
 getElements.cache = {};
return getElements.cache[name] =
getElements.cache[name] || document.getElementsByTagName(name);
}

上述函数在内部使用一个名为cache的空对象用于保存己访问过的页面元素,仅在首次访问时调用DOM API去获取节点对象,从而提升了性能。

对象原型(Pototype)
这是JavaScript语言中最有特色的地方
function MyObject(name) {
    this.name = name;
};

var obj1 = newMyObject("Object1");
//向原型中添加新成员

MyObject.prototype.value = 100;
//新对象与老对象将同时拥有这个新的成员

var obj2 = newMyObject("Object2");
console.info(obj1.value);  //100
console.info(obj2.value);  //100

上述代码的背后,其实是以下文字描述的JavaScript内部机理:

每个对象都连接到一个原型对象(Prototype),如果我们添加一个新的属性到原型中,该属性会立即对所有基于该原型创建的对象可见。

各个对象的原型也是一个对象,它们可以“链接”起来,构成一个原型链。

当我们尝试去获取对象的某个属性值,且该对象没有此属性值,那么JavaScript会尝试从它直接关联的原型对象中去获取,如果那个原型对象也没有此属性值,那么会再从这一原型对象所关联的另一个原型中寻找,依次类推,直到该过程最后到达终点Object.prototype。如果想要的属性完全不存在于原型链中,那么结果就是undefined。

JavaScript引入原型,其主要目的之一就是为开发者提供经典的OOP编程风格:以类为模板创建对象和实现继承,其实现思路基于以下事实:

当你创建一个新对象时,你可以选择某个对象作为它的原型。

以下代码使用prototype模拟实现了面向对象编程中的继承特性。
function Parent() {
  this.baseFunc = function () {
   console.info("基类方法");
};
}

function Child() {
   this.childFunc = function () {
        console.info("子类方法");
   };
}

//形成继承关系
Child.prototype = new Parent();

var obj = new Child();
obj.childFunc();
obj.baseFunc();

上述示例代码只是使用JavaScript语言特性实现OOP的方式之一,还有不少JavaScript书还介绍了其他实现继承的方法,五花八门,大多比较复杂,理解起来有一定难度,类似于“代码游戏”,这就引发了一个问题:

我们是否一定要使用JavaScript以经典的OOP方式编程?
要回答这样一个问题,先来思索一下另一个相关联的现实问题:

是否所有的Web应用都应该使用面向对象的方式开发?

其实要回答这个问题并不困难。

对于很小的很简单的网站,不用面向对象其实也没什么问题。想想看,整个网站只有几个十几个页面,这也要分成N个类,应用XXX设计模式,再加上能支持分布式缓存和负载均衡N层架构,是不是有点过份?

当然,对于复杂的网站情况就不一样了,这种Web系统后台通常会包容复杂的业务流程,并且很可能需要与多个其他的内部或外部系统进行信息交换,……。实践证明在这种情况下,面向对象是最有效最成熟的解决问题的方法。

JavaScript本身是一种主要用于Web前端的脚本语言,你想想,一个将要运行于客户端浏览器内的Web网页,需要它完成多复杂的事?并且就算它真能完成很多工作,也不能将业务逻辑前移到客户端实现,这会带来巨大的风险。

尽管现在有Node.js之类可以让JavaScript代码跑在服务端,但Node.js更多是基于模块来构建系统,很少使用它来建立一个拥有复杂的继承体系的用户类型系统,这些工作使用标准的OO语言如Java或C#完成更为合适。

另外,JavaSript本身从一开始就没打算设计成纯面向对象编程语言,只是支持OOP,前面也看到了,用原生的JavaScript实现继承都比较麻烦,如果还想实现多态,那就更费脑筋了。

除非你要写一个诸如jQuery之类的框架,那深入研究并把握JavaScript的OOP编程技巧才是必须的,大多数Web开发者直接用JavaScript“原生的”函数、闭包、对象、原型这些语言特性就足够应付工作所需。

[本文作者:金旭亮] ?b`魚 N剉鱩qN 骮
来源:http://blog.csdn.net/bitfan/article/details/10362461
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论1条
  • #1楼  评论人:truebelief  评论时间:2013-11-7 22:31:54
  • 非常简练,非常透彻!
发表评论:
留言人:
内  容:
请输入问题 9+83=? 的结果(结果是:92)
结  果: