插件，你也可以理解为就是一套方法的集合，当我们需要调用它的时候，引入一下就行了。
举个例子，比如说，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融为一体！其实插件本身还支持更多参数和写法，请各位同学自行研究吧！
UBB插件是扩展UBB编辑器功能的开放接口，使用JavaScript编写。调试插件 UBB插件采用动态加载JavaScript文件的方法，一个插件对应一个JavaScript文件。浏览器安全限制不允许加载本机文件，即类似：file:///c|/temp/plugin.js的文件，所以您得有一个站点服务器。如果是本机测试，那么IIS或Apache得装上（向您推荐由网友ChrisAK编写的“UBB插件迷你服务器”）。在Firefox中调试如果不能访问localhost或者指定端口那么需配置： 地址栏输入：“about:config”进入配置页面；配置首选项“network.automatic-ntlm-auth.trusted-uris”为“localhost”。配置首选项“network.security.ports.banned.override”为“指定端口”，如：8080。 点击工具条上的UBB插件按钮“”进入插件管理对话框。 将“本机插件URL”输入框中的内容，替换成自己编写的插件所在链接即可装载。 编写插件插件Demo下载地址：plugin.js 插件只需要实现load()（装载）和free()（卸载）两个方法即可被调用。 var CsdnScriptPlugin999 = { /// /// 接口版本 /// interfaceVersion: "1.0", /// /// 插件标题，显示给用户看 /// caption: "插件标题", /// /// 设计者在CSDN的ID /// designer: "unknown", /// /// 按钮对象，可选项 /// buttons: {}, /// /// 分隔条对象，可选项 /// separators: {}, /// /// 装载 /// load: function() { this.separators["icon"] = CsdnScriptWorkshop.addSeparator()// 添加一个分隔条 this.buttons["icon"] = CsdnScriptWorkshop.addButton( // 添加一个工具按钮 this.caption, "按钮图片(16*16 gif)", function() { var htmlDialog = "对话框的HTML内容"var point = absolutePoint(this)// 按钮的位置 CsdnScriptWorkshop.showDialog("标题", htmlDialog, point.x, point.y + 18, 200, 200)})}, /// /// 卸载 /// free: function() { for (var button in this.buttons) CsdnScriptWorkshop.deleteButton(this.buttons[button])for (var separator in this.separators) CsdnScriptWorkshop.deleteSeparator(this.separators[separator])} }本地插件对象名必须为：“CsdnScriptPlugin999” 必须填写的字段：interfaceVersion（接口版本）、caption（标题）、designer（设计人CSDN ID）必须填写的方法：load()（装载插件）、free()（卸载插件）添加工具按钮或分隔条、获得或设置文本框内容通过调用“CsdnScriptWorkshop”对象的方法实现，声明如下： var CsdnScriptWorkshop = { /// /// 接口版本 /// interfaceVersion: "1.0", /// /// 获得UBB编辑器 /// /// 返回编辑对象 getEditor: function() {...}, /// /// 获得UBB编辑器文本 /// /// 返回全部文本 getEditorText: function() {...}, /// /// 设置UBB编辑器文本 /// /// 文本内容 setEditorText: function(value) {...}, /// /// 获得UBB编辑器选中文本 /// /// 返回当前选中的文本 getSelectText: function() {...}, /// /// 设置UBB编辑器选中文本 /// /// 文本内容 setSelectText: function(value) {...}, /// /// 添加工具按钮 /// /// 提示内容 /// 图标URL，16*16，可以通过个人空间上传 /// 点击按钮执行的函数 /// 返回添加的按钮对象 addButton: function(hint, icon, click) {...}, /// /// 删除工具按钮 /// /// 按钮对象 deleteButton: function(button) {...}, /// /// 添加工具分隔条 /// /// 返回添加的分隔条对象 addSeparator: function() {...}, /// /// 删除工具分隔条 /// /// 分隔条对象 deleteSeparator: function(separator) {...}, /// /// 显示对话框 /// /// 标题/// 显示的html内容 /// 左边距 /// 上边距 /// 宽度/// 高度showDialog: function(title, html, left, top, width, height) {...}, /// /// 关闭对话框 /// closeDialog: function() {...} } 控制对话框显示位置或保存用户使用习惯可以调用如下公用函数： /// /// 获得元素的绝对坐标对象(访问x,y字段) /// /// HTML元素 /// 返回元素所在的绝对坐标 function absolutePoint(element) {...} /// /// 设置Cookie值 /// /// Cookie变量名 /// Cookie值 /// 保存的天数 function setCookie(name, value, days) {...} /// /// 获取Cookie值 /// /// Cookie变量名 /// 返回获取到的Cookie值 function getCookie(name) {...} 推荐自己的插件如果想让更多的网友分享到您的创意和乐趣，那么赶紧向我们发邮件推荐您的插件吧。最近在开发一个 electron 程序，其中有用到和硬件通讯部分；硬件厂商给的是 .dll 链接库做通讯桥接，
第一版本使用 C 写的 Node.js 扩展
