浅谈Web前端开发进阶之路

摘要：互联网的发展如今日新月异，目前市场上最基础且需求量最大的IT技术主要是围绕着前端开发，后端java开发，以及嵌入式来展开。人工智能，大数据，云储存云计算等也逐渐成为近些年热门的话题。本文浅谈web前端开发的进阶过程，该项技术由于其应用广泛，实现效果丰富等特点已成为经济市场用户在网站或APP上进行阅读浏览所依靠的直接技术，也为给刚进入行业的毕业生以及有需求的其他人提供更合理的学习参考。

关键词：Web前端开发;HTML;CSS;JavaScript;前端技术学习

由于我国互联网行业的飞速发展，Web前端开发已经成为尤为重要的一门行业，本文阐述Web开发相关的主要技术，包括HTML5、XHTML、层叠样式表、JavaScript、Vue/React/Angular/Layui框架、跨浏览器开发、网页网站内容的优化设计。同时详细的介绍前端学习路线，目前前端开发工程师的职能需求。本文详细地对Web前端开发设计方式进行深入分析探讨，主要是为给同行业者提供更加合理的参考。

1 Web前端开发的主要技术研究

Web前端开发包含三个基本要素：HTML;CSS;JavaScript。但又不仅仅是这些，对于网站性能的优化，TCP网络协议的理解，后端相应知识技能储备，甚至组件的易用性复用性，Photoshop部分功能应用等都是一名合格前端应当掌握的。

（1）HTML5：全称为超文本标记语言（HTML）5。它其实是对HTML的第五次修订，本身并非是一项技术而是一套标准。国内通用的也并非单指这一标准，而是html与css3及JavaScript和api等的一个组合。

（2）XHTML：也是在HTML基础之上发展而出，称为可扩展超文本标记语言/他更加的严格，因此相对于松散的HTML语法，XHTML更容易被机器正确的解析，它与层叠样式表（CSS）结合后发挥了它更强大的功力，这是样式和内容分离的同时，又能有机的组合网页代码。

（3）层叠样式表（Cascading Style Sheets， CSS）：他是用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。页面编写者可以使用 CSS 更精确地控制内容的外观。 CSS 规则由一个选择符和设置的属性和值组成，其中的选择符决定应用这个规则的内容。

（4）JavaScript：JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。 同时也是一种广泛用于客户端 Web开发的脚本语言，常用来给 HTML 网页添加动态功能，例如响应用户的各种操作。完整的JavaScript 实现包含三个部分：ECMAScript、文档对象模型、字节顺序记号。JavaScript 的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。JavaScript 短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。它是专门为制作 Web 网页而量身定做的一种简單的编程语言。

（5）Vue/React/Angular/Layui框架：互联网的崛起，使web业务越来越复杂和多元化，更主要的原因是移动端的兴起以及需要分离数据，使得前后端分离成为主流，前端的任务也就逐渐变重。框架能很好的完成以下几大类问题：重复引用外部js;组件化;开发周期长;性能提升。目前市场上最常用的为Vue，React，Angular，Layui框架，各有优缺但相互之间也可以融会贯通。

（6）跨浏览器开发：在不同的浏览器或具有不同设置的浏览器上，Web页面的执行方式不一样。 一直以来“对多个浏览器进行测试”像是一条难以解开的咒语，因为需要对大量浏览器进行测试。对所有浏览器进行测试（尤其是目前）几乎是不可能的。跨浏览器测试的技术，既包括比较全面的技术，也包括快速但不严谨的技术。例如最优化跨浏览器AJAX应用程序。

（7）网页网站内容的优化设计：我国网站制作的Web前端开发设计方面的工作应该及时注意到对互联网网页内容的优化管理，其可能影响到网站的实际运营情况。与此同时，也可以在尽量防止我国互联网用户在下载时出现的相关问题，特别是存在的下载速率过度消极状态等问题，也就可能存在互联网网站页面的下载时间逐渐偏长，这些情况和问题都可能导致计算机互联网网站企业的真实运营工作效率的下降。所以，每个计算机互联网Web前端开发设计的技术人员，在对网页内容进行优化和处理的过程中，都应该尽量全面地考虑各个环节对于整体网站页面的运行作用和实际价值。

2 前端开发学习进阶路线

下面将以类思维导图的形式详细介绍一个入门到进阶直至高级的前端开发工程师的学习路线，希望能对大家有所帮助。

2.1 准备篇

（1）常用开发工具的安装配置：sublime、webstorm、Visual Studio Code

