在编写组件的基类时，我从未想过要把这个类的方法和属性编写的这么密集，后来在D.js （DikeJS core component）DikeJs的核心组件的出现，使得方法得到了进一步的扩充，D.js目前只有一个方法，就是根据ID和NAME获取实例化后的组件对象，而基类BaseClass中存在的公共属性、方法和私有属性和方法使得每个组件在继承时有了选择性。
此刻DikeJS的成长真是有着许多的偶然和思维的跳跃，一个类的内容可能会让读者存在很大的疑问，为了处理这些疑问，我尽量的将注释写到最好。
BaseClass.js
/**
* @Author Dike.Li
* @Date 2015/8/31
* @class BaseClass
* @public
* @Description Basic classes for all components,have basic methods.
*/
define(function (require) {
var dMapId = {};
var dMapName = {};
var baseClass = (function (temp, option, $, _thisMe) {
var me = this;
/**
* 根据模板获取jquery对象
*/
var tempObj = $(temp);
/**
* 依赖关系变量
*/
var quite = null;
/**
* 组件样式变量
*/
var cls = null;
/**
* 触发事件
*/
var handle = (function (option, tempObj) {
/**
* 设置事件
*/
if (isDefine(option.listeners)) {
for (var listenerName in option.listeners) {
if (listenerName === ‘render‘) {
option.listeners[listenerName](tempObj);
continue;
}
tempObj.on(listenerName, option.listeners[listenerName]);
}
}
/**
* 将id和name映射到每个组件上
*/
if (isDefine(option.id)) {
dMapId[option.id] = _thisMe;
}
if (isDefine(option.name)) {
dMapName[option.name] = _thisMe;
}
});
/**
* 在option中设置了render属性的则进行翻译后的模板添加
*/
if (isDefine(option.renderTo)) {
$.each(tempObj, function (index, value) {
option.renderTo.append(value);
});
handle(option, tempObj);
}
/**
* 设置组件是否存在add子元素的功能
* @param isHave value: true or false
*/
me.setIsHaveAdd = (function (isHave) {
if (isHave) {
/**
* 在组件内部进行渲染
*/
var addItems = (function (objs) {
objs.forEach(function (obj) {
if (isDefine(obj.getEl)) {
tempObj.append(obj.getEl());
} else {
tempObj.append(obj);
}
});
});
if (isDefine(option.items)) {
addItems(option.items);
}
me.addItems = addItems;
/**
* 将外部内容添加到本组件中
*/
me.add = (function (obj) {
if (isDefine(obj.getEl())) {
tempObj.append(obj.getEl());
} else {
tempObj.append(obj);
}
});
}
});
/**
* 设置依赖关系
*/
me.setQuote = (function (array) {
quite = array;
});
/**
* 获取组件的依赖项
*/
me.getQuote = (function () {
return quite;
});
/**
* 提供获取模板的方法
*/
me.getTemp = (function () {
return temp;
});
/**
* 获取temp jquery object
*/
me.getDom = (function () {
return tempObj;
});
/**
* 获取模板对象
*/
me.getObj = (function () {
return tempObj;
});
/**
*获取对象Element内容
*/
me.getEl = (function () {
var el = ‘‘;
$.each(tempObj, function (index, value) {
if (isDefine(value.outerHTML)) {
el += value.outerHTML;
}
});
return el;
});
/**
* 注册事件
* @param name
* @param fn
*/
me.on = (function (name, fn) {
tempObj.on(name, fn);
});
/**
* 获取元素ID
* @return id
*/
me.getId = (function () {
return typeof(tempObj.attr(‘id‘)) === ‘undefined‘ ? null : tempObj.attr(‘id‘);
});
/**
* 获取元素NAME
* @return name
*/
me.getName = (function () {
return typeof(tempObj.attr(‘name‘)) === ‘undefined‘ ? null : tempObj.attr(‘name‘);
});
/**
* 设置组件样式
* @param obj is array [‘cls1‘,‘cls2‘]
*/
me.setCls = (function (obj) {
cls = obj;
});
/**
* 获取组件依赖的组件样式
*/
me.getCls = (function () {
return cls;
});
});
/**
* 判断是否定义
* @param obj
* @return boolean
*/
var isDefine = (function (obj) {
return typeof(obj) === ‘undefined‘ ? false : true;
});
/**
* 设置窗口宽度
*/
var setWidth = (function (tempObj, value) {
if (isDefine(value)) {
tempObj.css(‘width‘, value + ‘px‘);
}
});
/**
* 设置高度
*/
var setHeight = (function (tempObj, value) {
if (isDefine(value)) {
tempObj.css(‘height‘, value + ‘px‘);
}
});
/**
* 设置是否显示
*/
var setShow = (function (tempObj, value) {
if (isDefine(value)) {
tempObj.css(‘display‘, value ? ‘block‘ : ‘none‘);
}
});
/**
* 设置位置(绝对位置)
* @param tempObj : Object
* @param top : number
* @param left : number
*/
var setOffset = (function (tempObj, top, left) {
tempObj.css({
top : top + ‘px‘,
left: left + ‘px‘
});
});
/**
* 设置Top
* @param tempObj : Object
* @param top : number
*/
var setTop = (function (tempObj, top) {
tempObj.css({
top: top + ‘px‘
});
});
/**
*设置Left
* @param tempObj : Object
* @param left : number
*/
var setLeft = (function (tempObj, left) {
tempObj.css({
left: left + ‘px‘
});
});
return {
/**
* 公共方法
*/
common : baseClass,
/**
* 私有方法
*/
self : {
setWidth : setWidth,
setHeight: setHeight,
setShow : setShow,
isDefine : isDefine,
setOffset: setOffset,
setTop : setTop,
setLeft : setLeft
},
/**
* 设置组件的ID和NAME
*/
dMapId : dMapId,
dMapName: dMapName
};
});
D.js
/**
* @Author Dike.Li
* @Date 2015/9/11
* @class D
* @public
* @Description DikeJs core component
*/
define(function (require) {
var baseClass = require(‘BaseClass‘);
var _superSelf = baseClass.self;
var dMapId = baseClass.dMapId;
var dMapName = baseClass.dMapName;
/**
* 根据ID或NAME获取对象
*/
var get = (function (value) {
if (_superSelf.isDefine(dMapId[value])) {
return dMapId[value];
} else if (_superSelf.isDefine(dMapName[value])) {
return dMapName[value];
}
});
var d = {
get: get
}
return d;
});
原文：http://my.oschina.net/u/2349331/blog/505098