前端项目结构设计精细方案

开始的开始,前端项目很简单,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 文档结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>标题</title>
    <!-- #include virtual="/include/header.inc" -->
    <link rel="stylesheet" type="text/css" href="assets/styles/common/blog.css" />
    <link rel="stylesheet" type="text/css" href="assets/styles/page2.css" />
</head>
<body>
    <!-- #include virtual="/include/body.inc" -->
    内容
    <!-- #include virtual="/include/footer.inc" -->
    <script type="text/javascript" src="assets/scripts/common/blog.js"></script>
    <script type="text/javascript" src="assets/scripts/page2.js"></script>

    <!-- #include virtual="/include/stat.inc" -->
</body>
</html>

/include/header.inc:

    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, maximum-scale=1, user-scalable=no" />
    <meta name="apple-itunes-app" content="app-id, app-argument=">

    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon" href="favicon.png">

    <link rel="stylesheet" type="text/css" href="../assets/styles/common/common.css" />

/include/body.inc:

这里可以放一些全站公用的页头,比如需要为全站加一个紧急通知的 banner,可以加在这里。

<!--[if lt IE 9]>
<div role="alert">你的浏览器实在<strong>太太太太太太旧了</strong>,放学别走,升级完浏览器再说 <a target="_blank" class="alert-link"
 href="http://browsehappy.com">立即升级</a>
</div>
<![endif]-->

/include/footer.inc:

这里可以放一些全站公用的页脚,比如版权声明之类。

<div>版权所有 @copy; 2015 xuld</div>
<script type="text/javascript" src="assets/scripts/common/common.js"></script>

/include/stat.inc:

这里可以放一些网站统计代码。

<!-- 在这里添加网站统计代码 -->

其它文件

如果项目里还有公共的侧边栏、广告位等,也可以自行在 include 添加其它文件。

如果一个网站需要有多种不同版权声明,可以分别做一个 footer-full.inc 和 footer-simple.inc,然后公共包含:footer-common.inc。

静态资源引用

如果项目里需要使用 less/sass/coffee 等技术,则可以直接引用这些文件。发布时,发布工具完成这些事情:

1. 编译 less/sass/coffee 文件,转换为对应的 css/js 文件。

2. 更新 HTML 文件里的资源引用地址,引用生成好的 css/js 文件。

3. 为这些资源文件引用地址添加时间戳。

4. 如果项目使用了 CDN,则发布工具应该自动上传文件到 CDN,并更改文件里的路径为 CDN 的地址。

发布前:

<link rel="stylesheet" type="text/css" href="../assets/styles/page1.less" />

发布后:

<link rel="stylesheet" type="text/css" href="http://cdn.com/project/assets/styles/page1.css?_=md5" />

时间戳问题

静态文件由于存在缓存,每次发布如果保持路径不变,很容易导致页面不更新。有三种方案:

  1. 为路径加上 ?_=md5
  2. 更新文件名为 page1_md5.js
  3. 复制到名为 20151021 的文件夹

个人建议使用方案1,因为改动量少,不易出错。但如果CDN不支持,可以采用其它方案。

脚本和样式

如果项目中,一个人专门负责 css,一个人专门负责 js,一个人专门负责将 html 转换为后台代码,则上述文件夹结构是比较合理的。

如果是同一个人负责css和js,则建议不区分 styles 和 scripts 文件夹,直接放在 assets 目录。

如果连转换html 到后台代码都是同一个人,则建议将 css 和 js 直接写在页面里,发布工具负责提取出来:

<style __dest="assets/styles/page1.css">
   /*  CSS 代码 */
</style>

公共代码依赖

每个HTML页面,都必须引3个js和3个css,分别是:

  • 全站公用的 js:common/common.js
  • 全项目(或类似页面,比如列表页、详情页)公用的js:common/blog.js
  • 页面私有的js:common/page1.js

css 和 js处理方式一致,且一一对应。

个别页面可以引入一些外部的js和css,比如 editor.js 这种比较大的文件。但原则上每个文件最多只能引 5个js和5个css。需要引的文件多时则需要打包合并。

出于性能考虑,有时候可以将页面私有的js和css直接内联到页面。

<script src="assets/page1.js?__inline"></script>

模块化组件

所有可复用组件、第三方框架都放在 libs,libs 文件发布时会被忽略掉,项目里也不能直接引用 libs 下的代码。

如果需要引用一个组件,有三种方案:

  • 简单的文件包含
  • 基于 CommonJS 模块化方案
  • 基于其它模块化方案

简单的文件包含

如果项目较小,并不需要太大模块化东西,直接使用文件包含是最方便的:

common.js

