layui前端页面table表格怎么格式化转换时间_如何快速、高效的成为一名前端程序员 （上）...

前言

20年前，我写下自己的第一行HTML代码。

那时候，web开发还处于web开发的“蛮荒”时代，也没有“前端工程师”这个职业。

20年来，伴随着我的职业生涯，我基本经历前端技术的整体发展。从最初的给Java/C#打辅助，再到后来的Web UI工程师，再到现在的“大前端”时代，前端工程师独立出来，成为一个炙手可热的职业。

在“混合编程”时代（asp、http://asp.net、jsp），web页面虽然也会使用JavaScript，但基本上就是做一些小动画，及表格验证。大头的业务逻辑，还是要通过form整体提交到后端，由C#或Java来执行。因此，在“混合编程”时代，前端技术更多是给Java/C#工程师打辅助用的。

当然，从现在的编程理念看，这种做法实在是有点“权责不清”。但是作为一个工程师，如果一路走过来，无论最终是走向后端，还是前端，亦或是全栈工程师，这些“历史”经历还是有巨大价值的。

因为我的个性背景，日常工作中，常在前后端（主要是Java）技术之间切换。无论是开发，还是教学，我都感到两者之间有着巨大的差异。

Java的困难之处在于某些知识点有一定难度，但好的一面是重点突出。因此在学习过程中，只要抓住关键点（例如Spring的核心原理），就能提纲挈领的往纵深前进。

但前端就不一样了。

前端工作的本质就是构建用户体验，而要构建用户体验则必然需要多维的技能。所以，对一个前端工程师来说，要掌握的技能就非常庞杂。学习过程中，最大的感觉就是抓不住重点，周期漫长。极大的考验自学者的耐心。

因此，当我起笔写这篇文章的起初，始终找不到状态，首要的原因就是找不到一个好的方向去契合“高效学习”的立意。

直到年初，我作为一个面试官，参与了几次前端招聘，才突然从中找到了写作的灵感。

虽然我做前端开发这么多年。但因为前端知识太过庞杂，许多知识细节都记不确切，也无法完全手动的完成全部编程工作。对我来说，有效的工作方式是，写代码过程，随时参考过往的积累，包括文档和源码。

因此，对一线的程序员来说，不是所有的知识都在脑中记的确切，而只要做到在脑中有完整的“知识索引”。等碰到具体的问题，再按照索引去查询具体的知识点来解决问题。

这并不是一种“偷懒”的做法，而是一种现实且理性的工作方式。

按照这个思路，对前端学习者来说，完全可以采用一种“走马观花”的方式，快速高效的学习前端。在前端学习中，这种方法之所以可行的，是由前端的知识特点决定的：知识点庞杂，但知识点之间的连贯性不是特别强。但反之，如果用这种方法学习Java则不行。

即使如此，在这篇文章中，我还是要“强行” 寻出一些重点，特别标出来。因为虽然从开发的角度看，前端学习可以“走马观花”。但要入行就得面试，而面试官需要在限定的时间里筛选人才，就必然有相对的重点。因此，这些知识点也会成为本文特别的关注。

同时，我还在分享中插入了一些作业。这些作业都来自我的实践。因此认真完成它，能有效的加强自学效果。

下面是根据我最近的开发实践，总结出的前端技能栈。整篇文章也是以该图为基础展开的。

这个图肯定不能涵盖前端的所有技能，但却肯定是一个踏实的东西，毕竟它来自实际的项目。

正如前面说到的，前端的知识太过庞杂。如果用一篇文章全部讲完，篇幅太长，不利于大家的阅读。所以，我把这篇文章分成相对独立的上下两部分。

上半部分讲解前端工程师的“核心”技能（HTML、CSS、JavaScript），后半部分以React为例，讲解更“现代”的前端编程手段。

下面是上半部分的顺序学习计划：

下面就让我们正式开始。

HTML4.0

如果我们把一个web页面看做一个报纸版面，那么构成这个版面的基本就是HTML元素。

用一个不完全精确的比喻来形容，就像小孩搭积木一样，HTML元素就是像工程师手中的各种积木块。