（2）HTML：理解如何浏览和创建网页，基本语法规范、网页之间的连接与跳转、标签节点层级节点

（3）CSS：基本语法、盒模型的高级用法、常用布局模型

（4）JavaScript入门：基础语法和变量、数据类型转换、分支与循环、函数、数组内置对象

（5）首页实战：CSS代码抽象与复用、浮动盒子布局、层级的使用、定位特性的各种使用场景

2.2 基础篇

（1）JavaScript基础：JS语言基本构成 、变量与表达式、数据类型、语句结构、函数基础

（2）DOM + BOM：节点对象的操作、事件特性及使用、常见的内置DOM对象、常用的BOM功能

（3）网页特效与进阶：网页特效中常用的编程接口、动画编程与事件、缓动框架封装和应用、正则表达式及其应用

（4）jQuery：选择器、常用API、插件机制、原理分析、项目实战

2.3 核心篇

（1）HTML5+CSS3：语义化结构、其他常见API、CSS3选择器和新属性、CSS3过渡和动画、CSS3伸缩布局

（2）服务端编程：端的概念、Web服务器概念、XML与jSON

（3）PHP：PHP基础语法、PHP服务端编程基础

（4）AJAX：异步数据交互、模板引擎的使用、跨域的实现方案

（5）移动Web开发;响应式布局、Bootstrap框架剖析、Zepto.js库、预编译CSS

2.4 进阶篇

（1）面向对象在JS中的体现与实践：面向对象理论、对象基本概念、对象属性和方法

（2）开发过程中常用的模式与思想：开闭原则、MVC思想、高内聚低耦合、工厂模式

（3）JavaScript高级特性：通过构造函数创建对象、原型对象和原型链、继承的多种实现方式、函数的本质以及Function构造函数、作用域链、闭包

（4）封装一个自己的框架：选择器框架、CSS操作封装、属性操作封装、其他DOM封装

2.5 高级篇

（1）前端工作流：自动化流程工具使用、源代码版本控制、依赖项管理工具、项目模板脚手架、

（2）流行框架：Angular基本使用、Angular高级特性、Vuejs基本入门和路由、项目实战

（3）模块化开发：模块化开发规范、常用的模块（下转页）

（上接页）化开发工具、RequireJS与SeaJS、AMD/CMD、统一规范UMD

（4）NodeJS：Node介绍、基本操作、常用内置模块、高级特性、常用框架

2.6 移动APP开发

（1）混合式应用开发：混合式平台架构、混合式开发实践、当前市面常用APP端实战

（2）微信开发：微信公众号学习、平台API对接、X5兼容处理、内置接口

（3）React：组件化思想、核心特性、JSX、TODOMVC案例

（4）React Native：环境与工具、常用组件与插件、综合案例实践

（5）其他移动端APP开发框架：phoneGAP、AppCan、HTML5+、Framework7

学习完这些因该对前端开发有了基本的认知，想深入学习还需要学习后台和前台的协作方式，从全局的角度去理解项目的整个生命周期等等。

3 Web前端开发工程师

用户需求的激增促使着技术的进步，现如今，市场上对于用户体验的要求在不断上涨，这对于前端开发工作者的要求，技术难度逐步增大。前端开发工程师这一职业，也逐步有了更为清晰的划定判别，告别了切图仔的称号，从平面上的设计中脱离开来，更加全面的投入到制作中去。此时前后端分离的工作模式就要求了一个标准合格的Web前端开发工程师既要能和上游的UI设计师，视觉设计师，产品经理等沟通好，确定需求，又要与下游的后端开发工程师们沟通数据功能的实现等。这是一个对于Web前端开发工程师知识面的试炼。

虽然前端开发工程师的入门门槛相比较于后端会低，但他技术上升的空间是宽广无限的，比较适合对该行业有兴趣的工作者切入学习。

4 结语

前端开发的学习其实是一条很长久的道路，我们需要在这个旅途中不断地充实完善自己，并且对与新的技能与规范，要有求知若渴的态度。一位好的前端开发工程师在知识体系上既要有广度，也要有深度，既要有具体的技术，又要有抽象的理念，这都是不同于服务端的。路漫漫其修远兮，吾将上下而求索。

參考文献：

[1] 魏娜.Web前端开发技术研究[J].现代计算机（专业版），2011（29）.

[2] 张爱华，吕京涛.CSS快速入门[M].青岛出版社，2000.

[3] 王保平.改变世界的Web前端开发[J].程序员，2009（02）.

作者简介：张婉杰（1997—），女，本科，研究方向：网络工程。

（作者单位：武汉轻工大学）