Vue.js入门教程(十五):如何创建自己的插件

JavaScript021

Vue.js入门教程(十五):如何创建自己的插件,第1张

通常,我们不会去接触vue底层的东西,又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的,其实还是插件。

插件,你也可以理解为就是一套方法的集合,当我们需要调用它的时候,引入一下就行了。

举个例子,比如说,swiper和elementui。

一般来说,我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑,但是,网上能搜到了插件不一定能解决我们所有的问题。也就是说,我们剩下30%左右的逻辑部分是需要自己处理的,比如说,转化时间,处理字符串等等。

这些东西网上是没有现成插件的,需要我们自己来写。此时,如果你每一个组件里面都去定义方法就显得太low了。

我们需要自己写一个插件,事半功倍!

一般来说,我们自己的js通常会写成下面的两种形式:

第一种,声明多个方法。这个做法也叫函数声明,这样做的好处是,声明到全局,你只要引用了它,在页面任意地方都可以使用。但是同样的缺点也很明显,容易引起全局污染,浪费浏览器资源。而且当我方法多的时候,调用起来很不方便。

第二种,这是我们最长使用的声明方式,函数表达式。目的就是加载了这个js以后,当我需要使用的时候,直接调用str.xxx(),就可以返回我需要的内容了。并且,方法封装在变量内部,不会引起全局污染,也符合模块化的规则。

ok,ok。我们接下来,就要把我们自己的方法定义到vue上去使用。

我首先把js放到了项目文件夹中,然后在main.js中引入。

调用起来是完全没有问题的。

但是,又好像哪里不太对?是的,这样我们仅仅是引入了一个js,并没有把它形成一个js的插件。

我们来看看一个标准的js插件的调用形式:

为什么他这个可以直接从this上面调用???

个人理解他的方法应该是被定义到全局的vue对象上面了,这里的this应该指的就是vue本身!

如果你看过龙哥前面的教程,你应该知道,当我们引入的插件,是一个对象的时候,应该使用:

use方法,可以把一个符合vue标准的对象加载到vue本体上。

首先给我们的main.js下面增加一行。

然后打开我们自己的js文件,按照下面的方式书写:

最后在页面中调用的时候:

到此我们的插件已经跟vue融为一体!其实插件本身还支持更多参数和写法,请各位同学自行研究吧!

JS函数的定义与调用方法

JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式

1.方法调用模式:

先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来执行方法,this即指当前的myobject

对象。

var blogInfo={

blogId:123,

blogName:"werwr",

showBlog:function(){alert(this.blogId)}

}

blogInfo.showBlog()

2.函数调用模式

定义一个函数,设置一个变量名保存函数,这时this指向到window对象。

var myfunc = function(a,b){

return a+b

}

alert(myfunc(3,4))

3.构造器调用模式

定义一个函数对象,在对象中定义属性,在其原型对象中定义方法。在使用prototype的方法时,必须实例化该对象才能调用其方法。

var myfunc = function(a){

this.a = a

}

myfunc.prototype = {

show:function(){alert(this.a)}

}

var newfunc = new myfunc("123123123")

newfunc.show()

4.apply,call调用模式

var myobject={}

var sum = function(a,b){

return a+b

}

var sum2 = sum.call(myobject,10,30)//var sum2 = sum.apply(myobject,[10,30])

alert(sum2)

方法一:

1、首先建立一个按钮,在后台将调用或处理的内容写入Button1_Click中

protected void Button1_Click(object sender, EventArgs e) 

    this.TextBox1.Text = "voodooer" 

}

2、在前台可以这样调用:

<input type="button" value="访问C#的方法" onclick='document.getElementById("Button1").click()' />

方法二:1、函数声明为public 或者protected

public string ss() 

    return("voodooer") 

}

2、 前台js调用方法

var a = " <%=ss()%>" 

alert(a)

方法三:

1、 前台代码

<script>

function __doPostBack(eventTarget, eventArgument) {     

    var theForm = document.Form1 //指runat=server的form     

    theForm.__EVENTTARGET.value = eventTarget     

    theFrom.__EVENTARGUMENT.value = eventArgument     

    theForm.submit() 

</script><input type="button" value="按钮" >

方法四: 

1、前台代码

<script language="javascript"> 

function SubmitKeyClick() 

    if (event.keyCode == 13) 

    { 

        event.cancelBubble = true 

        event.returnValue = false 

        document.all.FunName.value="要调用的函数名"; 

        document.form[0].submit() 

    } 

</script> 

<INPUT type="text"> 

<input type="hidden" > 〈!--用来存储要调用的函数 --〉