当前位置: 首页 > Web前端 > HTML

进阶前端之路:前端架构设计(一)——代码核心

时间:2023-04-03 00:28:51 HTML

很多人可能和我一样是第一次听到“前端架构”这个词,第一反应是:“前端架构呢?”在后端开发领域,系统规划和可扩展性非常重要,所以在开发工作开始前很久就邀请架构师加入项目,他们会和客户讨论要搭建的平台的架构需求,将使用什么技术栈?什么是内容类型?创造?软件架构师的职责是确保项目中的每一步都在总体架构的指导下进行,而不是随意决定。在目前的前端领域,随着JS框架、UI框架以及各种类库的丰富,前端架构也变得非常重要。如果一个大型项目没有合理的前端架构设计,那么前端代码可能会被不同的开发者随意引入。各种库和UI框架会导致代码量变得异常臃肿,最终的结果可能是代码变得无法维护,页面性能低下,不得不推翻重构。因此,我们需要在项目开始前就对前端代码进行结构化。一旦前端架构师设计了所有前端开发人员必须遵循的检查机制,建立了系统设计的规范,那么项目就有了衡量代码质量的标准,前端开发人员就可以还可以享受更高效的工作流程。因此,前端架构的定义可以用下面一句话来概括:前端架构是一系列旨在提高前端代码质量,实现高效可持续工作流的工具和流程的集合.本系列前端架构文章将围绕前端架构的四大核心展开,即代码、流程、测试、文档。前端架构的四大核心(一)代码归根结底,所有的网站都是由一堆文本文件和资源文件组成的。当我们面对制作网站产生的大量代码时,我们会发现对代码和Resources设定一个期望是多么的重要。在代码部分,我们将重点介绍如何在系统架构中实现HTML、CSS和JavaScript。(2)流程已经过了FTP上传文件的时代,所以现在重要的是思考如何使用工具和流程来构建一个高效无差错的工作流程。工作流程变得越来越复杂,适用于它们的工具也是如此。这些工具带来了更高的生产力、更快的效率和一致的代码的惊人效果,但同时也伴随着过度工程化和抽象化的风险。因此,需要改变现有的工作流程。(3)测试要构建一个可扩展的、持续优化的系统,需要保证新旧代码能够很好的兼容。我们的代码不是独立存在的,它们都是一个更大系统的一部分。创建广泛的测试解决方案以确保旧代码它仍然可以正常运行。(4)文档一般来说,如果不是团队重要成员的离开,我们很难意识到文档的重要性。到时候,大家就得停下手头的工作,优先把所有的文件写好。作为一名前端架构师,在开发项目的同时,一定要善于写出好的文档。代码核心(一)HTML在前端架构中,HTML作为页面的基础是非常重要的。如果最初的HTML写得很烂,你将不得不写很多不必要的CSS和JavaScript来弥补。相反,如果最初的HTML写得足够好,您可以编写可扩展和可维护的CSS和JavsScript。先来看一些初级前端工程师可能会写的HTML代码:"header-inner"class="container-12clearfix">菜单1菜单2

