Web前端技术框架介绍

2016-01-28 14:37:35

作者：周春仪，新炬网络高级技术专家。

对Java工程师来说，传统企业软件使用最多的是SSH框架，这种成熟的框架主要针对服务端开发。目前用户越来越关心产品体验，对前端技术要求也越来越高，单纯使用javascript语言或jquery框架来开发前端已经远远不满足。特别是java程序员对javascript的随意使用，导致前端脚本兼容性差和维护效率低。

前端是什么？HTML/CSS/JavaScript……

与后端相比，前端客户端环境不可预知、代码开源、数据无法隐藏、更关注页面性能和用户体验……

想在项目中提高开发效率，需要引入一套高效灵活的框架技术，接下来介绍一下目前产品中用到的前端框架技术：RequireJS，Backbone和Underscore。

1 、 Web前端开发之RequireJS

使用RequireJS模块化JavaScript代码

传统的js写法都是直接写在页面上，比如：

这样的写法有很大的缺点:

1.首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长;

2.其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的jquery.min.js要在bootstrap.min.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的诞生，就是为了解决这两个问题：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

a) require.js的加载

比如AMP系统中_layout.html文件最后这样引进require.js：

这句表明加载require.js。

加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，放在/primary/component/custom/js/目录下面：

data-main="/primary/component/custom/js/main“

这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。由于加入这个 async属性，上面这条语句可以写在最上面，而不用担心造成网页失去响应。

注： async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

b)主模块的写法

data-main="/primary/component/custom/js/main“

data-main里的main.js，称为"主模块"，意思是整个网页的入口代码。它有点像C语言的main()函数，所有代码都从这儿开始运行。

c)模块的加载

使用require.config()方法，我们可以对模块的加载行为进行自定义：

     require.config({
    paths: {
                      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    }
});

路径默认与main.js在同一个目录。如果不在同一目录下，可直接改变基目录（baseUrl）：

     require.config({
    baseUrl: " /primary/component/core/js ",
    paths: {
      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    }
});

d)AMD模块的写法

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

// math.js
define(function (){
var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
        });

加载方法如下：

    // main.js
   require(['math'], function (math){
    alert(math.add(1,1));
});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});

当require()函数加载上面这个模块的时候，就会先加myLib.js文件。

加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？回答是可以的。这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

require.config({
   shim: {
    'underscore':{
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
}});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义

（1）exports值（输出的变量名），表明这个模块外部调用时的名称；

（2）deps数组，表明该模块的依赖性。

e) require.js插件

css插件：允许require.js加载css；domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

require(['domready!'], function (doc){
// called once the DOM is ready
});

text和image插件，则是允许require.js加载文本和图片文件。

define([
    'text!review.txt',
    'image!cat.jpg'
    ],
    function(review,cat){
      console.log(review);
      document.body.appendChild(cat);
    }
);

类似的插件还有json和mdown，用于加载json文件和markdow文件。

2 、 Web前端开发之Backbone

使用backbone组织JavaScript代码。Backbone一般都是结合underscore一起使用的, 如果在页面上只使用Backbone，而没有引进underscore的话，页面会报错的。可以查看Backbone源码，里面使用了很多underscore的实用函数。Backbone位于国外10大前端MVC框架之首。

3 、Web前端开发之Underscore

使用Underscore支持Backbone。Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。Underscore可以单独使用，而不一定要结合Backbone来使用。

上一篇：MySQL 5.7的原生JSON数据类型使用介绍
下一篇：jenkins+maven+jboss&tomcat自动化发布