封装原生的JS,vue中封装全局使用的函数
function fun () {alert (this)//指向的是函数事件调用者}fun ()这里的this,指向的是windownew fn()new 的函数指向的不是window而是指向了该函数新的对象,目的是改变指针,创建对象实例function fun1 () {this.x= 10}varaa = new fun1()aa....
function fun () {
alert (this) //指向的是函数事件调用者
}
fun () 这里的this,指向的是window
new fn() new 的函数指向的不是window而是指向了该函数新的对象,目的是改变指针,创建对象实例
function fun1 () {
this.x= 10
}
var aa = new fun1()
aa.x
原型 让某一个大类都有某个方法
var arr = []
arr.run = function () {
alert(‘123’)
}
arr.run()
var arr1 = []
arr1.run() // 报错没有这个方法
那如何让只要是数组,就拥有run 这个方法呢?
换句话我们定义的函数无论谁使用都有这个方法
这个时候可以使用prototype 原型来实现
Array.prototype.run = function {
// 只要是数组都会调用这个方法
alert(‘415’)
}
var aa = []
aa.run()
var bb = []
bb.run()
都会弹出415
JS封装原型函数
在vue项目中,我们组要一些全局的JS函数,随处使用,如何做呢?
首先我们在项目中创建一个JS文件,然后用export default 导出去
export default {
install (Vue, options) {
}
}
在main.js 中注册使用:
import processData from '@/js/processData.js'
Vue.use(processData)
就可以在全局中使用了
在公用JS文件中定义vue原型函数
export default {
install (Vue, options) {
// 处理饼图数据
Vue.prototype.processPieData = function (title, series) {
this.title = title
this.seriesData = series
let legendData = []
let piedata = {}
for (let v of this.seriesData) {
legendData.push(v.name)
}
piedata.title = this.title
piedata.seriesData = this.seriesData
piedata.legendData = legendData
return piedata
}
}
}
如何使用定义的processPieData 函数?
let aa = this.processPieData(title, seriesData)
使用this来调用
我们可以将公共的JS都放在这个文件中,使用prototype定义的vue全局韩式可以实现全局使用。
更多推荐
所有评论(0)