返回 登录
0

360奇舞团钟恒:选用Vue.js进行组件化开发,我们遇到了哪些坑?

责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net。
欢迎加入“CSDN前端开发者”微信群,参与热点、难点技术交流。请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」。另可申请加入CSDN前端开发QQ群:465281214。

2016年,SDCC(中国软件开发者大会)相继走进了上海深圳成都杭州各地。11月18日-20日将在北京完美收官。作为大会的重要分专题,前端开发专题已邀请到360奇舞团前端工程师钟恒担任大会讲师,现场将分享《使用Vue.js 2.0开发高交互Web应用》的主题演讲。

钟恒目前负责“声享”这款产品的前端基础架构及部分后端开发工作,并专注于Web应用开发、组件式开发以及对HTML5的新特性进行探究。会前有幸采访他,采访中前端组件化开发的难点及选用Vue.js实现组件化开发的实践经验

受访嘉宾介绍

图片描述

360奇舞团前端工程师 钟恒

钟恒,360奇舞团前端工程师,负责声享前端基础架构及参与产品Node.js开发,同时对微信开发有深入研究。《响应式Web设计:HTML5和CSS3实战(第2版)》译者。毕业于中山大学,曾在w3ctech上翻译多篇关于Service Worker文章。

CSDN:首先请您做下自我介绍,目前所从事的工作及主要专注哪些技术领域。

钟恒:大家好,我是钟恒,任职于奇虎360奇舞团。我目前负责“声享”这款产品的前端基础架构及部分后端开发工作。

声享是一款可以制作有声幻灯片的Web应用,它能让您随时随地创建、编辑、录制和分享有声幻灯片。因为是Web应用,所以它无需下载安装,并且无论你身处何地,你都可以使用电脑、平板电脑或者手机等电子设备去访问它。

我日常专注于Web应用开发、组件式开发以及对HTML5的新特性进行探究。

CSDN:以您最近参与的一个项目为例,谈谈它的前端基础架构是怎样的?

钟恒:声享是我最近参与的项目。它是一个富交互的Web应用,用户可以在上面编辑生成新的幻灯片。因此,基于它的复杂度、日后的维护等需求,我们选择了Vue.js作为开发的框架,使用Vuex进行状态管理,另外我们使用Webpack和Gulp进行前端工程流处理。最后我们使用燕尾服(内部的一个工具,2.x基于Node.js的版本会开源)进行上线前优化。

CSDN:前端领域,组件化开发的难点有哪些?

钟恒:通过组件化,我们可以提高开发效率和维护效率。然而,无论我们使用的工具多么先进,在层层的需求迭代下,组件化一直有众多的难点。比如:

1.组件的复用性

当我们编写了一个组件后,当然希望可以在更多的场合使用它。然而每个场合的需求都是有差异的,那我们怎么做到既能在多场合复用,但代码量又保持合理呢?这就要求我们根据需求设计好组件了。

2.组件间通信问题

当我们进行了组件化开发后,组件间是互相独立的。如何去进行有效的通信?而且因为组件化了,我们可能会进行组件的升级或替换,会不会导致组件间的通信方式改变?因此我们也需要去搭建一个稳固的通信桥梁。

3.组件的可维护性

我们经常说产品是可恶的,因为总是改需求。但是更改需求是无可避免的,所以我们更应该确保修改少量的组件就能达到修改需求的目的。那么怎么做到尽可能少呢,这要求我们对于组件的粒度作出合理把控。

CSDN:实现组件化的主流框架有很多,您觉得在这方面Vue.js的优势是什么?

钟恒:事实上个人觉得,任何框架都有其优劣之处,选择框架必须要基于场景进行选择。那么我们选择Vue.js当然也是因为它能解决我们的需求。有以下几点促使我们选择Vue.js:

  1. 完整的组件化逻辑;
  2. 较好的性能;
  3. 方便趁手的API;
  4. 能够直接编写使用HTML和CSS;
  5. 轻量,并且能够和很多其余插件组合运用等等。