这种“div炖”的代码很多初级的frontend是为了处理裁页的工作而写的。只是还原psd图片而已,根本不考虑HTML的可读性和可维护性。那么,在HTML5之后,标签的语义得到了大家的重视,使用Semantic标签不仅增加了代码的可读性,而且有利于SEO。在前端架构中也需要考虑HTML语义标签的使用。我们来看看使用语言标签写的段落代码:
但是如果我们页面的菜单有10个项目,额外的
  • 会添加MenuN
  • ,这种重复性的工作量完全可以交给Mustache等模板引擎。在Vue中用模板引擎语法写HTML会减少很多工作量:你也可以在你的项目中使用Handlebars,Jade,artTemplate各种模板引擎,当然,这些一切都取决于前端架构师选择的技术选择。作为前端架构师,你需要评估HTML生成的过程,你对内容的顺序、使用的元素和CSS类名有多少控制权?这些要素未来改变的难度有多大?模板的使用方便吗?是否可以通过系统进行更改,还是需要手动处理?通过回答这些问题,您可能会颠覆自己构建HTML和CSS的方式。(2)CSS构建CSS有很多成熟的方法,比如使用新的命名空间,扩展数据属性,或者在JavaScript中定义CSS。您可以在BootStrap和ElementUI等UI框架中找到这些方法中的阴影。下面,介绍三种比较常用的方法。1、OOCSS方法(Object-OrientedCSS面向对象的CSS)TitleDetails上面的代码展示了如何使用OOCSS方法创建可切换的HTML代码。OOCSS有两个主要原则:结构和外观分离容器和内容分离结构和外观分离此处切换用来控制结构,用simple来控制外观,就是把结构和外观分离的表现,这样可以实现外观的复用,比如现在简单的皮肤用直角,而复杂的skin可以使用圆角,添加阴影,分离container和content这里使用toggle-title是分离container和content的表现,不管toggle-title的container是用

    还是

    还是
    ,oncetoggle-title添加了这个类名,那么容器就有类名定义的样式来呈现内容。2.SMACSS方法(ScalableandModularArchitectureforCSSmodulararchitectureforscalableCSS)标题2

    详情上面的代码基本上展示了如何使用SMACSS方法。以我个人的理解,OOCSS其实提供了一种CSS构建思路,要求结构和外观分离,容器和内容分离。但是,它并没有提供一套完整的CSS构造规范,而SMACSS提供了一套样式系统,具体有5类:Basic:如果不加CSS类名,标记会是什么样子Layout:划分页面进入区域模块:设计中的模块化、可重用单元状态:描述模块或布局在特定状态或情况下应如何显示主题:可选的视觉外观层,允许您用不同的主题替换基础//base.cssbody,表单{保证金:0;填充:0;}a{颜色:#039;}a:悬停{颜色:#03F;}在基础代码中,需要指定一些页面中常用的样式,比如设置body的margin和padding为0,设置a标签的颜色等。类似于一些常用的initial.css文件人们。布局//layout.css#header,#article,#footer{width:960px;边距:自动;}#article{边框:实心#CCC;border-width:1px00;}这里的布局指的是页面中一些常用的布局组件,比如header、sidebar、body和bottom。这些布局组件会在多个页面中通用,所以最好放到一个css文件中。方便重复使用。在SMACSS中,推荐将布局容器的顶级标签设置为id,这样可以保证每个页面都有一个唯一的这种样式的布局容器,也方便其css和js选择器的使用。当然,你也可以使用唯一的类名来代替id。模块//module.css//module1.module1>h2{padding:5px;}.module1span{padding:5px;}//module2.module2>h2{padding:10px;}.module2span{padding:10px;}模块是指页面中可以分离提取出来重用的部分,比如导航栏、侧边栏、对话框或者一些widgets等。因此,模块禁止使用id,而应该使用类名。状态
    有错误!搜索State负责定义元素在不同状态下呈现的样式。上面代码中,is-开头的类是代表stateName的类,is-collapsed、is-error等类名不会单独使用,而是和前面的layout和modules一起使用。下面的代码是使用tab栏中的module和state//state.css.tab{background-color:purple;颜色:白色;}.is-tab-active{背景颜色:白色;color:black;}theme//module-name.css.mod{border:1pxsolid;}//theme.css.mod{border-color:blue;}这里的主题理解为皮肤比较合适。以上面的代码为例,在module-name.css中定义了边框颜色以外的样式,在theme.css文件中定义了边框的颜色。这样做的好处是,如果你定义了其他颜色的类名来覆盖这些颜色样式,那么你就可以通过类名来切换皮肤的颜色。改变主题的效果就实现了。更多SMACSS方法请参考:https://smacss.com/book3.BEM方法(BlockElementModifier块元素修饰符)Title3......提出BEMbyYandex给出一个需要CSS类名的CSS命名方法,尽量使用以下三个组件:blockname:所属组件的名称Element:块中元素的名称修饰符:任何与块或元素块名关联的修饰符这里很多初学者都会认为块名是inline-block中的块,其实这里的块名指的是一个独立的模块或组件。例如,一个
    可以作为一个模块,
    中的