前端工程化之路

时至今日,前端也在飞速发展,各种框架以及因框架产生的生态圈也拔地而起,满天都是概念,如数据绑定、虚拟DOM、前端构建系统、前端工程化、大前端等等。很多前端同学被困在前端框架里,学的是心力交瘁,但有些同学早已学会了透过现象看本质的本事,不管是什么样的框架都能运用自如。
下面就带大家先看看前端的发展历史。

前端发展史

  • 1990年,Tim Berners Lee 发明了世界上第一个网页浏览器。

浏览器是被发明出来了,但问题来了,当时的网页都是静态的,如表单验证就需要后端完成,在那个年代带宽很差,发一次请求带代价是极其昂贵的,因此为了解决这一问题,急需要开发一种在浏览器执行的脚本语言,因此发生了下面的事情。

  • 1995年,Brendan Eich 只用了不到半个月时间完成了第一版网页脚本语言的设计。

  • 1996年,样式表标准CSS第一版发布。

至此 htmljavascriptcss 催生了前端的雏形。

阅读更多

不可思议的BUG

莫看江面平如镜,要看水底万丈深——记一次由表象引起的不是BUG的BUG

起因

先上图
image
一位同学碰到了这样一个问题:明明配置的请求地址是ip,为什么变成域名了。

上图,第一行是实际请求报错的接口,第二行才是打印出的真正配置的接口地址,由于项目上会根据项目环境,会切换接口地址,方便开发、测试、生产。我的第一反应就是切换地址的逻辑有问题。仔细跟了他写的代码,确实在接口请求前,地址是开发地址,但请求之后变成了生产地址。

自己折腾了半天,尝试了各种方案:

  • 把地址换成固定的字符串,如aaa,没问题;
  • 将接口定义文件内容简化;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 简化前
    export default {
    dev: {
    DEV_URL: ''
    },
    test: {
    TEST_URL: ''
    },
    prod: {
    PROD_URL: ''
    }
    }
    // 简化后
    export default {
    dev: '',
    test: '',
    prod: ''
    }
  • 我把生产地址注释掉,发现还调用的是生产地址
阅读更多

前端自动化构建及部署

前言

自动化这个字眼神圣而又高大上,对后端开发的同学来说也许再熟悉不过了,可对于前端开发来说,确实有些遥不可及,接下来分享下,我在前端项目的自动化实践。

实现方式

  • 一套是工作中经常使用的 Docker + Jenkins。Jenkins 是持续集成的关键。
  • 使用 DaoClound

什么是持续集成?

jenkins 的使用成本还是比较高的,因为需要搭建 Jenkins 的基本环境,但使用率想到高。我主要介绍的是第二套方案,成本低,但能实现自动化的功能。

阅读更多