前端要有一个合理的目录结构。
- 源码(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。程序员的自我修养
目录结构。
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