You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1 lines
4.5 KiB

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0bd3f9"],{"2ad8":function(s,a,n){"use strict";n.r(a);var t=function(){var s=this;s._self._c;return s._m(0)},l=[function(){var s=this,a=s._self._c;return a("div",[a("h1",[s._v("如何开发一个插件")]),a("p",[s._v("库本身提供了一些插件,如果满足不了你的需求,你也可以自己开发一个新插件。")]),a("p",[s._v("想要开发一个插件,你肯定需要对库的实现原理、模块划分、目录结构等等有一定了解,简而言之,需要你对库的源码有一定程度的熟悉,所以如果还没看过,现在就可以先去阅读一下,好消息是,本库的源码并不复杂,相信你一定能看懂。")]),a("p",[s._v("在你决定动手之前,最好先看一下内部插件是如何实现的。")]),a("p",[s._v("一个插件就是一个类:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-class"},[a("span",{staticClass:"hljs-keyword"},[s._v("class")]),s._v(" "),a("span",{staticClass:"hljs-title"},[s._v("YourPlugin")]),s._v(" ")]),s._v("{\n "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-title"},[s._v("constructor")]),s._v("("),a("span",{staticClass:"hljs-params"},[s._v("{ mindMap }")]),s._v(")")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".mindMap = mindMap\n }\n\n "),a("span",{staticClass:"hljs-comment"},[s._v("// 插件被移除前做的事情")]),s._v("\n "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-title"},[s._v("beforePluginRemove")]),s._v("("),a("span",{staticClass:"hljs-params"}),s._v(")")]),s._v(" {\n \n }\n\n "),a("span",{staticClass:"hljs-comment"},[s._v("// 插件被卸载前做的事情")]),s._v("\n "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-title"},[s._v("beforePluginDestroy")]),s._v("("),a("span",{staticClass:"hljs-params"}),s._v(")")]),s._v(" {\n \n }\n}\n\nScrollbar.instanceName = "),a("span",{staticClass:"hljs-string"},[s._v("'yourPlugin'")]),s._v("\n")])]),a("p",[s._v("实例化插件时会传入思维导图实例,你可以保存起来,后续可以通过它来监听方法或调用实例的方法,甚至是其他插件的方法。")]),a("p",[s._v("需要给插件类添加一个静态属性"),a("code",[s._v("instanceName")]),s._v(",会将你的插件实例通过该属性保存到思维导图实例上,外部或其他插件想要获取你的插件实例时都需要通过该属性:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.yourPlugin.xxx\n")])]),a("p",[s._v("插件存在两个生命周期函数:")]),a("p",[a("code",[s._v("beforePluginRemove")]),s._v("生命周期会在思维导图实例调用"),a("code",[s._v("removePlugin")]),s._v("方法时调用,代表思维导图实例并没有销毁,只是移除该插件。")]),a("p",[a("code",[s._v("beforePluginDestroy")]),s._v("生命周期会在销毁思维导图时调用,此时思维导图实例也会被销毁。")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.removePlugin(YourPlugin)\n")])]),a("p",[s._v("你也可以继承内部的一些插件:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ScrollbarPlugin "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map/src/plugins/Scrollbar.js'")]),s._v("\n\n"),a("span",{staticClass:"hljs-class"},[a("span",{staticClass:"hljs-keyword"},[s._v("class")]),s._v(" "),a("span",{staticClass:"hljs-title"},[s._v("YourPlugin")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("extends")]),s._v(" "),a("span",{staticClass:"hljs-title"},[s._v("ScrollbarPlugin")]),s._v(" ")]),s._v("{\n "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-title"},[s._v("constructor")]),s._v("("),a("span",{staticClass:"hljs-params"},[s._v("opt")]),s._v(")")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("super")]),s._v("(opt)\n }\n}\n\nScrollbar.instanceName = "),a("span",{staticClass:"hljs-string"},[s._v("'yourPlugin'")]),s._v("\n")])]),a("p",[s._v("插件的原理无非是监听一些你需要的事件,然后调用一些你需要的方法来完成一些功能,其实没啥好多说的,建议看一下内部插件的实现。")]),a("p",[s._v("当你完成了一个插件后,你可以考虑发布到"),a("code",[s._v("npm")]),s._v(",提供给其他开发者使用。")])])}],i={},v=i,_=n("2877"),c=Object(_["a"])(v,t,l,!1,null,null,null);a["default"]=c.exports}}]);