而是一套 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<span class="nv">$ </span>git clone https://github.com/AlloyTeam/Qing.git
- 如果已安装了 Mod.js, 推荐在目标目录执行:
1<span class="nv">$ </span>m download AlloyTeam/Qing
第一次使用
m download
命令,需要先安装mod-tar
插件:1<span class="nv">$ </span>npm install mod-tar -g - 如果您是一位女开发,请忽略下文直接联系笔者,深圳优先。
模版结构
团队的协作离不开一些基本的约定,Qing 约定以下文件目录结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
. ├── 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模块 |