├── README.md ├── imgs ├── PC上报规范.png └── 移动上报规范.png ├── lego ├── OPERATION.md ├── PLATFORM-SPECIFICATION.md └── SPECIFICATION.md ├── md ├── html+css.md ├── html.md ├── javascript.md ├── note.md └── other.md ├── mobile ├── rem.md └── report.md └── pc └── report.md /README.md: -------------------------------------------------------------------------------- 1 | ####Web前端规范 2 | 3 | #####开发规范 4 | 5 | + [开发规范](http://imweb.github.io/CodeGuide/) 6 | 7 | #####Mobile 规范 8 | 9 | + [移动端技术数据上报](mobile/report.md) 10 | + [REM开发规范](mobile/rem.md) 11 | 12 | #####PC 规范 13 | 14 | + [PC技术数据上报](pc/report.md) 15 | 16 | #####Lego Specification 17 | 18 | + [Lego 组件开发](/lego/SPECIFICATION.md) 19 | + [Lego 组件平台](/lego/PLATFORM-SPECIFICATION.md) 20 | + [Lego 组件运营](/lego/OPERATION.md) 21 | -------------------------------------------------------------------------------- /imgs/PC上报规范.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imweb/code-guide/b62aa654c479a1b0dc5bd7e0b4bc251202433fa5/imgs/PC上报规范.png -------------------------------------------------------------------------------- /imgs/移动上报规范.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imweb/code-guide/b62aa654c479a1b0dc5bd7e0b4bc251202433fa5/imgs/移动上报规范.png -------------------------------------------------------------------------------- /lego/OPERATION.md: -------------------------------------------------------------------------------- 1 | #[Lego](http://lego.imweb.io) 组件运营规范 2 | @(系统建设) 3 | 4 | + **组件规范** 5 | 6 | 在lego系统的组件需要遵循以下规范 7 | + [Lego 组件规范](https://github.com/imweb/code-guide/blob/master/lego/SPECIFICATION.md) 8 | + [Lego 平台规范](https://github.com/imweb/code-guide/blob/master/lego/PLATFORM-SPECIFICATION.md) 9 | + [Lego 运营规范](https://github.com/imweb/code-guide/blob/master/lego/OPERATION.md) 10 | 11 | ---------------- 12 | 13 | + **组件构建体系** 14 | 15 | 团队后续构建工具统一迁徙至FIS3，lego会集成到fis3中，目前H5已接入Lego，基于fis2的插件[plugin](http://lego.imweb.io/package/fis-postprocessor-lego-require)。 16 | 17 | + **构建规则** 18 | 19 | 首先来看一下项目目录 20 | 21 | —— edu-proj 22 | 23 | ---- dist 发布目录 24 | 25 | ---- dev 开发目录 26 | 27 | ---- src 源码目录 28 | 29 | ———— lego_modules lego依赖，基于同目录下的package.json维护 30 | 31 | ———— zepto lego组件，规范为组件规范 32 | 33 | ———— modules 自身模块目录，下含多个模块，项目模块和全局模块可平行转移 34 | 35 | ———— pages 静态文件目录 36 | 37 | ———— images 图片目录 38 | 39 | ———— package.json 维护lego组件 40 | 41 | + **构建规范** 42 | + **优先级** 43 | 44 | 优先级遵循项目modules > lego_modules，当使用着通过require('zepto')或者require.async('zepto')时，构建优先查找项目modules是否包含该模块，如包含，则使用该模块。反之，则查找lego_modules下是否包含该模块，并深度分析模块下的package.json中依赖，然后打包。 45 | + **相对目录** 46 | 47 | 当使用相对目录的时：require(./zepto)，只查找项目modules，并分析依赖构建打包。因此，为方便代码可读性和维护性，使用项目modules，优先采取相对目录使用。 48 | 49 | 50 | + **组件同步机制** 51 | 52 | 内网源和外网源定期同步，开发网同学请优先使用内网源 ` lego config set registry http://lego.oa.com` 53 | + **组件提交规范** 54 | + **文档 & 测试用例** 55 | + 需要给出完整的API文档、DEMO、测试用例，才能通过组件认证，被认证的组件，才会被大家优先使用。 56 | + **组件文档规范** 57 | 58 | 分为[内网源](http://lego.oa.com)，[外网源](http://lego.imweb.io)。 59 | + 内网源 60 | 61 | 内网源，用户是基于github用户，在内网源的情况下，没有用户的概念，因此在内网源提交的组件需要在README.md中明确组件的author。 62 | + 外网源 63 | 64 | 外网源，需要先login才能进行提交。详细使用见lego login命令 65 | + **组件维护** 66 | + 认证 67 | 68 | 组件开发者可以到平台申请组件认证，提交组件认证信息，有认证团队对组件进行认证。 69 | + 反馈 70 | 71 | 组件维护者，需要关注自己提交的组件的反馈，及时关注组件issue，保证组件的活跃性(目前还没有打通通知机制) 72 | + **Lego组件团队(`征召中...`)** 73 | + `优化团队` 74 | 75 | 负责Lego系统功能优化，定期收集大家的反馈，优化系统体验。 76 | + `认证团队` 77 | + 质量 78 | 79 | 负责检测组件的质量，保证组件完善的api文档、demo、兼容性说明、author必要信息 80 | + 认证 81 | 82 | 组件的认证，前期负责将平台现有的组件认证搭建起来，推动组件开发这完善组件的必要信息，收集大家的反馈。 83 | + `推广团队` 84 | 85 | Lego推广，相关运营工作。lego站点、github上文档和指引的完善，各个第三方站点推广。 -------------------------------------------------------------------------------- /lego/PLATFORM-SPECIFICATION.md: -------------------------------------------------------------------------------- 1 | # [Lego](http://lego.imweb.io)组件平台规范 2 | @(基础能力) 3 | 4 | + **组件规范** 5 | 6 | 在lego系统的组件需要遵循以下规范 7 | + [Lego 组件规范](https://github.com/imweb/code-guide/blob/master/lego/SPECIFICATION.md) 8 | + [Lego 平台规范](https://github.com/imweb/code-guide/blob/master/lego/PLATFORM-SPECIFICATION.md) 9 | + [Lego 运营规范](https://github.com/imweb/code-guide/blob/master/lego/OPERATION.md) 10 | 11 | ----------------------- 12 | 13 | [lego](http://lego.imweb.io)基于[spm](http://spmjs.io/)基础之上，完善组件分类体系，组件认证体系，组件反馈体系的完整的组件使用生态系统。协助组件使用者在组件选择、信任组件、组件使用中更好的参与到组件生态系统中。 14 | 15 | + **GitHub开源** 16 | + [lego](https://github.com/imweb/lego)与[lego.imweb.io](https://github.com/webryan/lego.imweb.io)（`需要权限才能访问`） 17 | + 如需要，访问[spm](https://github.com/spmjs/spm)与[spm.io](https://github.com/spmjs/spmjs.io) 18 | + 组件平台 19 | 20 | 组件平台分类[客户端](https://github.com/imweb/lego)以及[服务平台](http://lego.imweb.io) 21 | 22 | + 客户端安装&使用（`文档还在完善中`） 23 | 24 | **npm install -g lego** `安装lego客户端` 25 | 26 | **lego login** `登录lego系统，lego帐号和github帐号关联` 27 | 28 | **lego info** `lego信息查看` 29 | 30 | **lego init** `初始化组件目录，组件开发初始化` 31 | 32 | **lego doc** `文档生成`，如：[jquery](http://lego.imweb.io/docs/jquery/latest/) 33 | 34 | **lego doc publish** `组件开发者将文档发布至平台` 35 | 36 | **lego publish/unpublish** `组件发布` 37 | 38 | **lego config** `管理lego配置` 39 | 40 | **lego install** `安装组件` 41 | 42 | 组件使用的时候安装一个组件，使用类似于npm，如果没有制定安装具体的组件，可以通过pakage.json中的lego字段申明依赖。 43 | 44 | lego install jquery 或者 lego install jquery@2.1.3 45 | 46 | 组件install之后，会安装到本地的lego_modules中，所有依赖组件都会平级放到该目录下。 47 | 48 | **package.json** 49 | 50 | ```html 51 | { 52 | "name": "zepto", 53 | "version": "1.1.4", 54 | "description": "zepto", 55 | "keywords": [], 56 | "homepage": "", 57 | "author": "herbertliu ", 58 | "repository": { 59 | "type": "git", 60 | "url": "" 61 | }, 62 | "bugs": { 63 | "url": "" 64 | }, 65 | "licenses": "MIT", 66 | "lego": { 67 | "main": "index.js", 68 | "dependencies": { 69 | }, 70 | "devDependencies": { 71 | "expect.js": "0.3.1" 72 | } 73 | } 74 | } 75 | ``` 76 | 77 | **lego test** `单元测试，完善中` 78 | 79 | **lego search**`组件查找，完善中` 80 | 81 | **lego update**`组件更新，完善中` 82 | 83 | **lego server update** `第三方组件更新检查(jquery)，通过配置组件来源，通过命令检查更新，进行同步，完善中` 84 | 85 | 在组件的package中lego字段新增`source`字段，在组件开发中如果是第三方组件需要指定该字段，通过命令进行更新检查并做一些初始化组件的工作。 86 | 87 | 88 | + **组件分类** 89 | 90 | 组件分类，帮助组件使用者更快、直接的招到自己所需要的组件，通过组件本身属性（兼容性、平台性、功能性）来进行分类和标记。同时，可以通过查找来直接定位组件。详细的分类如下（*`后续维护修改`*）： 91 | 92 | + 基础组件 93 | 诸如[jquery](http://lego.imweb.io/package/jquery)等基础框架组件 94 | + 工具组件 95 | 依托于基础组件的插件、工具等组件。诸如local、query、cookie 96 | + 通用组件 97 | 所有通用业务都需要，但与具体业务无关的t组件，包含逻辑以UI，诸如：badjs、report.js、editor 98 | + 逻辑组件 99 | 纯逻辑组件，详细分类还在完善中 100 | + 日志 101 | + 校验 102 | + ... 103 | + UI组件 104 | 涉及UI交互视觉的组件，详细分类还在完善中 105 | + 导航 106 | + 弹出框 107 | + 面板 108 | + 日历 109 | + ... 110 | + 业务组件 111 | + 在线教育 112 | + 逻辑组件 113 | + UI组件 114 | + 吃喝玩乐 115 | + 逻辑组件 116 | + UI组件 117 | + ... 118 | + 组件认证 119 | + 认证提交 120 | 121 | 组件开发者通过平台，[提交](http://lego.imweb.io/authen/apply/expect.js)组件认证。 122 | 123 | + 组件审核 124 | 125 | 审核通过的组件可以通过平台查看认证信息，认证流程参见[组件规范](https://github.com/webryan/lego.imweb.io/blob/master/docs/STANDARD.md)。 126 | -------------------------------------------------------------------------------- /lego/SPECIFICATION.md: -------------------------------------------------------------------------------- 1 | # [Lego](http://lego.imweb.io)组件规范 2 | @(基础能力) 3 | 4 | + **组件规范** 5 | 6 | 在lego系统的组件需要遵循以下规范 7 | + [Lego 组件规范](https://github.com/imweb/code-guide/blob/master/lego/SPECIFICATION.md) 8 | + [Lego 平台规范](https://github.com/imweb/code-guide/blob/master/lego/PLATFORM-SPECIFICATION.md) 9 | + [Lego 运营规范](https://github.com/imweb/code-guide/blob/master/lego/OPERATION.md) 10 | 11 | 12 | ------------------- 13 | 14 | ###1 组件规范 15 | 16 | ####1.1 命名规范 17 | 在团队[代码规范](http://imweb.github.io/CodeGuide/)的前提下，`组件开发需要遵循的规范如下:` 18 | ``` 19 | 1.文件和目录名字包含[a-z\d-]，并以英文字母开头 20 | 21 | 2.单词简洁明了优先，组件命名长度不超过15个字符长度(FIS插件除开标配字符串不能超过15个字符长度)，除非必要，不允许“.js”命名组件 22 | 23 | 3.自定义属性多单词之间用“-”连接，并加上自定义分类开头，诸如：data api 命名为小写并用连字符，如 data-courseid 24 | 25 | 4.事件名为驼峰：自定义事件，用于组件通信等场合 26 | 27 | 5.常量命名规则[A-Z\d-]，并以英文字母开头 28 | 29 | 6.变量以及单例模块采用驼峰，并以小写字母开头 moduleName，className 30 | 31 | 7.类名（多例）采用驼峰，并且首字母要大写 ClassName 32 | ``` 33 | ####1.2 目录规范 34 | **组件历史版本号** 35 | 组件历史版本号，采用[MAJOR.MINOR.PATCH](http://semver.org/)格式，版本号永远递增 36 | - 0.0.1 内测版本 37 | - 1.0.0 初始稳定版本 38 | - 1.0.1 补丁版本，向后兼容的bug fix版本 39 | - 1.1.1 小版本，向后兼容并增加功能 40 | - 2.1.0 大版本，具有向后不兼容的API变化版本 41 | 42 | **组件文件目录结构** 43 | 44 | —— edu-mobile 45 | 46 | ———— docs markdown 文档，除了 README 的其他文档 47 | 48 | —————— edu-mobile.md 49 | 50 | ———— examples 演示 markdown 51 | 52 | —————— images 例子中如果有用到 img 等资源时，存放在该目录 53 | 54 | ———————— test.png 55 | 56 | —————— css 例子中使用到的css文件 57 | 58 | —————— js 例子中使用到的js组件 59 | 60 | —————— examples.md 61 | 62 | ———— src 存放 js, css 文件等源文件（子目录文件夹不做严格要求） 63 | 64 | —————— img 存放组件用到的 img 等文件 65 | 66 | ———————— sprite.png 67 | 68 | ———————— sprite.psd 69 | 70 | —————— edu-mobile.css 71 | 72 | —————— edu-mobile.js 73 | 74 | —————— edu-mobile.tpl 75 | 76 | ———— tests 单元测试/自动化测试存放目录 77 | 78 | —————— edu-mobile-spec.js 79 | 80 | ———— lego_modules lego install 生成，存放依赖的其他组件 81 | 82 | ———— HISTORY.md 版本更新说明 83 | 84 | ———— README.md 组件总体说明 85 | 86 | ———— package.json 版本等元信息 87 | 88 | ———— .gitignore git 忽略某些文件 89 | 90 | ####1.3 开发规范 91 | **组件接口** 92 | 组件接口提供组件Init方法，作为自动化文档工具调用 93 | 94 | **组件CSS** 95 | UI组件的样式按照前面的文件目录规范。组件支持公共样式。同时，支持自定义样式参数 96 | ---css : 97 | + css文本 98 | + css文件路径 99 | 100 | **代码规范** 101 | 102 | [代码规范](http://imweb.github.io/CodeGuide/) 103 | 104 | ####1.4 文档规范 105 | **文档说明** 106 | 文档以[markdown格式](http://wowubuntu.com/markdown/#precode)，`每个组件必须存在README.md文件，用来描述组件`。 107 | 108 | ``` 109 | # 组件名称 110 | 111 | ----- 112 | 113 | 组件功能介绍。 114 | 115 | ----- 116 | 117 | ## 依赖说明 118 | 119 | 该模块依赖哪些组件，可以在这里描述清楚 120 | 121 | ## 使用说明 122 | 123 | 如何使用该组件，可以根据组件的具体特征，合理组织。 124 | 125 | ## API 126 | 127 | 需要提供 API 说明，属性、方法、事件、返回值等说明。 128 | ``` 129 | **历史版本说明** 130 | 文档根目录下需要有文档版本更新说明。用来描述组件更新版本。最新的版本在最上面 131 | ``` 132 | # History 133 | 134 | ### 1.1.0[MAJOR.MINOR.PATCH] 135 | 136 | * [PATCH] #10（对应的issue连接） 修复了 XXX 问题 137 | * [PATCH] #20 修复了 YYY 问题 138 | * [NEW] #30 增加了 ZZZ 功能，不涉及API改动 139 | * [MINOR] 涉及到兼容性变化API，诸如删除了一个参数 140 | * [MAJOR] 新增了一个API 141 | * [IMPROVED] 接口增强、健壮性和性能提升、代码优化、依赖模块升级等。 142 | * [TODO] 已知的需要做的/需要解决的问题 143 | 144 | ### 1.0.0 145 | 146 | * [NEW] 第一个版本/新增了一个版本 147 | ``` 148 | **其他文档** 149 | 如果涉及到其他的一些分析文档，移到docs目录下，在README.md中增加连接，另外，其他子目录下，如有必要，也需要对应的README.md文件。 150 | 151 | ----------------- 152 | 153 | ###2 流程规范 154 | 155 | ####2.1 组件官网 156 | 157 | 组件提交的源站：[内部源](http://lego.oa.com)、[外部源](http://lego.imweb.io) 158 | 159 | ####2.2 组件流程 160 | 161 | 在业务开发过程中，流程参照如下： 162 | 163 | ![](http://lego.imweb.io/img/liucheng.png) 164 | 165 | `其中组件开发、反馈、审核、认证等规范详见后续。` 166 | 167 | --------------- 168 | 169 | ###3 开发组件 170 | 开发一个组件，工具上线之后参照spm机制 171 | 172 | ---------- 173 | 174 | ###4 组件维护 175 | ####4.1 组件审核 176 | **内部组件** 177 | 内部组件主要是针对业务相关，不能开源的一些组件。组件需要提交到内部源：[lego.imweb.io](http://lego.imweb.io/)。 178 | 组件开发完成之后，由IMWEB技术评审会进行组件Review，Review List如下： 179 | - 组件目录是否符合规范 180 | - 组件命令是否符合规范 181 | - 组件READEME.md等说明等文档是否完善 182 | - 组件开发/注释是否符合规范 183 | - 组件依赖资源是否合理 184 | - 组件API是否合理 185 | - 组件安全检测是否合规 186 | - 组件DEMO/自动化测试用例是否完备 187 | 组件修改，涉及到一些版本提交组件，需要报备技术评审会进行Review，处理必要的Review之外，还需要如下： 188 | - History.md是合规 189 | - 此次版本变更是否合规 190 | - 修改对应的issue等是否合规 191 | 192 | **外部组件** 193 | 外部组件，即可以开源的组件，代表了团队对外的一些技术产出。需要遵循： 194 | - `外部组件需要先经过内部组件提交并审核通过` 195 | - 内部组件提交之后，报备技术评审会进行审核是否可以开源 196 | - 报备人需要准备开源目的、价值 197 | - 开源是二次开发还是原创的说明 198 | - 二次开发需要备注源代码出处 199 | - 审核开源组件的贡献支持者 200 | - 开源组件由统一接口人同步到团队开源并注明贡献者 201 | - 需要注明开源贡献途径 202 | 203 | **外部组件贡献** 204 | 外部开发者提供的组件，会首先进入待审核的组件库，IMWEB技术会定期（每周四）对外部组件贡献者进行审核，审核原则按照内部组件审核原则，并给予组件贡献者反馈和修改重新提交途经。 205 | 206 | ####4.2 组件认证 207 | **组件认证机制** 208 | 组件认证基于组件使用者对组件的评价，通过认证的组件何可以放心提供使用，并且认证组件可以得到快速的issue响应和支持。 209 | - 可用通过站点查看到认证组件的标识 210 | - 认证具有认证级别和认证说明 211 | - 在使用组件的时候，可以凭借认证来对组件使用给予不同的信任 212 | - 要得到组件认证，需要有另外提交组件认证，会专门进行组件认证流程 213 | - 必须是通过组件审核的组件 214 | - 组件认证需要从更多方面对组件更细致的Reveiw(代码级别) 215 | - 对组件进行性能、使用场景等方便的Reivew 216 | - 组件认证级别到每行代码的必要性 217 | - 组件认证对文档、DEMO场景、测试用例有更高的要求 218 | - 获得组件认证的组件，如果用户普片反馈不好，会对组件进行降级处理 219 | - 需要认证组件依赖的组件是否都合理且均为获得认证的组件 220 | 221 | **组件认证步骤** 222 | 需要组件认证的组件，贡献者在组件平台提交认证申请，由IMWEB技术评审会对组件进行组件认证，组件认证提交的信息如下： 223 | - 组件的名字 224 | - 组件贡献者 225 | - 组件的介绍 226 | - 线上项目的URL 227 | - 用户访问的量级 228 | - 兼容性支持情况 229 | - Demo/测试用例 230 | - 承诺维护支持 231 | 232 | **组件反馈机制** 233 | 组件提交之后，组件下载使用者可以通过反馈组件使用情况来对组件进行评分以及issue提交，以完备组件的使用以及使用场景。 234 | - 可以通过开源站点上面的反馈入口来提交反馈组件 235 | - 反馈组件的bug、场景、issue等 236 | - 组件被依赖的次数，也会作为组件反馈的一种机制 237 | 238 | ####4.3 经验沉淀 239 | **问题沉淀** -------------------------------------------------------------------------------- /md/html+css.md: -------------------------------------------------------------------------------- 1 | # html&css规范 2 | 3 | 浏览器兼容ie8+，如要使用动画，则采用优雅降级处理ie8，9效果。 4 | 5 | ## html规范 6 | 7 | ### 基础 8 | 9 | - 使用html5文档申明 10 | - 尽量使用更加语义化的html5标签，参考：[Sections and Outlines of an HTML5 Document](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document)，考虑到`ie8`不支持html5标签，可以引入html5.js 11 | - 若需支持响应式设计（pc+pad）,则需要为ie8引入[respond.js](https://github.com/scottjehl/Respond) 12 | - 一般按照从上至下、从左到右的视觉顺序书写HTML结构，但有时候为了便于搜索引擎抓取或布局考虑，我们也会不按照视觉顺序书写 13 | - HTML标签名、属性名必须全部采用小写，属性必须加引号，并且必须闭合，单标签也必须闭合，如：``、`
` 14 | - 结构(html)，表现(css)，行为(js)相分离，避免直接将css或js写在标签结构里 15 | - 标签挂靠的class不要过多，最多别超过4个 16 | - 请不要在内联元素中嵌入块级元素，如span里面有div标签，a里面包裹h2等(h5 a元素可以嵌套块级元素) 17 | - ul/ol的直接子元素只能是li 18 | - 数据类内容，大胆的使用table 19 | - a元素提供title属性，img提供alt属性，如果img大小固定，请记得使用width和height属性（如``） 20 | - 页面中不要使用 进行缩进，如需缩进，使用CSS的text-indent来控制，如text-indent:2em用于中文的缩进两个空格 21 | - js操作属性，请以`data-`为前缀 22 | - i标签用于图标 23 | 24 | ### 注释 25 | 26 | 采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格 。 允许只有开始注释！ 27 | 28 | 29 |
30 |
31 |
32 | 33 | 34 | ### 常用结构 35 | 36 | #### PC空白模板 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | page title 48 | 49 | 50 | 51 | 52 | 如果需要ie8支持html5标签或者响应式，请引入对应的js，如下面采用html注释对ie8引入html5标签支持和响应式支持 53 | 54 | 57 | 58 | #### Mobile空白模板 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | page title 71 | 72 | 73 | 74 | 75 | #### 常规布局 76 | 77 | 一般来说header和footer可能有全屏背景，所以居中部分添加`.inner-center`，container我们可以设计成全屏或居中，而其余的全屏部分我们可以独立出来，与header，container等并列，如全屏的滚动图片 78 | 79 | header.header>.inner-center^ 80 | [section.featured>.inner-center^] 81 | div.container.clearfix>aside.aside-left+main.main.clearfix+aside.aside-right^^ 82 | footer.footer>.inner-center 83 | 84 | #### 区块 85 | 86 | 边栏区块，特殊化区块请使用`.x-block`或`.aside-block--xxx` 87 | 88 | .aside-block>.block-hd>h3.block-tt+.block-bd 89 | 90 | 内容区块，特殊化区块请使用`.x-block`或`.section-block--xxx` 91 | 92 | .section-block>.block-hd>h2.block-tt+.block-bd 93 | 94 | #### 等分 95 | 96 | //两列等分 97 | .col-half.clearfix>.col-block*2>(.block-hd>h2.block-tt)+.block-bd 98 | //三列等分 99 | .col-third.clearfix>.col-block*3>(.block-hd>h2.block-tt)+.block-bd 100 | //四列等分 101 | .col-quarter.clearfix>.col-block*4>(.block-hd>h2.block-tt)+.block-bd 102 | 103 | ### 常用html转义符 104 | 105 | - space空格(` `) 106 | - 1个汉字空格(` `) 107 | - 小于号<(`<`) 108 | - 大于号>(`>`) 109 | - 连接号&(`&`) 110 | - 双引号"(`"`) 111 | - 单引号'(`'`) 112 | - 版权©(`©`) 113 | - 间隔符·(`·`) 114 | - 人民币￥(`¥`) 115 | 116 | ## scss/css 117 | 118 | ### 基础 119 | * scss/css文件开始添加编码：`@charset "utf-8";` 120 | * 简写模式，如：`border:1px solid #ccc;` 121 | * 请不要直接定义标签样式，如`span{},div{}` 122 | * 选择器如无特殊情况最多不要超过4层，请使用高效率选择器,可参阅：[CSS选择器的优化](http://www.w3cplus.com/css/css-selector-performance) 123 | * 多数值为0时可以省略单位（好像`0deg`要带单位，某个浏览器有bug，然后`@keyframes`的`0%`单位不可省略） 124 | * `z-index`一般以5为一个步长（如50,55,60），方便以后增加或修改 125 | * 如果是自己写前缀，请把所有前缀写在标准的前面(如`-webkit-transition:0.3s;transition:0.3s;`)，关于前缀情况，可参考[can i use](http://caniuse.com/) 126 | * 使用`!important`请小心，确认是否有必要 127 | * 使用`clearfix`或`overflow`或`inline-block`清除子元素的浮动，而不是空标签 128 | * 不使用影响到页面性能expression表达式与filter，`opacity`的filter兼容除外 129 | * 禁止使用`.parent *{}`选择器，即`*{}`选择器只能单独使用，绝对禁止在前面再加上父级元素 130 | * ie8只支持`:first-child`选择器，而不支持`:last-child`选择器，所以列表类的元素，可以使用`:first-child`对第一个元素进行特殊化处理，如需要对最后一个元素特殊化处理，则先考虑能否转成第一个元素，如果不能则对最后一个元素添加class`last` 131 | * ie8只支持`:before/after`写法，不支持`::before/after`写法 132 | 133 | ### scss文件注意事项 134 | 135 | * 基础文件名以`_`为前缀，导入时可以省略`_`和后缀名`.scss`，默认不编译成css文件 136 | * 合理定义变量及使用`@mixin` 137 | * 选择器合理嵌套，最多嵌套不超过四层 138 | * 不要`@extend .class`，因为会产生冗余代码，如非得使用`@extend`，最好先定义一个`%` 139 | * 可以使用自动化工具生成各个浏览器前缀 140 | 141 | ### class命名 142 | 143 | * 小写英文，单词之间使用中划线（-）链接，如`line-item` 144 | * 列表类的class可采用`.*-list>.*-item>.item-*`,如`ul.line-list>li.line-item>span.item-title` 145 | * 特殊化某个类，采用两个中划线连接（--），如`.line-list.line-list--arrow`，基础类是`.line-list`右侧没有箭头，如需要右侧有箭头的可以追加类`.line-list--arrow` 146 | * 图标的class以`.icon-`为前缀，字体图标的class为`.icon-font.i-name`，另字体图标可参考字体图标规范 147 | 148 | ### 常用class关键词： 149 | 150 | * 布局类：header,footer,container,main,content,aside,page,section 151 | * 包裹类：wrap,inner 152 | * 区块类：region,block,box 153 | * 结构类：hd,bd,ft,top,bottom,left,right,middle,col,row,grid,span 154 | * 列表类：list,item,field 155 | * 主次类：primary,secondary,sub,minor 156 | * 大小类：s,m,l,xl 157 | * 状态类：active,current,checked,hover,fail,success,warn,error,on,off 158 | * 导航类：nav,prev,next,breadcrumb,forward,back,indicator,paging,first,last 159 | * 交互类：tips,alert,modal,pop,panel,tab,accordion,slide,scroll,overlay 160 | * 星级类：rate,star 161 | * 分割类：group,seperate,divider 162 | * 等分类：full,half,third,quarter 163 | * table类: table,tr,td,cell,row 164 | * 图片类：img,thumbnail,original,album,gallery 165 | * 语言类：cn,en 166 | * 其他语义类：btn,close,ok,cancel,switch; link,title,info,intro,more,icon; form,label,search,contact,phone,date,email,user; view,loading... 167 | 168 | ### 选择器权重 169 | 170 | * !important 171 | * 行内样式，指的是html文档中定义的style 172 | * ID选择器 173 | * 类，属性选择器和伪类选择器 174 | * 元素和伪元素 175 | 176 | ### 雪碧图 177 | 178 | 注意事项： 179 | 180 | * 单个图标之间必须保留空隙，空隙大小由容器大小及显示方式决定。这样做的好处是既考虑了“容错性”又提高了图片的可维护性。 181 | * 图标的排列方式排列方式分为以下几种：横向排列（容器宽度有限）、纵向排列（容器高度有限）、斜线排列（容器宽高不限），靠左排列（容器背景居左）、靠右排列（容器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。 182 | * 合并后图片大小不宜超过50K，建议大小在20K-50K之间。 183 | * 请保留雪碧图片的psd源文件，以方便后来的增删改，后来的所有的修改请在psd源文件中修改，然后再导出图片。 184 | 185 | 合并图片的一些原则（专题页面除外）： 186 | 187 | * 按照图片排列方式，把排列方式一样的图片进行合并，便于样式控制。 188 | * 按照模块或元件，把同属于一个模块或元件的图片进行合并，方便模块或元件的维护。以导航模块为例，整个导航栏的icon为一个雪碧图片，而不是和其他的混合在一起，方便后来的修改或扩展。 189 | * 按照图片大小，把大小一致或差不多的图片进行合并，可充分利用图片空间。 190 | * 按照图片色彩，把色彩一致或差不多的图片进行合并，保证合并后图片的色彩不过于丰富，可防止色彩失真。 191 | 192 | 最后请不要过度使用sprite背景图片，而是按照或页面，或模块，或元件的方式合并为雪碧图，更好的考虑到未来的修改或扩展。 193 | 194 | ### css注释 195 | 196 | css块级注释及单行注释 197 | 198 | /* ------------------------------------------------- 199 | * 块级注释 200 | * ------------------------------------------------- 201 | */ 202 | 203 | /* 单行注释 */ 204 | 205 | scss块级注释及单行注释 206 | 207 | // 块级注释 208 | //---------------------------------------------------- 209 | 210 | // 单行注释 211 | 212 | [scss文件中的html结构注释法](http://imweb.io/topic/558cba8eedd682a62453a6bd) 213 | 214 | - 以emmet书写方法为骨架 215 | - ()表示特殊化追加的class，[]表示需要的属性，｛｝表示标签内的文本内容 216 | - 单行判断采用单行注释法，以if开头 217 | - 多行判断采用if,else,end if 218 | 219 | ### 给各大浏览器打hack 220 | 221 | 请以标准浏览器为准书写css代码，如遇兼容问题，先考虑换实现方法，在万不得已的情况下，采用hack解决 222 | 223 | **firefox** 224 | 225 | /* Firefox 3+ */ 226 | @-moz-document url-prefix() {} 227 | 228 | **chrome及safari** 229 | 230 | /* Chrome, Safari 3+ */ 231 | @media screen and (-webkit-min-device-pixel-ratio:0) {} 232 | 233 | **ie8-** 234 | 235 | .selector { property: value\9; } 236 | 237 | filter不可使用该方法 238 | 239 | **ie9+及其他高级浏览器 ** 240 | 241 | :root .selector {} 242 | 243 | **ie10+及其他高级浏览器** 244 | 245 | html[lang='\ 246 | en'] .selector 247 | {} 248 | 249 | 更多请查阅：[hack速查英文版](http://browserhacks.com/) / [hack速查中文版](http://www.w3cplus.com/css/browser-hacks.html) 250 | 251 | 252 | ## 更多资料 253 | 254 | * [css guideline](http://cssguidelin.es/) 255 | 256 | 257 | -------------------------------------------------------------------------------- /md/html.md: -------------------------------------------------------------------------------- 1 | HTML规范 2 | ==== 3 | 4 | ### `强制?`缩进使用 4个空格 5 | 6 | ### `强制`属性使用双引号 7 | 8 | ### `建议`不在自动闭合标签后加`/` 9 | 10 | ### `强制`doctype使用大写 11 | ``` 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | ### `强制`除非有特殊需求,一律使用UTF8编码,书写方式约定为: 20 | ``` 21 | 22 | 23 | 24 | ``` 25 | 26 | ### `强制`引入css/js时,一律不加`type` 27 | ``` 28 | 29 | 32 | 35 | ``` 36 | 37 | ### `建议`img加alt 38 | 39 | ### `建议`link加title 40 | 41 | ### `建议?`统一顺序, 增加gzip的压缩比 42 | ``` 43 | xxx 44 | yyy 45 | ``` 46 | -------------------------------------------------------------------------------- /md/javascript.md: -------------------------------------------------------------------------------- 1 | Javascript编码规范 2 | ===== 3 | 4 | ## 1.分号 5 | 6 | #### `强制`语句必须都有分号结尾，除了for, function, if, switch, try, while 7 | 8 | ## 2. 缩进 9 | 10 | #### `强制` 使用空格而非Tab来缩进, 一层缩进=4个空格 11 | 12 | ## 3. 命名 13 | 14 | #### `强制` 常量使用大写字符, 下划线连接 15 | ```javascript 16 | var SECONDS_IN_A_MINUTE = 60; 17 | obj.TEXT_WARNNING = '警告'; 18 | ``` 19 | 20 | #### `强制` 标准变量: 驼峰 21 | ```javascript 22 | var myCount = 1; 23 | ``` 24 | 25 | #### `强制` 构造函数: 驼峰且大写第一个字母 26 | ```javascript 27 | function Point(x, y) { 28 | this.x = x; 29 | this.y = y; 30 | } 31 | ``` 32 | 33 | #### `建议` 私有方法: 驼峰且加`_`前缀 34 | ```javascript 35 | function MyClass() { 36 | var _privateNum; 37 | this.getNum = function() { 38 | return _privateNum; 39 | }; 40 | } 41 | 42 | // 虽然不建议这么写一个对象(建议用闭包来写) 43 | // 但如果真这么写了, 请把意图上不想暴露的变量, 用_开头 44 | var myCounter = { 45 | _count: 1, 46 | get: function() { 47 | return this._count; 48 | } 49 | }; 50 | ``` 51 | 52 | #### `建议` 对布尔型的变量, 命名时加`is`,`has`,`can`前缀 53 | 54 | #### `强制` 不要使用让人糊涂的命名 55 | ```javascript 56 | var isNotError; 57 | var isNotClosed; 58 | ``` 59 | 60 | #### `强制` 当出现以下字符时,统一拼写 61 | 62 | ```javascript 63 | var iOSVersion; //iOS 64 | var AndroidVersion; //Android 65 | var classID,teacherID,mID; //ID 66 | var jumpURL; //URL 67 | var normalHTML, isXML; //HTML 68 | var HTTPHeader; //HTTP 69 | //... 待补充 70 | ``` 71 | 72 | #### `建议` 字符串常量或字面量使用时, 使用单引号而非双引号 73 | 74 | ```javascript 75 | var str = ''; 76 | str += 'some infomation'; 77 | ``` 78 | 79 | ## 4. 代码风格 80 | 81 | #### `强制` 即使是单行,也需要加花括号 82 | `正确` 83 | ```javascript 84 | //更建议换行写 85 | if (isUndead) { 86 | grabFire(); 87 | } 88 | //一定要一行,也必须这样 89 | if (isUndead) { grabFire(); } 90 | ``` 91 | 92 | `错误` 93 | ```javascript 94 | if (isUndead) grabFire(); 95 | ``` 96 | 97 | #### `强制`操作符前后要有空格分隔 98 | ```javascript 99 | //运算符 100 | var a = 1 + 2; 101 | var thaco = hit + adjustment - randomFactor; 102 | 103 | //三元操作符 104 | var num = val ? foo() : bar(); 105 | var fn = JSON.parse ? JSON.parse : function() { 106 | //... 107 | }; 108 | ``` 109 | 110 | #### `强制`对象属性的冒号前无空格,后跟一个空格 111 | ```javascript 112 | var myObject = { 113 | propA: 1 114 | }; 115 | ``` 116 | 117 | #### `建议`逗号位置: Last comma 118 | 119 | `建议` (last comma) 120 | ```javascript 121 | var foo = 1, 122 | bar = 2, 123 | baz = 3; 124 | 125 | var obj = { 126 | foo: 1, 127 | bar: 2, 128 | baz: 3 129 | }; 130 | ``` 131 | 132 | `不推荐` (first comma) 133 | ```javascript 134 | var foo = 1 135 | , bar = 2 136 | , baz = 3; 137 | 138 | var obj = { 139 | foo: 1 140 | , bar: 2 141 | , baz: 3 142 | }; 143 | ``` 144 | 145 | #### `注意`一定不要多写逗号了 146 | `错误` 147 | ```javascript 148 | var list = [ 149 | {n: 1}, 150 | {n: 2}, //<----- 会导致IE报错, GCC默认参数压缩也会报错 151 | ]; 152 | ``` 153 | 154 | #### `建议`function的参数括号: 前后都加一个空格, 若非匿名函数, 则名字和括号之间不再需要空格 155 | ```javascript 156 | //匿名函数, function和括号间有空格, 括号和花括号间也有空格 157 | var fn = function (param) { 158 | //... 159 | } 160 | //带名字的函数, function和括号间有空格, 但插入的名字和括号间就无需再加空格了 161 | function foo() { 162 | return "bar"; 163 | } 164 | ``` 165 | 166 | #### `建议`条件判断括号: 前后都加一个空格 167 | `推荐` 168 | ```javascript 169 | if (true) { 170 | //... 171 | } 172 | 173 | while (true) { 174 | //... 175 | } 176 | 177 | switch (v) { 178 | //... 179 | } 180 | ``` 181 | 182 | `不推荐` 183 | ```javascript 184 | if(true) { 185 | //... 186 | } 187 | 188 | while(true) { 189 | //... 190 | } 191 | 192 | switch(v) { 193 | //... 194 | } 195 | ``` 196 | 197 | #### `建议`括号紧挨两端处不要空格, 中间有逗号, 逗号后加空格 198 | 199 | `推荐` 200 | ```javascript 201 | function fn(arg1, arg2) { 202 | //... 203 | } 204 | var fn = function (arg) { 205 | //... 206 | } 207 | if (true) { 208 | //... 209 | } else { 210 | //... 211 | } 212 | var arr = [1, 2, 3]; 213 | ``` 214 | 215 | `不推荐` 216 | ```javascript 217 | function fn( arg1, arg2 ) { 218 | //... 219 | } 220 | var fn = function ( arg ) { 221 | //... 222 | } 223 | if ( true ) { 224 | //... 225 | } 226 | else { 227 | //... 228 | } 229 | var arr = [ 1, 2, 3 ]; 230 | ``` 231 | 232 | #### `建议` if...else 写法 233 | ```javascript 234 | if (condition1) { 235 | doSomething1(); 236 | } else if (condition2) { 237 | doSomething2(); 238 | } else { 239 | doSomethingElse(); 240 | } 241 | ``` 242 | 243 | #### `建议` switch...case 写法 244 | 245 | ```javascript 246 | switch (condition) { 247 | case "first": 248 | // code 249 | break; 250 | 251 | case "third": 252 | // code 253 | break; 254 | 255 | default: 256 | // code 257 | break; 258 | } 259 | ``` 260 | 261 | ```javascript 262 | switch (condition) { 263 | case "first": 264 | case "second": //上一行不用加fall though: 两个case紧挨, jshint不会报错 265 | // code 266 | break; 267 | 268 | case "third": 269 | // code 270 | /* falls through */ 271 | case "fourth": //上一行必须加, 否则jshint会报错 272 | // code 273 | break; 274 | 275 | default: 276 | // code 277 | break; 278 | } 279 | ``` 280 | 281 | 282 | #### `强制`函数参数过多时的排版: 两层缩进 283 | 284 | `正确` 285 | ```javascript 286 | var localMonsterRumors = getLocalGossip(inkeeper, 287 | localInn, numberOfClerics, pintsOfAlePurchased, 288 | charismaAjustment); 289 | ``` 290 | 291 | `错误` 292 | ```javascript 293 | var localMonsterRumors = getLocalGossip(inkeeper, 294 | localInn, 295 | numberOfClerics, 296 | pintsOfAlePurchased, 297 | charismaAjustment); 298 | ``` 299 | 300 | #### `建议`采用临时变量来提高复杂判断或字符串拼接的可读性 301 | 302 | `错误` 303 | ```javascript 304 | if ( (conditionAA && conditionAB) || (conditionBA && conditionBB) ){ 305 | //... 306 | } 307 | 308 | var elem = document.getElementById('charClass-' + charClass + 309 | + '_combatStats-' + armorClass + '-' + toHitBonus); 310 | ``` 311 | 312 | `正确` 313 | ```javascript 314 | var conditionA = conditionAA && conditionAB; 315 | var conditionB = conditionBA && conditionBB; 316 | if (conditionA || conditionB) { 317 | //... 318 | } 319 | 320 | var strChar = 'charClass-' + charClass; 321 | var strCombat = 'combatStatus-' + armorClass + '-' + toHitBonus; 322 | var elem = document.getElementById(strChar + '_' + strCombat); 323 | ``` 324 | 325 | #### `建议`逻辑块 之间使用空行 326 | 327 | ## 5. 杂项 328 | 329 | #### `建议`尽量使用标准方法而不是用非标准方法 330 | 331 | 例: 332 | 优先用string.charAt(3) 而不用 string[3] 333 | 334 | #### `强制`不要修改内置对象的原型 335 | 主要是为了不污染原型从而对外部造成不好的影响 336 | 如`Array.prototype`,`Object.prototype` 337 | 338 | #### `强制`避免 == != 的使用， 用严格比较条件 === !== 339 | 340 | ### for...in 341 | 342 | #### `建议`对数组遍历时, 用下标的for循环而非for...in 343 | 344 | #### `注意`使用for...in时要注意利用hasOwnProperty排除掉可能的原型污染干扰 345 | 346 | ### with,eval 347 | 348 | #### `强制`如非特殊情况, 不允许使用with,eval 349 | 350 | ### 多行字符串 351 | 352 | #### `强制`不要使用转义字符'\'的方式来写多行字符串 353 | #### `强制`也不要使用function内注释再toString的hack来定义和使用多行字符串 354 | 355 | ## 保留字 356 | #### `强制`对象的属性如果是保留字, 请务必使用引号定义,方括号引号引用 357 | `正确` 358 | ```javascript 359 | var example = { 360 | "new": function () {} 361 | }; 362 | 363 | var fn = example['new']; 364 | ``` 365 | 366 | `错误` 367 | ```javascript 368 | var example = { 369 | new: function () {} 370 | }; 371 | 372 | var fn = example.new; 373 | ``` 374 | 375 | ## 注释 376 | 377 | #### 单行注释优先 378 | 379 | #### 优先使用单行注释(即使是需要写多行), 除了以下情况 380 | 381 | #### 优先使用多行注释的情况 382 | 383 | - fileoverview / constructors 384 | - public method 385 | 386 | #### 多行注释 387 | ```javascript 388 | /** 389 | * this method is ... 390 | * @param {Object} ... 391 | * @return {Object} ... 392 | */ 393 | ``` 394 | 395 | ## //todo: 大块注释怎么写 396 | 397 | ## //todo: switch规避jshint的一种特殊情形 398 | -------------------------------------------------------------------------------- /md/note.md: -------------------------------------------------------------------------------- 1 | ## 总体原则 2 | 3 | 1. **As short as possible（如无必要，勿增注释）**。尽量提高代码本身的清晰性、可读性。 4 | 1. **As long as necessary（如有必要，尽量详尽）**。合理的注释、空行排版等，可以让代码更易阅读、更具美感。 5 | 6 | 总之，注释的目的是：**提高代码的可读性，从而提高代码的可维护性。** 7 | 8 | 9 | ## 哪些需要注释 10 | 11 | 1. 某段代码的写法，需要注释说明原因时： 12 | ```js 13 | // Using loop is more efficient than `rest = slice.call(arguments, 1)`. 14 | for (i = 1, len = arguments.length; i < len; i++) { 15 | rest[i - 1] = arguments[i]; 16 | } 17 | ``` 18 | 19 | 2. 添加上注释，能让代码结构更清晰时： 20 | ```js 21 | init: function(selector, context, rootjQuery) { 22 | var match, elem, ret, doc; 23 | 24 | // Handle $(""), $(null), or $(undefined) 25 | if ( !selector ) { 26 | ... 27 | } 28 | 29 | // Handle $(DOMElement) 30 | if ( selector.nodeType ) { 31 | ... 32 | } 33 | 34 | // The body element only exists once, optimize finding it 35 | if ( typeof selector === "string" ) { 36 | ... 37 | } 38 | } 39 | ``` 40 | 41 | 3. 有借鉴第三方代码，需要说明时： 42 | ```js 43 | // Inspired by https://github.com/jquery/jquery/blob/master/src/core.js 44 | function ready() { 45 | ... 46 | } 47 | ``` 48 | 49 | 4. 当有值的判断或者选择，有不同的分支时： 50 | ```js 51 | // It need to do when the value of a is one or two. 52 | if(a === 1 || a === 2) { 53 | ... 54 | } 55 | ``` 56 | 57 | 58 | ## 起始约定 59 | 60 | 每个源码文件的开头，保留为空： 61 | 62 | ```js 63 | 64 | define('lego',[],function() { 65 | // 源代码 66 | }); 67 | 68 | ``` 69 | 70 | 71 | 72 | 注意点： 73 | 74 | 1. 文件头不注明Author信息，通过README来提供author & contributors。（组件规则，业务代码需要注明方便查看） 75 | 76 | 77 | ## 注释书写规范 78 | 79 | 1. 源码中的注释，推荐用英文。 80 | 2. 含有中文时，标点符号用中文全角。 81 | 3. 中英文夹杂时，英文与中文之间要用一个空格分开。 82 | 4. 注释标识符与注释内容要用一个空格分开：`// 注释` 与 `/* 注释 */`。 83 | 5. 单行注释用`// 注释` 与多行注视用 `/* 注释 */`区分开来，能够一行注视明白的不写过多注视 84 | 85 | 86 | ## JSDoc 注释 87 | 88 | - 不推荐 JSDoc 式注释，推荐 Backbone 风格的注释。 89 | - API 请通过 README 等文档表达清楚。 90 | - 不写 JSDoc 类文档，可以让开发者在写代码时更专注于写代码，在写文档时则更专注于写文档。**让工作解耦，更专注。** 91 | -------------------------------------------------------------------------------- /md/other.md: -------------------------------------------------------------------------------- 1 | 其他规范 2 | ===== 3 | 4 | ## 编辑器 5 | 6 | ### `强制`配置tab宽度: 4 7 | ### `强制`配置使用soft tab 8 | ### `强制`设置文件编码为UTF-8 9 | ### `建议`自动删除行尾空白 10 | ### `建议`文件结尾自动加空白行 11 | 12 | ### `建议`使用`.editorconfig` //TODO:sample 13 | 14 | ## 文件组织 15 | `待讨论` 16 | 17 | - html,js,css,img如何放置 18 | - 404 / qqlive / panel / panle-tabX / editor /... 19 | - require入口文件命名约定 20 | - sass入口文件约定 21 | - template约定 22 | - 其他资源 23 | - 24 | - compontents 25 | - test 26 | - mock data 27 | - tools 28 | - docs 29 | - build, important shell script, config, ... 30 | 31 | 32 | -------------------------------------------------------------------------------- /mobile/rem.md: -------------------------------------------------------------------------------- 1 | # H5自适应方案规范 2 | ## 1 使用规范 3 | 如果视觉稿存在以下两种情况，需考虑使用自适应方案 4 | + **稀疏布局** 5 | 某些元素的宽/高（或者是位置）需要随着页面的宽/高改变而改变，同时元素所在的行/列并没有被占满。比如某个按钮要居中显示，宽度是页面宽度的66%。而另一种情况，一行两个课程卡片分别占50%则不属于这种情况。 6 | 7 | + **font-size < 12px** 8 | font-size小于12px的字体在3倍屏下面会显得很小，采用REM自适应方案替代media query写法。 9 | 10 | ## 2 开发规范 11 | + 在head头引入[初始化js脚本](https://github.com/imweb/mobile/blob/master/src/fisComponents/rem.html) 12 | 13 | + 开发时，假如视觉稿宽度是640，则比例为640/16=40。那么，页面所有的rem数值的换算公式为：**在视觉稿中的px数值/40** 14 | 15 | + 文字使用px单位，借助html元素上面的data-dpr属性写media query，只需要写3个，分别是dpr="1"，dpr="2"，dpr="3"。当视觉稿是320px的时候，度量出来的文字大小属于dpr="1"；当视觉稿是640px或者750px的时候，度量出来的文字大小属于dpr="2"；当视觉稿>1080px的时候，度量出来的文字大小属于dpr="3"。得到其中一个值，根据比例关系可换算得到另外两种情况的值，3个数值可做微调，但是文字大小最好是偶数 16 | 17 | + background-size的值设置为：cover 18 | 19 | + 课程封面图片选择 20 | 在dpr=1/dpr=2中，课程封面图使用222尺寸。在dpr=3中，使用356尺寸。 21 | 22 | + 大图（比如背景图）需要使用多倍图。直接切出来的图是dpr=3的图，其余两个可以按比例缩放，也可以dpr=1/dpr=2共用1张图片（如果不关注图片大小）。注：大图在保持清晰度的前提下可做缩放。 23 | 24 | + 图标使用icofont，svg素材让视觉提供（请保留这些svg素材，如果后面不兼容android2.3，则可以直接使用svg图片）： 25 | + 把字符资源当成一般的图片资源即可 26 | + 需要共享使用外链，不需要使用内嵌 27 | + 外链时，字符文件用gzip压缩 28 | + 只需要trueType（.ttf）格式 29 | 30 | + js计算css的时候，需要完全动态计算，结果不一定需要使用rem单位，如果需要使用rem单位，则记住换算公式：1rem = W/16px 31 | 32 | ## 3 视觉规范 33 | + 提供720px或者750px的视觉稿 34 | 35 | + 视觉需要另外给出高清图 36 | 37 | 附： 38 | 本规范具体的原理，实践与讨论请移步[H5自适应方案讨论贴](https://github.com/imweb/mobile/issues/3) 39 | -------------------------------------------------------------------------------- /mobile/report.md: -------------------------------------------------------------------------------- 1 | #移动端技术数据上报规范 2 | + 移动端来源区分 3 | + 所有的上报都需要区分网络状态 4 | + 格式为 -[网络状态]- 5 | + 参照mmq返回值 6 | + 0 - 未知网络 7 | + 1 - WIFI 8 | + 2 - 2G 9 | + 3 - 3G 10 | + 4 - 4G 11 | + 根据场景需要，区分手Q 和 其他非手Q数据，微信上报`[此处可选]` 12 | + QQ 手机QQ 13 | + MicroMessager 微信 14 | + 其他场景自行选择浏览器的user-agent 15 | + 页面测速(工具化) 16 | + html 页面需要上报Navigation Timing 17 | + `参见performance.timing` 18 | + 使用测速系统自动上报点 19 | + 页面测速需要区分离线包&非离线包 20 | + pack 离线包 21 | + unpack 非离线包 22 | + CGI测速上报mm系统 23 | + network-[网络状态]-url 24 | + 页面打点可以自行处理，需要包含以下测速点 25 | + 页面底部 dom-end 26 | + js加载完成 js-end 27 | + js执行完成 js-called-end 28 | + 数据加载完成 data-load-end 29 | + 数据渲染完成 data-render-end 30 | + *首屏速度 first-screen* 31 | + `首屏依赖数据的话，首屏速度参照data-render-end，反之，参照js-called-end` 32 | + 异步加载的文件测速（js/css/第三方资源） 33 | + 速度上报测速系统 34 | + 带上网络状态以及离线包情况 35 | + js-load-xxx/css-load-xxx/img-load-xxx/file-load-xxx 36 | + 失败率 37 | + 文件加载失败率（css、js、图片[必要场景]） 38 | + 首屏关键图片监控(失败率/测速/区分首次与非首次)`[可选]` 39 | + 日志信息 40 | + CGI拉取失败错误 41 | + 信息包含网络状态、错误码、url地址 42 | + 格式：network-[网络状态]-url 43 | + 必要的关键路径上报`[可选]` 44 | + tryjs堆栈上报(如果有) 45 | + local 异常上报 46 | 47 | 48 | ![移动上报规范](../imgs/移动上报规范.png) 49 | -------------------------------------------------------------------------------- /pc/report.md: -------------------------------------------------------------------------------- 1 | #PC端技术数据上报规范 2 | + PC端来源区分 3 | + 根据场景需要，区分QQ 和 其他非QQ数据，齐齐，QT 4 | + QQ 5 | + 齐齐(IE内核，需要客户端在user-agent中添加齐齐特有字段) 6 | + QT(WebKit内核，需要客户端在user-agent中添加QT特有字段) 7 | + 其他场景自行选择浏览器的user-agent 8 | + 页面测速(工具化) 9 | + html 页面需要上报[Navigation Timing](http://www.w3.org/TR/navigation-timing/) 10 | + `参见 performance.timing`(参考链接：[W3C: PerformanceTiming](http://www.w3.org/TR/2012/REC-navigation-timing-20121217/#processing-model)、[Performance API](http://javascript.ruanyifeng.com/bom/performance.html)、[Resource-Timing](http://www.w3.org/TR/resource-timing/#processing-model)) 11 | + 使用华佗测速系统自动上报点 12 | + 页面测速需要区分离线包&非离线包（卓颖） 13 | + pack 离线包 14 | + unpack 非离线包 15 | + CGI测速上报mm系统（xxx） 16 | + url 17 | + 页面打点可以自行处理，需要包含以下测速点（自己手写） 18 | + 页面底部 dom-end 19 | + js加载完成 js-end 20 | + js执行完成 js-called-end 21 | + 数据加载完成 data-load-end 22 | + 数据渲染完成 data-render-end 23 | + *首屏速度 first-screen* 24 | + `首屏依赖数据的话，首屏速度参照data-render-end，反之，参照js-called-end` 25 | + 异步加载的文件测速（js/css/第三方资源）（xxx） 26 | + 速度上报测速系统 27 | + 带上离线包情况 28 | + js-load-xxx/css-load-xxx/img-load-xxx/file-load-xxx 29 | + 客户端唤起web control测速 30 | + 用户点击客户端入口，到web control出现的时间(需推动客户端支持) 31 | + 失败率 32 | + 文件加载失败率（css、js、图片[必要场景]） （xxx） 33 | + 首屏关键图片监控(失败率/测速/区分首次与非首次)`[可选]` 34 | + 日志信息（xxx） 35 | + CGI拉取失败错误 36 | + 信息包含错误码、url地址 37 | + 格式：url(如果没有专门的错误码上报字段，错误码可添加在url中) 38 | + 必要的关键路径上报`[可选]` 39 | + tryjs(即badjs 2.0)堆栈上报(如果有) 40 | + local 异常上报 41 | + 版本覆盖率（卓颖） 42 | + QQ离线包版本更新率 43 | + QQ离线包版本覆盖率 44 | 45 | ![PC上报规范](../imgs/PC上报规范.png) --------------------------------------------------------------------------------