对一个软件工程师所要求的智力水平来说，学习HTML难度并不大。问题是HTML包含的全部元素，不好找出那些是重点，也不好那些有用，那些没用。因此现实的学习方法就是把所有的HTML元素都逐个过一遍。

但好在HTML元素之间没有强关联性，也不涉及复杂的逻辑。因此并不需要阅读系统的大部头著作。日常实践中，无论推荐给别人，还是自己使用，我都钟爱w3chool的在线教程。目录整理的很好，而且每个元素都有在线demo。

下面是链接：

http://www.w3school.com.cn/html/index.asp

按照w3chool的目录，从上到下过一遍，不用全部看完，到HTML5（不包括）即可。

为了避免“眼高手低”，阅读别人的代码是一方面。同时一定要亲自把每个元素都手动敲出来，在浏览器中跑起来，直观的感受一下这个元素到底长什么样子。

然后还要发问一下自己：这个元素到到底能用在那些地方？那些大公司（例如京东）的页面，都在哪里用到了这个元素？

这个思维的过程非常重要。就好像我在序言中提到的那样，前端工程师的知识面非常庞杂，记住所有的细节是不现实的，重要的是做到“心里有数”。等遇到具体的问题时，脑子里要能够立即涌现某个元素的形象。

在面试时，有些面试官为了考查应聘者的基本功，会要求你手动写出一个基本的页面、包含基本的元素（包括html、head、body、div、table元素，引入外部CSS、JavaScript）。

上面的要求也是学习HTML的结业作业。

HTML逻辑体系并不难，面试中可考查的逻辑点不多，下面是我能想到的：

1. 块元素与行元素的区别。
2. 表格（table）的使用。
3. iframe的使用

更多的面试点，你可以通过阅读《XXX面试大全》来获得。

建议学习时间：2周

CSS

一个web页面的布局，HTML元素只是提供了基本的框架和布局，但最终长什么样子，关键还是应用在其上的样式表（CSS）。

用一个不完全准确的比喻说，如果把一个设计良好的页面比作美女，那么HTML是美女的骨骼，CSS则是美女的肌肉、皮肤、妆容和衣服。

所以，就一个页面最终呈现出的样子，CSS的作用要远大于HTML。对前端工程师来说，CSS也是一个要重点掌握的技能。

CSS的特殊之处在于，它是一门介于设计和编程之间的语言。要运用好CSS，除了程序员的抽象思维外，还需形象思维（例如空间想象力）。所以，我认为CSS是最能体现前端工程师职业精髓的东西。

同样效果的页面，由不同的工程师编写，代码质量可以有天壤之别。

与HTML不同，CSS有内在的逻辑体系，因此就不能用“走马观花”的方式来学习。还是用系统的，思辨的方式去学习。

我学习CSS的时候，看过几本书，其中最喜欢的是《精通CSS：高级Web标准解决方案》。这本书好就好在不是简单的教你如何使用CSS，而是从更高的层面向你阐述：为什么要这么用。也就是说把CSS从术上升到道。

这么多年过去了，我依然能记得书中的一个观点：

div布局比table布局好，不仅在于更好扩展，更在于语义的自然，及带来的高可读性与可维护性。

这也是我面试时特别钟爱的一道题。

别说，虽然并不艰涩，但给出“完美”答案的人却不多。

当HTML和CSS学完之后，理论上你已经具备设计任何复杂页面的能力。为了加强学习效果，建议你先在这里暂停一下，布置个作业加强下学习效果。

这个作业，我当年选择的是仿写网易的首页。今天门户网站已不再流行，所以建议你仿写其他页面（例如电子商务）。

练习的时候，尽量使用chrome。如果某个效果你想不明白，随时可以打开chrome的开发者工具，观察一下对方是怎么做的。

建议学习时间：3周

JavaScript（ES5）

JavaScript（ES5）是整个前端技术栈中最重要，最难，也是体量最大的部分。也是面试的重点和难点。

在实际开发中，JavaScript更多是以浏览器为宿主去执行的。又因为是脚本语言，所以相对于Java，深度还是浅一些，但难在量大，重点不突出。

