成都源码时代IT培训总校 |
如何向Vue项目添加JavaScript库所需的代码
Lodash, Moment, Axios, Async... 这些是有用的JavaScript库,您希望在许多Vue.js应用程序中使用这些库。
但是,随着项目的发展,您将将代码分离为单个文件组件和模块文件。您还可能希望在不同的环境中运行您的应用程序,以允许服务器呈现。
除非您找到一种简单而健壮的方法将这些JavaScript库包含在组件和模块文件中,否则它们将是一个麻烦!
将库添加到项目中的天真方法是通过将库附加到window
目的:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
针对窗口变量的情况很长,但是,特别是在本讨论中,它们不适用于服务器呈现。当应用程序在服务器上运行时,window
对象将是未定义的,因此试图访问属性将以错误结束。
另一种二流方法是将库导入到每个文件中:
MyComponent.vue
在Vue项目中使用JavaScript库的较干净和较健壮的方法是将其代理到Vue Prototype对象的属性。让我们这样做,将时间、日期和时间库添加到我们的项目中:
entry.js
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });
由于所有组件都从Vue Prototype对象继承它们的方法,这将使所有组件都可以在没有全局变量或手动导入的任何组件中自动使用。可以简单地在任何实例/组件中访问this.$moment
:
MyNewComponent.vue
我们通常会设置如下对象属性:
Vue.prototype.$moment = moment;
Object.defineProperty
相反,我们可以使用descriptor。描述符允许我们设置一些低级别的详细信息,例如我们的属性是否可写,以及它是否在枚举期间显示在for
循环等等。
在日常的JavaScript中,我们通常不会考虑这个问题,因为99%的时间我们都不需要这样的细节来分配属性。但是在这里,它给了我们一个明显的优势:用描述符创建的属性是只读默认情况下。
这意味着,一些缺少咖啡的开发人员(可能是您)无法在组件中做一些愚蠢的事情,从而破坏一切:
this.$http = 'Assign some random thing to the instance method';
this.$http.get('/'); // TypeError: this.$http.get is not a function
您会注意到,我们将我们的库代理到一个以美元符号“$”为前缀的属性名。您可能还看到了其他属性和方法,如$refs
, $on
, $mount
,等等,它们也有这个前缀。
虽然不是必需的,但前缀被添加到属性中,以提醒缺乏咖啡的开发人员(再次),这是一个欢迎您使用的公共API属性或方法,与实例的其他属性不同,这些属性可能只是用于Vue的内部使用。
作为一种基于原型的语言,JavaScript中没有(真正的)类,因此它没有“私有”和“公共”变量或“静态”方法。这个公约是一个温和的替代,我认为是值得遵循的。
您还会注意到要使用您使用的库this.libraryName
这可能并不令人惊讶,因为它现在是一个实例方法。
但是,这样做的一个结果是,与全局变量不同,您必须确保在使用库时处于正确的范围内。在回调方法中,无法访问this
你的图书馆住的地方。
FAT箭头回调是确保您保持在正确范围内的一个很好的解决方案:
如果您计划在多个Vue项目中使用一个库,或者您想要与世界共享它,您可以将其构建到您自己的插件中!
插件抽象了复杂性,并允许您在项目中简单地执行以下操作以添加所选库:
import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);
Vue.use
.
首先,为插件创建一个文件。在本例中,我将制作一个插件,将Axios添加到所有Vue实例和组件中,因此我将调用该文件axios.js.
主要要了解的是,插件必须公开install
方法,它将Vue构造函数作为个参数:
axios.js
现在,我们可以使用前面的方法将库添加到Prototype对象中:
axios.js
use
实例方法是将库添加到项目中所需的全部内容。例如,我们现在可以像这样轻松地添加Axios库:
entry.js
插件安装方法可以采用可选参数。有些开发人员可能不喜欢调用他们的Axios实例方法。$http
由于Vue Resource通常被命名为Vue Resource,所以让我们使用一个可选的参数来允许他们将其更改为他们喜欢的任何东西:
axios.js
多年软件开发工作与项目管理经验,以及JavaEE应用开发。曾参与开发台湾超捷物流系统,淘宝商城爱蜂潮企业ERP,重庆天古装饰ERP,北京永泰地产流程设计等项目。并组织与研发重庆军方加油站警报系统,中国总经理网站后台,蓝源服饰Saas服务平台等系统。
EasyJf开源团队成员,具备多年的软件开发、产品设计、产品运营和团队管理经验。所设计的产品主要有:泛流通行业进销存;生产制造行业、服装、装饰行业ERP企业管理系统;办公OA、CRM以及各类网站建设;曾与天古集团、成法集团、淘宝商城爱蜂潮等企业合作。
五年项目研发和管理经验,10年工作经验。先后参与华为IDC、企业网盘、运营商网盘等软件的开发。参与华为网管Toolkit等软件的设计、架构并带领团队一起顺利开发并实施。
多年J2EE项目经验和管理经验,曾参与云天化erp、海底捞、龙蟠、紫金花及各大院校管理系统,以及门户网站; 热衷前言技术的研究及其在实战中的应用。
尊重原创文章,转载请注明出处与链接:http://www.peixun360.com/news/503043/违者必究! 以上就是成都源码时代IT培训总校 小编为您整理成都java培训周末班的全部内容。