loading请求处理中...

前端架构设计

2021-12-02 20:51:04 阅读 11267次 标签: 架构设计 作者: 陈先生12121

前端架构设计

前端架构是一系列工具和流程的集合, 旨在提升前端代码的质量, 并实现高效, 可持续的工作流.

前端架构的四个核心

(一) 代码

归根到底, 所有的网站都是由一堆文本文件和资源文件组成的. 当我们面对制作网站所产生的大量代码时, 就会发现为代码和资源设定一个期望是多么重要. 在代码部分, 我们会专注于如果实现系统架构中的HTML, CSS, JavaScript.

(二) 流程

现在早已过了FTP上传文件的时代, 那么现在重要的是思考怎么用工具和流程构建一个高效且避免出错的工作流. 工作流变得越来越复杂, 那些用于它们的工具也同样如此. 这些工具在提高生产力, 加快效率和保持代码一致性上带来了惊人的效果, 但也伴随着过度工程化和抽象化的风险. 所以, 现有的工作流是需要改变的.

(三) 测试

要构建一个可扩展和可持续优化的系统, 必须保证新代码和老代码能够很好的兼容. 我们的代码不会独立存在, 它们都是大型系统中的一部分. 创建覆盖面广泛的测试方案, 能确保老代码还能正常运作.

(四) 文档

一般而言, 如果不是团队中的重要成员要离开, 我们几乎都不会意识到文档的重要性. 等到那个时候, 大家将不得不停下手头的工作, 优先编写所有的文档. 作为前端机构师, 你要善于在项目开发的同时编写良好的文档.

代码核心

(一) HTML

在前端的架构中, HTML作为页面的基础是十分重要的. 如果初始的HTML写得很烂, 将要写出很多不必要的CSS和JavaScript来弥补. 反之, 如果如果初始的HTML写得足够好, 就能写出根据可扩展性和可维护的CSS和JavsScript.

首先我们来看一些初级的前端工程师可能写出的HTML代码:

"header" class="clearfix"> <div id="header-screen" class="clearfix"> <div id="header-inner" class="container-12 clearfix"> <div id="nav-header" role="navigation"> <div class="region" region-navigation> <div class="block block-system block-menu"> <div class="block-inner"> <div class="content"> <ul class="menu"> <li class="first leaf"> <a href="#">菜单1a> li> <li class="second leaf"> <a href="#">菜单2a> li> ul> div> div> div> div> div> div> div>

这类"div乱炖"的代码, 是很多初级的前端为应付切页面的工作写出来的. 只是单纯为了还原psd图, 而完全你不考虑HTML的可读性和可维护性.

随后, 在HTML5之后, 标签的语义化受到了大家的重视, 采用语义化的标签, 不仅增加了代码的可读性, 也有利于SEO. HTML语义化标签的使用,这也是在前端架构中需要考虑到的,下面我们来看一下使用语言化标签写的这段代码:

 <header>
    <section>
      <nav>
        <ul>
          <li>
            <a href="#">
              菜单1
            a>
          li>
          <li>
            <a href="#">
              菜单2
            a>
          li>
        ul>
      nav>
    section>
  header>

