随着时间推进,项目变大,问题开始一一出现了:
html 太多,找起来麻烦 css 和 js 需要压缩 css 和 js需要发布到 CDN 开始只简单依赖一个jQuery,后来发现依赖的插件越来越多,不好更新维护 html 里面怎么实现公共一个头 js和css包含大量重复代码,怎么重构项目 前端如何把代码交付给后端填模板代码很多公司面对这些问题都有了自己的方案,Node 因为语言也是JS,成了很多公司的首选。
相关的热门框架有grunt,gulp,webpack,bower等等。
愿意读文档的人早以用上这些新奇玩意儿并且解决了大量前端问题。
虽然工具很多,但对于很多新团队来说,如何完美地规划项目却仍然是一道坎。
他们不知道应该在何时,如何使用这些工具。前端项目的设计可以非常随意,正是这些随意,让很多人在选择中开始迷茫。
本文将提供一个趋于完美的前端项目结构规划方案,希望能为各位在重构前端项目时提供帮助。
一个规划方案,并不只是定义文件怎么放,文件怎么命名,而更重要的是包含实现整个流程的工具,如果没有工具支持,所有方案都是扯淡。
前端项目结构
根目录 |- assets: 存放所有js和css等,这些资源可能发布到 CDN | |- images: 存放所有 CSS 样式需要的背景图片
| |- fonts: 存放所有 CSS 样式需要的字体 | |- styles: 存放所有CSS
| | |- common: 存放公共的 CSS 代码 | |- scripts: 存放所有 JS
| | |- common: 存放公共的 JS 代码 |- include: 存放所有公共的 HTML 头尾片段 |- images: 存放前景图片和flash |- libs: 存放前端所需的第三方类库 |- views: 如果使用了后端 MVC 框架,则页面放在这里。 |- _my: 存放开发者自己需要的文件,这个文件夹应该被 GIT 和 SVN 忽略掉。 |- page1.html 存放最终的前端页面,如果使用了 MVC 框架则不需要。
HTML 文档结构
标题 内容/include/header.inc:
/include/body.inc:
这里可以放一些全站公用的页头,比如需要为全站加一个紧急通知的 banner,可以加在这里。
你的浏览器实在 太太太太太太旧了 ,放学别走,升级完浏览器再说 立即升级
查看更多关于前端项目结构设计精细方案_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did109737