为现代JavaScript开发做好准备(转载)

本文由 伯乐在线 - kmokidd
翻译自 codethinked，转载自：http://blog.jobbole.com/66135/

今天无论是在浏览器中还是在浏览器外，JavaScript世界正在经历翻天覆地地变化。如果我们谈论脚本加载、客户端的MVC框架、压缩器、
AMD、Common.js还有Coffeescript……只会让你的脑子发昏。对于那些已经早就熟知这些技术的人而言，或许很难想象到现在为止还有很
多JS开发者还不熟悉这些工具，甚至事实上，他们很可能现在还不想去尝试这些工具。

这篇文章将会介绍一些很基础的JS知识，以及当开发者想要尝试Backbone.js和Ember.js之类的工具之前需要知道一些内容。当你理解
了这篇文章中的大部分内容的时候，你会更有信心去学习其他高级JavaScript知识的时候。这篇文章是假设你曾经使用过JavaScript的，所以
如果你从没有接触过它，也许你需要先了解下更基础的知识。现在我们开始吧！

模块

有多少人在一个文件中写的JS像下面的代码块一样？（注意：我可没有说内嵌在HTML文件中哦）:





1

2

3

var
someSharedValue = 10;

var
myFunction = function(){ //do something }

var
anotherImportantFunction = function() { //do more stuff }

如果你做到了这一点，那么很有可能你正在写这样的代码。我不是在给你下定义，因为在相当长的一段时间里我也曾这么写程序。事实上这段代码有很多毛
病，不过我们会专注在讨论全局命名空间的污染问题上。这样的代码代码会把方法和变量都暴露在了全局中，我们需要将让这些数据与全局命名空间独立开来，我们
将会采用模块模式（Module
Pattern）来实现这个目的。模块中可以有很多不同的形式达到我们的目标，我会从最简单的方法开始说：匿名函数（Immediately Invoked
Function Expression，简写为：IIFE）。

名字听起来很高大上，不过它的实现其实很简单：





1

2

3

(function(){

    //do some work

})();

如果在此之前你从未接触过匿名函数，可能现在你会觉得它很怪 —
怎么会有这么多括号！匿名函数是会立即执行的函数，你可以这么理解：一个函数被创建了后又立刻被调用。它应该是一个表达而不是一个语句：一个函数语句是一
定要有一个名字的，但是大家也看到了，匿名函数是没有名字的。在函数定义的外部还有一组括号，这一点也能很好地帮助我们在代码中轻易找到匿名函数的身影。

现在我们知道要怎么写一个匿名函数了，那就来聊聊为什么要使用它吧。在JS中我们都是在和各种作用域之中的函数打交道，所以如果我们想要创建一个作
用域，就可以使用函数。匿名函数中的变量和方法的作用域仅仅在匿名函数中，就不会污染全局的命名空间，那么现在还需要考虑的一个问题是，我们要如何从外部
取得那些在匿名函数作用域中的变量和方法呢？答案就是全局命名空间：将变量放入全局命名空间中，或者至少将作用变量与全局命名空间关联起来

想要在匿名函数外部调用方法，我们可以将window对象传入匿名函数，再将函数或变量值赋值到这个对象上。为了保证这个window对象的引入不会造成什么混乱，我们可以将widow对象作为一个变量传入我们的匿名函数。当做函数传入参数的方法同样适用于第三方库，甚至undefined这样的值。现在我们的匿名函数看起来是这样的：





1

2

3

(function(window, $, undefined){

    //do some work

})(window, jQuery);

正如你所看到的，我们将window和jQuery传入函数中（’$‘符号表示的就是’jQuery’，把它用在这的原因是防止其他库也定义了’$‘），但是这个函数其实是接收了3个参数。如果我们没有传入第三个参数，那么在遇到undefined的时候就会结束,
为了避免有其他的JS文件更改这一点，所以我们将一个undefined的变量传入方法中来保证这个方法里是一定可以使用undefined的。其实在函数内我们也是可以直接使用这些值，能这么做的原理是，JS的闭包会覆盖他们所处的上下文。对于这个话题，我曾写过一篇关于C#的文章以解释这个概念，这两者是互通的。

现在我们有了一个会立即执行的方法，还有一个相对安全的执行上下文，其中还包含有window、$和undefined变量（这几个变量还是有可能在这个脚本被执行前就被重新赋值，不过现在的可能性要小的多了）。现在我们已经做得很好了：把我们的代码从全局环境下的一团混乱的局面中拯救了出来；降低了与其他在同一应用中使用的脚本的冲突可能性。

任何我们想要从模块中获取的东西都可以通过window对象拿到。但是通常我不会直接将模块中的内容直接复制到window对象上，而是会用更有组织性地将模块中的内容。在大部分语言中，我们将这些容器称为“命名空间”，在JS中我们可以用“对象”的方式来模拟。

命名空间

如果我们想要声明一个命名空间，将一个函数放进这个空间中，代码可以写成这样：





1

2

3

4

window.myApp = window.myApp || {};

window.myApp.someFunction = function(){

    //so some work

};

我们只是在全局环境中创建了一个用于查看某个对象是否已经存在，如果已经存在了，那么我们就可以直接使用；不然就需要用’{}’来创建一个新的对
象。接着，我们可以开始添加这个命名空间的内容，将各种函数放入这个空间中，就像上面的代码片段所做的那样，但是我们又不希望这些函数就随便的放在那里，
而是希望将模块和命名空间联系在一起，就像下面这样：





1

2

3

(function(myApp, $, undefined){

    //do some work

}(window.myApp = window.myApp || {}, jQuery));

还可以这么写：





1

2

3

4

window.myApp = (function(myApp, $, undefined){

    //do some work

    return
myApp;

})(window.myApp || {}, jQuery);

现在，我们不再是将window传入我们的模块中，我们将一个和window对象联系在一起的命名空间传入模块中。之所以使用’||’的原因是我们
可以重复使用同一个命名空间，而不是每次需要使用命名空间的时候我们又要重新创建一个。许多包含有命名空间方法的库会帮你创建好空间的，或者你可以使用一
些想namespace.js这样的工具来构建嵌套的命名空间。由于在JS中，每一个在命名空间中的项你都不得不指定它的命名空间，所以通常我都尽量不会
去创建深度嵌套的命名空间。如果你在MyApp.MyModule.MySubModule中创建了一个doSomething方法，你需要这么引用它：





1

MyApp.MyModule.MySubModule.doSomething();

每次你要调用它，或者你可以在你的模块中给这个命名空间一个别名：





1

var
MySubModule = MyApp.MyModule.MySubModule;

这样定义以后，如果你想用doSomething这个方法可以用MySubModule.doSomething()来调用。不过这个方式其实是不必要的，除非你有非常非常多的代码，不然这么做只会将问题复杂化。

揭秘模块模式

在创建模块时你也常会看到另一种设计模式：揭秘模块模式（Revealing Module
Pattern）。它和模块模式有一些不同：所有定义在模块中的内容都是私有的，然后你可以把所有要暴露到模块外部的内容放在一个对象中，再返回这个对象。你可以这么做：





1

2

3

4

5

6

7

8

9

10

11

12

13

14

var
myModule = (function($, undefined){

     var
myVar1 = ‘‘,

     myVar2 = ‘‘;

     var
someFunction = function(){

         return
myVar1 + " "
+ myVar2;

     };

     return
{

         getMyVar1: function() { return
myVar1; }, //myVar1 public getter

         setMyVar1: function(val) { myVar1 = val; }, //myVar1 public setter

         someFunction: someFunction //some function made public

     }

})(jQuery);

一次就建立一个模块，然后返回一个包含有需要公有化的模块片段的对象，同时模块中需要保持私有的变量也不会被暴露。myModule变量会包含有两个共有的项，不过其中Somefunction中的myVar2是从外部获取不到的。

创建构造器（类）

在JS中没有“类”这个概念，但是我们可以通过创建构造器来创建“对象”。假设现在我们要创建一系列Person对象，还需要传入姓、名和年龄，我们可以将构造器定义成下面这样（这部分代码应该放在模块之中）：





1

2

3

4

5

6

7

8

9

var
Person = function(firstName, lastName, age){

    this.firstName = firstName;

    this.lastName = lastName;

    this.age = age;

}

Person.prototype.fullName = function(){

    return
this.firstName + " "
+ this.lastName;

};

现在先看第一个函数，你会看到我们创建了一个Person构造器。我们用它来构造新的person对象。这个
构造器需要3个传入参数，然后将这3个参数赋值到执行上下文中。我们也是通过这种方式获取到公有实例变量。这里也可以创建私有变量：将传入参数赋值到这个
构造器中的局部变量。但是这么做以后，公有的方法就没法获取这些私有的变量了，所以你最好还是把它们都变成公有的。也可以把方法放在构造器中同时还能从外
部获取到它，这样方法就能拿到构造器里的私有变量了，不过这么做的话又会出现一系列新的问题。

第二个方法中我们使用了Person构造器的”原型”（prototype）。一个函数的原型就是一个对象，当你需要在某个实例上解析它所调用到的字段或者函数时你需要遍历这个函数上所有的实例。所以这几行代码所做的就是创建一个fullName方法的实例，然后所有的Person的实例都能直接调用到这方法，而不是对每个Person实例都添加一个fullName方法，造成方法的泛滥。我们也可以在构造器中用





1

this.fullName = function() { …

的方式定义fullName，但这样每一个Person实例都会有fullName方法的副本，这不是我们希望的。

如果我们想要创建一个Person实例，我们可以这么做：





1

2

var
person = new
Person("Justin", "Etheredge");

alert(person.fullName());

我们也可以创建一个继承自Person的构造器：Spy构造器，我们会创建Spy的一个实例，不过只会声明一个方法：





1

2

3

4

5

6

7

8

9

10

11

12

13

var
Spy = function(firstName, lastName, age){

    this.firstName = firstName;

    this.lastName = lastName;

    this.age = age;

};

Spy.prototype = new
Person();

Spy.prototype.spy = function(){

    alert(this.fullName() + " is spying.");   

}

var
mySpy = new
Spy("Mr.", "Spy", 50);

mySpy.spy();

正如你所看到的，我们创建了一个和Person很相似的构造器，但是它的原型是Person的一个实例。现在我们又添加上一些方法，使得Spy的实例又可以调用到Person的方法，同时还能直接取得Spy中的变量。这个方法比较复杂，不过一旦你明白怎么使用了，你的代码就会变得很优雅。

结语

看到这里，希望你已经学到了一些东西。不过这篇文章里并没有介绍多少关于“现代”JS的开发。这篇文章中涉及的还是旧知识，在过去几年里它们的使用
面相当广。希望你看完这篇文章以后，找到了学习JS的正确的方向。现在可能你把代码放到了不同的模块不同的文件中（你应该做到这一点！），那么下一步你要
开始着手研究如何将JS结合和压缩。如果你是使用Rails 3的开发者，可以在asset
pipeline上免费获取这些信息或者工具。如果你是.NET开发者，你可以看看SquishIt框架，我就是从这里开始的。如果你是ASP.NET MVC 4的开发者，也有相关的资源。

希望这篇文章对你有帮助。以后我也会介绍关于现代JS的开发，期待到时候能看到你的ID。

原文链接： codethinked   翻译： 伯乐在线 - kmokidd
译文链接： http://blog.jobbole.com/66135/

时间： 2024-10-11 13:30:59

为现代JavaScript开发做好准备(转载)的相关文章

为现代JavaScript开发做好准备

今天无论是在浏览器中还是在浏览器外,JavaScript世界正在经历翻天覆地地变化.如果我们谈论脚本加载.客户端的MVC框架.压缩器.AMD.Common.js还有Coffeescript--只会让你的脑子发昏.对于那些已经早就熟知这些技术的人而言,或许很难想象到现在为止还有很多JS开发者还不熟悉这些工具,甚至事实上,他们很可能现在还不想去尝试这些工具. 这篇文章将会介绍一些很基础的JS知识,以及当开发者想要尝试Backbone.js和Ember.js之类的工具之前需要知道一些内容.当你理解了这

【转】为现代JavaScript开发做好准备

原文转自:http://blog.jobbole.com/66135/ 今天无论是在浏览器中还是在浏览器外,JavaScript世界正在经历翻天覆地地变化.如果我们谈论脚本加载.客户端的MVC框架.压缩器.AMD.Common.js还有Coffeescript……只会让你的脑子发昏.对于那些已经早就熟知这些技术的人而言,或许很难想象到现在为止还有很多JS开发者还不熟悉这些工具,甚至事实上,他们很可能现在还不想去尝试这些工具. 这篇文章将会介绍一些很基础的JS知识,以及当开发者想要尝试Backbo

为什么JavaScript开发如此疯狂

本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! Web开发太有意思了! 但是JavaScript则……令人望而生畏. Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容,并且这些内容可以帮助你理解所有知识. 事实是,的确如此,你遗漏了一些解决问题的重要片段. 并且,前端开发实际上已经陷入了疯狂. 不仅仅是你. 拉过一把椅子,坐下来.到时间

JavaScript开发工具大全

译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 简介 2017年1月,Stack Overflow年度开发者调研一共访问了64000个程序员,发现JavaScript已经连续5年成为最流行的编程语言. 这篇博客将介绍一些常用的JavaScript开发工具: 构建&自动化 IDE&

使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑.SeaJS可以与jQuery这类框架完美集成.使用SeaJS可

Windows Store App JavaScript 开发：简单对象绑定

简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用程序.在这个应用程序中将一个img控件与一个包含图片路径信息的对象相绑定,实现在img控件中显示图片. 在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为SimpleObjectBinding.接着添加项目中用到的图片文件,在项

Windows Store App JavaScript 开发：页内导航

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件

有什么比较好的javascript开发工具?

在web前端开发中,JavaScript是必备的全能脚本语言,可以创建更加友好的用户交互式网站和应用.但也正是由于JS代码在前端运行,所以很多初学者在刚开始写JS代码的时候,基本上都不会太考虑网站性能问题.今天小编为大家分享7个可以帮你优化网站性能的JavaScript工具. 1.Meteor Meteor可以让web开发人员在简单环境中更加快捷的创建现代的网站和网络应用程序.该框架设计的目的是为了让web应用程序的开发更加简单.容易和快速.目前,Meteor 支持Linux和Mac OS x,

为什么原生 JavaScript 开发越来越多受欢迎？是否应该跟风用原生JavaScript代替 jQuery等库？

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在