1010
原子计划
Last updated 3 months ago by cheng022074 .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install 1010 
SYNC missed versions from official npm registry.

原子计划

以精细化管理为指导原则,致力于将尽可能多的应用维护环节(产品、设计、后端、前端、运营等)工艺标准化与流程化,从而可流水线式生产包括网站、微信(公众号/小程序)、APP(IOS/Android/Web)等各种应用程序,并利用自有的编译技术,可真正达到 一次编写,到处运行 的目标

工艺流程

工艺标准

公共配置

工具指令

工艺流程

start=>start: 开始
prototype=>subroutine: 原型阶段
component=>subroutine: 组件阶段
develop=>subroutine: 开发阶段
valid=>condition: 验收阶段
end=>end: 结束
start->prototype->component->develop->valid
valid(yes)->end
valid(no)->component

原型阶段

此阶段应由 产品经理 负责

start=>start: 开始
create-or-edit-prototype-document=>operation: 编写界面原型文档
create-or-edit-tag-signature-document=>operation: 编写组件签名文档
prototype-valid=>condition: 是否缺失组件
user-story=>operation: 编写用户故事
meeting-first=>inputoutput: 讨论用户故事与原型文档
meeting-first-valid=>condition: 讨论是否通过
plan-user-story=>operation: 制定用户故事实现步骤
meeting-last=>inputoutput: 讨论用户故事实现步骤
meeting-last-valid=>condition: 讨论是否通过
end=>end: 结束
start->create-or-edit-prototype-document->prototype-valid
prototype-valid(yes)->create-or-edit-tag-signature-document->user-story
prototype-valid(no)->user-story
user-story->meeting-first->meeting-first-valid
meeting-first-valid(yes)->plan-user-story->meeting-last->meeting-last-valid
meeting-first-valid(no)->create-or-edit-prototype-document
meeting-last-valid(yes)->end
meeting-last-valid(no)->plan-user-story

此阶段结束后的成果物应包括:

  • 界面原型文档
  • 用户故事文档
  • 组件签名文档 (当需要开发组件时)

此阶段的工作内容包括:

  • 使用 新建文件 命令创建界面原型文档、用户故事文档
  • 使用 编译界面 命令编译界面原型文档
  • 使用 生成文档 命令生成界面组件文档与用户故事文档

组件阶段

此阶段应由技术经理负责,工作内容包含以下三个方面:

  • 样式类名设计与部署
  • HTML结构设计
  • 属性与方法设计
  • 数据服务名称与数据绑定

开发阶段

此阶段应由开发工程师负责,工作内容包含以下三个方面:

  • 样式开发
  • 属性与方法开发
  • 数据服务开发

验收阶段

此阶段应由产品经理负责,保证生产出来的产品与设计保持一致

工艺标准

界面

以全组件JSON配置方式构建页面,是实现跨平台应用的关键标准

   {
      "type":"viewport",
      "title":"原子计划",
      "layout":"centered",
      "items": {
	      "html":"欢迎使用原子计划"
      }
  }

type 代表所调用的自定义模板的映射名称 ,如未指定 type ,默认为 container 。与名称的映射关系,请参考配置 html.tag

组件

公共配置

此处所介绍的配置为系统默认设置,如果需要更改,可以在当前工程下的 CONFIG(参与配置 path )指定的目录下,建立相同路径且相同名称的配置文件进行修改

html.tag

