学习 Kity 笔记(一) Class 支持

(此文已经过时, 会重新回顾学习并写新文, 2015-12-03 注释)

 

Kity 是百度前端小组开发的 SVG 矢量图形库.    

下载了 kity, 以及 grunt, seajs, 尝试用 grunt 构建发生错误:
   Fatal error: Module [./timeline] not found

尝试用 seajs 推荐的 spm 构建 也发生错误, 最终创建出来的 kity.js 是空的. 警告信息为:
   Task: "transport:src" (transport) task
   warn: [TypeError: Cannot read property 'replace' of ~]

对各种构建工具不熟, 问题不好解决. 尝试找找原开发人员帮忙吧.

 

===

今天进行了修正, package.json 文件中加入了 "family" 项(seajs 构建似乎需要它), 现在
spm 构建能够成功进行(但实际还有问题...). 这样可以继续学习下去了.

看 kity.js, 里面定义了全局的 kity 对象(容器), 里面提供了几个部分的功能, 有:
   core(core/*.js), shape(graphic/*.js), animate(animate/*.js), fitler(filter/*.js), effect(filter/effect/*.js)

这些顺序也是我们学习的顺序, 预计学习了 core, shape 能理解基本部分, 然后继续才能理解高级的动画过滤等(可选)

文档上说 Kity Graphic 使用了 OOP 编程和接口风格, 请参考 Kity Graphic OOP.md (但没写... ...),
也就是说, 我们需要自己去看 core 下面各个 js, 以了解 kity 的 OOP 细节如何.

core 目录下还好只有 3 个js, class.js, utils.js, browser.js 一看名字就知道重点是 class.js, 注释比较丰富,
要感谢开发者写下这么多注释.

class.js 定义(exports)了类 Class, 还有一些约定的属性和方法(?估计).
方法 base(name, args...) 实现得到 caller, 再得到 .__KityMethodClass 等等(都是约定的名字)
   然后得到基类(base), 找到基类的 .prototype, 进而找到基类该方法. 相当于模拟实现了 java/c#
   的关键字 super/base. 但是要求方法有 __KityMethodClass 等等...

其实我也有这种相似的需求, 从一个对象找到其所属类(object=>class), 再从类找到其
  基类(class=>base-class), 那么有什么好办法实现呢?

方法 callBase() 调用基类同名函数, 也是依赖 caller, __KityXXX .
   我实现这种需求是直接得到基类该函数 (BaseClass.prototype.func) 然后调用, 因为使用地方比较少,
   也就暂时没有寻求解决方案...

方法 mixin(name) 无注释, 大概?是得到类里面被 mixin 的名为 name 的方法, 然后调用, 暂不知什么地方用.

方法 callMixin() 估计和 callBase() 语义相似, 细节先未学习.

方法 pipe() 在文档中有介绍, 目的是让对对象的一连串操作整理的干净起来. (有点像链式调用的概念)
   也许是为了寻求写出美而简洁的代码的一种解决思路. (可借鉴学习)

方法 getType() 获得对象类型. 这里约定每个类(子类)提供 __KityClassName 属性以获得, 如果 __proto__
   属性能用的话, 估计就不用这么麻烦了.

测试: 在某个终于能运行的 _sample.html 页面(其实还有错), 我们在浏览器 debugger 中创建一个
  rect = new kity.Rect() 对象, 然后查看  rect 对象, 其  __KityClassName  值为 'Rect'.

这里我推测, 这里 Class 提供的方法,约定, 目的是可以建立起类似于面向对象语言的类继承体系.

方法 getClass() 用于获得对象的类. 通过对象的 constructor 属性.

神奇的函数 checkBaseConstructorCall() 用于检查基类(子类?) 是否调用了父类的构造函数.
   通过得到目标类的代码字符串, 用正则找 callBase, 真不能建议这么做...

函数 inherit(ctor, BaseClass, classname) 似乎是创建一个名为 classname 的新类, 构造函数
  为 ctor, 从基类 BaseClass 派生. 这个函数使用了特定变量值 KITY_INHERIT_FLAG 来确定一个
  类构造被调用时, 是用于实例化还是作为子类 prototype. (我也用类似方法, flag 是一个空对象)

另使用 eval() 的方法产生构造函数, 这样也许能产生正确的 Class.toString() ?

通过此函数创建的类, 自动添加了数个  __KityXXX 约定量. 既然能够添加, 理论上就能将获得本类,
   基类的信息都放这里.

函数 mixin(NewClass, mixins) 似乎可以将多个类的方法 mixin 到指定 NewClass 中.
   这样用于模拟/实现类的多继承吗?

函数 extend(BaseClass, extension) 用于将 extension 中给出的方法扩展到 BaseClass 上,
   同时给这些方法加上 __KityMethodXXX 的属性... (前述实现 callBase() 的基础)

函数 createClass(classname, defines) 用于创建名为  classname 的类.
   在 defines{} 中可指定 base(基类), mixins(混入类), construtor 等等.

注释中有例子, 用于创建类, 创建有基类的类, 混入别的类(接口).

函数 extendClass(clazz, extension) 用于扩展 extension 到类 clazz (prototype).
   实际即 extend() 函数. 只是 extend() 函数已假定 BaseClass 参数是一个类, 扩展
   是扩展到 BaseClass.prototype 上. 如果不这么假定就更好了.

综上所述, class.js 提供了一套创建类体系的思想,约定与实现. 具体优缺点还要看其 Graphic
  类体系如何应用的.