学习 kityminder 笔记(五)

2019独角兽企业重金招聘Python工程师标准>>>

接着学习 kityminder, 前面其实没看完 kity, 大致了解之后, 我们先看看 minder 部分, 两者结合起来学更好些.

下载 kityminder-core (按文档说只含核心部分), 从 git-hub, 建立起开发/构造环境, 打开网页 dev.html 看
果然能出来脑图了, 真不错! 于是从 dev.html 网页开始, 其先加载 kity.js, 然后通过 seajs 加载 kityminder
各个 js 模块. 前述我们分别简单了解过 kity, seajs, 这里就略过, 直接去 kityminder src 目录找.

于是找到 src/kityminder.js, 代码大致是:
   define( ...   // seajs 要求的格式, CMD 规范.
       kityminder = {
           许多许多 module = require('...xxx.js')   
       }
注解说顺序是有讲究的 (有依赖关系的), 所以我们也大致按照顺序(大致)了解下各个 module.

 

== core/utils.js ==

提供一组函数, 常见的如 extend, each, trim, clone 等就略了.
另有 uuid(group): 负责为指定 group 生成下一个可用 id. 估计为每种 svg 元素生成 id.
guid(): 生成一个类似于(像) guid 的长的随机字符串?
   我们实验一下, 在浏览器 console 输入:
      var utils = seajs.require('core/utils.js')
      utils.guid() --> 打印出 `azzsqpc8jm68' (随机的), 再来一个: `azzsqq169tz4', 前几个字符总是 azzsq, 不太满意吧...

comparePlainObject(a,b): 比较两个 plain 对象是否等价? 方法是用将两个对象用 JSON 字符串化, 然后
   比较两个字符串... 我试验了一下, 这两个 plain-object 不等价:
      var a = {x:1, y:2}, b = {y:2, x:1};
      utils.comparePlainObject(a, b) --> false! 所以不要弄太刁钻的对象......

剩下的看着也不是很重要, 暂时略...

 

== kityminder.Minder (core/minder.js) ==

注释说暴露在 window 上的唯一变量. 应该就是 window.km 对象.

定义为 Minder = kity.createClass(..., ctor)

其中这里 ctor 不是很复杂, 也没有别的方法, 估计会在别的模块 e