Atag - Web Components 最佳实践_Javascript教程_网页制作_真人赌博网-真人赌博游戏官网-真人赌博app-真人赌博网站大全_app登入在线投注
返回首页
专题
真人赌博网站大全
ASP教程 .NET教程 PHP教程 JSP教程 C#教程 Java教程 Delphi教程 VB教程 C/C++教程 Android开发 IOS开发 Windows Phone开发 Python教程 Ruby教程 移动开发 其他编程教程
网页制作
HTML教程 CSS教程 Dreamweaver教程 FrontPages教程 Javascript教程 web前端
数据库
SqlServer MySql Oracle Access DB2 SQLite 其他数据库
图形设计
photoshop教程 Fireworks教程 CorelDraw教程 Illustrator教程 AutoCad教程 FLASH教程
操作系统
Windows xp教程 Windows 7教程 Windows 8教程 Windows 2003教程 Windows Server 2008教程 Linux教程 Windows 10
网站运营
建站经验 SEO优化 站长心得 网赚技巧 网站推广 站长故事
手机学院
手机速递 安卓教程 iphone教程 手机评测 手机技巧 手机知识 手机应用 手机游戏 手机导购
网店宝典
开店指导 开店经验 网店装修 网店推广 网店seo 网购技巧
软件教程
办公软件 系统工具 媒体工具 压缩工具 图文处理 文件管理
范文之家
自我介绍 自我鉴定 写作模板 合同范本 工作总结 贺词祝福语 演讲致辞 思想汇报 入党申请书 实习报告 心得体会 工作计划 简历模板 工作报告 导游词 评语寄语 口号大全 策划书范文
信息工程
软件工程 企业开发 系统运维 软件测试
移民之家
移民动态 移民政策 移民百科 移民生活 技术移民 投资移民
真人赌博网
母婴 数码 摄影 装修 美文 常识 时尚 婚嫁 美食 养生 旅游 兴趣 职场 教育 文学 健康
问答大全
电脑网络 手机数码 QQ专区 生活 游戏 体育运动 娱乐明星 休闲爱好 文化艺术 社会民生 教育科学 健康医疗 商业理财 情感家庭 地区问题 其他
编程问答
IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发 网络通信 移动开发 云计算 企业IT 游戏开发
笑话大全
幽默笑话 爱情笑话 成人笑话 校园笑话 爆笑笑话 综合笑话 古代笑话 现代笑话 国外笑话

Atag - Web Components 最佳实践(1/12)

来源:互联网  时间:2018/11/1 14:11:46

 Atag - Web Components 最佳实践

引子

上一次社区中谈论起 Web Components 已经可以追溯到三四年前了,彼时 Web Components 仍处于不稳定的草案阶段,Polymer 的出世使大家似乎看到了新一代的前端技术,但直到今天,在今年五月 Google I/O 发布 Polymer 3 之后, Web Components 的规模化应用才看似成为了可能。

过去一段时间,我一直在使用 Web Components 构建淘宝小程序的 基础组件 Atag。MDN 上对 Web Components 这个名词的解释是

Web Components是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。

我们从中提取几个关键字:可重用定制元素封装

这些特性刚好能满足可复用组件的需求,更重要的是,这是由 W3C 标准提供的,面向标准编程不需要再考虑我使用的技术在未来几年内会不会过时。目前社区中的框架大都具有传染性,什么是传染性?如果你希望使用一个 React 组件,大概率你的整个用户界面都会使用 React 来开发。而 Custom Elements 不是这样,因为它替代的是 div,能使用 div 的地方就能使用它,它即插即用:引入一个 js 文件就可以了,直接操作 DOM 使它的性能更高,它并不跟社区主流的框架相克,这样看来它更适合用来开发底层的基础组件。

回到正题,这篇文章的目的,是希望总结在 Atag 开发阶段中使用 Web Components 的经验,避免大家踩坑。

基础设施

webcomponentsjs

Github 地址

这是一系列 Web Components 规范的 polyfill 集合,如果你的目标用户不是最新的现代浏览器,强烈建议引入这个库。

引用方式 :

建议在 html 中使用 script 标签引入它,而不是通过 npm 引入,这样浏览器可以使用缓存帮助你减少二次加载的消耗。

(以下引入方式二选一)

  1. 使用 bundle 整包引入,这样会引入整个库中包含的所有 polyfills。
    • 如果你需要按需引入 bundle,这个库的 bundles 目录下有一系列预打包好的 bundle 文件,用后缀标明了它包含的功能:ce 表示 custom-elements,sd 表示 shadow-dom,pf 表示环境的 polyfills。
  2. [推荐] 使用 loader 按需引入,引入 webcomponents-loader.js 后,它会根据浏览器中的特征按需加载。

这里有必要对一些名词做一些解释:

  • ShadyDOM 这是 Shadow DOM 的 polyfill 的官方名称,它通过劫持 HTMLElement 的原型方法来实现一些 Shadow DOM 节点拥有的功能,实际上它的原理是把节点添加到了真实(light) DOM 节点之上。
  • ShadyCSS 跟上面一样,这也是 polyfill 的名称,它提供了一些 Shadow DOM 节点内样式的封装,使得可以在真实 DOM 中模拟 scoped style 的效果。它的原理是通过解析和重写 style 节点内部的样式规则来实现的。

需要注意的是,在引入 polyfill 的同时,有一些功能是无法被模拟的,需要我们在使用的时候避开,在下文中会介绍到。

NOTE: 这个库的 2.1.x 版本对 Symbol 的 polyfill 有一些问题,在官方修复之前建议使用 2.0.4 的稳定版本。

这里提供一份 alicdn 的 bundle URL:


上一篇Redis只往zset有序集合添加不存在的数据:关键字索引查询构建+源码分析
下一篇:没有了
明星图片
相关文章
《 Atag - Web Components 最佳实践》 ,
真人赌博网