- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章从一个优质开源项目来看前端架构由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
。
何为系统架构师?
系统架构师是一个最终确认和评估系统需求,给出开发规范,搭建系统实现的核心构架,并澄清技术细节、扫清主要难点的技术人员。主要着眼于系统的“技术实现”。因此他/她应该是特定的开发平台、语言、工具的大师,对常见应用场景能给出最恰当的解决方案,同时要对所属的开发团队有足够的了解,能够评估自己的团队实现特定的功能需求需要的代价。系统架构师负责设计系统整体架构,从需求到设计的每个细节都要考虑到,把握整个项目,使设计的项目尽量效率高,开发容易,维护方便,升级简单等 。
这是百度百科的答案 。
大多数人的问题 。
《我在一个小公司,我把我们公司前端给架构了》
, (我当时还看成
《我把我们公司架构师给上了》
)
BATJ
),最大的问题在于,觉得自己不是
leader
,就没有想过如何去提升、优化项目,而是去研究一些花里胡哨的东西,却没有真正使用在项目中。(自然很少会有深度)
前端架构师
正式开始 。
SpaceX-API
SpaceX-API
是什么?
为了阅读的舒适度,我把下面的正文尽量口语化一点 。
package.json
文件)
找到 package.json 文件的几个关键点
main
字段(项目入口)
scripts
字段(执行命令脚本)
server.js
npm run start
几个主要的依赖
。
都是一些通用主流库: 主要是koa框架,以及一些koa的一些中间件,monggose(连接使用mongoDB),eslint(代码质量检查)
。
这里强调一点,如果你的代码需要两人及以上维护,我就强烈建议你不要使用任何黑魔法,以及不使用非主流的库,除非你编写核心底层逻辑时候非用不可(这个时候应该只有你维护) 。
。
项目目录 。
。
。
。
REST API,
严格分层
几个重点目录 :
server.js 项目入口 。
app.js 入口文件 。
services 文件夹 => 项目提供服务层 。
scripts 文件夹 => 项目脚本 。
middleware 文件夹 => 中间件 。
docs 文件夹 =>文档存放 。
tests 文件夹 => 单元测试代码存放 。
.dockerignore docker的忽略文件 。
Dockerfile 执行docker build命令读取配置的文件 。
.eslintrc eslint配置文件 。
jobs 文件夹 => 我想应该是对应检查他们api服务的代码,里面都是准备的一些参数然后直接调服务 。
逐个分析 。
安装环境严格区分开发依赖和线上依赖,让阅读代码者一目了然哪些依赖是线上需要的 。
项目目录划分 。
目录划分,严格分层 。
通用,清晰简介明了,让人一看就懂 。
server.js
开始
几个优秀的地方 。
每个回调函数都会有声明功能注释 。
SERVER.listen
的host参数也会传入,这里是为了避免产生不必要的麻烦。至于这个麻烦,我这就不解释了(一定要有能看到的默认值,而不是去靠猜)
process
进程退出,防止出现僵死线程、端口占用等(因为node部署时候可能会用pm2等方式,在 Worker 线程中,process.exit()将停止当前线程而不是当前进程)
koa
提供基础服务
monggose
负责连接
mongoDB
数据库
若干中间件负责跨域、日志、错误、数据处理等 。
admin
模块
分析代码 。
401
。但是登录后,你只能做你权限内的事情,例如你只是一个打工人,你说你要关闭这个公司,那么对不起,你的状态码此时应该是
403
auth
中间件判断你是否有登录
authz
。 (所以redux的中间件源码是多么重要。它可以说贯穿了我们整个前端生涯,我以前些过它的分析,有兴趣的可以翻一翻公众号)
error
中间件处理
server
层内部出现异常,只要抛出,就会被
error
中间件处理,直接返回状态码和错误信息. 如果没有传入状态码,那么默认是500(所以我之前说过,代码要稳定,一定要有显示的指定默认值,要关注代码异常的逻辑,例如前端setLoading,请求失败也要取消loading,不然用户就没法重试了,有可能这一瞬间只是用户网络出错呢)
补一张koa洋葱圈的图 。
现在,都非常轻松就能理解了 。
通过这个项目,我们能学到什么 。
一个能上天的项目,必然是非常稳定、高可用的,我们首先要学习它的优秀点:用最简单的技术加上最简单的实现方式,让人一眼就能看懂它的代码和分层 。
再者:简洁的注释是必要的 。
从业务角度去抽象公共层,例如鉴权、错误处理、日志等为公共模块(中间件,前端可能是一个工具函数或组件) 。
显示的指定默认值,不让代码阅读者去猜测 。
目录分区必定要简洁明了,分层清晰,易于维护和拓展 。
原生JavaScript、CSS、HTML基础扎实(系统学习过) 。
原生Node.js基础扎实(系统学习过),Node.js不仅提供服务,更多的是用于制作工具,以及现在serverless场景也会用到,还有SSR 。
熟悉框架和类库原理,能手写简易的常用类库,例如promise redux 等 。
数据结构基础扎实,了解常用、常见算法 。
linux基础扎实(做工具,搭环境,编写构建脚本等有会用到) 。
熟悉TCP和http等通信协议 。
熟悉操作系统linux Mac windows iOS 安卓等(在跨平台产品时候会遇到) 。
会使用docker(部署相关) 。
C++
)
懂基本数据库、redis、nginxs操作,像跨平台产品,基本前端都会有个sqlite之类的,像如果是node自身提供服务,数据库和redis一般少不了 。
再者是要多阅读优秀的开源项目源码,不用太多,但是一定要精
原文链接:https://mp.weixin.qq.com/s?__biz=MzA4NTU1OTMwMQ==&mid=2650301728&idx=1&sn=492e6f144772636c6c093497f04543e8&chksm=87dad44ab0ad5d5c6cb02230769f4228082d9b6ec6075628e051a2a51474d7c983bf630617d9&token=1011 。
最后此篇关于从一个优质开源项目来看前端架构的文章就讲到这里了,如果你想了解更多关于从一个优质开源项目来看前端架构的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
在我开发和维护的代码中遇到了一个问题。 我有一个函数,它接受查询(类型字符串)并用不同的字符串替换该字符串的子字符串。例如,如果用户输入字符串“我有一只猫”,它会将其替换为“我有一只狗”。 我的代码可
有很多工具可以解决浏览器前缀问题,无论是 IDE 自动扩展麻烦的属性还是使用预编译器进行混合,但为什么浏览器制造商确实需要实现前缀。据我所知,他们可以实现自己的某些实现,但是什么阻止他们在没有前缀的情
我需要存储重要的 oauth 授予 token ,这些 token 应该防篡改。 传统 Cookie 和 HTML5 本地存储哪一个更安全? 最佳答案 没有什么是防篡改的——至少,永远不要假设它是防篡
$("*").click(function(){...}) 是否被认为昂贵? - See here . 在每次点击时发送 ajax 请求怎么样? 这会对普通用户造成明显的(性能?)问题吗?该应用程序不
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 6 年前。 Improv
我想创建一个简单的 docker-compose 设置。我有一个在 JS 中实现的静态前端,由 nginx 提供服务——这是一个容器。我还有一个 API 后端 Web 服务器 - 另一个容器。 我可以
我对 JavaScript 的理解是,在脚本执行时会创建一个全局执行上下文 - 我理解为保留内存空间中的一系列键:值对 - 很像常规的 JavaScript 对象。 在函数执行时,会创建一个新的执行上
我不得不使用第 3 方 CMS,我无法更改 h3 的内容(或 h3 本身) 我对“cufon”没有太多的了解——假设它是一种使用特定字体的老式方法。我猜它不是合法的 HTML,所以没有编入索引。 因此
上面你有一个按钮有3种状态,normal,hover,那么第三种状态叫什么?需要在我的 CSS 中添加什么来设置样式? 右键单击后按钮似乎也处于此状态。 可能真的很简单,我知道,但我想不通。 最佳答案
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 11 年前。 Improve thi
我有 knockoutjs+requirejs 背景。 我切换到angularjs。 我不喜欢 angularjs 中的每个绑定(bind)属性都只是附加到 Controller 内部的 $scope
例如,我有一个视口(viewport) 100px * 100px和 8 . 他们每个人都有风格: position: absolute; top: 0px; left: 0px; bottom:
我很好奇为我的社交媒体图标使用 CSS 图像 Sprite 与使用自定义 UI 字体的优缺点。 哪一个将在页面加载速度方面提供卓越的性能? 在我看来,CSS Sprite 可能更好 - 因为只有一个
我知道类 API 在 Vue 3 中被删除了。这意味着不会有开箱即用的基于类的语法。 在vue-class-component 中,我不知道是哪种魔法将TypeScript 编写的Vue 类转换为有效
这个问题在这里已经有了答案: HTML5 nav element vs. role="navigation" (6 个回答) 5 天前关闭。 社区在5天前审核了是否重新打开这个问题并关闭了它: 重复
在有人考虑否决甚至关闭我的问题之前,我想强调一下,我并不是在问哪个更好(这当然是一个无意义的问题,特别是当我们认为一个专注于服务器端而另一个专注于浏览器端时)。 来自http://winterbe.c
我使用 Angular 1.4.x 和 prerender.io 设置了一个网站,该网站向 googlebot 提供渲染的静态缓存页面。Googlebot 会抓取每个页面两次。一次抓取命中了 URL,
我是一名优秀的程序员,十分优秀!