我们通过started了解了如何使用ndoojs编写一个应用,示例中应用脚本编写在页面中,实际开发中我们需要编写大量代码,这时就需要将代码编写到一个单独的脚本文件中。我们对started的代码进行一些调整,代码如下:
basic.appscript.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>started-ndoojs</title>
</head>
<body>
<p id="container"></p>
<div id="scriptArea" data-page-id="home/index">
<script src="lib/underscore-min.js"></script>
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="js/ndoo_all.js"></script>
<script src="js/homeApp.js"></script>
<script>ndoo.init()</script>
</div>
</body>
</html>
将原来页面中的脚本放到js/homeApp.js文件中。
(function(){
var _, $, _n, _vars, _func, _stor;
_ = this['_'];
$ = this['jQuery'] || this['Zepto'];
this.N = this.ndoo || (this.ndoo = {});
_n = this.ndoo;
_vars = _n.vars;
_func = _n.func;
_stor = _n.storage;
/* [home module] {{{ */
_n.app('home', {
indexAction: function(){
return $('#container').html('hello ndoojs!');
}
});
/* }}} */
}).call(this);
(function(){...}).call(this)由LiveScript自动生成。为了减少代码,ndoojs在闭包内使用一些简短的别名。_n表示ndoo、_vars表示ndoo.vars、_func表示ndoo.func、_stor表示ndoo.storage。可以将上面的代码拷贝,作为一个通用的模板代码使用。
LiveScript源码
_ = @[_]
$ = @[jQuery] || @[Zepto]
_n = @ndoo
_vars = _n.vars
_func = _n.func
_stor = _n.storage
/* [home module] {{{ */
_n.app home,
indexAction: ->
$('#container').html('hello ndoojs!')
/* }}} */