这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速,涉及的技术点很多,我们往往需要阅读很多书籍才能理解前端技术的知识体系。这本书在前端知识体系上做了很好的总结和梳理,涵盖了现代前端技术绝大部分的知识内容,起到一个启蒙作用,能帮助读者快速把握前端技术的整个脉络,培养更完善的体系化思维,掌握更多灵活的前端代码架构方法,使读者获得成为高级前端工程师或架构师所必须具备的思维和能力。
1.前端知识体系与架构思维解析
2.培养更完善的体系化思维,掌握更灵活的前端项目代码架构设计技术
3.涵盖了现代前端的众多知识内容和原理,包括前端技术基础、开发调试技术、前端相关协议、三层结构演进与实践、响应式网站、页面交互框架、大型项目实践经验、跨栈开发实践等多个方面的知识和内容
前言:
欢迎阅读本书,本书是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速,涉及的技术点很多,我们往往需要阅读很多本书籍才能理解前端技术的知识体系。这本书在前端知识体系上为大家做了很好的总结和梳理,涵盖了现代前端技术绝大部分的知识内容,包括前端技术基础、开发调试技术、前端相关协议、三层结构演进与实践、响应式网站、页面交互框架、大型项目实践经验、跨栈开发实践等,这些都能使大家获得成为高级前端工程师或架构师所必须具备的思维和能力。
目标读者
本书主要面向各类前端工程师。
初中级前端工程师们可以通过本书快速地领略到前端领域的深度和广度,把握整个前端技术领域的发展方向和所涵盖的绝大多数技术要点,为未来深入学习前端知识提供指导和方向。当然,笔者还是建议你在有一定前端技术基础的前提下再来阅读本书,因为这并不是一本入门的工具类书籍,对基础知识讲解较少。如果你已经是高级前端工程师,也希望你通过本书了解到自己在前端知识体系中没有掌握的内容。笔者欢迎你对本书的内容提出建议,帮助我指出书中的不足,补充书中没有涉及的内容。
写作目的
本书的写作目的是希望通过笔者对现代前端知识体系的剖析来帮助那些需要快速成长和提升的前端读者们,为他们提供一个系统的知识体系和明确的学习方向,快速了解现代前端所涉及的主要知识点,把握前端知识体系结构的整个脉络。前端入门很简单,但是优秀的前端工程师却很少,如果你希望变得更优秀,那你一定会需要这本书。如果你觉得自己已经很优秀,也可以阅读本书进一步梳理知识体系,帮助自己查缺补漏。
不希望你购买本书后因为工作忙而翻几页便将它一直放在某个角落,所以,本书会用尽量少的篇幅和浅显的语句让大家掌握最核心的技术思想,少数偏理论的细节不会展开太多,只将其中最关键的部分讲清楚。如果大家希望有一本更全面、更清晰的书籍,笔者后期也会在本书的基础上深入展开。
总之,本书的写作目的是,希望区别于基础入门的工具书而从实质上帮助所有的前端读者们快速理解前端技术知识体系,培养自身更完善的体系化思维,掌握更多灵活的前端代码架构技术。最后,衷心希望这本书能真正帮助需要知识引导的同学,起到一个学习启蒙的作用,也希望大家多多支持这本书。
写作背景
随着互联网的持续发展和网络信息的多样化,我们对网络信息的获取量越来越大,获取方式越来越多,获取媒介种类也越来越复杂。就目前而言,我们生活的方方面面都与互联网息息相关,通信、娱乐、购物、企业服务等均已成为每天生活中不可或缺的部分。就获取信息的媒介来看,终端设备(主要包括个人电脑、智能手机、平板电脑等)是我们从互联网上获取信息的最主要媒介。
与此同时,互联网信息展现的内容和形式越来越偏向于终端设备屏幕,而且基于终端设备的交互越来越多,越来越复杂。目前在终端设备屏幕上,获取互联网信息的最主要途径仍然是通过Web浏览器(或内嵌浏览器WebView,下文中统称为Web浏览器),网络信息在Web浏览器上是以Web应用的形式展现的。随着信息量的增大和信息多样化增加,Web浏览器应用也越来越复杂,规模越来越庞大,原有的由后台服务器直接产生网页数据的技术已经不能满足需要。
在我国,随着2000年左右第一批互联网企业的崛起,中国互联网累积输出的网络信息量越来越大,用户数越来越多,信息业务也越来越多样化。国内许多第一批从事网站开发的技术人员渐渐意识到Web浏览器端业务信息处理逻辑的复杂,因此他们不能把主要精力只集中在服务器端的数据收集和处理工作上。任何一项复杂工作简单化的最好方式必然是分工,在这种情况下,第一批半职业的前端工程师出现了,具体时间可以大致认为是Web 2.0时代开始的时候,也就是说,国内的前端工程师可以认为是在以用户原创产生内容(User Generated Content,UGC)为主的互联网应用网站产生时开始出现的。不仅如此,在UGC应用大行其道的时代,各类电子商务网站的蓬勃发展又大大增加了互联网企业对前端工程师的需求。
随着互联网的普及,社交和电商的蓝海中涌现出了无数的互联网企业,这类企业中的大部分目前仍然是以利用Web浏览器与用户进行信息交互为主要业务,用来完成用户的信息消费。自2008年开始,移动互联网的另一波浪潮让互联网行业的发展如日中天,整个国内外互联网行业一片欣欣向荣。与此同时,为数不多的前端工程师和呈指数增长的前端工程师需求量形成了巨大的产业人力资源矛盾。不少互联网公司因为业务发展需要,鼓励大量服务端工程师向前端工程师转型来填补前端人力的空缺。直至今天,前端工程师的数量仍然远远不能满足企业的发展需要,不过与UGC时代相比,前端工程师的数量有了一定的提升。与此同时,互联网应用场景的复杂化也提高了企业对前端工程师基本能力的要求,一部分初级前端工程师仍然不能胜任企业的工作,而优秀的前端工程师一将难求。
面对这种形势,笔者觉得,目前缺乏优秀前端工程师的主要因素有以下两点。
?前端专业教育引导资源的稀缺
可以认为,前端工程师培养起来难度大,和前端教育学习资源的缺乏有一定的关系。虽然有专门的前端方向培训机构,但是这种模式下的人才培养专业度和产出完全不如人意。笔者的感觉是,一般毕业就被选拔进入大型互联网公司且技术能力相对较强的前端工程师都是通过平时自学进入这一领域的。笔者很明白前端学习的困难,所以如果有充足的前端教育资源来引导,结果就有可能不一样。
?前端领域的技术革新速度快,对前端工程师的要求越来越高
真正了解前端技术的工程师都会感觉前端技术发展变化远快于其他端。浏览器特性、编程语言标准、前端框架、前端工具、多终端浏览器等都在快速地换代更新。作为一名前端工程师,不仅要掌握现有的技术来实现业务需求,解决业务问题,还要不断快速学习新的技术知识,为新技术时代的到来做准备。对于后接触的人来说,需要了解掌握的东西会越来越多。
所以希望本书所讲解的前端体系化内容能够降低前端从业人员的学习成本,帮助读者快速从宏观上把握前端知识体系结构的整个脉络。
主要内容
本书一共分7章,每一章的主要内容如下所述。
?第1章,主要介绍现代Web应用的发展概况和相关的技术知识,同时也深入总结目前主要浏览器的基础原理知识与常用的前端开发调试技术。
?第2章,主要讲解了前端技术的相关协议,包括HTTP、HTTP2、HTTPS、Web实时协议、前端安全机制、RESTful规范和Hybrid混合应用交互协议等。
?第3章,以前端的三层结构发展演进和实践技术为主,讲解HTML5、ECMAScript 5+、CSS3的发展历程和特性,同时介绍现代前端开发中的编译技术和响应式站点的设计思路。
?第4章,主要讲解前端交互框架的演进和各类前端框架的实现原理,包括直接型DOM交互框架、MVC、MVP、MVVM、Virtual DOM、MNV*等框架的设计思路。
?第5章,以专题的方式讲解现代前端大型项目的实践思路,主要包括开发规范、组件化规范、构建原理、用户数据分析、前端优化手段、搜索引擎优化基础等内容。
?第6章,围绕跨栈主题介绍前端技术栈在后端和移动端Hybrid上的开发实践,例如,后端直出同构原理、Hybrid离线包与增量机制实现等关键架构的设计思路。
?第7章,就前端的未来趋势进行分析,简单介绍物联网Web化、Web VR、网站人工智能等未来的前端技术趋势,总结成为一名优秀前端工程师的要素。
相信读者们看到这里就会兴奋起来,因为本书涵盖了现代前端中大部分需要掌握的技术实践理念,这也是编写本书的初衷。相比于深入介绍具体某一个前端框架的书籍,这本书能带给读者体系化思维和技术理念上的提升,因为前端学习不是学会某个框架就可以了。
写作声明
关于本书的内容,在此声明如下。
1. 书中所涉及的内容均为基于笔者理解之上的原著输出,部分内容如有雷同,属于共性知识。
2. 书中提出了一些自定义概念,可能之前没有被提出,请读者认真理解。
3. 书中涉及技术原理类的内容较多,并不是只介绍某个特定框架的工具类书籍,建议读者在有一定前端技术基础的前提下阅读,本书的编写宗旨是提高前端工程师的体系思维和设计能力,而不是帮大家快速入门。
4. 本书使用的全部样例代码均基于ECMAScript 6+环境,需要较高版本的浏览器或Node服务器的运行支持。
5. 本书涉及的知识点量大,涵盖范围广,对相关基础知识细节的展开不会过于详细,但对于每种技术的实现都有较深入的原理性分析,希望读者认真阅读领会。
致谢
感谢为了这本书得以完成而做出贡献的小伙伴们。首先感谢电子工业出版社策划编辑陈晓猛的辛苦跟进和鼎力协助,保证了书籍能够按期出版;其次感谢腾讯IMWEB团队的培养,没有团队给予的锻炼机会,我根本不可能完成这本书;最后感谢腾讯IMWEB团队的成员们帮我提供素材和校对稿件;另外要特别感谢来自腾讯的kenkozheng、samarali、helondeng和来自携程的sheiladai等同事给予本书的写作建议与技术审校。由衷感谢大家。
张成文
该行的hyhrid应为hybrid
xml的stike拼写错误,应该为strike
xml中的to应为name
第二段代码中的第4行代码应为
JSON.toLocaleString({name: 'ouven'});
Interator应为Iterator