建立一个好的前端架构是开始开发 Web 应用或网站的一个基本步骤。良好的实践和编码常规是必不可少的,但是结构呢?我们如何在可控的时间内构思一个好的架构?但最重要的事情是,我们应该从哪里开始?
当我开始思考这个问题时,我意识到一些事情:
我想要一个多页面项目(一个 Web 应用或网站);我希望我的项目支持不同的屏幕尺寸和分辨率,换句话说,我希望它是响应式的;我希望最终产品是可被维护的;我希望最终产品性能上是出色的;我希望可以为将来的项目重复使用相同的模板。
正确的工具
现在我们拥有大量很酷的工具可以用于现代化前端开发工作流中。因此,面对第 1、2 点我告诉自己我需要一个基于 CSS 体系结构的中断点(能够帮我支持不同的设备和桌面的大小)。而另一个方面大量的 CSS 和文件可能会有点混乱(这违背了第 3 点),这就是为什么我决定开始使用 CSS 预处理器的原因。关于第 4 点,答案很简单,我决定使用 Gruntjs。而第 5 点在我看来 Yeoman 是一个很好的解决方案。
组织工作流
每个前端项目总是包含库、jQuery 插件和大量的 JavaScript&CSS 文件(或本文例子中的 SCSS)以达到不同的目的和目标。使用不同的技术手段混合所有的元素,并把它们放在一起,这意味着建立一个前端工作流。我们会发现自己在管理一个巨大的、涉及不同技术的工作流。这就是为什么我们需要将所有东西通过遵循一种模式或公约置入文件夹中,以此来保持清晰、整洁。这对我们而言是非常重要的。
我们可以在巨大的组合中选择分解所有基本的前端组件,如以下所示:
SCSS 文件 scripts(脚本)views(视图)
当然我们还可以继续细分:
SCSS
variables(变量)mixins(混合类)公共部分到每一个布局单一布局
js
库(如:jquery、angularjs、gAnalytics 等等)插件(通常为 jquery 插件)控制器(我的意思是类似 angularjs 这样的控制器)
在一个基于模板的架构(例如使用 blade.php 或 jadewithnodejs)我们也可以将视图分割如下:
views
公共部分到每一个视图单一视图
视图这块在本文不做讨论,因为我假设项目里每个页面或布局只有一个视图(一个 HTML 文件)。
基于这些初步的考虑,下面展示的是我的文件夹树:
文件夹树注解
imgs
存放所有的图片文件:.png、.jpg、.jpeg、壁纸等。
示例:icon.png、home-background.jpeg、userAvatar.jpg。
js(主文件夹)
存放.js 文件。子文件夹组织情况如下:
\controllers(子文件夹)
存放 angular 控制器,每一个控制器都有一个与对应视图相同的名字。比如,如果 home.html 需要一个 angular 控制器,你可以创建一个像这样的文件:project\js\controllers\home.js。
示例:home.js、user-registration.js、user-login.js
\libs(子文件夹)
用于存放 JavaScript 库,当然这里不包含插件。
示例:jquery-latest.js、angular.js、googleAnalytics.js
\plugins(子文件夹)
插件需要依赖关系来工作,而库不需要,这也就是为什么这里创建两个文件夹的原因。
示例:jquery-fancyInput.js、restangular.js、customPlugin.js、jquery-airport.js
\views(子文件夹)
存放所有表象的东西,每个文件都与对应的视图名称相同。例如,如果 home.html 需要一些效果、材料以及插件初始值,你可以创建一个像这样的文件:project\js\views\home.js。
示例:home-animations.js、user-registration.js、user-login.js、site-animations.js
CSS(主文件夹)
这个文件夹包含了所有从主 SCSS 文件中生成的 CSS。例如 home.scss 会在该文件中生成对应的 home.css 文件。
即使是对 CSS 文件,我也会区分库和插件,这里有些 CSS 库例子。
示例:_meyers-reset.scss、_normalize.scss、_animate.scss、_960gridSystem.scss
CSS 文件包含于该文件夹中是使 JavaScript 插件工作的必备风格。
示例:_jquery-fancyInput.scss、_jqueryTooltip.scss
\framework(子文件夹)
我决定在这个目录中存放 scss 文件以共享到整个项目页面,框架子文件将以下面的方式组织:
_variables.scss(项目变量声明——colors、spacings 等)_mixins.scss(项目 mixin 声明——typography、clearfix、animations 等)_forms.scss(自定义表单样式和重置)_input.scss(自定义输入样式和重置)
\layouts(子文件夹)
这是一个敏感的部分。这个目录中的文件以这种方式组织:它们涵盖所有屏幕分辨率、遵循移动第一的原则。所以,你应该使用 _all.scss 声明你自己的风格。在该文件中的规格声明是对所有屏幕尺寸和所有视图都有效的。如果你希望你的网站适应性强的话,就不要仅仅是重写规则,为其他屏幕分辨率声明它们。
文件夹组织结构如下:
phablets(481up)_phablets.scsstabletsandsmalllaptops(768up)_tablets.scssdesktops(1030up)_desktop.scssdesktopswithlargescreens(1204up)_desktop-large.scssretinadisplaysexceptions(@2x)_retina.scss
这些文件将把握布局异常,被称为 mediaqueries。
请注意:这些文件共享于所有视图(HTML 页面)。这就是为什么你需要在 scss\layouts 文件下创建一个新的文件夹以给定一个特定的风格到一个特定的页面。
最后
我知道这不是一个普遍的解决方案,也许在某些情况下还会包含一些冗余,但我认为这是一个很好的起点。不管目的是什么,我的建议是根据自己的需求定制自己的体系结构或框架,特别是在不丢失用户体验的前提下保障性能和可维护性。
作者:3xmq
链接:http://www.3xmq.com/article/1516961285790
来源:架构师小秘圈
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关推荐
前百度前端技术总监张云龙依靠其数十年的开发经验,结合自身对前端的理解,软件架构是 一系列相关 的抽象模式,用 于指导 大型软件系统各个方面 的 设计。”
搭建适合前端开发的小程序架构!
端代码开发和组织的架构设计方法,前端代码高可用性和高可靠性的组织方式,对现有代码架构的优化和重构
健康项目-powerdesigner使用-前端框架-项目架构雏形
知识架构;知识架构;知识架构;知识架构;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端...
基于lerna搭建脚手架DEMO
基于整洁架构搭建的个人IM开源项目,通过Netty实现和前端websocket连接。内含有登录,成员列表,联系人, 群组,群组成员,好友,好友分组,黑名单,消息记录,消息撤回,消息已读,消息点赞,还有很多小轮子项目 ...
下面是描述:通过ODBC连接数据库,有一个可编辑的前端界面,可连接各种数据库,目标是简单的编写SQL语句和编辑界面就可以完成一个SQL界面的搭建。 但是基本只测试了SQL SERVER2000,ACCESS。。个人觉得架构设计的...
MonoMicro:包含微型前端架构的POC的monorepo
summary前端面试大全、前端常见问题和原理总结、前端面试题、前端面试经验、前端知识持续更新中,包括:JavaScript、Vue、Webpack、TypeScript、html、css、前端架构、前端算法、前端工程搭建、前端职场、React、技术...
vue-module-loader 是一个 Vue 插件,让你使用类似于的架构开发 Vue 应用。 Let you use the micro front-end architecture to build Vue applications 推荐使用vue-module-creator生成样板工程。 $ yarn global add...
前端面试 前端面试大全、前端常见问题和原理总结、前端面试题、前端面试经验JavaScript、Vue、Webpack、TypeScript、html、css、前端架构、前端算法、前端工程搭建、前端职场、React、技术选型、移动端适配、h5、...
1、轻量、简洁、快速。 2、单页、好用、方便。
前端面试大全、前端常见问题和原理总结、前端面试题、前端面试经验、前端知识持续更新中,包括:JavaScript、Vue、Webpack、TypeScript、html、css、前端架构、前端算法、前端工程搭建、前端职场、React、技术选型、...
资源前后端分离式分布式微服务架构项目CMS前端开发讲义+源码+视频 vue.js开发技术 应用 能够测试vue.js的常用指令 "能够说出对渐进式的理解理解MVVM模式理解双向数据绑定能够测试v-bind和v-model的数据绑定效果能够...
微前端架构模板 2021.4.26 更新说明 ...本项目是基于 qiankun 搭建的微前端架构 Demo,你也可以当成 qiankun-quick-start 来使用。 本项目使用 Vue 作为主应用基座,嵌入了 Vue、React、Angular、Jqu
SpringBlade 是一个由商业级项目升级优化而来的微服务架构,采用Spring Boot 2.7 、Spring Cloud 2021 等核心技术构建,完全遵循阿里...提供基于React和Vue的两个前端框架用于快速搭建企业级的SaaS多租户微服务平台。
软件架构说明 本项目后台使用SpringMVC架构,数据库使用MySQL+hibernate,前端使用bootstrap3搭建的响应式框架,结合layIM搭建聊天界面 安装教程 本项目下载即可启动使用,进入首页注册一个账号跳转到登录页面登录...
使用React框架搭建整个前端架构,实现了用户注册、商品展示、购物车和订单管理等功能。 优化页面加载速度,将图片压缩并使用懒加载技术,有效提升用户体验。 与后端团队密切合作,设计API接口以及与后端的数据交互。...
基于 的微服务架构搭建的在线商城服务端 关联应用 架构设计 粗略设计,项目分成 , ihaowu-web 和 ihaowu-mobile,都采用 monorepo 进行管理,整体结构保持一致。 后端技术栈 - web 框架 - 数据库工具 微服务 架构...