编写应用脚本

我们通过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!')
/* }}} */

示例app script