就拿那本最经典的《JavaScript权威指南》（著名的犀牛书）来说。1000多页的容量，基本没有废话。我过了一下，真的不敢断言那些知识点可以完全略去不学。所以，如果以此为提纲，完整学习JavaScript所要投入的时间之多可想而知。

2年前，为一个前端项目做准备，我又通读了一遍《权威指南》。以我的基础，前前后后竟又用了将近1个月时间。如果是一个初学者，真要完整啃下来，没个小半年，想都别想。

因此，从学习的高效、专注出发。对初学者，不建议首先通读《JavaScript权威指南》。一则严重挫伤初学者的热情，二则战线拉的太长，很可能学着后面忘了前面。

更科学的方法，应该是先通过某个“快速”教程，把JavaScript先在实际项目中用起来。这样下来，一则通过正反馈提升了自信力，二则有了一定的感性认识之后，带着疑惑，回过头来阅读《JavaScript权威指南》，无论是学习效果，还是自信心都会大大增强。

事实上，我学习JavaScript的过程，基本如此。

先在网上读了几篇入门文章，然后尝试编写一些demo，然后再在实际开发用起来。遇到问题，点对点的到网上搜索现成的解决方案。一段实践后，慢慢才有了更系统的学习需求，此时再静下心来阅读《JavaScript权威指南》，事半功倍。

对于自学者来说，我推荐你阅读w3chool的JavaScript在线教程，重点突出，而且每个知识点都有代码演示。

下面是链接：

http://www.w3school.com.cn/js/index.asp

在学习的过程中，不仅要看懂demo，一定要自己手动敲下来，跑起来，避免眼高手低。

顺利的话，w3chool的在线教程完整过一遍，2到3周足够了。

但是学完之后，此时我依然不建议你深入学习《JavaScript权威指南》。而是用1到2周的时间，把这本书粗粗的浏览一遍。其中的知识点如果一眼就能理解自然最好。如果实在不能理解也不要纠缠，大胆的略过往前走。

这次阅读的最大目的不是让你精通JavaScript，而为了帮助你建立JavaScript的“知识索引”，从而做到心中有数。

当然之后，如果你是一个已经入行的前端工程师，在你的职业生涯中，无论如何都要挤出时间把它通读一遍。如果你是一个还没有入行的学生，掌握了《JavaScript权威指南》的知识点，基本上能应付绝大多数面试。

如果你确实没有这么多时间，那至少要阅读下本书的第8章“函数”。因此在JavaScript中，函数是一等公民。尤其是其中的“闭包”概念，既是日常开发中的难点，也是面试的重点。

建议时间：6周

综合练习1

学到这里，你已经具备初步的前端知识（HTML4 + CSS + JavaScript）。因此，该给自己布置一个总综合Demo练下手了。

无论是我在公司内部的技术分享，还是我自己学习一门新技术，我都特别钟爱用“学生管理系统”来练手。因为这样的系统，逻辑简明，包含基本的“增伤改查”操作，标准的“麻雀虽小，五脏俱全”，实在是自学好伴侣。

下面是该demo的UI：

主要功能如下：

1. 用一个table呈现学生列表。
2. 点击“New”按钮弹出一个新建学生对话框
3. 每一行的最后有两个按钮“Edit”和“Delete”，点击Edit弹出对话框编辑，点击Delete删除。
4. 对任何一个学生进行了操作（增删改查），都要立刻更新界面。

要完成这个demo，需要掌握以下技能：

1. 用div布局（包括弹出窗口的绝对定位）
2. 元素触发事件
3. 表格（table）的用法
4. 操作DOM元素（增删改查）
5. HttpRequest（ajax）操作
6. …

这个demo只有一点不好做，就是学生列表到底该存在哪里？

正常的做法是存在数据库中，然后前端通过ajax和后端的REST接口交互。但这就需要后端技术（例如Java）的支持。这对一个初学者来说，并不容易。因此，最干脆的做法就是舍去网络操作。而把学生列表数据直接存储在内存中（例如数组）。

注：我也在考虑是否要编写一个基本的Java服务程序，提供基本的增删改查接口，来方便前端前端自学者来练习。

建议学习时间：1周

JQuery

JQuery虽然只是一个JS辅助库，但因为太常用了，俨然已成为JS的基础设施，所以学习前端，必然要学习JQuery。

