前端快速入门

为什么快速入门

　　实际工作中，很多的后端同学可能会写一些前端的东西，经常发生的是，后端会吐槽不会写CSS，JS的代码写的太难受。作为一名专业的前端，当然希望后端同学们能快速了解前端的一些概念，并顺利的完成开发任务，于是写下这篇文章来帮助后端同学们快速入门前端开发。

在浏览器端发生了什么

　　有一道经典的面试题是说：从浏览器输入url到页面渲染完成这一过程都发生了什么？这个问题可以说是一个非常常见的场景，足以涵盖大量的计算机知识，可深可浅。我们来简单的了解一下在浏览器端发生的过程，以此来学习前端的一些概念。一般情况下，一个url会对应了服务器上的一个HTML文件（这个叫网页文件，格式类似于XML），浏览器获得HTML文件后，开始解析并渲染HTML文件，遇到带有src的link标签，或带有src的script标签时，就会再去下载对应的CSS文件或JS文件。style和script标签，也可以直接包含相应的语言内容，这样浏览器就直接解析或执行了。什么是CSS文件呢？CSS(层叠样式表)的内容是一些样式的规定，规定了什么？HTML文件的主体内容其实是网页的结构化的表示，其中的标签都有一定特殊的含义，相当于网页内容的骨架，而CSS文件则是骨架上的装饰语，告诉了浏览器这些 结构内容的外貌。什么是JS文件呢？即Javascript脚本文件，JavaScript是一门运行在浏览器端的脚本语言，生动的网页靠的就是JavaScript。所以浏览器发生的过程大致应该是，渲染HTML所声明的网页结构内容，根据CSS的规定来修饰这些结构，执行JavaScript来修改结构或赋予其中一些结构一些动作功能（白话，非真实过程）

三剑客

　　HTML、CSS、JavaScript，被称为前端的三剑客。各有其功能，具体为什么是分开的三者就不纠结了。HTML主要是标签内容，浏览器根据其内容来渲染网页，在浏览器内部的表示是DOM树（节点是DOM对象的树这种数据结构）CSS有自己的语法，主要是选择器加上样式属性，浏览器解析后对应到DOM树来进行具体图形的绘制javascript, 是一门动态语言，浏览器本身提供了大量的api来操作DOM树，并且也有其他方面的api支持如canvas等三者的基础知识可以通过w3schol或菜鸟教程这两个网站来学习

网页编程的演变

　　有时候可以看到以前的网页，会发现那时的大多都是紧凑的文字，现在的网页就变得十分复杂而且视觉效果更炫。 可以把网页编程大致分为3个阶段：
一阶段: 大部分网站就是由许多的带有大量文字的HTML组成，还有少量的CSS控制样式。

二阶段：得益于AJAX技术，网页开始变得生动灵活，在AJAX之前提交信息到服务器就是表单提交，会刷新网页，有了AJAX才能在不刷新网页的情况下与服务器进行通信，互相传递数据，而且CSS也有所进步，开始注重网页的用户体验，被称为Web2.0时代。

三阶段：即当前阶段，并且还在继续发展，持续演变。在之前的阶段，网页都是由服务器渲染好，传给浏览器来展示，后台的服务器技术也出现了很多网页模板框架，如jsp，asp，还有php这种混合写法。目前网页开发的一个典型代表就是SPA（单页面应用），SPA的思想是一个网站只有一个HTML文件，用户在网页上的交互，网页结构的变化都交给Javascript来控制，网页对JS的要求就开始变高。

前端框架

