首页 > 代码库 > bootstrap 的jq插件 button 结构解析
bootstrap 的jq插件 button 结构解析
首先声明：JS是没有类的概念的，所以的一切都是派生自现有对象的一个副本；如果有面向对象语言的基础，可以当做类来理解；
然后这是对jquery对象的插件对象的分析图，同时我是用button对象举例分析的，自己一己之见，，分析之前先
科普对象—构造函数
//构造函数
function myConstructor(messg){
//this的指向是对象，指向环境一定不要搞混乱，也可以使用apply或者call指定指向环境；
this.messg=messg;
//私有属性
var separatorSign=‘-‘;
var myOwner=this;
//私有方法
function alertMessg(){
alert(myOwner.messg);
}
alertMessg(); //调用私有函数;
//特权函数(也可当做公有函数) 能被公有函数访问，也能访问别人，
this.appenToMessg=function(str){
this.messg+=separatorSign+str;
alertMessg(); //特权函数可以访问私有对象 因为它在构造函数的作用域里面，而公有函数就不能访问私有成员（私有属性+函数）
}
}
//公有方法
myConstructor.prototype.clearMessg=function(str){
this.myMessg=‘ ‘;
}
//静态属性
myConstructor.name=‘AndanLiu‘;
//静态方法
myConstructor.alertName=function(){
alert(this.name);
}
说明：
1.私有和特权成员在构造函数内部，会被带到任何对象的实例中去；
2.公有的原型成员是对象（构造的函数，匿名的或者有名的都不打紧，姑且当做this，指向一个对象）的的一部分，
适用于通过new关键字实例话的该对象的每个实例；
3.静态成员只适用于对象——构造函数本身。
下面来正式分析：
bootstrap 的 jQuery 对象的插件（会举一个button插件做具体分析）
对prototype的解释：
1.JS规定，每个构造函数都有一个prototype的属性，指向一个对象。就是说一个构造函数存在即有 prototype属性。
而且通过 对象.prototype.constructor指向这个构造函数（function（）{...}）;
2.prototype 是向对象添加属性和方法的， 添加的都是公有的；
对_proto_:的理解：
1.原型链：对象内部初始化一个对象，我们访问一个属性的时候，若不存在，继续往下忘下找，就是下无底线....；
2.我的理解就是每创建一个对象的时候，就会产生响应的_proto_:function()和_proto_:Object , _proto_:function()是在对象静态成员里面创建，
_proto_:Object是在prototype里面创建，只要有一个对象产生，响应的_proto_:function()和_proto_:Object就会随应而生；
3.像可以给对象添加自定义属性，或者给对象扩充成员；都是_proto_:的功劳；例如：var arr=[0,1,2] ,你可以使用arr[3]=3来动态的扩充这个数组
对象，但如果是C语言或者C++的话，会有内存溢出的，会出错的；
对构造函数的理解：
它就是一个被封装起来的算法而已，就相当是一个内存块， 这个内存块里面写的就是这些方法和属性如何运算的， 要想让它有用，就必须一个变量指向它，向它传递参数，就是信息，然后利用它的方法，对象被封装了而已，外面的必须要引用它才能运算， 就是构造函数赋值给一个变量。
代码部分分析—button
+function ($) {
‘use strict‘;
//创建匿名函数赋值给Button,也就是Button指针指向这块对象的地址； 构造函数 constructor:function(element, options) 类的开始
var Button = function (element, options) {...}；
//DEFAULTS 为对象的静态属性，因为是把Object赋值给它了，而不是Function对象，所以是静态属性，
//静态对象只适用于构造函数本身，如果用new创建对象实体，DEFAULTS会丢失，静态方法同样是这个道理
//本插件没有用到new，全部是对象的引用，所以不用担心这个问题。
Button.DEFAULTS = {loadingText: ‘loading...‘}；
//对象（Button构造函数）的公有方法，它不能访问私有成员（属性+方法），只能被访问和访问 特权方法（这里不写，自行百度...）
Button.prototype.setState = function (state){...};
Button.prototype.toggle = function () {...};
//将对象引用存储在变量里面，其实就是将对象的 首地址存在变量old里面， old在 堆 里面存在，它储存着对象的指针， 对象也是在堆里面，当new一个实体时，实体被存储在栈里面
var old = $.fn.button;
//$.fn.button 构造函数，也是button （小写，跟Button对象不一样）对象； $.button=$.fn.button=$.prototype.button
$.fn.button = function (option) {...};
//将Button 的值，就是Button所引用的对象赋值给$.fn.button.Constructor 对象， $.fn.button.Constructor=function(element, options) {...}；
$.fn.button.Constructor = Button;
//将下面的匿名函数（作用是返回$.fn.button对象，有返回值，变量可以引用它（对象），其实按我的理解也就是返回对象的内存 首地址 ，因为要有一个变量接收它，从而才能指向它使用）
$.fn.button.noConflict = function (){...};
//click 加的命名空间 当点击含有button 、data-api 、‘[data-toggle^=button] 就能触发 function (e) {...}
$(document).on(‘click.bs.button.data-api‘, ‘[data-toggle^=button]‘, function (e) {...});
}(jQuery);
代码逻辑图—button
以上分析全是个人理解，在此留下本人邮箱：hai33590@163.com,欢迎大家指正！
希望大家多提技术指导，这也是我的第一篇成长的技术博客，记录自己的学习历程，希望少喷多提宝贵意见，谢谢
%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%22%20style%3D%22whiteSpace%3Dwrap%3Bhtml%3D1%3Baspect%3Dfixed%3BstrokeColor%3D%23000000%3BfillColor%3Dnone%3Bshadow%3D0%3Bdashed%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%227%22%20y%3D%2298%22%20width%3D%22570%22%20height%3D%22150%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%223%22%20value%3D%22%22%20style%3D%22whiteSpace%3Dwrap%3Bhtml%3D1%3Baspect%3Dfixed%3BstrokeColor%3D%23000000%3BfillColor%3Dnone%3Bshadow%3D0%3Bdashed%3D1%3BverticalAlign%3Dmiddle%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22304%22%20y%3D%22291%22%20width%3D%22270%22%20height%3D%2270%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%224%22%20value%3D%22%22%20style%3D%22whiteSpace%3Dwrap%3Bhtml%3D1%3Baspect%3Dfixed%3BstrokeColor%3D%23000000%3BfillColor%3Dnone%3Bshadow%3D0%3Bdashed%3D1%3BverticalAlign%3Dmiddle%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%228%22%20y%3D%22570%22%20width%3D%22570%22%20height%3D%2270%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%225%22%20value%3D%22%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2217%22%20y%3D%22118%22%20width%3D%22100%22%20height%3D%2299%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%226%22%20value%3D%22%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22144%22%20y%3D%22119%22%20width%3D%22305%22%20height%3D%2298%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%227%22%20value%3D%22%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3BstrokeColor%3D%233333FF%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22154%22%20y%3D%22149%22%20width%3D%22200%22%20height%3D%2263%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%228%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3B%22%20edge%3D%221%22%20source%3D%229%22%20target%3D%2229%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2267.57142857142867%22%20y%3D%22202.0000000000001%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%229%22%20value%3D%22prototype%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3D%23dae8fc%3BstrokeColor%3D%236c8ebf%3BgradientColor%3D%237ea6e0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2227%22%20y%3D%22171%22%20width%3D%2280%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2210%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.072%3BexitY%3D1.042%3BentryX%3D0.5%3BentryY%3D0%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BfillColor%3D%23ffcd28%3BstrokeColor%3D%23CC0000%3BgradientColor%3D%23ffa500%3BexitPerimeter%3D0%3B%22%20edge%3D%221%22%20source%3D%2215%22%20target%3D%229%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2267.57142857142867%22%20y%3D%2259.57142857142867%22%20as%3D%22geometry%22%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22183%22%20y%3D%2270%22%2F%3E%3CmxPoint%20x%3D%2267%22%20y%3D%2270%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2211%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.25%3BexitY%3D1%3BentryX%3D0.5%3BentryY%3D0%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3B%22%20edge%3D%221%22%20source%3D%2215%22%20target%3D%2219%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22203.28571428571445%22%20y%3D%2241%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22259.5882352941178%22%20y%3D%2289.47058823529414%22%20as%3D%22sourcePoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22204%22%20y%3D%2241%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2212%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.75%3BexitY%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3B%22%20edge%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22303.28571428571445%22%20y%3D%2242.428571428571445%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22304.7142857142858%22%20y%3D%2242.428571428571445%22%20as%3D%22sourcePoint%22%2F%3E%3CmxPoint%20x%3D%22303.28571428571445%22%20y%3D%22172.42857142857144%22%20as%3D%22targetPoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22303%22%20y%3D%2242%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2213%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Bhtml%3D1%3BentryX%3D0.5%3BentryY%3D0%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3Bopacity%3D50%3Brounded%3D0%3B%22%20edge%3D%221%22%20source%3D%2215%22%20target%3D%2223%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22334.7142857142858%22%20y%3D%2258%22%20as%3D%22geometry%22%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22335%22%20y%3D%2280%22%2F%3E%3CmxPoint%20x%3D%22402%22%20y%3D%2280%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2214%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.973%3BexitY%3D1.032%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BentryX%3D0.5%3BentryY%3D0%3Bopacity%3D50%3BexitPerimeter%3D0%3B%22%20edge%3D%221%22%20source%3D%2215%22%20target%3D%2224%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22344.7142857142858%22%20y%3D%2259.57142857142867%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22450%22%20y%3D%2217.888888888888886%22%20as%3D%22targetPoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22345%22%20y%3D%2270%22%2F%3E%3CmxPoint%20x%3D%22517%22%20y%3D%2270%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2215%22%20value%3D%22%26lt%3Bspan%26gt%3B%26lt%3Bfont%20style%3D%26quot%3Bfont-size%3A%2018px%26quot%3B%26gt%3B%24.fn.button%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fspan%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3BfillColor%3D%23FFCD28%3BgradientColor%3D%23FFA500%3BstrokeColor%3D%23D79B00%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22170%22%20y%3D%2219%22%20width%3D%22180%22%20height%3D%2239%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2216%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.25%3BexitY%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3BentryX%3D0.886%3BentryY%3D-0.021%3BentryPerimeter%3D0%3B%22%20edge%3D%221%22%20source%3D%2219%22%20target%3D%2232%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22136.14285714285734%22%20y%3D%22202.42857142857144%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22270.05555555555554%22%20y%3D%22250%22%20as%3D%22targetPoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22190%22%20y%3D%22202%22%2F%3E%3CmxPoint%20x%3D%22190%22%20y%3D%22540%22%2F%3E%3CmxPoint%20x%3D%22136%22%20y%3D%22540%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2217%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3BexitX%3D0.575%3BexitY%3D1.018%3BexitPerimeter%3D0%3B%22%20edge%3D%221%22%20source%3D%2219%22%20target%3D%2239%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22210.42857142857156%22%20y%3D%22202.42857142857144%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22293.1428571428571%22%20y%3D%22405%22%20as%3D%22targetPoint%22%2F%3E%3CmxPoint%20x%3D%22294.8571428571429%22%20y%3D%22125%22%20as%3D%22sourcePoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22210%22%20y%3D%22560%22%2F%3E%3CmxPoint%20x%3D%22260%22%20y%3D%22560%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2218%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.75%3BexitY%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3Bopacity%3D50%3BentryX%3D0.395%3BentryY%3D0.032%3BentryPerimeter%3D0%3B%22%20edge%3D%221%22%20source%3D%2219%22%20target%3D%2241%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22224.71428571428578%22%20y%3D%22153.8571428571429%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22300%22%20y%3D%22240%22%20as%3D%22targetPoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22224%22%20y%3D%22154%22%2F%3E%3CmxPoint%20x%3D%22230%22%20y%3D%22154%22%2F%3E%3CmxPoint%20x%3D%22230%22%20y%3D%22540%22%2F%3E%3CmxPoint%20x%3D%22474%22%20y%3D%22540%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2219%22%20value%3D%22Constructor%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3D%23FFCD28%3BstrokeColor%3D%23D79B00%3BgradientColor%3D%23FFA500%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22164%22%20y%3D%22171%22%20width%3D%2280%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2220%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.5%3BexitY%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3B%22%20edge%3D%221%22%20source%3D%2222%22%20target%3D%2237%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22304.7142857142858%22%20y%3D%22202.42857142857144%22%20as%3D%22geometry%22%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22304%22%20y%3D%22280%22%2F%3E%3CmxPoint%20x%3D%22356%22%20y%3D%22280%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2221%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.75%3BexitY%3D1%3BentryX%3D0.5%3BentryY%3D0%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3Bopacity%3D50%3B%22%20edge%3D%221%22%20source%3D%2222%22%20target%3D%2245%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22324.7142857142858%22%20y%3D%22202.42857142857144%22%20as%3D%22geometry%22%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22324%22%20y%3D%22270%22%2F%3E%3CmxPoint%20x%3D%22490%22%20y%3D%22270%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2222%22%20value%3D%22noConflict%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3D%23ffcd28%3BstrokeColor%3D%23d79b00%3BgradientColor%3D%23ffa500%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22264%22%20y%3D%22172%22%20width%3D%2280%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2223%22%20value%3D%22%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3BstrokeColor%3D%233333FF%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22364%22%20y%3D%22149%22%20width%3D%2275%22%20height%3D%2263%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2224%22%20value%3D%22%26lt%3Bb%26gt%3B_proto_%3Afunction()%26lt%3B%2Fb%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22462%22%20y%3D%22118%22%20width%3D%22110%22%20height%3D%2298%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2225%22%20value%3D%22%22%20style%3D%22whiteSpace%3Dwrap%3Bhtml%3D1%3Bshadow%3D0%3BstrokeColor%3D%23FFF4C3%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2211%22%20y%3D%22319%22%20width%3D%22120%22%20height%3D%2260%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2226%22%20value%3D%22%26lt%3Bb%26gt%3B%E9%9D%99%E6%80%81%26lt%3B%2Fb%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3D%23000000%3BfillColor%3D%23ffffff%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22314%22%20y%3D%22124%22%20width%3D%2240%22%20height%3D%2220%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2227%22%20value%3D%22%26lt%3Bb%26gt%3B%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%26lt%3B%2Fb%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3D%23000000%3BfillColor%3D%23ffffff%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22217%22%20y%3D%22152%22%20width%3D%2280%22%20height%3D%2217%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2228%22%20value%3D%22%26lt%3Bb%26gt%3B%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7%26lt%3B%2Fb%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3D%23000000%3BfillColor%3D%23ffffff%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22374%22%20y%3D%22154%22%20width%3D%2255%22%20height%3D%2217%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2229%22%20value%3D%22%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3B%7B%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3Bconstructo%EF%BC%9Afunction()%2C%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B_proto_%3AObject%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%7D%26lt%3B%2Fdiv%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2220%22%20y%3D%22379%22%20width%3D%22160%22%20height%3D%2293%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2230%22%20value%3D%22%26lt%3Bb%26gt%3B%E5%B1%9E%E6%80%A7%26lt%3B%2Fb%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3D%23000000%3BfillColor%3Dnone%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22105%22%20y%3D%2250%22%20width%3D%2240%22%20height%3D%2217%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2231%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BentryX%3D0.5%3BentryY%3D0%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3B%22%20edge%3D%221%22%20source%3D%2232%22%20target%3D%2233%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22104.71428571428578%22%20y%3D%22619%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2232%22%20value%3D%22prototype%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3D%23DAE8FC%3BstrokeColor%3D%236c8ebf%3BgradientColor%3D%237EA6E0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2265%22%20y%3D%22588%22%20width%3D%2280%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2233%22%20value%3D%22%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3B%7B%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3Bconstructo%EF%BC%9Afunction(element%2Coptions)%2C%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3BsetState%3Afunction(state)%2C%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3Btoggle%3Afunction()%2C%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B_proto_%3AObject%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%7D%26lt%3B%2Fdiv%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2215%22%20y%3D%22667%22%20width%3D%22230%22%20height%3D%2293%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2234%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3BentryX%3D0%3BentryY%3D0.5%3B%22%20edge%3D%221%22%20source%3D%2235%22%20target%3D%2232%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2244.71428571428578%22%20y%3D%22557%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%2285%22%20y%3D%22616.9999999999999%22%20as%3D%22targetPoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%2245%22%20y%3D%22604%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2235%22%20value%3D%22%26lt%3Bfont%20color%3D%26quot%3B%23cc0000%26quot%3B%26gt%3Bvar%26lt%3B%2Ffont%26gt%3B%20Button%22%20style%3D%22ellipse%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Bshadow%3D0%3BstrokeColor%3D%23d79b00%3BfillColor%3D%23ffe6cc%3BfontSize%3D6%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%225%22%20y%3D%22527%22%20width%3D%2280%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2236%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.5%3BexitY%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3BentryX%3D0.25%3BentryY%3D0%3B%22%20edge%3D%221%22%20source%3D%2237%22%20target%3D%2246%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22346.14285714285734%22%20y%3D%22341.0000000000001%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22357%22%20y%3D%22374%22%20as%3D%22targetPoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22356%22%20y%3D%22364%22%2F%3E%3CmxPoint%20x%3D%22346%22%20y%3D%22364%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2237%22%20value%3D%22prototype%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3D%23dae8fc%3BstrokeColor%3D%236c8ebf%3BgradientColor%3D%237ea6e0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22316%22%20y%3D%22310%22%20width%3D%2280%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2238%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BentryX%3D0.5%3BentryY%3D0%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3B%22%20edge%3D%221%22%20source%3D%2239%22%20target%3D%2242%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22294.7142857142858%22%20y%3D%22621%22%20as%3D%22geometry%22%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22295%22%20y%3D%22650%22%2F%3E%3CmxPoint%20x%3D%22317%22%20y%3D%22650%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2239%22%20value%3D%22DEFAULT%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3D%23DAE8FC%3BstrokeColor%3D%23D79B00%3BgradientColor%3D%237EA6E0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22255%22%20y%3D%22590%22%20width%3D%2280%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2240%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3Bhtml%3D1%3BexitX%3D0.75%3BexitY%3D1%3BentryX%3D0.75%3BentryY%3D1%3BjettySize%3Dauto%3BorthogonalLoop%3D1%3BstrokeColor%3D%23CC0000%3BfontSize%3D6%3B%22%20edge%3D%221%22%20source%3D%2219%22%20target%3D%2219%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22224.71428571428578%22%20y%3D%22202.42857142857144%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2241%22%20value%3D%22%26lt%3Bb%26gt%3B%26lt%3Bfont%26gt%3B_proto_%3Afunction()%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fb%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3BstrokeColor%3D%23D79B00%3BgradientColor%3D%23FFA500%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22419%22%20y%3D%22590%22%20width%3D%22140%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2242%22%20value%3D%22%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3B%7B%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3Bloading%3A%26quot%3Bloading%26quot%3B%2C%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B_proto_%3AObject%26lt%3Bbr%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%7D%26lt%3B%2Fdiv%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22260%22%20y%3D%22667%22%20width%3D%22115%22%20height%3D%2293%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2243%22%20value%3D%22%26lt%3Bb%26gt%3B%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7%26lt%3B%2Fb%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3D%23000000%3BfillColor%3D%23ffffff%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22300%22%20y%3D%22577%22%20width%3D%2255%22%20height%3D%2220%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2244%22%20value%3D%22%26lt%3Bb%26gt%3B%E5%B1%9E%E6%80%A7%26lt%3B%2Fb%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3D%23000000%3BfillColor%3Dnone%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22145%22%20y%3D%22519%22%20width%3D%2240%22%20height%3D%2217%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2245%22%20value%3D%22%26lt%3Bb%26gt%3B%26lt%3Bfont%26gt%3B_proto_%3Afunction()%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fb%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3BstrokeColor%3D%23D79B00%3BgradientColor%3D%23FFA500%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22420%22%20y%3D%22310%22%20width%3D%22140%22%20height%3D%2231%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2246%22%20value%3D%22%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3B%7B%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%26lt%3Bspan%26gt%3Bconstructo%EF%BC%9Afunction()%2C%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B_proto_%3AObject%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3Btext-align%3A%20left%26quot%3B%26gt%3B%7D%26lt%3B%2Fdiv%26gt%3B%22%20style%3D%22strokeWidth%3D2%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Balign%3Dcenter%3Bshadow%3D0%3Bdashed%3D1%3BfillColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22306%22%20y%3D%22379%22%20width%3D%22160%22%20height%3D%2293%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2247%22%20value%3D%22%26amp%3Bnbsp%3B%20%26amp%3Bnbsp%3B%20%26amp%3Bnbsp%3B%20%26amp%3Bnbsp%3B%20%E7%94%B1%E4%BA%8E%E6%8A%8AButton%E8%B5%8B%E5%80%BC%E7%BB%99%E4%BA%86button%E5%AF%B9%E8%B1%A1%E7%9A%84Constructor%EF%BC%8C%E6%89%80%E4%BB%A5Constructor%E6%8C%87%E5%90%91%E4%B8%8BButton%E6%8C%87%E5%90%91%E7%9A%84%E5%AF%B9%E8%B1%A1%EF%BC%88%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%89%E3%80%82js%E8%A7%84%E5%AE%9A%E4%BA%86%E6%AF%8F%E4%B8%AA%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E9%83%BD%E6%9C%89%E4%B8%80%E4%B8%AAprototype%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E4%BD%86%E6%98%AF%E5%A6%82%E6%9E%9C%E6%98%AF%E9%80%9A%E8%BF%87new%E8%BF%90%E7%AE%97%E7%AC%A6%E6%9D%A5%E7%94%9F%E6%88%90%E7%9A%84%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%B0%B1%E6%B2%A1%E6%9C%89prototype%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E5%91%A2%EF%BC%9F%E5%9B%A0%E4%B8%BA%E5%AE%83%E6%98%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E7%94%9F%E6%88%90%E7%9A%84%E5%AE%9E%E4%BE%8B%EF%BC%8C%E5%B7%B2%E7%BB%8F%E4%B8%8D%E6%98%AF%E5%AF%B9%E8%B1%A1%E4%BA%86%E3%80%82%E8%BF%99%E4%B8%AA%E7%95%A5...%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3Dnone%3BfillColor%3Dnone%3Balign%3Dleft%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3BfontSize%3D6%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2210%22%20y%3D%22780%22%20width%3D%22540%22%20height%3D%2220%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2248%22%20value%3D%22Adanliu12-02%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3Dnone%3BfillColor%3Dnone%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Bshadow%3D0%3BfontSize%3D3%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22470%22%20y%3D%22740%22%20width%3D%2280%22%20height%3D%2220%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E
bootstrap 的jq插件 button 结构解析