在没有JQuery的时代，使用原生的JavaScript无论是操作DOM元素，还是进行ajax操作，除了异常繁琐外，而且还要不断处理各种浏览器（尤其是万恶的IE）间的差异。可以说，JQuery的出现，极大的提高了前端程序员的生活质量和工作效率，是前端程序员的“瑞士军刀”。

因此，JQery的重要性怎么强调都不为过。

JQuery本身的概念并不复杂，也没有太难理解的逻辑体系。最常用的就是通过“选择器”选择、操作DOM元素，通用的ajax函数进行网络请求等等…

我学习JQuery的时候，通读了《jQuery基础教程》。目前看，这依然是一本值得推荐的好书。但是这本书的内容还是蛮多的，通读下来还是需要些时间的。如果你的时间有限，想要在第一轮学习中做到快速高效，阅读前六章即可。

前六章的内容基本可以满足你日常开发中80%的场景。而第七章之后的章节，在第一轮学习中，快速过一下，知道内容大概，心中有数，用时再查不迟。

这里要特别强调一点：JQuery只是一个基础库，是个工具集，不属于JavaScript本身。

因为在实际面试中，有很多求职者在日常开发中过于依赖JQuery，以至于忘记了原生的JavaScript的操作。而很多面试题偏偏要求你不用JQuery，用原生接口来编写程序，从而考查面试者的基本功。

建议学习时间：3周

BootStarp

对前端工程师来说，CSS是一个又爱又恨的存在。因为CSS是一个介于编程和设计之间的东西，既需要空间思维，又需要逻辑思维。因此同样的效果，不同的工程师编写，实际的代码可能会有巨大差异，甚至是在思路上都会有根本不同。

但CSS既然是前端工程师的基本技能，自然就期望CSS能像编程语言一样，有统一的设计模式，可复用的组件。 一方面提高了开发效率，另一方面降低了维护成本。

而BootStrap就是为此而生的。

BootStrap总的来说，可以分成两部分：一套通用的CSS样式，一套通用的UI组件。这两套东西合起来，基本上解决了企业开发（尤其是后台业务系统）绝大部分的设计需求。

而且，因为Bootstrap的权威性，围绕着它，形成了一个强大的社区，有许多第三方开发的样式和布局。因此，如何你的应用没有特别的个性化需求，建议首先到社区搜索一下，十有八九有你想要的东西。

可以这样说，BootStrap在很大程度上解决了CSS布局的标准化问题，也成为前端工程师工具箱中的必备，必学。

BootStrap的学习可以分成两个层阶：了解基本用法 -> 深入原理。

如果你只是想简单的使用BootStrap，因为之前你已经系统的学习了CSS和JavaScript，所以BootStrap的导入和使用并没有任何难度。你也不用阅读任何的书籍，只要把BootStrap下载，然后参照其中的Sample即可。

但是，因为BootStrap本身是一个设计非常良好的组件库，通过深度研究BootStrap的原理，能够大大提升前端工程师的功力（例如对移动优先，响应式布局的理解）。

如果你有兴趣往深处走，我推荐你阅读《深入理解Bootstrap 》（机械工业出版社）。

当然作为初学者，时间有限，则完全可以从实用角度出发，做到理解Bootstrap的设计目标，知道其中有什么内容，如何使用即可。至于更深的原理，可以作为更长远的学习目标。

建议学习时间：2~4周

HTML5

虽然实际开发中，对一个前端工程师来说，他不会刻意的把HTML、CSS、JavaScript做版本上区分。但在学习过程中，这种区分还是必要的，基于以下原因：

HTML5相对原来的版本，增加很多功能，但这些新功能很多都是为了“弥补”老版本的不足，也可以看是对老版本的“增强”。因此，从老版本学完，单起炉灶，单独学习新版本，就能清晰的体会到知识 的“进化”。无形中，也加深了理解。

HTML5中的许多新特性是需要JavaScript的支持的。

例如HTML为了增强绘图功能，添加canvas元素，但真要操作这个元素，在其上绘图，必须通过JavaScript来完成。除此之外，还有Local Storage等功能，也都是需要JavaScript支持的。

