一、总结
1、见名知意：见那些class名字知意，见函数名知意，见文件名知意 例如（history.md web 组件更新历史记录。）
二、web 组件开发规范rules
目录
web 组件样式组织
目录结构及说明
package.json
readme.md
history.md
src 目录
开发脚手架
调试预览
web 组件基于 amaze ui 基础库（css / js）开发，在基础库已有样式、功能的基础上做更多扩展。
web 组件样式组织
web 组件的样式有三个层级：
amaze ui 基础样式: 每个网站项目中都会默认引入以下基础样式，组件开发时应在以下样式的基础上进行。
variables.less
mixins.less
base.less
grid.less
block-grid.less
utility.less
amaze ui 其他样式组件：web 组件编写过程中使用到类似的样式时应当引入相关 css 组件，在此上进行微调，比如 button.less、close.less。
web 组件自身样式：web 组件自身样式拆分出骨干样式和主题样式；每个 web 组件可以有多个不同主题，主题基于骨干样式编写，每个主题相互独立。
骨干样式以 {widget}.less 命名；
默认主题以 {widget}.default.less 命名；
其他主题以 {widget}.{theme-name}.less 命名。
目录结构及说明
一个组件的目录结构如下：
{widget}
|-- package.json
|-- readme.md
|-- history.md
|-- resources
| `-- screenshots
| |-- 0.jpg
| |-- 1.jpg
| `-- 2.jpg
`-- src
|-- {widget}.hbs
|-- {widget}.js
|-- {widget}.less
|-- {widget}.default.less
|-- {widget}.[theme1].less
|-- {widget}.[themen].less
`-- {widget}.png
package.json
web 组件核心描述文件，json 格式，下面的注释仅为方便解释各项含义添加。
copy
{
// 组件名称: 使用小写字母，不能和存在的组件重名
"name": "sample",
// 版本号
"version": "0.0.1",
// 组件本地化名字，目前有中文、英文两个选项
"localname": {
"en": "",
"zh-cn": ""
},
// 组件类型 [""|"layout"|"social"]
"type": "",
// 组件 icon，存放在 src 目录下
"icon": "sample.png",
// 作者信息
"author": {
"name": "xxx",
"email": "xxx@yunshipei.com"
},
// 组件描述
"description": "sample 描述",
// 组件驱动者
"poweredby": "allmobilize",
// 基础样式（无需修改）
"stylebase": [
"variables.less",
"mixins.less",
"base.less",
"grid.less",
"block-grid.less",
"utility.less"
],
// 组件模板，使用 [handlebarsjs](http://handlebarsjs.com/)
"template": "sample.hbs",
// 依赖的库样式
"styledependencies": [
"icon.less"
],
// 组件核心样式
"style": "sample.less",
// 组件主题（没有主题时将值设置为 null）
"themes": [
{
// 主题名称 sample.{xxx}.less 中的 {xxx}，尽量语义化描述主题
"name": "default",
// 主题描述，简要描述主题
"desc": "默认",
// 主题使用配置选项
"options": {},
// 主题钩子
"hook": "hook-am-sample-default",
// 主题使用的less变量
"variables": [
{
// 变量名
"variable": "",
// 变量描述名字
"name": "",
// 默认值
"default": "",
// 使用改变量的 css 样式
"used": [
{
"selector": "",
"property": ""
}
]
}
],
// 主题演示数据，可以为多个
"demos": [
{
// 演示描述
"desc": "",
// 演示数据
"data": {}
}
]
}
],
// amaze ui 核心js（无需修改）
"jsbase": [
"core.js"
],
// 依赖的 amaze ui js 插件
"jsdependencies": [],
// 组件脚本
"script": "sample.js",
// api 用于生成用户 gui 界面以及保存用户提交的数据
"api": {
"id": {
"name": "id", // 表单提示名称
"desc": "组件自定义id，遵循css id命名规范",
"type": "text", // 表单类型
"default": "", // 默认值
"pattern": "", // 表单验证正则表达式
"required": false // 是否为必填
},
"classname": {
"name": "class",
"desc": "用户自定义组件 class，遵循 css class 命名规范",
"type": "text",
"default": "",
"required": false
},
// 主题选择（没有主题时将值设置为 null）
"theme": {
"name": "主题",
"desc": "组件主题",
"type": "select", // 下拉选框
"default": "default",
"required": true,
"datalist": "<%= pkg.themes %>" // 从 themes 中读取主题列表
},
// 组件选项（没有选项时将值设置为 null）
"options": {
"multiple": {
"name": "同时展开多个面板",
"desc": "是否允许同时展开多个面板",
"type": "select",
"default": false,
"required": false,
// 表单类型为 select 时通过 datalist 设置 readme.md
web 组件使用说明，包括 web 组件 api 介绍、使用技巧、注意事项等。
history.md
web 组件更新历史记录。
src 目录
src 目录包含 web 组件的模板（hbs）、核心样式（less）、交互（js）、图标（png）、主题文件。
src 目录里的文件使用 web 组件名称作为文件名，主题使用 {web 组件名}.{主题名}.less 形式命名。
{widget}.hbs: 模板，使用 handlebars
{widget}.less: 主题核心样式，使用 less 编写
{widget}.js: 组件交互
{widget}.png: 组件图标，50px * 50px
{widget}.default.less: 默认主题
{widget}.xxx.less: 其他主题，可以任意多
模板 {widget}.hbs
data-am-widget="figure" 为统一标识符；
.am-{web 组件名} 为 web 组件基础标识符，web 组件的所有子元素、主题、状态基于此命名； web 组件基础标识符采用 am-{widget} 方式命名，子元素、主题、状态采用 am-{widget}-{子元素|主题|状态}，如 am-figure-hover 、 am-figure-bd 、 am-figure-active 、 am-figure-ios7。
模板使用 {{#this}}..{{this}} 包裹（web 组件使用时注册为 handlebars partial，通过 {{> widget data}} 的形式调用。
copy
{{#this}}
class="am-figure{{#if theme}} am-figure-{{theme}}{{else}} am-figure-default{{/if}}{{#if options.zoomble}} am-figure-zoomable{{/if}}{{#if widgetid}} {{widgetid}}{{/if}}{{#if classname}} {{classname}}{{/if}}"{{#if id}}
id="{{id}}"{{/if}}>
{{#if content.img}}
{{/if}}
{{#if content.figcaption}}
{{content.figcaption}}
{{/if}}
{{/this}}注意：
handlebars 模板中不支持
