面向工程的移动 Web 开发模版 Qing

什么是 Qing？Qing 是一套基础开发模版，来源于我们在手机与 PC 端上的大量工程实践。Qing 所提供不是冷冰冰的文件，
而是一套 Web 前端解决方案，所以 Qing 不只是关注项目的初始状态，而是整体的工作流程，
这是 Qing 与现有开源的开发模版显著差异的一点。Qing 的体验必须是高效且愉悦的，拒绝繁琐与重复。
其足够的 Qing 量，只需 30 分钟内即可掌握最先进的 Web 开发技能。以下是 Qing 所基于的开发理念：

移动端优先，兼容 PC 端
向前看齐，基于 ES5 开发
模块化 Web 开发过程
自动构建与部署集成, 基于 Mod.js 工具

基于未来趋势的开发理念，Qing 旨在提供工程化方案。

平台与浏览器版本兼容：

iOS 4.0+
Android 2.2+
IE 6+
Chrome
Firefox
Safari

开始使用

可以通过以下任意一种方式开始使用 Qing 模版：

下载最新 Qing 模版包, 解压至目标目录
如果已安装 git，可使用 git clone 源码至目标目录：

1

$ git clone https://github.com/AlloyTeam/Qing.git
如果已安装了 Mod.js, 推荐在目标目录执行：

1

$ m download AlloyTeam/Qing

第一次使用 m download 命令，需要先安装 mod-tar 插件：

1

$ npm install mod-tar -g
如果您是一位女开发，请忽略下文直接联系笔者，深圳优先。

模版结构

团队的协作离不开一些基本的约定，Qing 约定以下文件目录结构：

├── css

│ ├── main.css

│ └── normalize.css

├── img

├── js

│ ├── main.js

│ └── vendor

├── tpl

├── .editorconfig

├── index.html

└── Modfile.js

目录 css 托管样式文件
目录 img 托管图片文件
目录 js 托管 JavaScript 文件
目录 tpl 托管模版文件
.editorconfig 约定团队基础代码风格
index.html 是入口 HTML 文件
Modfile.js 是 Mod.js 配置文件

模块化编程指引

Qing 推荐模块化的开发过程，模块化开发后无论在代码可维护性与复用，还是团队协作上都将变的更加直观、轻松与高效。

CSS 模块化

通过原生 CSS 内置的 @import 机制管理 CSS 模块，在构建过程中会自动合并压缩（在下文的优化章节也有说明）：

				
				1
2
3
4

						<span class="k">@import</span> <span class="s2">"normalize.css"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"widget1.css"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"widget2.css"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"widget3.css"</span><span class="p">;</span>

JS 模块化

约定引入 AMD 规范来管理 JS 模块，关于第一次接触 AMD 的读者，笔者推荐可以先 Google 了解后再进行下一步：

				
				1
2
3
4

						<span class="c1">// main.js</span>
<span class="nx">define</span><span class="p">([</span><span class="s2">"./app"</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">app</span><span class="p">){</span>
    <span class="nx">app</span><span class="p">.</span><span class="nx">init</span><span class="p">()</span>
<span class="p">})</span>

				
					
				1
2
3
4
5
6

						<span class="c1">// app.js</span>
<span class="nx">define</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
    <span class="k">return</span> <span class="p">{</span>
        <span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){}</span>
    <span class="p">}</span>
<span class="p">})</span>

					

			

HTML 模块化

HTML 模块指代 HTML 模版文件，通过 requirejs-tmpl 插件将 HTML 分模块管理，requirejs-tmpl 没有默认打包在 Qing 模版中，可手动下载
requirejs-tmpl 插件至 js 目录，或通过执行 m download:tmpl
命令自动安装插件：

				
					
				1
2
3
4

						<span class="c"><!-- tpl/headerTpl.html --></span>
<span class="nt"><header></span><span class="err"><</span>%= title %><span class="nt"></header></span>
<span class="c"><!-- HTMl模版可依赖其他HTML模块

AlloyTeam