前端开发之标准化(未完）

ElonMuscle
1,952 阅读4分钟

前端开发通常我们不会自己去造轮子，通常是利用已有轮子，或者已有的汽车去制作改装车。但改装车过程多了，也会想去了解底层的轮子，或者自己造轮子。
不管是自己造轮子或者是利用通用轮，根本目的都是为了模块化和标准化以提高开发效率、可维护性、可重用性
造轮子的一个意义
为什么关注底层 www.cnblogs.com/rubylouvre/…
标准化的意义可以看以下几篇文章:
Happypeter - 特斯拉启示录：什么样的公司最赚钱？
[司徒正美] - 我的《javascript框架设计》终于出版
民工精髓 - 企业软件领域前端开发的困境
我的一个预测是像前端实现从早期dreamweaver(设计+code)到目前的axure(或sketch/xd)+vscode(分离设计和code、前端关注UI实现和逻辑)，未来会进化到ui实现与code的分离(ui实现由设计师或者叫设计实现工程师由设计稿快速完成、前端工程师仅关注数据逻辑),目前符合我这个预想的产品就是DataV

vue是一个非常实用的MVVM framework,规定了我们的对于前端的写法，隐藏了结构生成和渲染的细节，但vue官方本身是不造轮子的。基于vue有不少的轮子厂（例如element-ui）,基于这些轮子厂有不少的汽车厂（例如vue-element-admin）。
我们归纳一下页面通常有哪些轮子（UI组件）
在vue之前，我们用的比较多的一个界面开发工具包是bootstrap，也可以同时参照它来说明常用组件

在vue中有：

在react中有

谈组件化开发之前我们通常对界面的一些基本要素做出一些规定 包括：

  • 色彩：界面的色彩一般不要过多，过多就显得杂乱，我们要定一个主色调，一些辅助色（用于信息提示）和一些中性色（通常是黑白灰）
  • 字体：规定好字体主要是为了在不同操作系统的显示效果保持一致
  • 边框：对于需要加边框的元素，我们列几个边框选项，使边框用起来更容易也使界面风格统一
  • 图标：对于常用图标可以做一个图标集合，便于使用者查找，在图标不足的情况下可以在iconfont中找到加入到自定义集合中

通常我们将组件分成

  1. 基础组件（其他组件会成为基础组件的子元素，或者基础组件会成为其他组件的子元素、常用基础组件包括栅格布局组件grid(row/col)、容器布局组件container/header/footer/aside/main、按钮button）
  2. 导航组件（与路由走向有关，包括navmenu、breadcrumb、dropDown）
  3. 表单组件（与表单构成元素相关，包括form、switch、checkbox、radio、input/numberInput、textarea、select、slider、timepicker、datepicker/datatimepicker、upload、rate、colorpicker、穿梭框transfer、数据联动级联选择cascader、树形选择treeselect）
  4. 表格与分页组件（table、pagination）
  5. 提醒组件（与消息告知有关，包括alert、message/messagebox、notifaction）
  6. 信息引导和提示组件（包括骨架屏组件skeleton、loading、tag、tooltip、progress、标记badge）
  7. 组件托盘组件和内容排版组件（包括card、list、tree、tabs）
  8. 其他组件 （折叠面板Collapse、轮播carousel、抽屉组件（侧边滑动面板）drawer）

详细描述

  1. 网格布局组件，在一行(row)内摆放N个列(col)的组件,由于屏幕（screen）宽度大小不一，我们在不同宽度尺寸下摆放的方式不一致。
    element-ui将一行宽度分成24栏，通过指定每个col的栏数决定每个col在一行宽度之中的占比
    如下代码所示1列占6栏，即一个col占6/24=1/4的宽度。gutter（沟）代表col与col直接缝隙的宽度
 <el-row :gutter="20"/>
   <el-col :span="6"> </el-col>
   <el-col :span="6"> </el-col>
   <el-col :span="6"> </el-col>
   <el-col :span="6"> </el-col>
</el-row>
  1. 容器布局组件，对于整个布局我们通常将各个版块根据位置划分为header、footer、 aside、main四个容器，这四个容器都包含于一个container的容器中
avatar
文章
阅读
粉丝