自定义模板元素配置

  {
    "component":{
        "name":"组件",
        "selectors":".component",
        "implement":"component",
        "description":"包含所有元素都必须具备的配置项",
        "fields":{
            "description":{
                "name":"描述",
                "description":"描述当前应用模板的用途",
                "type":"string"
            },
            "class":{
                "name":"样式类列表",
                "description":"指定需要附加在此元素的样式集合",
                "type":"array"
            },
            "id":{
                "name":"样式类列表",
                "description":"指定需要附加在此元素的样式集合",
                "type":"string"
            },
            "padding":{
                "name":"内间隔",
                "description":"元素内部间隔设置"
            },
            "margin":{
                "name":"内间隔",
                "description":"元素内部间隔设置"
            },
            "width":{
                "name":"宽度",
                "description":"元素宽度",
                "type":"number"
            },
            "height":{
                "name":"高度",
                "description":"元素高度",
                "type":"number"
            },
            "x":{
                "name":"横坐标",
                "description":"元素的横向坐标",
                "type":"number"
            },
            "y":{
                "name":"纵坐标",
                "description":"元素的纵向坐标",
                "type":"number"
            },
            "position":{
                "name":"定位",
                "description":"元素定位方式",
                "type":{
                    "name":"enum",
                    "list":[
                        "tl",
                        "tr",
                        "br",
                        "bl"
                    ]
                },
                "defaultValue":"tl"
            },
            "dock":{
                "name":"锚定",
                "description":"元素定位设置"
            },
            "html":{
                "name":"内容",
                "description":"基于当前环境的直接表达文本",
                "type":"string"
            },
            "flex":{
                "name":"弹性系数",
                "description":"在垂直、水平布局或者应用Flex布局时适用时,确定弹性的权重",
                "type":"number"
            }
        }
    },
    "container":{
        "name":"容器",
        "selectors":[
            ".component.container",
            ".layout-centered",
            ".layout-horizontal",
            ".layout-vertical"
        ],
        "implement":"container",
        "description":"可以对于一组模板进行分组,并可以实现特定的布局",
        "fields":{
            "layout":{
                "description":"布局类型"
            },
            "defaults":{
                "description":"子模板的默认配置",
                "type":"object",
                "defaultValue":{}
            },
            "items":{
                "description":"加载的子模板",
                "type":"array",
                "defaultValue":[]
            }
        }
    },
    "viewport":{
        "extend":"container",
        "selectors":".container.viewport",
        "implement":"viewport.fit",
        "name":"视窗",
        "description":"可以是一个界面,也可以是SPA模式中的一张视图",
        "fields":{
            "margin":false,
            "x":false,
            "y":false,
            "position":false,
            "dock":false,
            "flex":false,
            "width":false,
            "height":false,
            "title":{
                "name":"标题",
                "description":"显示在视窗标题栏中的文本",
                "type":"string"
            },
            "styles":{
                "name":"加载样式列表",
                "description":"页面所加载的样式文件路径集合",
                "type":"array",
                "defaultValue":[]
            },
            "scripts":{
                "name":"加载脚本列表",
                "description":"页面所加载的脚本文件路径集合",
                "type":"array",
                "defaultValue":[]
            }
        }
    },
    "placeholder":{
        "name":"占位符",
        "selectors":".component.placeholder",
        "implement":"component.placeholder",
        "description":"用于在界面中占住一部分位置。当指定的元素类型不存在时,系统会自动将元素类型切换成此类型",
        "fields":{
            "id":false,
            "value":{
                "name":"内容",
                "description":"占位符内的文本",
                "optional":false
            }   
        }
    },
    "image":{
        "name":"图片",
        "selectors":".component.image > img",
        "implement":"component.image",
        "description":"将链接的图片显示在界面上",
        "fields":{
            "src":{
                "name":"链接",
                "description":"一张图片链接"
            }
        }
    },
    "includer":{
        "name":"导入器",
        "implement":"component.includer",
        "description":"用于导入其它界面配置",
        "fields":{
            "include":{
                "name":"导入",
                "description":"导入界面配置的命名空间",
                "optional":false
            }
        },
        "config":{
            "name":"修改导入的内容文本",
            "description":"修改导入的内容文本"
        } 
    }
}

所映射的模板资源是存放在 template.html.tag 命名空间下,如 viewport 映射的模板资源是 template.html.tag.container.viewport

web

