好的前端架构

p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家

翻译自:www.sitepoint.com

翻译人员:前端开发whqet,意译为主,不当之处欢迎大家指正。

译者说:临近期末,大部分的基础教学内容已经讲解完毕,在进行比较大型的项目训练之前,如果能让学生了解甚至遵循一些前端开发的编码规范将会是一件非常有意义的事情。因此,本博客准备于近期整理一个编码规范与最佳实践的系列文章,包括html、css、javascript、jquery、php等,希望能对大家有所帮助,本文翻译的项目文件架构。

------------------------------------------------------------

--我参加了博客之星评选,如果你喜欢我的博客,求投票,您的支持是我的动力之源走起!

-----------------------------------------------------------------------------------------

结果预览

首先来看最终的文档架构,然后我们来简译一下。

project
  \css
  \imgs
  \js
      \controllers
          pageOne.js
          pageTwo.js
      \libs
          angular.js
          jquery.js
          analytics.js
      \plugins
          jquery.tooltip.js
          textResize.js
          formValidation.js
      \views
          pageOne.js
          pageTwo.js
  \scss
      \framework
          _core.scss
          _forms.scss
          _input.scss
          _mixins.scss
          _variables.scss
      \layouts
          _all.scss
          _phablets.scss
          _tablets.scss
          _desktop.scss
          _desktop-large.scss
          _retina.scss

          \pageOne
              _all.scss
              _phablets.scss
              _tablets.scss
              _desktop.scss
              _desktop-large.scss
              _retina.scss

          \pageTwo
              _all.scss
              _phablets.scss
              _tablets.scss
              _desktop.scss
              _desktop-large.scss
              _retina.scss
      \libs
          _animate.scss
          _normalize.scss
          _reset.scss
      \plugins
          _jquery.tooltip.scss
          _jquery.fancyInput.scss

引子

我们知道,好的编码约定和最佳实践非常重要,但是文档架构呢?建立一个好的文档架构是开始一个网站或者APP的基础,我们如何建立一个结构清晰、便于维护的文档架构呢?

首先明确一下几个问题,我们的目标:

1)需要一个多页面项目(网站或者APP)

2)需要项目支持多屏幕尺寸,换句话说,需要实现响应式布局

3)最终产品易维护

4)最终产品性能良好

5)未来项目可套用该模板

在现代前端开发流程中,有越来越多的工具可以帮助我们。对于第1点和第2点,我们需要一个支持断点的CSS架构,以便自适应不同的设备。另外越来越多的CSS会弄得一团糟(与第3点冲突),因此我选择一个CSS预处理器搞定这些事情(我这里使用SASS的Compass)。对于第4点,答案很简单,选用Gruntjs,对于第5点,我认为Yeoman是最佳答案。

组织工作流

每一个前端都会包含类库、jQuery插件以及很多的各种各样目的的JS、CSS文件,有效管理不同的技术、不同文档集中起来运行良好确实需要一个很好的工作流。因此,我们需要遵循开发模式、开发约定,文件组织良好,以保持所有的文档结构清晰、便于管理。

我们把项目所有的文档分成几个大的分组:

  • SCSS files
  • scripts
  • views

当然,我们还可以继续分组:

  • SCSS

    • variables
    • mixins
    • common parts to every layout
    • single layouts
  • js
    • libraries (such as jquery, angularjs, gAnalytics and so on…)
    • plugins (typically jquery plugins)
    • controllers (I mean controllers such as angularjs controllers)
  • views

    • common parts to every view
    • single views

然后,我们就形成了上面最终的文档架构。

文件夹阐释

imgs:里面放所有的图片,不同格式的图片。

js:里面放所有的js文件,可以包括几个子文件夹。

controllers:用于存放“angular controllers”,拥有和视图(views)相同的文件名称,例如home.html需要一个控制器,你应该建立一个project\js\controllers\home.js

libs:这里放类库(不是插件),例如jQuery-latest.js、angular.js、googleAnalytics.js等

plugins:插件,例如jquery-fancyInput.js、restangular.js、customPlugins.js等

views:视图,每个显示文件对应一个视图,例如你的home.html需要一些效果,在views/home.js实现。

css:css文件夹从scss文件夹同步生成而来,home.scss将生成home.css

libs:CSS里面也把类库和插件分开,类库文件例如_meyers-reset.scss, _normalize.scss,_animate.scss, _960gridSystem.scss

plugins:包含jQuery插件运行必须的css文件,例如_jquery-fancyInput.scss, _jqueryTooltip.scss

framework:我决定把所有的跨页面scss文件放这里,例如_variables.scss、_mixins.scss、_forms.scss等

layouts:这里实现响应式布局,遵循“移动优先”原则实现跨屏幕解决方案。_all.scss中的文件对所有屏幕有限,如果需要适应性我们可以在其他屏幕方案中重写它。_phablets.scss(481以上)、_tablets.scss(768以上)、_desktop.scss(1030以上)、_desktop-large.scss(1204以上)、_retina.scss(@2x)所有这些通过媒体查询调用。

