好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

前端项目结构设计精细方案_html/css_WEB-ITnose

开始的开始,前端项目很简单,html放外面,然后新建一个css和js文件夹,看起来很清晰。

随着时间推进,项目变大,问题开始一一出现了:

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的详细内容...

  阅读:30次