摘要:首先,它允许我们能够编写一个分离的文件作为模板,这样子我们就能在编辑的时候看到正确的语法高亮,这也是很多开发者喜欢的原因注我觉得这是因为现在的人越来越懒,越来越依赖的原因。
这篇文章是翻译的Vue.js的官方blog,最后加了些自己的理解。
原文地址:Why Vue.js doesn"t support templateURL
很多Vue的新手,特别是使用过Angular的都会问“我能不能用 templateURL”,由于回答了太多次了,所以作者决定记下来。
Angular的世界里,templateURL 或者 ng-include 允许使用者在运行时动态的加载远程模板文件,这个看起来很方便,作为一个自带功能,但是让我们来重新审视下这个功能。
首先,它允许我们能够编写一个分离的html文件作为模板,这样子我们就能在编辑的时候看到正确的语法高亮,这也是很多开发者喜欢的原因(注:我觉得这是因为现在的人越来越懒,越来越依赖IDE的原因)。但是分离你的js和html代码真的是个好主意么?在Vue.js的组件中,js和html天然紧耦合,事实上,这些代码在一个文件更简单易懂。在2个文件中来回切换上下文逻辑实际上让开发者更不爽。在vue的概念里,组件才是vue.js的基本构建单位,并不是模板文件。每一个vue.js的模板都伴随着他的好基友js,分离他们太过于残忍了。
其次,因为templateURL是在运行时通过ajax的方式加载模板,不需要构建步骤为了你分离的文件。开发的时候,这很爽,但是上线部署的时候,你就麻烦了。在HTTP2.0没有大面积支持前,HTTP的请求数仍然是页面加载的最关键因素。想象一下,在你的网站中,每个组件都是用templateURL,那么页面出来前,你可能需要加载几十个HTTP请求。可能你并不知道,大多数的浏览器是限制同一域名的并发请求数量的。当你超过这个限额的时候,你页面的初始渲染时间就得等待每次请求的返回。当然,有工具可以帮助你提前注册你所有的模板,但是这就多了一个构建步骤,事实上,这就是大型网站的必然趋势。
那么,在没有templateURL的情况下,我们怎么处理开发环境问题呢?
在js里面拼接字符串是很烂的做法,使用 这种伪模板也不咋样。那么,现在是时候提升技能,使用像Webpack或者Browserify这种流行的模块构建器了。如果以前没有使用过,可能有点望而却步,但是相信我,这会有一个质的飞跃。对于大型网站和系统来说,适当的模块化很必要。更重要的是,你可以编写Vue组件在一个文件中,再加上语法高亮,自定义的预处理器,热加载,ES6,内置css,自动前置。可以让开发者提高10倍效率。
最后,Vue还能懒加载你的组件,加上使用wabpack非常容易,尽管这是为了解决一个问---构建页面文件过于庞大,初始化比较慢,所以你最好还是分割开来比较好。
抛弃template,拥抱组件世界吧!!
以上是原文的翻译,并非完全直译,有很多自己的语言,大概意思相同,原谅我的文采不行。
个人觉得,Vue的组件思想跟React相似,把很多东西放在了js(这里是.vue文件)中,这种做法是把很多紧耦合的东西集中在一起管理,把原来分割开的css,html,js合成在一起,这个很像很多年的做法,所以很同意玉伯说的,看起来前端是在原地打转了一圈,开发模式回到了从前的样子,但是已经螺旋上升了哦,一切都在升级。
通过最近的使用来看,这种component的方式很方便,天然帮你做了解耦的分离,当然你需要转化自己的思维模式,不能在用jquery的操作DOM方式,同时和Angular也有很多区别,Vue并非一个框架,而是更像一个类库,这样很灵活,当然也会有人使用非常hack的方式来编写代码,可能会很蛋疼,这就需要自己注意了,对于团队而言,可以很好的积累各种组件,同时功能切分,合作起来更加容易,就看团队对Vue的理解程度了。
欢迎大家交流相关技术, 如果对Vue感兴趣,可以加QQ群: 364912432
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78344.html
摘要:中文官网英文官网组织发出一个问题之后,不要暂时的离开电脑,如果没有把握先不要提问。珍惜每一次提问,感恩每一次反馈,每个人工作还是业余之外抽出的时间有限,充分准备好应有的资源之后再发问,有利于问题能够高效质量地得到解决。 Vue.js资源分享 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/maid...
摘要:来源于社区,时至今日已经基本成为的标配了。部分很简单,要根据传入的执行不同的操作。当性能遇到瓶颈时基本不会遇到,可以更改,保证传入数据来提升性能。当不再能满足程序开发的要求时,可以尝试使用进行函数式编程。 Immutable & Redux in Angular Way 写在前面 AngularJS 1.x版本作为上一代MVVM的框架取得了巨大的成功,现在一提到Angular,哪怕是已...
摘要:使用开发,很重要的一步是需要开发自定义的指令。接下来分几个步骤记录如何开发一个自定义的指令。对这个元素及其子元素进行变形之类的操作是安全的。链接函数链接函数负责注册事件和更新。说明和是指令的关键部分,留在下一章中详细讨论。 使用Angularjs开发,很重要的一步是需要开发自定义的指令(custom directives)。接下来分几个步骤记录如何开发一个自定义的指令。 目录: 指令...
摘要:官方支持微软出品,是的超集,是的强类型版本作为首选编程语言,使得开发脚本语言的一些问题可以更早更方便的找到。第一个组件那么我们来为我们的增加一个吧,在命令行窗口输入。引导过程通过在中引导来启动应用。它们的核心就是。 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三) 第一章:认识Angular...
摘要:控制器显示与隐藏时的动画,使用中的服务到此,导航和一个功能演示的页面就已经实现了。由于大部分是静态的,没有动态,所以只需要将官方的演示照搬即可。更希望能得到您的帮助与指正。 引子 自从开通了sf的文章专栏,总想在这个专栏里写些自己的东西。不久前,微信推出了自己的一套UI,我看有很多开发者将其套用在了一些前端框架中,比如react、vue。最近自己在学习Angularjs,所以,也想把这...
阅读 3321·2021-11-10 11:36
阅读 3207·2021-10-08 10:21
阅读 2820·2021-09-29 09:35
阅读 2365·2021-09-22 16:06
阅读 3895·2021-09-09 09:33
阅读 1286·2019-08-30 15:44
阅读 3145·2019-08-30 10:59
阅读 2959·2019-08-29 15:32