新書推薦:
《
爱丁堡古罗马史-罗马城的起源和共和国的崛起
》
售價:NT$
349.0
《
人生解忧:佛学入门四十讲
》
售價:NT$
490.0
《
浪潮将至
》
售價:NT$
395.0
《
在虚无时代:与马克斯·韦伯共同思考
》
售價:NT$
260.0
《
日内交易与波段交易的资金风险管理
》
售價:NT$
390.0
《
自然信息图:一目了然的万物奇观
》
售價:NT$
640.0
《
女性史:古代卷(真正意义上的女性大历史)
》
售價:NT$
560.0
《
跨代伴侣治疗
》
售價:NT$
440.0
編輯推薦:
√ JavaScript MVC 作者说过:“创建大型应用的秘诀就是不去创建大型应用,而把应用切分成组件。然后组装测试,由多个组件组合而成一个应用。”
√ 前端摩尔定律:“每 18 ~ 24 个月,前端都会难一倍”。每个前端都要拥抱Web Componet。
√ Web Component 带来 UI 组件化的全新标准,帮助开发者在开发过程中创建稳定且可复用的组件。
√ Web Component 做到分离关注点,降低代码维护成本并提升开发效率,是前端发展必由之路。
內容簡介:
Web组件正在快速成熟,本书将针对架构、配置及工作选择进行具体详细的介绍。读者将接触到web组件发展的核心工具和文件库,包括Polymer、Bosonic、 Mozilla Brick、和ReactJS,并通过实例讲解Web组件的发展、运用JavaScript创建功能性Web组件,以及建立自己的Web组件工具箱。
關於作者:
Sandeep Kumar Patel 是一位高级 web 工程师,技术博客 www.tutorialsavvy.com的创始人,该博客自 2012 年创建以来一直被广泛阅读。他在面向对象的 JavaScript 和基于JSON 的 web 应用开发上,有超过 5 年的经验;曾获 GATE-2005 信息技术(IT)资格认证及印度韦洛尔理工大学硕士学位。你可以在 LinkedIn(http: www.linkedin.comintechblogger)上了解到更多关于他的个人信息。DZone 曾在 web 技术出版方向上授予他**价值博主(MVB)奖项。你可以在http:www.dzone.comuserssandeepgiet查看到他的文章。此外,他还获得过 JCG(Java Code Geeks)颁发的 JCG 徽章。同样,可以在 http:www.javacodegeeks.comauthorsandeep-kumar-patel 查看到他的文章。
译者介绍:范洪春,****(中国)网络技术有限公司前端工程师。
目錄 :
前言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
第 1 章 Web Component 简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Web Component 是什么? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Web Component 的使用动机和困境 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Web Component 架构. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
模板元素 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
模板元素的细节. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
检测是否支持模板特性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
延迟加载的模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
激活模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
HTML Import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
HTML Import 特性检测. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
访问引入的文档. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
HTML Import 的事件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Shadow DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Shadow DOM 特性检测 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Shadow tree. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
自定义元素 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
自定义元素特性检测 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
自定义元素的开发. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
示例:自定义元素. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
节点分布 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
内容插入点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Shadow 插入点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
为 Web Component 添加样式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
构建时钟组件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
时钟模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
时钟元素注册脚本. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
组件的使用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
X-Tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
X-Tag 元素生命周期 .
內容試閱 :
“创建一个大型应用的秘诀就是不去创建大型应用,而把应用切分成组件。然后组装测试,由多个组件组合而成一个应用。”
——JustinMeyer,JavaScriptMVC作者
JavaScript是一门松散类型的动态语言,因而在规范不够完善、社区不够健全的蛮荒时代,开发者们写出的代码也是参差不齐。没有既定规范的代码可读性差,而软件工程所提倡的复用性、可维护性、可扩展性就更是无从谈起。很难说是技术推动了产品的发展,还是快速变化的互联网带来了前端技术的进步。不过*终的结果是前端技术以惊人的速度进行迭代。正如在JSConf2015开发者大会上流行起来的前端摩尔定律:“每18~24个月,前端都会难一倍”。前端模块化方案从无到有,从稍有模式的命名空间到JavaScript中的AMD、CommonJS模块定义,从浏览器端模块化方案再到依赖编译的webpack、browserify构建工具。这一路走来,很多新的标准应运而生,毫无疑问这其中开源社区的贡献巨大。不得不说,ES6的模块系统很大程度上受到了Node.js模块的启发,HTML5WebAPI所引入的querySelectorAll也一定是在jQuery选择器中获得了灵感。
而WebComponent则带来了UI组件化的全新标准。它能够帮助开发者在开发过程中创建出稳定且可复用的组件。WebComponent包括模板元素、HTMLImport、ShadowDOM以及自定义元素。模板元素包含了HTML、CSS和JS,可以取代传统的字符串模板;HTMLImport则可以将外部的HTML文档引入到当前页面中,实现了复用;ShadowDOM则提供了样式和脚本的作用域,是WebComponent中重要的一环;而自定义元素则可以达到扩充HTML元素的目的,意味着开发好一个元素后,处处可用。WebComponent做到了分离关注点,降低了代码的维护成本并且提升了开发效率,可以说是Web前端发展的必由之路。
值得注意的是,就现在而言WebComponent还是一门新技术,很多浏览器都没有原生实现它。而很多走在前面的公司也以自己的方式实现了这套新标准,其中包括Google实现的PolymerJS、Mozilla实现的X-Tag,以及Facebook实现的React。它们或通过polyfill实现标准,或通过VirtualDOM另辟蹊径。目前来看,不得不说React正大放异彩,国内外基于React搭建的项目犹如雨后春笋般崛起,这很大程度上得益于它所提出的UI状态机、VirtualDOM及单向数据流。当然,其他两个框架的设计巧思和理念同样值得每位开发者学习。
本书会对这三种实现都做出详细的介绍,同时包含每个框架的周边类库及构建工具,并且附有详细的代码示例。作者在书中详细介绍了WebComponent的每个细节,并且通过实例深入浅出地讲解了三个基于WebComponent规范的前端框架及其构建工具。相信读者在读完本书后一定会有所收获,能够开发出自己的WebComponent项目,或者将其思想用到现有的项目中。
本书的翻译团队由四位一线Web开发者组成:
?范洪春,就职于****数据技术及产品事业部,前端架构方向
?邵锋,就职于Splunk中国研发中心,目前从事大数据可视化方向的开发和研究
?何语萱,就职于腾讯ISUX,任UI工程师
?姜天意,就职于****国际事业部,主要从事Node.js服务端研发工作
此外,我、语萱和天意同时是知乎专栏《前端外刊评论》的维护者,本书的试读章节也会在**时间发布到该专栏。也就意味着你在阅读本书时遇到翻译上的任何问题都可以通过专栏与我们取得联系。
*后,感谢博文视点引进了这本书,并给予我们翻译的机会。感谢SandeepKumarPatel创作了这本书,让更多的开发者了解到这一新标准。感谢我们四个人在这段时间的相互帮助和鼓励。感谢博文视点的编辑对我们信任。感谢我在阿里的两个前端团队的同事在我负责翻译本书期间对我的理解和支持。父母之恩,毋须赘言!
范洪春
2015.10于杭州