BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

百度技术沙龙第26期回顾:前端组件原理及开发实践(含资料下载)

| 作者 贾国清 关注 0 他的粉丝 发布于 2012年6月9日. 估计阅读时间: 5 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

在5月7日由 @百度 主办、 @InfoQ 负责策划组织和实施的第26期百度技术沙龙活动上,来自百度资深工程师,UEditor富文本编辑器创始人和技术负责人战毅,多说网、图虫网创始人沈振宇(@沈振宇)分别分享了各自在前端组件开发上取得的成果及经验,话题涉及“开源编辑器实现之UEditor分享”,以及“插件思想及多说的开发实践”等。本文将对他们各自的分享做下简单的回顾,同时提供相关资料的下载。

主题一:开源编辑器实现之UEditor分享微盘下载讲稿

来自百度UEditor富文本编辑器的创始人和技术负责人战毅第一个为大家分享,本次演讲的主要内容包括:编辑器的组成和实现、UEditor整体介绍以及UEditor核心功能点实现细节,其中重点分享了编辑器的组成和实现原理。编辑器自然离不开编辑命令,而常用的编辑命令主要分为原生命令、使用原生选取重写原生命令和使用模拟选区重写原生命令三种,各自的优缺点如下:

  • 使用原生命令(document.execCommand)
    • 优点:性能好,代码量少
    • 缺点:功能受限,bug不可控,浏览器兼容性差
    • 项目:kindeditor,xheditor
  • 使用原生选区,重写原生命令(Range)
    • 优点:功能丰富,bug可控,浏览器兼容性好
    • 缺点:性能中等,代码量较大
    • 项目:ueditor,ckeditor,tinymce
  • 使用模拟选取,重写原生命令
    • 优点:避免了所有原生选区的不足
    • 缺点:性能较差,IE系列浏览器基本放弃,代码量大
    • 项目:google docs,webOffice

战毅还详细讲解了状态反射机制和过滤机制,状态反射机制是指用户的每次操作都会有编辑器界面状态的改变,可以为用户提供直观的编辑反馈,这需要通过注册一系列原生事件组合成selectionchange事件来触发;过滤机制则主要应用在“进入编辑器”和“离开编辑器”两个场景,主要是通过字符串过滤和转换过滤来实现。此外,编辑器的组成还包括键盘监听和界面,键盘监听主要监听文字的输入和功能键的输入。

最后,战毅对UEditor的整体结构进行了讲解,包括核心、功能、界面UI、定制下载以及事件机制。还通过编辑操作的实现、Undo/Redo的实现、粘贴的实现、过滤转换、状态反射和键盘操作等角度对UEditor的核心技术实现进行了讲解。

主题二:插件思想及多说的开发实践微盘下载讲稿

多说网、图虫网创始人沈振宇第二个为大家分享,重点介绍了插件开发思想、常见问题的解决方法以及多说在Worldpress插件开发中的经验,沈振宇提到Web插件开发中面临的主要问题有:

  • 如何有效地利用建站程序提供的接口和钩子
  • 建站程序本身的版本兼容问题
  • 部署环境的不同所引发的自适应问题
  • 部署环境的文件和数据权限
  • 多语言的问题
  • 和原有建站程序的前端代码协同工作的问题

接下来,沈振宇分别从PHP环境差异导致的问题、Web Server的差异可能导致的问题、没有cURL的问题、多语言的问题、与原有js代码和CSS代码协同工作的问题等几方面进行了讲解,并给出了具体的解决方法。

Open Space(开放式讨论环节)

和以往的环节一样,​为了让参会者能够有更多的时间进行相互的交流,本次活动依然设置了Open ​Space(开放式讨论)环节。除了讲师战毅、沈振宇外,参会者张成也参与了小组讨论。在Open Space的总结环节,几位话题小组长​分别对讨论的内容进行了总结。

战毅:主要分享了“UEditor深入讨论”的话题,针对UEditor的具体实现以及使用上的问题进行了深入讨论,后续文档方面会进一步完善。

沈振宇:主要分享了“插件化开发思想”的话题,主要讨论了前端脚本加载方式,并详细讲解了如何通过require函数实现JavaScript的分布式加载的方法。

张成:主要分享了“CoffeeScript vs JavaScript”的话题,主要讨论了实时交互的Web实现。

会后,一些参会者也通过新浪微博分享了他们的参会感受:​​

@Quentin-Wang:开放的会联网,是想国际的,产品要支持对语言,但是一开始可以针对一种语言,可能会做的更好。

@21克木子:多看看别人的代码,多学习成功的作品,你能做的更好。

@热血-大飞:通过沙龙,熟悉了fck,技术串起来了。

@有假熊出没:貌似插件的话题并不好说清楚呢~主系统的灵活性对插件影响很大~wp这方面做得很好很强大哈。

@小蘑菇1111:战毅大哥的技术演讲很精彩,讲得通熟易懂,很仔细,时间不够,还没讲完,期待继续。

有关百度技术沙龙的更多信息,可以通过新浪微博关注@百度技术沙龙,或者加入百度技术沙龙微群,InfoQ上也总结了过往26期所有百度技术沙龙的演讲视频和资料等,感兴趣的读者可以直接浏览阅读

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT