前端开发入门总结

对于当前快速迭代和快速试水的互联网时代，规规矩矩地开发原生的APP略微显得有点迟缓笨重，而H5的低成本、高效率、跨平台、不用升级等众多特性，显得异常珍贵，于是也成就了一种新的快速开发模式：Hybrid APP。
本人也是刚接触前端开发不久，前端开发涉及到的知识点还是比较零碎，尤其是对初涉前端的同学而言，可能会有点迷茫不知道如何入手，本文章根据自己的学习过程，梳理一下前端开发入门所需要积累的知识结构，希望有益于大家。

一、基础知识

（1）HTML语义

程序员对HTML多少都有点了解，这一块知识可能相对简单，但是绝对重要，它是基础根本，需要认真具体看一下教程，打好基础功。

（2）JavaScript语法

JavaScript是基础知识中内容比较多，而且需要理解记忆的部分，首先你需要知道ECMAScript和JavaScript的关系是什么，前者是后者的规格，后者是前者的一种实现，因此JavaScript语法标准是有不同版本，目前是ES3、ES5、ES6,基本上所有浏览器都支持了ES3、ES5语法，但是ES6语法可能大多数浏览器还不支持，因此如果你需要使用ES6的话可能需要用插件编译成ES3、ES5语法。ES3、ES5语法可参看教程，ES6语法可参看阮一峰老师的教程。

（3）CSS语法

利用CSS可以定义很多样式，便于HTML使用，有利于提升开发效率，学习相关内容可查看CSS/CSS语法教程。同时为了更高效的开发CSS，你也需要了解Less ，Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。学习更多内容可参看Less 教程。

（4）开发工具和调试工具

开发工具可以选择sublime text 3，网上找个破解码就可以了，它也提供很多各种各样的插件便于开发；调试工具当然是选择谷歌浏览器(Google Chrome)，在开发者选项下，提供了JS控制台，便于预览和调试。

二、开发实战

有了以上基础知识，你可以开发简单的、不与后端交互的页面。但是若要加入一个前端团队开发产品，仅有以上知识还是不够的，这里首先贴出baidu FIS团队关于前端团队要开发一个产品时所需要经历的过程，个人感觉还是比较完备的。

其实，对于大部分开发者，尤其是基础开发者或小团队而言，在整个开发过程中，他们更侧重于技术选型，因为其它的你可以直接使用现成框架里解决方案帮你处理就可以了，比如百度FIS框架，当然一旦你的技术积累的一定成熟，你们的团队也可能会定制化自己的解决方案。
由于性能优化和自动化拆分，需要对前端开发有一定深入认知，才可能有所悟，因此对于入门者而言，我觉得应该首先抓住开发过程中所需的核心必备知识，然后逐步深入学习，这样随着项目经验的积累，对问题的认识也就越深刻，整体的知识体系会更加清晰。除基础知识外，我认为初学者还应当必备如下的知识点：

（1）前端基础框架库

虽然是万丈高楼平地起，但是站在巨人的肩膀上无疑是高效的，不论是最早的jquery、zepto，还是最近比较流行的Angular.js、Vue.js以及Facebook React框架，选择一种合适的，然后深入学习了解，用起来。

（2）模块化

分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。因此你至少学习或了解一种模块化方案，当然JS模块化方案很多，AMD/CommonJS/UMD/ES6 Module等，对应的框架和工具也很多，比如Seajs、Requirejs等等。

（3）前后端分离-模板框架

为了更高效的开发，前后端的开发能够隔离开来，因此会引入模块框架来解决这个问题，使得前后端只通过 JSON 来交流，常见的模板语言如Java 的velocity，Php的smarty，所以需要掌握学习一种模板语言，当然对于选用哪一种模板语言，这也取决于前端团队和后端协商的结果。

以上内容是本人入门前端开发的过程中的心得体会，以及对前端开发所需知识体系的总结，如果你觉得自己的入门知识体系已经完备，那就可以用fis3+fis3-jello尝试开发吧，可参照demo。
fis3：为你定制的前端工程构建工具，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。
fis3-jello：基于 fis3 针对 jsp/velocity 模板的前端工程解决方案。