nginx java shell Firefox centos wordpress google Android Ubuntu mysql HTML5 php 程序员 微软 linux apache 开源 Python Windows linux命令

前端开发技术的发展之铁器时代

这个时代的典型特征是Ajax的出现。

AJAX

AJAX其实是一系列已有技术的组合,早在这个名词出现之前,这些技术的使用就已经比较广泛了,GMail因为恰当地应用了这些技术,获得了很好的用户体验。

由于Ajax的出现,规模更大,效果更好的Web程序逐渐出现,在这些程序中,JavaScript代码的数量迅速增加。出于代码组织的需要,“JavaScript框架”这个概念逐步形成,当时的主流是prototype和mootools,这两者各有千秋,提供了各自方式的面向对象组织思路。

JavaScript基础库

Prototype框架主要是为JavaScript代码提供了一种组织方式,对一些原生的JavaScript类型提供了一些扩展,比如数组、字符串,又额外提供了一些实用的数据结构,如:枚举,Hash等,除此之外,还对dom操作,事件,表单和Ajax做了一些封装。

Mootools框架的思路跟Prototype很接近,它对JavaScript类型扩展的方式别具一格,所以在这类框架中,经常被称作“最优雅的”对象扩展体系。

从这两个框架的所提供的功能来看,它们的定位是核心库,在使用的时候一般需要配合一些外围的库来完成。

jQuery与这两者有所不同,它着眼于简化DOM相关的代码。 例如:

DOM的选择:

jQuery提供了一系列选择器用于选取界面元素,在其他一些框架中也有类似功能,但是一般没有它的简洁、强大。

$("*")              //选取所有元素
$("#lastname")      //选取id为lastname的元素
$(".intro")         //选取所有class="intro"的元素
$("p")              //选取所有<p>元素
$(".intro.demo")    //选取所有 class="intro"且class="demo"的元素

链式表达式:

在jQuery中,可以使用链式表达式来连续操作dom,比如下面这个例子:

如果不使用链式表达式,可能我们需要这么写:

var neat = $("p.neat");
neat.addClass("ohmy");
neat.show("slow");

但是有了链式表达式,我们只需要这么一行代码就可以完成这些:

$("p.neat").addClass("ohmy").show("slow");

除此之外,jQuery还提供了一些动画方面的特效代码,也有大量的外围库,比如jQuery UI这样的控件库,jQuery mobile这样的移动开发库等等。

模块代码加载方式

以上这些框架提供了代码的组织能力,但是未能提供代码的动态加载能力。动态加载JavaScript为什么重要呢?因为随着Ajax的普及,jQuery等辅助库的出现,Web上可以做很复杂的功能,因此,单页面应用程序(SPA,Single Page Application)也逐渐多了起来。

单个的界面想要做很多功能,需要写的代码是会比较多的,但是,并非所有的功能都需要在界面加载的时候就全部引入,如果能够在需要的时候才加载那些代码,就把加载的压力分担了,在这个背景下,出现了一些用于动态加载JavaScript的框架,也出现了一些定义这类可被动态加载代码的规范。

在这些框架里,知名度比较高的是RequireJS,它遵循一种称为AMD(Asynchronous Module Definition)的规范。

比如下面这段,定义了一个动态的匿名模块,它依赖math模块

define(["math"], function(math) {
    return {
        addTen : function(x) {
            return math.add(x, 10);
        }
    };
});

假设上面的代码存放于adder.js中,当需要使用这个模块的时候,通过如下代码来引入adder:

<script src="require.js"></script>
<script>
    require(["adder"], function(adder) {
        //使用这个adder
    });
</script>

RequireJS除了提供异步加载方式,也可以使用同步方式加载模块代码。AMD规范除了使用在前端浏览器环境中,也可以运行于nodejs等服务端环境,nodejs的模块就是基于这套规范定义的。(修订,这里弄错了,nodejs是基于类似的CMD规范的)

延伸阅读

评论