因此学习HTML5，必须在学习JavaScript之后展开。

HTML5反映了这10年里web前端开发的变化，尤其是移动互联网。因此某种意义上，单独学习HTML5的过程，也顺便增强了对移动开发的理解。

市面的出版物来说也大体遵循这个路数：底层是经典教材，靠上的是HTML5+CSS3的综合讲解。

正如上面所说的，HTML5更多是对上一版本的增强，因此学习的过程可以简单理解为逐类、逐个了解新特性的的过程。下面我列举下HTML5新增的特性：

1. 语义网
2. 离线&存储
3. 设备访问
4. 通信
5. 多媒体
6. 图形和特效
7. 性能和集成
8. 呈现（CSS3）

其中的内容，大部分只要走“走马观花”的过一遍即可，有个印象，用时再查都不迟。学习的重点要放在：HTML5到底增加了那些元素？这些元素是为了解决什么具体的问题？

按照这个思路，我推荐一本书《HTML5移动Web 开发实战详解》（作者：林珑）。这本书好就好在不仅是HTML5新元素的罗列，而且“前因后果”的讲解了这些新元素的现实意义，以及如何解决了实际开发中遇到的问题，真正做到了“实战详解”。

建议学习时间：3周。

ES6

到此为止。对一个前端程序员，你即使不往前学习ES6，其实你也可以完成全部的web开发需求，你已经是一名合格的 “古典”前端程序员。

老实说，从参加工作以来，我对JavaScript一直是抱有偏见的，觉得它是一门“玩具语言”，难堪大用。在ES6之前，JavaScript最缺乏的就是对大型应用的组织能力，例如没有完备的“类”的概念，缺乏对“包”的管理等等。

当因此，我遇到大型的前端应用，要么是坚持前后端（例如JSP）结合，要么直接上桌面程序（例如 WPF）。这种观点直到ES6和大型前端框架（例如React、vue.js）的出现，我才做出了改变。

和HTML5一样，ES6的推出，也是为了响应这10年以来，web开发中越来越强烈的“大前端”需求。从而能够构建强壮、复杂的大型前端程序。

无论是单独使用NodeJS，还是Node.jd + React组合，ES6都是基础语法。因此，如果你要往前走（本文的下篇），ES6是一定要掌握的。

ES6除了增加了JavaScript构建大型程序的能力，同时也增加许多语法及函数的扩展（例如对数组、字符串的扩展）。这样就大大增强了JavaScript的表现力，使编程更“轻松”了。

而且，即使你确定你不使用Node.js，也不使用任何现代框架（例如React、vue.js）。学习ES6也是非常有价值的。因为，随着ES6的推广，越来越多的特性正被浏览器内置支持。就这一点，ES6都值得学习。

学习ES6，目前我读过的最好的教程是《ECMAScript 6 入门》（作者：阮一锋）。作者特别良心的是，他把这本书完全在线开源，无论是阅读起来，还是调试起来都非常方便。下面是这本书的在线地址：

http://es6.ruanyifeng.com

建议学习时间：3周。

综合练习2

到这里，对一个前端工程师来说，该掌握的基础知识已经到位。因此，需要再次综合练习一下，还是用前面提到的Demo。

这次练习的主要目标是，使用新学到的知识（JQuery 、BootStrap 、 HTML5 、ES6）把原demo改造下，我能想到的操作有：

1. 元素的选择/操作全部用JQuery操作。
2. 把原生的HTTPRequest用JQuery的ajax函数替换。
3. UI中的按钮/表格/弹出窗，全部用BootStrap实现。
4. ...

建议学习时间：1周。

后记

这篇文章，7000多字，从提笔到最终完成，3个月过去了。坦率的说，最终的完成度我依然不满意。

我本来写作的目标是帮助大家快速高效的学习前端知识。但通篇下来，其实也没找到一条真正的快速之路。一方面可能是能力有限，另一方面可能这就是前端的本来面部：知识庞杂，重点不突出。

但无论如何，这已是当前我的最好发挥了。

尤其令我欣慰的是，这篇文章最终逃脱了“烂尾”的命运，也算是对自己的一个交代。