块级组件

ndoojs支持块级组件，通过标签上的属性载入组件并自动执行。

1.页面中上添加组件标识

<div id="testBlock" data-nblock-id="test/main?abc=1"></div>

组件会被自动实例化，如果希望组件在后面手动运行，需要设置一行属性 data-nblock-auto="false"。

2.定义模块

file: ndoo.block.test.js

_n.block('test.main', {
  init: function(elem, params){
    console.log('init test block');
  }
});

block的值可以是一个函数或者对象，如果为对象则会尝试调用init入口函数，如果为函数则直接被调用。

3.自动加载

3.1 引入do.js以及模块定义文件 此处用到了事件系统，参见event。 

<script src="lib/Do.js"></script>

3.2 定义依赖

(function(){
  var _n;
  this.N = this.ndoo || (this.ndoo = {});
  _n = this.ndoo;

  Do.define('test.main', {
    path: currJsPath + '/ndoo.block.test.js',
    type: 'js'
  });
  _n.on('NBLOCK_DEFINE', function(){
    _n.setBlock('test.main');
  });

}).call(this);

4.完整代码如下：

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>example</title>
  </head>
  <body>
    <div id="testBlock" data-nblock-id="test/main?abc=1"></div>
    <p id="content"></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="lib/Do.js"></script>
      <script src="js/ndoo_all.js"></script>
      <script>
        (function(){
          var _n;
          this.N = this.ndoo || (this.ndoo = {});
          _n = this.ndoo;

          Do.define('test.main', {
            path: currJsPath + '/ndoo.block.test.js',
            type: 'js'
          });
          _n.on('NBLOCK_DEFINE', function(){
            _n.setBlock('test.main');
          });
          _n.init();

        }).call(this);
      </script>
    </div>
  </body>
</html>

ndoo.block.test.js

(function(){
  'use strict';
  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;
  _n.block('test.main', {
    init: function(elem, params){
      console.log('init test block');
    }
  });
  /* vim: se ts=2 sts=2 sw=2 fdm=marker cc=80 et: */
}).call(this);

查看test.block.html

5.执行多个block

在某些特定情况，我们需要运行多个block，但并不对应具体的dom。这个时候可以在一个空div上面设置多个block id来实现。多个block id之间使用空格区分。示例：

<div id="blockElement" data-nblock-id="ui/loading ui/back2top"></div>

ui/loading ui/back2top 会依次执行