服务器配置

{
    "listen":3000,
    "directories":{
        "TEST":true,
        "DIST":true,
        "LIB":true,
        "EXAMPLE":true,
        "MEDIA":true
    }
}
  • listener 服务器启动端口
  • directories 服务器目录

服务器可以访问的目录,而目录是在配置 path 中配置的目录短名

path

工程目录配置

{
    "LIB":"lib",
    "CACHE":"cache",
    "DEBUG":"debug",
    "DIST":"dist",
    "CSS":"css",
    "HTML":"html",
    "SCRIPT":"script",
    "TEMPLATE":"template",
    "TEST":"test",
    "EXAMPLE":"example",
    "MEDIA":"media",
    "DOCS":"docs"
}
  • LIB 外部资源目录,主要是存放第三方的类库,如Bootstrap、WeUI的样工文件、JQuery的脚本文件
  • CACHE 命令执行缓存目录,存放为了加快运行速度而增加的缓存文件
  • DEBUG 调试目录,存放中间编译程序文件,如替换成绝对引用路径的样式源文件、通过JSON配置转换的HTML源代码等
  • DIST 发布目录,存放可执行的程序文件,如页面文件、脚本文件、样式文件等
  • CSS 样式目录,存放所有样式源文件
  • HTML 页面目录,存放页面文件与结构页面文件
  • SCRIPT 脚本目录,存放脚本源文件
  • TEMPLATE 模板目录,存放模板源文件,包括脚本源文件转义、结构页面转换转义等文件
  • TEST 测试目录,用于存放测试样式效果与脚本功能的资源
  • EXAMPLE 演示目录,用于存放用以演示当前工程功能的页面文件
  • MEDIA 多媒体目录,用于存放多媒体资源的目录,如图片、字体图标等
  • DOCS 文档目录,存放基于界面的文档描述文件

html

界面配置

    {
        "viewport":{
            "selectors":[
                "body.android",
                "body.ios",
                "body.android.weixin",
                "body.ios.weixin"
            ]
        },
        "index":{
            "name":"首页",
            "descripton":"汇集所有应用功能的门户",
            "implement":"index"
        },
        "mine":{
            "name":"我",
            "descripton":"基于当前登录用户的个人设置与门户",
            "implement":"mine"
        }
    }
  • selectors 界面需要使用的CSS样式配置
  • implement 指定当前界面的实现

工具指令

启动服务器

用于启动内置服务器,用于调试与运行程序

1010 web

输出结果如下:

服务启动 3000 开始监听

其中 3000 表示服务器启动端口,此端口可以参考配置 web

如果执行此命令出现错误时,修改端口号即可

新建文件

1010 create [新建文件路径]

新建文件路径必须指定

编译界面

将界面源代码转换成可以运行的界面 命令签名如下:

1010 html [界面文件路径]

页面文件路径必须是配置 path 指定 HTML 的路径下的后缀名为 .html.json 或者 .html 文件

生成文档

基于界面系统生成相对应的文档,用于分析界面构造以及脚本关系等 命令签名如下:

1010 docs [界面文件名称]

界面文件由 html 配置指定 如果不指界面文件名称,则生成当前工程所有界面文档

编译测试页面

将测试页面源代码转换成可以运行的页面 命令签名如下:

1010 test [页面文件路径]

页面文件路径必须是配置 path 指定 TEST 的路径下的后缀名为 .source.html 文件

清理

用于清理工程中生成的内容 命令签名如下:

1010 clear [清理目标]

清理目标:

  • dist: 发布
  • debug: 调试
  • docs: 文档

如果不指定文档指令,则执行所有清理

删除

删除指定文件 命令签名如下:

1010 remove [删除文件路径]

如果删除文件路径未指定文件后缀名,则会删除该同级目录下所有具备相同名称的文件

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 35
Last Day 0
Last Week 35
Last Month 156
Dependencies (40)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |