我的职业生涯：前端研发

背景

Web 起初是为了简单的信息传递，之后随着技术的演进，信息更加丰富，交互性逐渐加强…

静态网页

主要以素材为主，展示logo，图片，样式布局，文案

（1）静态网页不能简单地理解成静止不动的网页，他主要指的是网页中没有程序代码，只有HTML（即：超文本标记语言），一般后缀为.html,.htm,或者.xml等。虽然静态网页的页面一旦做成，内容就不会再改变了。但是，静态网页也包括一些能动的部分，这些主要是一些GIF动画等

（2）静态网页的打开，用户可以直接双击，并且不管任何人任何时间打开的页面的内容都是不变的。

动态网页：

具有交互性

（1）动态网页是指跟静态网页相对的一种网页编程技术。动态网页的网页文件中除了HTML标记以外，还包括一些特定功能的程序代码，这些代码可以使得浏览器和服务器可以交互，所以服务器端根据客户的不同请求动态的生成网页内容。

即：动态网页相对于静态网页来说，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

（2）动态网页，与网页上的各种动画、滚动字幕等视觉上的动态效果没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要是采用了动态网站技术（如PHP、ASP、JSP等）生成的网页都可以称为动态网页。

jQuery的十年王座

2006年1月，jQuery的第一个版本面世 到 2016 年，地位牢不可破，积累了大量的插件库，从16年开始它被嫌弃了，是因为dom操作是业务无关的逻辑，不应该出现在业务的代码中。

Web前端的兴起

SPA是前端兴起 彻底独立的标志。我记得我是2016年，第一次使用 angularJs 进行开发的，彻底的从 J2EE的开发中脱离。
SPA的前端框架有 angular，react，vue，这些具有 前端路由 的都是SPA框架。

SPA：全称是Single Page Application，单页面应用。是我们前面提到的Web交互性持续提升的必然产物。

前端路由：动态网页之前界面都是由后端接口返回的，由后端决定界面的跳转，前后端分离之后，界面跳转由前端管理从而有了 前端路由 的概念。

J2EE：全称是Java 2 Platform Enterprise Edition, Java于1995年由Sun公司推出，当时它的主要用途是制作产生动态网页的Applet。

从业者的命运

静态网页的开发人员大多转型 UI设计，产品 岗位，另一部份还在从事前端，无法接受这一变革的 只能被历史的车轮狠狠的碾压。

动态网页的开发人员大部分在不知不觉中转为了纯后端开发，一小部分人（包括我）见识的Web前端的蓬勃崛起后决定加入这新生的行业，这一部分人也是现如今Web前端行业的主要力量，Web前端的交互性使前端愈来越多注重逻辑思维，所有我们很有优势。

再然后就在 16年 进入职场选择前端开发的小伙伴了，他们在面试的时候就不是问jQuery的源码通读了几遍，而是开始问设计模式了，解释一下你对 MVVM 的理解

前端的发展

细心的小伙伴们发现，这里我们不叫Web前端，直接叫做前端，这是主要是应 node.js 和我们前端的关系密不可分了。

• node.js在开发过程中充当服务器的角色，使前端项目可以作为独立的项目运行。
• 项目打包编译，less编译时会用到 pathon ,scss的编译，代码压缩混淆
• 基于node.js的构建工具 任务流工具 grunt gulp, 模块打包工具 webpack
• node.js也偶尔作为后台服务的角色 Express

2016-2018年，在前端发展的初期 代码压缩，文件合并，文件版本更迭
这些事情 都需要我们前端的同学自己专研使用：grunt、gulp、webpack这些工具来完成，耗费大量的精力。

第三方依赖库的管理:

