网站建设公司分享一个经过测试的前端框架建设解决方案。深圳网站建设公司虽然在本栏目前面文章中描述每个场景都突出了更深刻的组织层面的问题,但它们都可以通过适当的测试覆盖率来缓解。我们不去测试 JavaScript 函数的有效返回结果,而是抓取已授权的设计系统的视觉外观,从而验证我们没有偏离该系统。在提交之前抓取这些视觉还原是保证设计系统一致性的关键。
网站建设对于前端视觉还原测试让我们可以将正在开发的版本或者即将部署的版本(新版本)与正确的版本(基线版本)进行视觉对比。这个过程只不过是抓取基线版本的截图,与最新版本进行对比,并找出像素层面的差异。通过把这些基线图片提交到仓库,或者在测试库里将其标记为通过,我们就对任何特定的功能(在我们的例子中为联系表)在像素级别的视觉表现有了签名确认并一致认同的核对记录。在任何代码提交到主分支之前,视觉还原测试提供了一种测试网站所有功能的方法,以确保没有出乎意料的视觉改变。这样,我们对一些原本由 PSD 文件不一致导致的 bug 报告也有了应对措施。借助于已经签名并提交到代码库的基准,我们可以跑一遍测试程序,并自信地回复道:“我们的代码没有问题,一定是 Photoshop 文件出了问题。”同样,我们也可以借此分辨真正的 bug 和新的变更需求。
网站建设公司关于网站前端架构设计视觉还原测试的多面性
借助于多种技术和流程,视觉还原测试可以有多种风格。虽然新的工具不断地被发布到开源社区,但它们通常是一小部分功能的组合。面对这一事实吧:我们启动的每个项目的前端代码都正在变得越来越复杂。我并不是说这是件坏事,只是快速的成长也带来了更多的问题。就在几年前,我们还把所有的 CSS 放在一个单一的文件中,并且对每一个样式使用一长串很复杂的选择器,以此来确定页面中对应的元素。如果发现某一个样式受到页面上其他样式的干扰,就在文件底部写一个有更长的选择器的新样式。与之类似,我们的 JavaScript 文件曾经也使用一大堆 JQuery 函数,以此对页面中的目标元素应用某些功能。每个函数都包含了完成所需功能的全部逻辑和代码,如果需要对另外一个元素实现稍微不同的功能,只要简单地复制一份代码,修改一下选择器,并更新部分逻辑即可。简而言之,我们过去相当于为每个项目写一个单独的 PHP 文件应用程序。
之后,正如 PHP 开发者学着将代码拆分成可重用的对象,并将代码组织到不同的文件中一样,前端项目也逐渐摆脱原先一长串级联指令的形态,开始变得更像一个充满抽象定义、依赖关系和接口的复杂系统。虽然我们很快采用了传统编程语言中的面向对象和多文件的方法,但是很难做到同步写出完整的文档。这么多年来我们一直使用声明式系统,以至于我们对新系统的理解在头脑中早已固化了。将头脑中这些看似常识的信息写到文档上并非易事,但我们因为没有文档而浪费的时间比写文档花费的时间更多。俗话说得好:好记性不如烂笔头。
网站建设公司前端设计师常说的文档是什么?
文档是系统设计的蓝图。没有文档,我们将难免重复解决已经解决过的问题,而且花大量时间查看代码来寻找最简单的答案。没有文档,我们的新员工只能对着系统抓耳挠腮,并怀疑在这种系统中怎么可能完成自己的任务。回顾一下目前为止我们设计过的所有架构,如果不花同等的时间来讲一下写文档的方法,那简直是一种罪过。写文档是开发工作的一部分,而不是等重要工作完成后才开始的事情。就像需要重构的臃肿代码、需要自动化的低效率流程,或者没有被测试覆盖到的函数一样,略过文档也会欠下技术债。不要以为文档只是简单地写下代码如何工作。的确,我们需要在开发流程中预留出写文档的时间,用于记录我们开发的代码是如何工作的,但是写文档远远不止为每一行代码写一段描述。
文档有多种形式,而其中很多只有在架构支持时才能成型。虽然有些文档只是用于描述每个函数的普通文本,但这种文档背后往往有一套基于搜索、导航和视觉呈现的构建系统。其他的文档用于展示系统的资源,由我们所写的样式、脚本、模板和模式来驱动。
网站建设公司前端设计师解析什么是静态文档
Hologram是基于 Ruby 的通用文档工具,你可以在代码库中写小段的注释,然后通过它来收集这些注释生成的静态页面。这些 Markdown 格式的文档块可以放进你的 Sass、CSS 或者 JavaScript 文件中。这些文档块还包括用于描述页面名称和导航等相关信息的元数据,并且它的书写形式完全自由。Hologram 让你可以将文档内联地写在代码中,这有助于使文档保持最新,同时使开发人员总能看到这些文档。SassDoc是基于 Node 的系统文档工具,它宣称“SassDoc 对于 Sass 的意义,就像 JSDoc 对于 JavaScript 的意义一样”,而且它的确如此!SassDoc 与 Hologram 有点像,它也依赖于代码中内联的注释来生成最终文档。然而,Hologram 是通用的、多功能的工具,SaasDoc 却专注于描述 Sass 变量、函数、混入(mixin),以及它们是如何相互影响和依赖的。如果你正在构建一个大型的 Sass 框架,或者一个复杂的栅格或颜色系统,SassDoc 正是你想要的工具。好了,
深圳网站建设公司本文关于“ 网站建设公司分享一个经过测试的前端框架建设解决方案”知识就分享到这里。如果您需要寻找网站建设公司来为您单独定制网站,请联系我们网站客服或者拨打联系电话,有专人为您提供详细的解决方案。