阅读排行

使用模块化思维和模板引擎搭建前端架构（require+underscore）

require.js

介绍：是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。

官网：http://www.requirejs.cn/ （PS：如果没接触过，刚开始看都是一头蒙蔽的，建议看下菜鸟教程）

新手教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html

优点：可完成团队协作、模块复用、单元测试等等一系列复杂的需求

underscore.js

介绍：JavaScript实用库，提供了一整套函数式编程的实用功能

API：http://www.bootcss.com/p/underscore/

使用：这里仅仅将underscore作为模板引擎来使用，使用了_.template 语法，（基础函数按需使用，反正生产模式只有5K）

代码托管地址：https://github.com/GerryIsWarrior/require-underscore （可以下载源码）

因为换工作接手了一个银行项目，刚开始无从下手，然后稍微看了一下所使用的东西，将这个项目中的前端架构全部抠出来，做成一个小demo，然后自己学习到了，现在分享出来大家学下，自己也做个备忘。废话不多说，开始扯淡。

在require的官方文档中建议我们这样布局目录：

技术分享

对于官方的布局方案只是官方建议的单个纯require的布局，但是我们的项目中可不仅仅使用require，然后我参考了银行项目的目录结构，然后思考了方便性和可读性，感觉这套方案还是可以的，直接上图

技术分享

简单说明一下：

app文件：存放项目中所使用的纯静态页面布局
resource文件：存放所有可请求的资源
app文件：存放子模块的css，js和tpl（模板）
common文件：存放所有公用的东西
config文件：存放require的配置文件
tpl文件：存放公用的模板（比如一个网页的头部，和脚部或者其他几乎不会变动的模板）
utils文件：存在公共工具模板
css文件：存放全局的css文件
images文件：存放图片文件
lib文件：管理的所有第三方的类库

好了，目录就这样，这样的目录思考了一下还是很有道理的，否则不会那么多银行项目都沿用这个目录结构的。

　　2. 导入require，配置require配置文件，然后用require来统一管理js文件

index.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
    <title></title>
	<meta charset="GBK" />
</head>
<body>
    <div class="head" id="header"></div>
    <div class="body"></div>
    <div class="foot"></div>
</body>
</html>
<script data-main="resources/common/config/requireconfig" src="resources/lib/require2.2.0.js"></script>
<script>
    require([‘../../app/index/js/index‘], function (login) {
        new login();
    });
</script>

　　在整个页面中，我们相当于只是搭建了一个页面布局（3个div），然后再在这些布局中塞我们将要展示的模块代码。这是我们看到的html内容，对于所有的js，只需要引用一个require的js文件，然后在文件中使用data-main指定一个配置文件，在require中使用data-main指定了这个文件，相当于告诉require的起始搜索位置为这个目录。

下面我们看下requireconfig.js的配置

require.config({
    //指定基目录
    baseUrl: "resources",
    //配置各种库的基本信息
    paths: {
        ‘underscore‘: ‘lib/underscore‘,
        ‘jquery‘: ‘lib/jquery-1.12.1.min‘,
        ‘class‘: ‘lib/class‘,
        ‘text‘: ‘lib/text‘   //text是require的一个模块，当你加载配置文件的时候，就自动引进项目本身了
    },
    //配置输出
    shim: {
        ‘underscore‘: {
            exports: ‘_‘
        }
    }
});

　　在这个配置文件中，我们配置了baseUrl，指定一个根目录，然后配置path，也就是我们所有要管理的js文件，然后配置shim的输出文件。至于基础概念不是很懂的，可以去查一下API，在这里我就不累赘的说了

　　3. 创建模板文件tpl和模块使用的js文件

我们在resource中的app中新建一个index模块的目录，然后在这里建立我们所需要的tpl模板和js文件。

PS：tpl只是一个后缀，本质上还是txt的文件，你创建txt文件也可以，不过因为习惯了，而且给人一看就明白了，以tpl结尾的就是模板

　　　　index.js代码如下：

define(function (require) {
    require("jquery");  //使用require加载所需js，类似node的require加载模块，以及webpack安装好的模块，然后加载这个模块
    require("underscore");
    var Class = require("class");  //class是一个对象类，使用该对象可以创建一个对象，然后抛出去
    var login = Class.extend({
        //构造方法，这个方法是必执行的，只要你创建了这个类
        initialize: function () {
            this.render();
        },
        //其他方法
        render: function () {
            //初始化模板
           var header_text = require(‘text!app/index/tpl/headContent.tpl‘);
            var header_html = _.template(header_text)({ person: {name:"Gerry"}});
            $("#header").html(header_html);
        }
    });

    return login;
});

　　这样require异步加载这个js，回调中就可以抛出这个对象，然后new这个对象，就可以调用这个js模块中的方法和一些设置，就是index.html代码中加粗标红的js。

headContent.tpl模板代码

<div style="color:red;">
    你好:<%=person.name%>，这是头部信息，展示头部模块的
    尖括号的是underscore模板引擎的参数
</div>

　　　　这个tpl中，显示了头部的信息，这里只做测试，过于简单，然后写了一个参数。

　　4. 使用underscore加载tpl，并将所需要的数据塞进页面

我们在index.js中处理了这些数据

　　var header_text = require(‘text!app/index/tpl/headContent.tpl‘); 这句话使用require的text的子功能去搜索并读取这个模板内容

　　var header_html = _.template(header_text)({ person: {name:"Gerry"}}); 这句话使用underscore的template方法，将参数塞进模板并渲染成html标签

　　$("#header").html(header_html); 这句话当然就是将模板加载到静态布局中，然后就出来啦

效果如下：

技术分享

后记：现在前端的发展趋势很猛烈，可能技术和框架更新很快，今天用这个明天用那个。可能上一个月还在用require，下个月就要用webpack，再下个月就要用node啥啥啥的，但是我感觉最基础的是不会变的，万变不离其宗，javascript基础要学好。其次没有哪个所谓的快速开发的框架是最好的，只有根据你索要做的项目的大小啊，需求啥的去选择一些框架，适合的才是最好的，不要盲目去追求很多很多最新的最好的啥的。好了，已经夜里了，该休息了，明天还要上班呢，晚安，兄弟们.......

文章来自：http://www.cnblogs.com/GerryOfZhong/p/5524428.html