结论

最后,我利用一个Yeoman生成器搭建该项目,同时包含一些Grunt任务实现压缩、排错、SASS编译等功能。到github查详或NPM下载。

这个不是标准的前端架构方案,可能会给您的项目带来冗余,可能不适用您的项目,但是这是一个好的起点,希望可以为大家自己的前端架构带来灵感。

感谢您耐心读完,如果对您有帮助,请支持我

----------------------------------------------------------

前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------

时间: 2024-10-23 17:07:46

好的前端架构的相关文章

使用模块化思维和模板引擎搭建前端架构(require+underscore)

require.js 介绍: 是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量. 官网:http://www.requirejs.cn/    (PS:如果没接触过,刚开始看都是一头蒙蔽的,建议看下菜鸟教程) 新手教程:http://www.runoob.com/w3cnote/requirejs-tutorial-1.html 优点:可完成团队协作.模块复用.单元测试等等一系列复杂的需求 undersco

WEB前端开发电商网站前端架构

课程介绍通过一个垂直电子商务网站,介绍前端架构搭建和实现的步骤和方法,以及在这个过程中我们需要做什么才能帮助项目最终从设计走向实现.课程提纲第1章 前端架构知识准备认识前端架构,了解前端架构技术.产品设计和发布.数据分析和优化的基础第2章 前端架构设计了解前端架构的组织方式.页面层次的架构组织.架构设计和组件化方案等.第3章 前端架构实施了解架构的实施.优化思路,如何实施自动化.通过蛋糕电商网站讲解,分析案例.如何图解设计和交互图.如何从目录入手搭建基本架构.如何从页面层次进行架构搭建和最后项目

web富客户端应用下,前端架构问题。

前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前端来做了..  前端的业务逻辑变得很复杂 有的时候甚至 比后端的更复杂.(当然这个也跟写接口的人水平有关...) 在这样的背景下面,如果还是以前那套 页面里面写js 或者哪里有效果写哪里的话.无论是实现,还是后面的维护都是一个很大的问题.. 所以,我觉得富客户端web应用,很有必要组建一个自己的前端

没有最好,选择最适合自己的前端架构

前端框架不断推新,众多IT企业都面临着"如何选择框架","是否需要再造轮子"的抉择.去哪儿网前端架构师司徒正美分析了各主流行框架优劣点.适用场景,并针对不同规模的公司.项目给出了相应的前端技术选择方案. 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法. RequireJS,前端技术发展分水岭 在五六年前,移动端还没有兴起,我们没有什么选

用“MEAN”技术栈开发web应用(一)AngularJs前端架构

前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技术涵盖了从前端到后端再到数据库,可以用他们完整的开发一个web应用了,所以成了一个非常牛逼的组合,颇有当年LAMP的气势.前端要从切图仔迈向全栈的路上,这几门技术必须得有所涉猎.本系列文章利用自己虚构的一个小项目为例,对“使用MEAN技术栈开发web应用”做一个入门级的介绍. AngularJs的争

前端架构浅谈

前端架构浅谈 0.前注 鉴于作者本人的能力有限(非常有限),并且依然在学习中,因此本文的高度和深度必然有所欠缺. 欢迎(并且非常欢迎)大家来批评指正,如果能详细的说明问题在哪里,如何解决和改正,那么就太感谢了!!! 我最喜欢听有理有据的批评了!! 本人QQ:20004604,邮箱:[email protected],期待你的交流. 1.为什么要有一个好的架构 首先明确一点,架构是为需求服务的. 前端架构存在的目的,就我个人理解来说,有以下几点: 1.提高代码的可读性. 一个好的架构,代码的可读性

【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

 说在前面 好几天没更新这个系列文章了,这段时间还是在研究这块东西,遇到的各种奇葩问题,最后写完,只是调试就花了两天,果然发现在和大神之间的距离越来越远,在加上大部分时间在追求自己的梦想,梦想同样也是遥遥无期啊!一直在思考星星的那句话,人到底该不该追求梦想,做个咸鱼到底好不好的,吃吃喝喝睡睡的,反正最近感悟挺多,抽时间写个文章,好好和大家聊聊,把我的心里话告诉大家,程序员不容易,寻梦者更难啊!比如,这个所谓的pc网站的前端框架,这对一个做后台而且还是多年一直在做C#.JAVA没怎么写脚本的我来说

我的前端架构之一--统一扩展Js方法

我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) insertAt 6) remove 7) intersect 8) minus 9) Recursion 10) last 11) distinct 12) to 13) addArray String对象: 1) indexFrom:不区分大小写进行查找. 2) format: 使用索引进行参数化

24Web前端架构

近来都是接触前端,所以学多点这方面的东西,虽说有实战到项目里面去了,但可能还没走到所谓正确的道路上去.欢迎交流. 转载请说明来着:http://blog.csdn.net/wowkk --------------------------------------------------------------------------------------------- 如果Web前端做多了一点,那就会意识到,无论项目大小,都得考虑到一个"架构"的问题. 因为只要是项目,就会涉及到&qu