// #include /libs/3rdlibs/jquery-2.1.0.js
// #include /libs/3rdlibs/jquery.mobile.js

// 其它项目需要的公共代码

发布工具会处理 #include 。

CommonJS 模块化方案

var $ = require(‘libs/3rdlibs/jquery‘);

发布后,CommonJs 模块会被转换为标准的 AMD 模块。

打包问题

假设一个页面需要引用 common.js 和 page1.js ,而这2个js又分别引用了 libs 下的若干个组件(可能有重复)

那么 page1.js 可以添加如下指令排除掉 common.js 所引入的文件

// #exclude common.js
var $ = require(‘libs/3rdlibs/jquery‘);

最后生成的代码,page1.js 将包含所有所需的模块,并删除了 common.js 包含的模块。

项目发布和调试

以上所介绍的代码方案是不能直接在浏览器运行的,这里有三个方案可以实现本文所描述的各个功能:

  1. 在浏览器执行 JS 实现上文所描述的所有功能。优点:兼容性好,缺点:效率低。
  2. 监听文件改变,文件保存后就解析以上指令并生成文件。优点:兼容性好,处理方便,缺点:不稳定。
  3. 自定义服务器,这个服务器在请求时自动完成生成任务。优点:效率高且稳定,缺点:需要定制服务器,且只在开发时使用。

其它工具支持

占位图

对应经常切页面的哥们,占位图是非常有用的。

<img src="@100x100.jpg">

Ajax 接口模拟

a.njs:

writeJsonp({
    a: 1
});

写在最后

本文所描述的是一种建议的做法,也是一个发布工具所需要提供的功能。每个团队可以针对自己的需求做一些个别的定制。本文所提到的示例都是以 tpack 为原型书写的。不同的工具会有稍微不同的写法。但是其解决的问题是一样的。

时间: 2024-11-09 18:04:24

前端项目结构设计精细方案的相关文章

gulp + webpack 构建多页面前端项目

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢

github上值得关注的前端项目

github上值得关注的前端项目 http://microjs.com/# 该网站的资源都托管到了github,microjs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用 https://plainjs.com/(10.22更新) The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用.里面的项目也都托管到了github 综合/资源 frontend-dev-bookmarks 一个巨大

前端项目模块化的实践2:使用 Webpack 打包基础设施代码

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 (实现中) 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三方类库: 为了提高加载速度我们打包时需要进行很多额外工作: 代码压缩: Tre

基于React-Native0.55.4的语音识别项目全栈方案

移动端的API能力验证方案与PC端不一样!不一样!!不一样!!! 即使需要使用的API都存在,也不一定能用,这一点和PC端是有很大区别的,国内的手机系统虽然都是基于Android,但几乎都会经过各大厂商的定制,功能与原版Android系统并不是完全一致的,在考察技术方案的时候一定要确认用demo把功能跑起来才可以,别问我怎么知道的. 一. 移动端直接访问Web应用? PC端基于Web API的语音识别方案可参考<[Recorder.js+百度语音识别]全栈方案技术细节>一文. 1. 调用Web

部署基于Gitlab+Docker+Rancher+Harbor的前端项目这一篇就够了

部署基于Gitlab+Docker+Rancher+Harbor的前端项目这一篇就够了 安大虎 ? momenta 中台开发工程师 6 人赞同了该文章 就目前的形势看,一家公司的运维体系不承载在 Docker+Harbor(或 Pouch 等同类平台)之上都不好意思说自己的互联网公司.当然这些技术也不适用于全部公司,技术在迭代,平台也一样,把我使用的工具和大家分享下,一起成长(文章中扩展可按需Google). Docker docker的架构图如下: 从图中可以看出几个组成部分 docker c

Angular01 通过angular-cli来搭建web前端项目

准备前提:已经搭建好angular-cli环境,还未搭建好的请参见三少的博客(开发基础分类) 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就是一个html文件 我们的应用会在app-root

如何在前端项目中引用bootstrap less?

在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的css类,一旦保存文件,grunt则开始重新构建,生成最后的生产文件.问题是: 如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢? 比如:我如何能够实现在屏幕尺寸在@screen-md时,将所有的图片隐藏呢? 对于这个场景,假设项目目录结构如下: > bower_c

用gulp构建你的前端项目

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().

从一个前端项目实践 Git flow 的流程与参考

Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部署略有提及,本意是用作公司内部的技术安利.所用源码及文档本身见于 github jusfr/HelloGitflow 前言 Gitflow 是一种 git 分支管理工具——说是思想也不为过,它使用既定策略区分和管理开发.测试.生产环境的代码版本,对测试与持续集成友好,与敏捷.迭代的思路一致. 1 准