mux-genesis

介绍

Genesis,取自创世纪英译。起初，神創造天地。神說：「要有光」，就有了光。mux-genesis，希望从零打造mux项目的一切，就像创世一样。

Genesis是想要实现一整套前端开发中的工作流工具，包括模板构建部分还有公用工具部分

Genesis有自己的配置文件，在项目的根目录下。
我们来看下例子：

exports.sctype = 'magix-0.9';
exports.generate = {
  'base' : {
    pageTempleteJs:null,
    pageTempleteHtml:null,
    data:null
  },
  'tablePage':{
    pageTempleteJs:'./tmpl/table.js',
    pageTempleteHtml:'./tmpl/table.html',
    data:{path:'公告管理',attributes:[{name:'price',info:'价格'},{name:'status',info:'状态'}]}
  }
}

其中sctype代表当前项目使用的magix版本，因为不同的版本构建方式不同，需要指定版本号。

exports.generate用来设置 generate这个命令的配置参数。
generate命令用来根据配置构建一个页面。base，tablePage都代表一个组。

Genesis的命令很简单，就下面这些：

$ gs init sctype(magix版本或者文件夹路径)              # 使用grunt-init生成目录
$ gs replace file group                                # 替换文本内容，支持目录全部替换')
$ gs renderer file group                               # 对文本进行filter操作，生成renderer里面的内容')
$ gs generate file group                               # 使用指定的分组配置生成页面')
$ gs component file method(add|remove) bx-name(root|..) componentnames  #往一个页面里面添加或者删除组件')

安装使用

clone下代码后。cd到文件夹的父目录，运行

npm install -g mux-genesis

这样就可以本地安装genesis了。

linux下可以cd到mux-genesis目录运行npm link，这样不需要安装就可以直接运行所有命令了。

模板构建部分

模板构建用于创建页面，装载组件，自动渲染render等等。

init

调用grunt init来生成项目的基础文件架构
你可以输入

gs init magix-1.1

这样就会用magix-1.1的模版来生成项目结构。支持任意的符合grunt init的模版。所以可以通过文件路径的方式调用此命令。

generate

当你要开发一个带有table表格的页面。如果配置好模板后。
你可以输入

gs generate a/b/c tablePage

这样就会使用分组tablePage的配置在当前目录下生成a/b/c.html和a/b/c.js两个文件

配置参数说明：
1. pageTempleteJs 用来设置js文件的模板地址
2. pageTempleteHtml 用来设置html文件的模板地址
3. data:null 用来设置模板渲染所用的数据

模板引擎使用 underscore的templete，其实就是javascript代码。比如一个示例：

<h2 class="path current"><%= name %></h2>

name 代表文件，这边就是a/b/c，系统会自动将它与用户提供的data合并供模板使用。

详细的语法 点此查看

renderer

当你在页面html写入一些诸如{{list_status}} {{list_price}}这些东西时，不必再手动去写js代码了，只要配置了各个字段的处理方式，可以自动生成js。

比如下面的配置：

exports.renderer = {
  test:{
    'price' : 'present', //will be - if it is null
    'status' : 'money', //formate as money
    'test' : function (self) { return "sdfsdfsdf";}
  }
}

如果文件a/b/c.html的类容增加了{{list_status}} 。你可以运行：

gs renderer a/b/c test

这样就会使用test分组的字段配置来挨个的渲染js。

其中 present，代表字段为空时 会返回-。money代表会为字段加上￥的结尾。
另外可以自己编写函数。函数会作为字符串，写到js文件的renderer对象里。

比如上面运行的结果就会将js变成：

...
...
renderer: {
    list: {
        status: function(self) {
            return self.status + "$"
        }
    }
},
...
...

component

调用语法

gs component file method(add|remove) bx-name(root|..) componentnames

component代表mux组件装载方案，设想一下，等你配置完毕后。开发一个table表格可以这么开发：
妈妈说，我要一个表格，于是你可以输入：

gs component a/b/c add root simple-table

1. a/b/c代表文件
2. add代表增加组件,remove代表卸载组件
3. root代表根节点，可以指定其他节点名。节点名就是 brix组件的组件名。。也就是在html里面设置的 bx-name属性。这样可以在指定的区块增加组件。这个参数可以省略，默认就是root
4. simple-table组件名，也就是分组名，这边可以同时装载多个组件，使用“，”分割。

后来妈妈觉得这个table太简单了，需要全选删除按钮，需要日期。

于是可以输入：

gs component a/b/c add （simple-table的bx区块名） dataselect,delAll

所有的都自动生成。

不要了？ 直接：

gs component a/b/c remove root simple-table

下面说说组件的配置:

1. 模版占位符

简单配置方式：

配置文件里增加

