(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}}]);