插件,你也可以理解为就是一套方法的集合,当我们需要调用它的时候,引入一下就行了。
举个例子,比如说,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融为一体!其实插件本身还支持更多参数和写法,请各位同学自行研究吧!
你直接在JSP页面上引那个JS控件 然后在你要引用的地方写个onclick事件调用.比如看下面代码片段:
<html:html>
<head>
<html:base/>
<title>缴存管理</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<link rel="stylesheet" href="<%=path%>/css/index.css" type="text/css">
</head>
<script src="<%=path%>/js/common.js">
</script>
<script type="text/javascript">
var s1=""
var s2=""
function executeAjax() {
var queryString = "monthpayTaFindAAC.do?"
var id = document.monthpayJYAF.elements["orgid"].value.trim()
if(isNaN(id)){
alert("请输入正确格式的编号!")
document.monthpayJYAF.elements["orgid"].value=""
document.monthpayJYAF.elements["orgid"].focus()
return false
}
if(id == ""){
gotoOrg("2")
}else{
-------------------------------------------
common.js是项目中的js,这里用的是相对路径引入,
-------------------------------------------
<td width="17%" class="td1" >单位编号</td>
<td width="23%" >
<html:text name="monthpayJYAF" property="orgid" ondblclick="return executeAjax()" onkeydown="gotoEnter()" styleClass="input3" styleId="txtsearch"/>
<input type="hidden" name="orgsid" value="<bean:write name="monthpayJYAF" property="orgid"/>">
</td>
--------------------------------------------
上面是个文本框,onclick js中的executeAjax这个方法.
大体方法是这么用,至于你的在文本框中显示日期,要具体问题具体去分析解决了,我以前一个项目里有你这个功能,但不是我做的,现在一时找不出来了.抱歉.
牙叔教程 简单易懂
本篇教程是一个自定义控件的教学演示, 无任何实际功能,
更没有提现功能, 那只是一个自定义按钮
主要演示自动义控件和动画, 除此之外没有其他任何功能
再次强调, 本脚本只是UI演示, 无任何其他功能
https://www.bilibili.com/video/BV1t64y1B7Ps
9.0.4
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途