前端结构 の 调整建议

前端要有一个合理的目录结构。

• 源码（source code）和部署（distribution）分开；
• 使用构建工具：gulp 或者 grunt；
• 项目需求不同，可做相应调整；

代码目录结构（建议）

├── cms/
├── dist/
│　 ├── $channel_name/
│　 │　 └── index.html
│　 ├── cms/
│　 ├── css/
│　 ├── fonts/
│　 ├── images/
│　 ├── js/
│　 │　 └── biz/
│　 ├── vendor/
│　 ├── 404.html
│　 ├── favicon.ico
│　 ├── index.html
│　 └── robots.txt
├── dist.datatpl/
├── php/
├── src/
│　 ├── $channel_name/
│　 │　 └── index.html
│　 ├── css/
│　 │　 └── partials/
│　 ├── fonts/
│　 ├── images/
│　 ├── js/
│　 │　 └── biz/
│　 ├── partials/
│　 ├── sass/
│　 ├── trash/
│　 └── vendor/
├── test/
└── tmp/

• css：样式文件（styles）；
• js：脚本文件（scripts）；
• images：图片素材；
• fonts：字体；
• vendor 目录为第三方 js 文件，有的还包括相应的 css 文件；原来 vendor 放在 js 目录下，根据 jack

版块目录

• $channel_name：网站版块（主题|频道）分组内容放到各个 channel 下；

构建目录

• partials 目录下文件仅供 gulp 做前端构建中间过程处理，不出现在 dist 目录下；
• js 下目前未使用 partials；
• www（pc 端） | m（mobile 端） | app（native app）
• tmp 临时目录，构建过程中使用；
  隐藏目录不是一个好主意，通常我们并不会显示隐藏目录，出了问题会多费一步力气去查找。

运行目录

• cms：运营产生的内容，比如上传的图片；
• dist：distribution 目录；
• dist.datatpl：数据模板（data-templates）；

参考

• express
  express_code_structure：an example of how to organize a medium-sized express.js web application.
  js-standard-style。

• 程序员的自我修养
  目录结构。

• aralejs.org
  aralejs-文件命名与目录结构。

https://cnodejs.org/topic/538edddda087f456207d1a81
https://segmentfault.com/q/1010000003062308

• node 参考

app.js 应用
config.js or config/ 配置文件
dispatch.js 主进程文件
package.json 依赖模块
routes.js or router/ url路由表
worker.js 工作进程
assets/images|scripts|styles
bin/ 相关运行脚本
common/ 跟业务相关的公共模块
controllers/ 业务逻辑相关
lib/ 跟业务无关的公共模块
node_moudules/
proxy/ 数据访问代理层
test/ 测试
views/ 视图模板

@font-face Syntax

Paul Irish @font-face definitions
CSS3 @font-face Rule

浏览器兼容性

IE 9 以上，至于 IE 6/7/8 可暂缓考虑。jQuery 2.x 就已经不支持 IE 6/7/8 了。

robots.txt

Controlling how search engines access

---