前段工做第一天新知识点---handlebars.js和Seajs

时间 2019-11-20

标签前段第一天知识 handlebars.js handlebars seajs 栏目 JavaScript 繁體版

原文原文链接

文／饥人谷_韩宝亿（简书做者）
原文连接：http://www.jianshu.com/p/0b3bbd52ad48
著做权归做者全部，转载请联系做者得到受权，并标注“简书做者”。

今天第一天上班没多少事情，公司用的是SVN代码管理器，后端人员帮我把环境搭建好之后老大就让我在网上找一下Handlebars.js和Seajs来看看，由于公司用的是这种模板库和规范，大概了解一下这两个东西明天就要开始写页面了。javascript

（一）handlebars.js
对于handlebars.js，在网上找到杨元的博客--《js模版引擎handlebars.js实用教程——为何选择Handlebars.js》
介绍
Handlebars 是 JavaScript一个语义模板库，经过对view和data的分离来快速构建web模板。在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样能够保证模板加载和运行的速度。css

基本语法
Handlebars expressions 是handlebars模板中最基本的单元，使用方法是加两个花括号{{value}}, handlebars模板会自动匹配相应的数值，对象甚至是函数。html

QQ截图20151123161352.png

handlebars会根据上下文来自动对表达式进行匹配，若是匹配项是个变量，则会输出变量的值，若是匹配项是个函数，则函数会被调用。handlebars会根据当前上下文输出content变量的title属性的值。 在JavaScript中，使用Handlebars.compile()方法来预编译模板。

saa.png

---如何引入Handlebars.js？
由于Handlebars.js是Jquery的一个插件，第一步固然要引用Jquery啦，而后引用Handlebars.js便可，仅仅须要这两个js文件。java

QQ截图20151123162650.png

---each-基本循环使用方法
<!DOCTYPE html>jquery

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-基本循环使用方法 - by 杨元</title>
</head>
<body>
web

each-基本循环使用方法

<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">

</tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操做语句--> <!--id能够用来惟一肯定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each student}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = { "student": [ { "name": "张三", "sex": "0", "age": 18 }, { "name": "李四", "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ] }; //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script>

</body>
</html>
Handlebars.js一个重要特性：循环。#each能够理解成循环命令，循环的是json对象中的student属性。对于每次循环，均可以读出里边的name、sex、age属性。
---each-循环中使用this
<!DOCTYPE html>算法

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-循环中使用this - by 杨元</title>
</head>
<body>
express

each-循环中使用this

<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">

</tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操做语句--> <!--id能够用来惟一肯定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each this}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = [ { "name": "张三", "sex": "0", "age": 18 }, { "name": "李四", "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ]; //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script>

</body>
</html>
不少时候，咱们拿到的json对象，自己就是一个list，并非map，直接就能够遍历，不须要#each student这样指定遍历某个属性。此时能够用#each this，表示遍历当前对象。this表示当前上下文，很是灵活。
（二）SeaJs
--SeaJs是什么？
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，能够实现JavaScript的模块化开发及加载机制。可是它与jQuery等JavaScript框架不一样的是，SeaJS没有扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。
--SeaJs有什么好处？
使用SeaJS能够提升JavaScript代码的可读性和清晰度，解决目前JavaScript编程中广泛存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。
--SeaJS的特性：
一是html页面不用再维护冗长的script标签列表，只要引入一个sea.js便可。
二是js代码以模块进行组织，各个模块经过require引入本身依赖的模块，代码清晰明了。
--模块的定义及编写：
模块定义函数define：SeaJS中使用“define”函数定义一个模块，define能够接收三个参数：编程

QQ截图20151123180753.png

若是只有一个参数，则赋值给factory。若是有两个参数，第二个赋值给factory；第一个若是是array则赋值给deps，不然赋值给id。若是有三个参数，则分别赋值给id，deps和factory。可是，包括SeaJS的官方示例在内几乎全部用到define的地方都只传递一个工厂函数进去，相似与以下代码：

QQ截图20151123181338.png

我的建议遵循SeaJS官方示例的标准，用一个参数的define定义模块。那么id和deps会怎么处理呢？
id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块，则这个模块的ID会赋值为“http://example.com/a.js”，没有特别的必要建议不要传入id。deps通常也不须要传入，须要用到的模块用require加载便可。json

工厂函数factory解析
工厂函数是模块的主体和重点。在只传递一个参数给define时（推荐写法），这个参数就是工厂函数，此时工厂函数的三个参数分别是：
require——模块加载函数，用于记载依赖模块。
exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。
module——模块的元数据。
这三个参数能够根据须要选择是否须要显示指定。
下面说一下module。module是一个对象，存储了模块的元信息，具体以下：
module.id——模块的ID。
module.dependencies——一个数组，存储了此模块依赖的全部模块的ID列表。
module.exports——与exports指向同一个对象。

模块的载入和引用
上文说过一个模块对应一个js文件，而载入模块时通常都是提供一个字符串参数告诉载入函数须要的模块，因此就须要有一套从字符串标识到实际模块所在文件路径的解析算法。SeaJS支持以下标识：

QQ截图20151123182715.png

根据应用场景的不一样，SeaJS提供了三个载入模块的API，分别是seajs.use，require和require.async，下面分别介绍。

seajs.use： seajs.use主要用于载入入口模块。入口模块至关于C程序的main函数，同时也是整个模块依赖树的根。上面在TinyApp小例子中，init就是入口模块。require： require是SeaJS主要的模块加载方法，当在一个模块中须要用到其它模块时通常用require加载。require.async： SeaJS会在html页面打开时经过静态分析一次性记载全部须要的js文件，若是想要某个js文件在用到时才下载，可使用require.async。这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。