CSDN:在使用Vue.js时,有没有遇到一些困难?是如何解决的?

钟恒:因为我们使用的是Vue.js 2.0,项目刚开始的时候Vue.js 2.0刚刚进入Beta阶段,文档不是十分完整,而且里面也有一些Bug,这带来了一定的困难。

当时是参照Git上的feature更改列表和Vue.js 1.x的文档进行学习使用。不过我相信,对于大部分工程师来说,这并不是一个十分大的难题。

在后来的开发中,我们也遇到一些Vue.js中的Bug,这时候也有赖于Vuex这种状态机,让我们可以轻松复现出场景。然后我们再进行对代码的抽丝剥茧去定位出问题所在。然后通过Github的issue进行解决。

CSDN:平时喜欢翻译技术类文章,还翻译了《响应式Web设计:HTML5和CSS3实战(第2版)》一书,您是如何平衡写作与平时工作的?写作对您的成长有怎样的帮助?

钟恒:翻译的话其实也是抽空而为。在到公司上班下班后或者周末依心情进行翻译。一般来说,我觉得最好是保证好自己有合理的工作量,那么就能轻松地去完成其他目标。

翻译对于我的成长还是大有裨益的。首先,它能够一定程度的维护我的英语阅读理解水平,其二就是增加我的阅读量,接触更多新知识,第三让我能够更好地去阅读别人的思想,从而去提高自己的编程能力。

CSDN:面对技术的快速迭代,您是如何保持自己不断成长的?您对新人有什么建议?

钟恒:啊,其实我也只是个新人啦,还是有很多需要学习的地方。现在前端界的技术的快速迭代确实让很多人望而怯步。我个人觉得,在面对新技术的时候,要做到以下几点:

1.多了解。

我们需要去了解新的技术,它到底是什么?为了解决什么问题出现的呢?我以前有没有遇到过这种问题,我是怎么解决的,我们需要引入它吗?等等。

2. 多尝试。

遇到新技术,虽说不一定要用到生产环境中,但是我们可以自己去捣鼓一下,了解其特性。

3. 多思考。

如果有能力,我们甚至应该思考一下这个新技术的优劣和它的实现方式。

对于新人的话,我觉得最重要的是多思考。当产品抛来需求的时候,不要急着写,多尝试去设计一下。写代码也不要操之过急,多斟酌。如果可以的话,多看一下别人写的代码或者文章,再看看自己有何不足。

4.多交流,多沟通。

CSDN:11月18日,在SDCC 2016前端开发专题上,您分享的话题是?听众将通过该演讲获得哪些收益?

钟恒:在11月18日SDCC 2016前端开发专题上,我将分享如何使用Vue.js 2.0开发一个富交互式的应用。我会讲解在开发一个富交互应用的时候我们会遇到的问题,组件化的技巧以及Vue.js这个框架带给我们的一些优秀的解决方法。

相关文章:


目前SDCC 2016前端开发专题的所有演讲嘉宾已全部确定,以下为嘉宾名单及演讲议题(排名不分先后),详情请见:SDCC 2016前端开发专题讲师、议题大揭底

  • Stackla前端团队Leader蒋定宇
    • 演讲主题:不断归零的前端人生
  • QQ音乐&全民K歌高级工程师袁聪
    • 演讲主题:全民K歌React Native最佳实践
  • 饿了么Node Team负责人黄鼎恒
    • 演讲主题:纯手工搭建一个高性能实时监控系统
  • 360奇舞团前端工程师钟恒
    • 演讲主题:使用Vue.js 2.0开发高交互Web应用
  • Ruff架构师、JavaScript专家周爱民
    • 演讲主题:有前端思想的物联网系统架构
  • 58到家高级前端工程师周俊鹏
    • 演讲主题:基于webpack的前端工程解决方案

想与这些专家现场面对面进行技术探讨吗?目前SDCC 2016大会门票8折销售中,团购更有优惠,是给辛勤工作一年的你,年终最好的礼物,或许这样,SDCC才能更真切地服务好开发者。【注册参会

图片描述

评论