前端快速入门

为何快速入门

　　实际工做中，不少的后端同窗可能会写一些前端的东西，常常发生的是，后端会吐槽不会写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比较多。