发布于 2015-09-06 14:45:44 | 234 次阅读 | 评论: 0 | 来源: 网络整理
regularjs并不处理模板的加载等， 你只需要保证传给template的值是个字符串或者是预解析的AST即可.
本文会涉及到的内容有:
rgl插件rgl以及rglc transformregular!插件在regularjs提供的所有例子中，为了方便起见, 基本都使用了以下两种方式来管理你的模板:
直接在js中声明模板字符串
var Component = Regular.extend({
tempalte: "<h2>{title}</h2>"
})
当模板非常简单时，这样做确实非常方便，
当模板结构稍微复杂点时, 一般也可以使用页面的模板容器节点
引用实现写在页面标签中的内容，如
var Component = Regular.extend({
tempalte: document.getElementById("app")
})
在#app节点(一般是修改了type的script标签， 即不会render其中内容的容器):
<script id='app' type='text/rgl'>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
//...
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
//...
</div>
</div>
</div>
</script>
这种方式相较于方式1其实有利有弊. 例在于它解决了在js中拼接字符串模板的肮脏行为, 弊则在于模板本身变成了一个“全局”的东西，组件这个统一的整体也被打碎了, 从项目规模庞大后，维护这些散落在页面中的容器节点也会成为随时引爆的导火索
使用multiline书写多行字符串.
大家都知道未来的ES6和Coffeescript一样都可以书写多行字符串， 比如
var template =
`
<h2></h2>
<div class="container">{content}</div>
`
但是在ES6还未普及的今天， 其实也有一种小技巧来帮助我们书写多行字符串——sindresorhus/multiline
你可以这样来声明一个多行字符串
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
但是， 上述几种种解决方案都有一个问题： 无法对模板做预解析.
“是否有解决上述问题的方案呢？” 答案是肯定的, 就是将模板加载集成到模块系统中， regularjs 提供了市面上最常用的两种开发方式的解决方案: requirejs(AMD) 和 browserify(Commonjs),
Install
bower install requirejs-regularnpm install requirejs-regularIntrodocution
使用rgl!前缀来标明此资源为regularjs模板, 会在加载的同时将其解析为ast.
Example
require(['rgl!foo.html', 'regularjs'], function(foo, haha , Regular){
var Foo = Regular.extend({
template: foo
})
return Foo;
});
点击 https://github.com/regularjs/requirejs-regular 查看requirejs的使用和optimizer的配置
reuglarjs 提供一个 browserify 的 transform (regularify ) 用来转换模板
Install
npm install regularifyUsage
You can simply use extensions .rgl and .rglc(they do different transform) to load regularjs template or component, the extensions are also configurable
use .rgl
transform rgl is used to load rgl template
var ast = require("xx.")
var Component = Regular.extend({
template: ast,
// ....
})
use .rglc
transform rglc is used to load A reuglarjs Component.
var Component = require("component.rglc")
where in component.rglc
<h2>{title}</h2>
<div>{content}</div>
<script>
module.exports = {
init: function(){
}
}
</script>
See regularify for more information
特别对于网易的同事， regularjs目前已经集成到NEJ得模块体系中， 使用中有疑问可以私泡我 (杭州研究院|前台技术中新|郑海波)
如果以上两种模块体系都是不是你得选择，也许你需要自己实现一个处理插件了， 不用担心由于regularjs本身本打包为了umd模块，它可以同时在node和browser环境被使用。 使用 Regular.parse来处理你的模板字符串吧， 具体可以参考requirejs-regular 和 regularify的实现
var Regular = require("regularjs");
var AST = Regular.parse("{title}", {
BEGIN: '{',
END: '}'
})