　　目前流行的三大前端框架：React、Vue、Angular，三大框架各有特点，Vue易上手，Angular大而全，React生态好，总的来说都能胜任开发工作，具体对比可以自行搜索框架虽然有好几个，但他们解决的问题其实是一个问题，即通过Javascript控制网页。现代的JS框架都是MVVM框架了，在这些MVVM框架以前还有MVC框架如backbone.js，更简单的就是直接一把梭，jquery来操作DOM，拼接HTML字符串这种来控制网页。现代的MVVM（Model-ViewModel-View-Controller）主要改善了如何更新视图（即操作网页的DOM），通过操作数据，数据的变化映射到DOM的改变。避免了直接修改DOM。我们知道浏览器内部是有一个DOM树来表示网页的结构，前端框架一般会有一个虚拟DOM，来与之对应，当JS修改数据时，可能会影响虚拟DOM的变化，虚拟DOM变化后，会将其变化通过JS的DOM的API应用到浏览器的DOM树上，进而触发网页的变化。前端框架还有一个特点就是组件化，通过将能重复利用的DOM结构封装成可复用的组件来提高开发效率，但这种组件的封装都跟框架有关，只适用于同一种框架。框架无关的WebComponent还在发展中。

前端构建

　　有很多语言在执行前都有一个编译链接的过程如C，JS是运行在浏览器端的脚本语言，是不需要这种过程的，但现在前端项目也是有一个先构建再发布的过程的。当前的网页开发主要就是JS的编写了，传统的网页组织是手动的在HTML文件包含所需要的script链接和样式的link链接，这种手段在大量的JS面前难以为继，前端构建也是一个发展的过程，目前主要是依赖Webpack来构建。Webpack会由入口的JS文件出发，将其所有的依赖组成依赖图，分割代码成一块一块的。一般会在HTML里面生成几个script标签，再通过JS的异步获取模块能力来加载后续需要的JS模块，具体的构建过程可以搜索了解。

nodejs

　　nodejs是JS在服务端运行的环境，基础是chrome中的JS引擎V8。现代的网页开发借助了nodejs的很多能力来提高开发效率和工程化开发，webpack就是典型例子。
所以开发的先决条件是安装node.js，安装完成后会带有一个npm。npm是nodejs的包依赖管理工具，类似于其他语言，如maven，gem等。开发过程中会需要安装大量的第三方JS包，所以要学习npm的用法（或者是另一个工具，yarn）。一些JS包会被webpack打包到项目中，一些则仅仅在开发过程中需要，可以研究学习一些项目的package.json文件，来明确这两种的区别。

Vue快速入门

　　以Vue为例来快速入门前端项目，可以先根据Vue官网来学习框架的基础知识，并跟着相应的指南来写一下代码例子。
典型的Vue项目，不仅有Vue框架，还有其全家桶（Vue-Router、Vuex）。试想，网站只有一个HTML文件时，那网页跳转怎么办，在单页面应用中的跳转并不会引起网页刷新，而是在其内部的router定义下变化，具体可以看Vue官网相应解释，所以Vue-Router主要是解决的问题是应用的页面与url路径的关系。所以要先看项目的router文件的定义，来知道应用的每个页面对应的Vue文件在哪？一个页面一般是一个Vue实例，里面有许多的子组件也都是Vue的实例。
项目一般有一个main.js来初始化第一个Vue实例即根实例，然后挂载到具体的DIV上，一般是#app这个div， 其余的实例均是其子组件，渲染一般也都在#app内部。实际上Vue的SPA就是一个Vue组件树。组件的相互交互有一定的规范来避免很多bug的产生，并提升代码的可维护性，所以实际开发要参考Vue官网的代码指南来避免一些不好的代码操作。

概念补充

　　 AJAX：Asynchronous JavaScript and XML，异步的JavaScript和xml。但目前都是传递json格式数据而非xml格式的数据了，是一种JavaScript利用浏览器发送请求与服务器通信而不需要刷新网页的技术，利用的仍然是HTTP协议，所以重点还是在HTTP协议上，浏览器因为安全问题而对ajax有一些限制，如跨域的问题，解决方案现在都是cors了，以前是jsonp比较多。

转载于:https://www.cnblogs.com/pompey/p/11172641.html