但是如果我们的页面的菜单有数10项的时候, 就会额外添加

  • 菜单N
  • , 这类重复的工作量完全可以交给Mustache这类模板引擎来解决, 已Vue中的模板引擎语法来写HTML, 会减少很多的工作量 :

    <template>
      <header>
        <section>
          <nav>
            <ul>
              <li v-for="(item, index) in navList" :key="index">
                <a href="#">
                  {item}
                a>
              li>
            ul>
          nav>
        section>
      header>
    template>
    
    <script>
        export default {
            data() {
              navList:['菜单1','菜单2','菜单3','菜单4','菜单5','菜单6','菜单7','菜单8','菜单9','菜单10']
            }
        }
    script>
    

    你也可以使用Handlebars, Jade, artTemplate各种模板引擎到你的项目中, 当然这些都是需要取决于前端架构师前期的所选择的技术选型. 做为前端架构师, 需要评估HTML产生的过程, 你对内容的顺序, 使用的元素和CSS类名有多大的控制权? 这些元素在将来改动起来会有多大难度? 模板的易用性? 你可以通过系统做出更改, 还是需要手动处理? 通过回答这些问题, 可能会颠覆你自己构建HTML和CSS的方法.

    (二) CSS

    构建CSS现在有很多成熟的方法, 例如使用新的命名空间, 扩充数据属性或在JavaScript里面定义CSS. 这些方法你可以从BootStrap, ElementUI这类UI框架中找到影子. 下面, 介绍3种比较常用的方法.

    1.OOCSS方法(Object-Oriented CSS 面向对象的CSS)

      <div class="toggle simple">
        <div class="toggle-control open">
          <h1 class="toggle-title">标题h1>
        div>
        <div class="toggle-details open">
          详细内容
        div>
      div>
    

    上面这段代码就展示了如何使用OOCSS方法创建一个可切换的HTML代码, OOCSS有两个主要的原则:

    • 分离结构和外观
    • 分离容器和内容

    分离结构和外观
    这里的toggle用来控制结构, simple用来控制外观,这就是分离结构和外观的表现. 这样可以实现外观的复用, 例如当前的simple皮肤使用直角, 而complex皮肤可能使用圆角, 还加了阴影.

    分离容器和内容
    这里使用toggle-title就是分离容器和内容的表现, 无论toggle-title的容器是用的

    还是

    或者是
    , 一旦加上了toggle-title这个类名, 那么该容器均已该类名所定义的样式呈现内容.

    2.SMACSS方法(Scalable and Modular Architecture for CSS 模块化架构的可扩展的CSS)

    <div class="toggle toggle-simple">
        <div class="toggle-control is-active">
            <h2 class="toggle-title">标题2h2>
        div>
        <div class="toggle-detail is-active">
            详细内容
        div>
    div>
    

    上面的这段代码基本展示了如何使用SMACSS方法,在我个人的理解中, OOCSS更多的其实是提供了一种CSS构建思想, 该思想要求将结构和外观分离, 将容器和内容分离. 但是并没有提供一套完整的CSS构建规范, 而SMACSS是提供了一套样式系统, 该样式系统有5个具体类别:

    • 基础: 如果不添加CSS类名, 标记会以什么外观呈现
    • 布局: 把页面分成一些区域
    • 模块: 设计中的模块化, 可复用的单元
    • 状态: 描述在特定的状态或情况下, 模块或布局的的显示方法
    • 主题: 一个可选的视觉外观层, 可以让你更换不同主题

    基础

    //base.css
    body, form {
        margin: 0;
        padding: 0;
    }
    
    a {
        color: #039;
    }
    
    a:hover {
        color: #03F;    
    }
    

    在基础代码中, 应该规定的是页面中的一些通用样式,例如将body的margin和padding设置为0 , 设置a标签的颜色等. 类似于某些人常用的initial.css文件.

    布局

    //layout.css
    #header, #article, #footer {
        width: 960px;
        margin: auto;
    }
    
    #article {
        border: solid #CCC;
        border-width: 1px 0 0;
    }
    

    这里的布局指的是页面中一些通用的布局组件, 例如头部, 侧边栏, 主体和底部这些. 这些布局组件会在多个页面通用, 所以最好把其放入到一个css文件中. 方便复用. 在SMACSS中, 推荐将布局容器的顶级标签设置为id, 这样确保了每个页面中拥有唯一持有该样式的布局容器, 也方便其css和js选择器的使用. 当然, 你也可以使用一个唯一的类名替代id.

    模块

    //module.css
    
    //module1
    .module1 > h2 {
        padding: 5px;
    }
    
    .module1 span {
        padding: 5px;
    }
    
    //module2
    .module2 > h2 {
        padding: 10px;
    }
    
    .module2 span {
        padding: 10px;
    }
    

    模块是指页面中可以单独分离并提取出来复用的部分, 例如导航条, 侧边栏, 对话框或一些widget等. 所以, 模块禁止使用id, 而应该采用类名的方式.

    状态

    "header" class="is-collapsed"> <form> <div class="msg is-error"> There is an error! div> <label for="searchbox" class="is-hidden">Searchlabel> <input type="search" id="searchbox"> form> div>

    State 负责定义元素不同的状态下,所呈现的样式. 上面的一段代码中,已is-开头的就是表示状态的类名, is-collapsed, is-error等类名不会单独使用, 而是和前面的布局和模块一起使用. 下面的代码, 就是在tab栏模块和状态一起使用:

    //state.css
    .tab {
        background-color: purple;
        color: white;
    }
    
    .is-tab-active {
        background-color: white;
        color: black;
    }
    

    主题

    // module-name.css
    .mod {
        border: 1px solid;
    }
    
    //theme.css
    .mod {
        border-color: blue;
    }
    

    这里的主题理解为皮肤更加合适, 已上面的代码为例, 在module-name.css中定义了边框除颜色之外的样式, 在theme.css文件中定义了该边框的颜色, 这样的好处就是, 如果定义其他颜色的类名去覆盖这些有颜色的样式, 那么就可以通过类名去切换皮肤的颜色. 达到更换主题的效果.




    设计公司推荐

    成为一品威客服务商,百万订单等您来有奖注册中

    留言( 展开评论

    快速发任务

    价格是多少?怎样找到合适的人才?

    官方顾问免费为您解答

     
    相关任务
    DESIGN TASK 更多
    国资委投资管理平台架构设计

    ¥7000 已有1人投标

    数据库架构设计

    ¥30000 已有1人投标

    采购流程架构设计

    ¥3000 已有1人投标

    数据库架构设计一期

    ¥12000 已有1人投标

    云端系统架构设计

    ¥2500 已有1人投标

    网络架构设计

    ¥5000 已有1人投标