前端的起源、架构及变迁
一、前端起源 1990 年，第一个web浏览器诞生，Tim 以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器。 1991 年，WWW诞生，这标志着前端技术的开始。 在开始之前先看看什么是前端 现在的前端其实是个很大的范畴（web，移动端（Hybrid App），游戏，桌面端(electron.js, NW.js)，小程序等）。 web前端开发：针对浏览器的开发，代码在浏览器运行，它实质是前端代码在浏览器端被编译、运行、渲染成页面。前端代码由HTML、CSS、 JavaScript构成。 后端：针对服务器的开发，代码在服务器运行。 二、前后端不分的时代 初期静态网站 互联网发展的早期，WWW（World Wide Web）、浏览器、JavaScript相继诞生，最开始大多是HTML静态网页。 动态网站技术阶段 比较有代表性的技术有JSP 、PHP、ASP、ASP.NET 等语言，它们都类似，是运行在服务端的语言。 那时候没有专业的前端，前后端开发是一体的，前端代码是后端代码的一部分，前端写静态模板，后端加数据套模板。 浏览器展现页面的流程是： 1、后端收到浏览器的URL请求，后端路由响应 2、后端生成静态页面 3、发送到浏览器渲染成页面 后端 MVC 的开发模式 那时的网站开发，采用的是后端 MVC 模式。 Model（模型层）：提供/保存数据 Controller（控制层）：数据处理，实现业务逻辑 View（视图层）：展示数据，提供用户界面 前端只是后端 MVC 的 V，那时候前端的 V 是在服务端渲染的。 PHP，ASP，ASP.NET，JSP等都是典型的这样的模式； 三、AJAX诞生 AJAX诞生是前端发展的一个里程碑，Ajax 技术诞生，改变了一切。 1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。 2005年2月，AJAX这个词第一次正式提出，指围绕这个功能进行开发的一整套做法。从此，AJAX成为脚本发起HTTP通信的代名词。 2006年W3C发布了它的国际标准。 AJAX是基于现有的Internet标准，并且联合使用它们： XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML 、JSON(作为转换数据的格式) lamp AJAX应用程序与浏览器和平台无关的！ 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面 当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。 四、前后分离时代 1、jQuery 时代（开始注重前后端分离） 2006年，jQuery发布，它当时的竞争对手很多：Dojo、Prototype、ExtJS、MooTools。 那时jQuery的宣传口号仅能说是它的性能上升了100%、200%、300%。 2009年，Sizzle选择器引擎研发成功，jQuery才取得压倒性的优势。 当时前端界首要面对的是浏览器兼容性问题，jQuery在处理DOM兼容上真是知微见著, 发掘出大量的DOM/BOM兼容方案（例如Dean Edwrad的addEvent()， IE的px转换方案，domReady的doScroll方案，globalEval的兼容方案等） jQuery也打破了前端开发者的编程思维，之前是按照后端的开发思路来的：做一个业务就先封装一个类，有了这个类后，再想办法传入一个DOM，然后再通过类方法操作DOM。而jQuery是DOM为中心，开发者可以选一个或多个DOM，变成jQuery对象，然后进行链式操作。当时为了改变用户的思维，国内的高手写了不少文章来引导大家。 其次，开发者们已开始注重前后端分离，并要求不能污染Object原型对象，不能污染window全局变量。这样，jQuery只占用两个全局变量。 再次，jQuery非常轻量级，采用Dean Edwards编写的Packer压缩后， 大小不到30KB。并且里面实现得非常精妙，以令人瞠目的手段解决各种兼容痼疾。 为了学习这些技巧，高手们翻了一遍遍jQuery的源码，所以网上有大量关于其源码详解的书藉。甚至前端工程师在面试时也会被考到jQuery的源码实现，这样，jQuery在国内更加流行。
前端的应用领域
1、企业官方网站的开发与维护 这个应该是最简单的了，基本上是纯静态页面的展示，就算有交互模块，应该也是比较简单的那种。 2、门户类型网站的开发与维护 例如像搜狐一样的门户网站，相对来说也不难，这种网站一般分成很多个模块，每个模块的展现结构是非常类似的在这里插入图片描述 如何做到可复用性强，对产品需求变更迭代时更加友好，那就很考验开发人员前端三大语言的设计模式了。 3、电商网站 例如京东和淘宝，里面不仅有对用户友好的展现方式，合乎逻辑的交互方式，还会涉及到网站、商品的色彩设计、排版设计、交互设计。 此外，除了单纯的展现，你需要考虑更多的东西了。 例如，不同端的字体展现，响应式布局，图片大小，静态资源缓存，CDN部署，Ajax动态数据交互。这些还都是偏纯展现的。 还会有涉及到个人信息填写、支付款项、密码输入等等，会涉及到一系列的前端安全问题。 4、后台管理系统 一般这个是给内部人员使用的，所以可以不用考虑太多的兼容性，直接要求统一使用谷歌浏览器或者火狐。在这里插入图片描述 5、H5的活动营销页、红包落地页、明星投票页等等一系列与营销活动相关的移动端页面。 这些需要你的CSS功底非常扎实，常常要写一些动态效果、动画效果，越生动越吸引用户参与。 6、移动端视频播放页面 最近短视频崛起，但是很多短视频App中的页面是Web前端页面，这样做的原因是App过审麻烦且时间周期长，业务需要快速迭代和修复的情况下，前端责无旁贷。 7、微信小程序 微信、支付宝、百度等大企业，先后推出了小程序，当然身为前端开发的我们是必须掌握的一门技巧。 8、造轮子写工具、写框架，搭建基础设施 公司逐渐发展壮大以后，会面临一个问题，那就是如何将前端基础设施做起来。基础设施对前端的工程搭建与发展来说，太重要了。