1. 刚开始下载源文件放到我们的项目里，在网页中 加入一大堆script标签。这样不但使得网页体积臃肿、难以维护，还会产生大量的HTTP请求拖慢了显示速度又影响用户体验。
2. 然后为了解决这个问题，前端的模块管理器就应运而生啦，它可以轻松管理，各种JavaScript脚本的依赖关系，自动加载各个模块。
3. RequireJS最早也是最有名的前端模块管理器，是AMD规范最好的实现者之一。
4. Sea.js，解决了繁琐的文件依赖关系带来的问题，主要为了实现JS文件的异步加载，以及管理模块之间的依赖性，在SeaJS的世界里，一个文件就是一个模块，所有模块都遵循CMD规范
5. Bower：是twitter推出的一款包管理工具:
   基于nodejs的模块化思想
   把功能分散到各个模块中
   让模块和模块之间存在联系
   并通过Bower来管理模块间的这种联系
   Bower的主要作用是
   为模块的安装、升级和删除
   提供一种统一的、可维护的管理模式
6. Browserify本身不是模块管理器
   只是让服务器端的CommonJS格式的模块
   可以运行在浏览器端
   这也意味着通过它
   我们可以使用Node.js的npm模块管理器
   实际上，它等于间接为浏览器提供了npm的功能
   它通过对代码进行解析
   整理出代码中的所有模块依赖关系
   然后把相关的模块代码都打包在一起
   7.component是Express框架的作者开发的模块管理器，它是将网页所需要的各种资源包括脚本、样式表、图片、字体等编译后，放到同一个目录中
   8.Duo是在Component的基础上开发的，语法和配置文件基本通用，并且借鉴了Browserify和Go语言的一些特点，相当地强大和好用

最终 npm 是我们现在一直用的工具，它是NodeJS的包管理工具，前端的包管理工具，是前端走向成熟的一个标志。

前端的成熟

脚手架的成熟和完善意味着前端开发的逐渐成熟。前端工具越来越复杂，前端的框架也越来越复杂，

1. angularJs 1.0版本的时候 很多人都喜欢研究它的源码，狂热的粉丝也很多，使用 angularJs 开发完整的跨平台的app,甚至 使用 angularJs 做了一套手机操作系统（我有幸参与过）。
2. 后来 angular 由 微软的 typescript 大神团队 和 谷歌的 angular 大神团队 推出了 angular 2（2016年），同时给angular框架 匹配了 标准的脚手架，可能是最早的一个标准的脚手架。
3. angular2的 工程化、模块化、通过脚手架 可以直接构建一个标准的初始化模板项目，具有完备的 单元测试 和 e2e(接口集成测试)，scss (css预编译语言)，assets(静态资源统一管理)。标准的: 路由、管道、模块、组件、服务、指令、元数据 的定义，rx.js 流处理库，封装了动画，使用typescript开发。
4. 国内 大部分由于 angular2 的源码太过难理解，几乎没有人完全看的懂，概念和相关的工具 又很庞大。本着对源码的执著追求， 大多数选择了 vue.js 。
5. vue.js 源码可以被大多数人看懂，体积小，可控性高，老项目的维护也可以单独使用，angular2独立构建、和node.js的关联太过紧密，不适合在老项目的维护中使用。vue.js 成功占领的国内大部分的市场。(个人感觉从使用上讲vue像是angular的简化版)
6. react.js 是facebook的项目，以追求极致的 性能 和 跨平台 两点成为前端的另一头独角兽。

知识点

javascript 系列

• es5+ 基础语法
• jQuery
• angular
• react
• vue
• rx.js

C3 系列

H5 系列

UI 库

• ant Desgin

其他

• JSON
• jsonschema
• Yapi
• iconfront

技术点

• SEO搜索优化，由于SPA引起的 TKD, 搜索引擎抓取不到的问题
• js、css 浏览器兼容性的问题
• 流媒体播放的问题
• websocket长连接于mqtt
• 静态资源优化CDN
• 浏览器最新的 WebAssembly 字节码技术？

算法&数据清洗

深度遍历&广度遍历

复杂场景总结

待办事项排期展示