模块化思维和模板引擎

使用模块化思维和模板引擎搭建前端架构（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，然后自己学习到了，现在分享出来大家学下，自己也做个备忘。废话不多说，开始扯淡。

  1. 第一步搭建后台目录架构。

在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代码如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!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 <span style="color: #ff0000;">data-main</span>="resources/common/config/requireconfig" src="resources/lib/require2.2.0.js"></script>

<script>

    <span style="color: #ff0000;"><strong>require([‘../../app/index/js/index‘], function (login) {

        new login();

    });</strong></span>

</script>

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

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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代码如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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模板代码


1

2

3

4

<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基础要学好。其次没有哪个所谓的快速开发的框架是最好的，只有根据你索要做的项目的大小啊，需求啥的去选择一些框架，适合的才是最好的，不要盲目去追求很多很多最新的最好的啥的。好了，已经夜里了，该休息了，明天还要上班呢，晚安，兄弟们.......

分类: 前端架构

标签: 前端, 模块化, require, underscore

时间： 2024-08-08 13:58:14

模块化思维和模板引擎的相关文章

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

require.js 介绍: 是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量. 官网:http://www.requirejs.cn/    (PS:如果没接触过,刚开始看都是一头蒙蔽的,建议看下菜鸟教程) 新手教程:http://www.runoob.com/w3cnote/requirejs-tutorial-1.html 优点:可完成团队协作.模块复用.单元测试等等一系列复杂的需求 undersco

4行代码实现js模板引擎

在平时编码中,经常要做拼接字符串的工作,如把json数据用HTML展示出来,以往字符串拼接与逻辑混在在一起会让代码晦涩不堪,加大了多人协作与维护的成本.而采用前端模板机制就能很好的解决这个问题. 精妙的 tmpl 前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 “javascript micro templating” 最为精妙,寥寥几笔便实现了模板引擎核心功能. 它的介绍与使用方式请看作者博客:http://ejohn.org/blog/javascript-m

jade模板引擎

jade是使用JavaScript实现,可供nodejs使用的高性能模板引擎(性能高不高,有些争议.姑且称之为高性能吧!).模板引擎有很多,主要使用比较广泛的是jade和ejs,modejs项目默认使用jade作为模板引擎,我也就不多说了至于如何选择,还是得就事论事综合各种因素来考虑.在此不对优缺点进行分析.插一句嘴,ejs的语法更像jsp.asp这样的技术而jade更像python的语法风格,缩进来缩进去,有点绕.不过这并不影响代码的可读性(我是这么认为的).不管是jade还是ejs语法都比较

全球最快的JS模板引擎：tppl

废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发的 tmpl 的 43 倍!与第二名 artTemplate 也有一倍的差距. 似乎每一个大公司都选择自己开发模板引擎并将其开源,结果就是社区充斥着数不清的引擎,让人眼花缭乱无从选择.随着时间的流逝,越来越多的功能被添加进去,最终让一个强悍的发动机变成了一台臃肿复杂零件生锈的拖拉机.天呐,我就想网页面里插一段 html,你居然要我往

js 模板引擎 - 超级强大

前端模板引擎相信已经到达泛滥的地步了,随便就能找到一大把,但是真的深层次的对比才能发现其中的优劣,经过这段时间对各个模板引擎的使用分析,最终选定一款,也是目前我见过的最为强大的模板引擎:nodetpl 官网地址:http://www.nodetpl.com/cn/ nodetpl 相比其它几款模板,有非常独特的地方: 1. 支持模板级样式,有效解决样式冲突问题,别的模板几乎都没能做到 2. 支持模板级js,同样,别的模板也不具备这功能 3. 支持 AMD / CMD,甚至 ES6 4. 支持所有

全球最快的JS模板引擎

废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发的 tmpl 的 43 倍!与第二名 artTemplate 也有一倍的差距. 似乎每一个大公司都选择自己开发模板引擎并将其开源,结果就是社区充斥着数不清的引擎,让人眼花缭乱无从选择.随着时间的流逝,越来越多的功能被添加进去,最终让一个强悍的发动机变成了一台臃肿复杂零件生锈的拖拉机.天呐,我就想网页面里插一段 html,你居然要我往

模板引擎artTemplate及模板预编译器TmodJS的使用入门

一.为什么要使用前端模板? 主要为了解决UI层与业务逻辑的纠缠不清.比如我们需要根据后端返回的数据动态生成一个表格或者类似表格的DOM(比如ul > li等)时,按照传统的方式,需要我们先获取数据,然后在页面的js中通过遍历数据.提取相关数值以及动态拼接html字串的方式,生成最终的DOM.这样就产生了UI与业务逻辑的纠缠.如果只是偶尔或者局部使用可能问题不明显,但如果代码量庞大.业务或数据十分复杂的情况下,这种方式产生的代码会十分不利于后期维护,这想必是每一个开发人员都不愿看到的.因此,便产生

用 php 实现一个视图组件和模板引擎——基础

只要不是做后端接口开发和一些作为守护进程之类的服务器脚本,大多数时候都是在和浏览器打交道,因此合理组织并展现 html 标签是最为常见的工作.一般大家使用框架时,都会自带有一套视图组件和模板引擎. 我们不讨论这些组件和引擎的好坏.因为这些东西已经经过考验,可以在生产环境下使用.我们现在只是为了学习一些东西,这时候了解一些原理上的可能对以后的帮助更大,如果一些人真的很有时间,利用这些基础知识完全可以写一个自己的组件,即可当做练习,也可以拿去自用. 好了,说这么多,我还是希望很多人明白,视图和模板引

Java之利用Freemarker模板引擎实现代码生成器，提高效率

http://blog.csdn.net/huangwenyi1010/article/details/71249258 目录(?)[-] 开心一笑 视频教程 提出问题 解决问题 前言 技术选型 实现思路 首先假如在数据库中有一张表 ay_test 我们首先要获取数据库的连接这里我只贴出相关的代码 获取数据库表的元数据 最后根据元数据获取表字段注释等等生成相关的文件 代码实现 Java代码实现 FreeMarkerTemplateUtils工具类 实体类 ColumnClass freemark