这类页面组成如下:
page: test
由以下三部分组成
1.test-filter--Component
2.test-table-component
3.test-pagination-component
在这里其中几乎所有的相识业务展示页面都由以上三部分构成,其中不同的页面逻辑区别，无非以下几点
·filter-group 的部分不同
·table的cloums 的部分不同 等等
·onHandleCallBack 存在部分差别
由此,理想情况下,在开发此类业务时,希望做到以下部分,进行简化操作
·写好同类型业务模板,模板内部参数动态化,模板名动态化,模板输出路径动态化
·page->name page->path 以及内部不同参数的自定义
·如 原始模板public tempalte
·$(name)Template.tsx => 输出 name=test outPath=/src/page/test
·输出如下 => src/page/test/testTemplate.tsx
·同理,tempalte内部也需要支持,动态的变量化,内部支持内联js脚本
2. 以上同理,form,弹出层业务,也存在相似情况,区别在于form表单的业务,差异性相对较大
区别点在于：
1.form.item的差别较大,不好定义,逻辑差别也较大
2.form,只有部分逻辑和Component是一样的,其他的复用性不大
3.一般模板只提供基础的form.item,仅包含长见的类型。 phone and email等骨架componemt
4.并提供常用的formData校验pipeFn,来完成form.item骨架
·这里需要template支持，细度的拆分
·写一套通用情况的form.item作为模板
·支持 form.item1 + form.item5 + form.item7 = 自由组合成需要的form
1.考虑到开发成本,后续维护成本等因数,采用goole的angular团队提供的angular-cli提供的工具流、
在angular-cli generate实现中,依赖Schematics这个独立的工具库,Schematics本质上是一个virtualFile-tree的文件引擎,由于目前Schematics并未完成。
并在angular 7中被合并进了angular-cli,因为Schematics本身不提供api,需要依赖Schematics-cli来执行
所以需要单独提取出来,针对angular-cli的设置,集成进jad-react-cli中
Schematics在angular-cli generate中实现了以上需要的绝大部分功能,需要改造实现针对react等其他应用的支持
Schematics-cli的命令声明
``json`
"schematics": {
"myTemplate": {
"aliases":["mt"], //shell 命令简写
"description": "这是初始化的模板组件", //描述
"factory": "./myTemplate/index#RunGenerate", //模板生成函数位置
"schema": "./myTemplate/config.json" //shell optipns 配置
}
}
Schematics-cli的shell optipns 配置
`json`
{
"$schema": "http://json-schema.org/schema",
"id": "myTemplate",
"title": "my new tempalte project",
"type": "object",
"properties": {
"path": {
"type": "string",
"format": "path",
"description": "创建模板的路径",
"visible": false
},
"name": {
"type": "string",
"description": "创建模板的命名",
"$default": {
"$source": "argv",
"index": 0
}
}
},
"required": [name],
"additionalProperties": false
}
-----------------------------------------------------------------------
一个简单的schematics模板构成
//路劲模板
file->
__name@classify__.tsx
__name@classify__.sass
//__name@classify__.tsx内容
`tsc``
import React,{ Component }from 'react';
import style from './<%= classify(name) %>.module.less';
const <%= classify(name) %> : Component
<%= classify(name) %> works!
{children}
);
export default <%= classify(name) %>;
//运行命令
jad-react-cli generate :mt name=test path=/src/template
该命令将在项目/src/template目录下生成
test ->
test.tsx
test.sass