exports.component = {
  'test-cp':{
    tmpl:'./tmpl/components/testcp.js'
  }
}

这样我们就增加了一个test-cp的组件装载方案。
我们看下模板 ./tmpl/components/testcp.js的内容

exports.jsTmpl = 'var test = "hahahah"';
exports.htmlTmpl = 'testtmpsdsdfsdfsfd';

很简单，一个js的内容，一个html的内容

我们的文件 a/b/c.html内容如下：

<!--面包屑地图-->
<!--start==>test-cp-->
<!--end==>test-cp-->
<div class="sitemap clearfix" id="sitemap">
    <h2 class="path current"></h2>
</div>

注意到那段注释了吗？那就是占位符。格式为：
<!--start==>组件名--><!--end==>组件名-->

这样我们运行命令：
gs component a/b/c add root test-cp
内容就变为：

<!--面包屑地图-->
<!--start==>test-cp-->
testtmpsdsdfsdfsfd
<!--end==>test-cp-->
<div class="sitemap clearfix" id="sitemap">
    <h2 class="path current"></h2>
</div>

另外js也会完成注入，不同的是js的占位符为：

/***start==>组件名***//***end==>组件名***/

对象配置方式：

仅仅简单的占位符配置有时并不能满足需求，这时就需要灵活的子标示配置了。

配置如下：

exports.jsTmpl = {
  '1':'var haha1 = "hello wrold"',
  '2':'asdasdasdsa'
}
exports.htmlTmpl = '11111111111111111';

这边的1,2都代表字标示符。于是占位符可以这么弄：

/***start==>组件名#子标示***//***end==>#子标示***/

js，html都是如此。这样就是先最大灵活度的模板占位。

运行命令后会自动装载js代码，减少开发量。

2. 自定义操作函数

看下面的实例代码：

exports.add = function() {
    var until = this;
  //until.insertHtml(jquery selector,code);
  //until.insertJs('root'|fn name,code);
  until.manageHtml(function($document){
    $document.find('.table-head-fix').attr('data-id','111')
  });
  until.manageJs(function(viewobj){
    viewobj['aha'] = function(){
      alert("asda");
    }
  })
  var code = "" +
  "// 浮动表头\n"+
  "new FixedHead({"+
  "    el: $('.table-container')"+
  "});";
  until.insertJs('components:', code);
}
exports.remove = function(until){
  var until = this;
  until.manageHtml(function($document){
    $document.find('.table-head-fix').attr('data-id','')
  });
  until.manageJs(function(viewobj){
    delete viewobj['aha'];
  })
  until.removeJs('components:');
}

使用这种方式更具有一般的通用性，但是需要提供add方法用来处理装载的操作，remove方法用来处理卸载的操作。

add，remove方法的this对象有很多方便的操作函数。如下：

• insertHtml(jquery selector,code，tag);根据jquery选择器来插入apend代码。tag代表标示。可以使用removeHtml（tag）来删除这段代码。tag可以省略，默认会使用jquery selector作为tag。

• insertJs(‘root’|fn name,code，tag);根据函数或对象前缀插入代码。tag代表标示。可以使用removeJs（tag）来删除这段代码。tag可以省略，默认会使用fn name作为tag。

• manageHtml(function($document){});回调函数提供一个jquery对象$document，你可以进行一切jquery操作

• manageJs(function(viewobj){});回调函数提供一个view对象（就是代码中extend的对象），你可以进行各种操作。
• removeHtml（tag)； 删除对应tag的html代码。
• removeJs（tag）； 删除对应tag的js代码。

replace

全文件替换字符串，支持正则。

如下配置：

exports.replace = {
  'test':{
    'www':'ssss'
  }
}

调用：gs replace a/b/c.js test
会自动将a/b/c.js里面的‘www’换成‘ssss’,支持目录参数。

公用工具部分

公用工具用来处理一些通用的与项目无关的任务。比如，测试，host文件修改，简易服务器等等。

这些起初是集成在gs命令里的,后来拆出来作为grunt插件的形式存在。依托grunt的强大公共库。

比如写的host插件

host

自动修改host
配置实例：
在gruntfile里面配置

host: {
            'none': {},
            'dev': {
                'test': '10.10.78.1',
                'test2': '202.119.236.190'
            },
            'pre': {
                'www.baidu.com': '10.10.78.1',
                'www.taobao.com': '202.119.236.190'
            }
}

这样就可以调用

grunt host:dev
来使用不同的配置host。

结语

genesis主要是要创建一系列的工具方便开发，尽管大部分工具开源的都有。但是对于新人，各个团队。总是需要花费大量时间各种配置，相互之间还要各种定规范。会很耗时间。这样整合起来，会很便利。