SimpleUI的更新。。。
SimpleUI终于更新了。。该项目目前托管在Google Code上。。地址是：https://simple-ui.googlecode.com/svn/trunk
首先看变化的方面。。。新的SimpleUI采用了单体模式编写代码。。核心机制并没有依赖jQuery。所有的组件采用面向对象方式编写。。并且提供了一个桥接到jQuery原型链上的一个函数。。。
新的核心参考了YUI和Dojo的模块化的机制。。。增加了一个声明类的函数，继承方式使用了拷贝继承！
比如如果我想为jQuery添加一个方法
Y.bridgeTojQuery("drag,simpleDrag",Y.dd.Drag)
调用的话
$("#drag").drag()
//或者
$("#drag").simpleDrag()
核心代码：
/**
* author:xing
* date:2011-06-21
*/
if (typeof Y == "undefined") {
this.Y = {
version: 0.6,
//加载JS的路径
baseJSPath: "js/",
//加载CSS的路径
baseCssPath: "../styles/",
//存储已经加载的JS或者CSS模块
moduleLoaded: {
js: [],
css: []
}
}
}
Y.mixin = $.extend;
Y.mixin(Y, {
namespace: function(){
var a = arguments, o = this, i = 0, j, d, arg;
for (; i < a.length; i++) {
arg = a[i];
if (arg.indexOf(".")) {
d = arg.split(".");
for (j = (d[0] == 'Y') ? 1 : 0; j < d.length; j++) {
o[d[j]] = o[d[j]] || {};
o = o[d[j]];
}
}
else {
o[arg] = o[arg] || {};
}
}
return o;
},
each: $.each,
data: $.data,
/**
* 将一些属性或者方法添加到构造函数的原型链上
* @param {function} constructor
* @param {Object} prop
*/
extend: function(constructor, prop){
if (typeof constructor !== "function") {
Y.log(constructor, "is not an valid constructor!");
}
else {
Y.mixin(constructor.prototype, prop);
}
},
/**
* 向Y对象中添加一个方法
* 如果定义一个构造函数请使用declare方法
* @param {Object} modName
* @param {Object} callback
* <code>
* Y.register("util.console",function(){
* Y.log("console");
* });
* Y.util.console();//will print "console"
* </code>
*/
register: function(modName, callback){
if (typeof callback == "function") {
if (Y[modName]) {
Y.log("override" + modName + "method");
}
if (modName.indexOf(".")) {
var modNameArray = modName.split(".");
if (modNameArray.length == 1) {
Y[modName] = callback;
}
else {
var s = Y.namespace(modNameArray.splice(0, modNameArray.length - 1).join(","));
s[modNameArray[modNameArray.length - 1]] = callback;
}
}
}
else {
Y.log(callback, "is not an valid method");
}
},
unregister: function(modName){
Y[modName] = null;
Y.log(modName + " has be setted null");
},
bridgeTojQuery: function(methodName, widget){
var methodArray = methodName.split(",");
Y.each(methodArray, function(i, n){
$.fn[n] = function(config){
return this.each(function(){
config = Y.mixin({}, config, {
node: this
});
new widget(config);
});
}
});
},
/**
* 辅助的输出函数，避免console在IE下导致脚本报错
* @param {Object} obj
* @param {Object} msg
*/
log: function(obj, msg){
if (console) {
if (msg) {
console.log(obj, msg);
}
else {
console.log(obj);
}
}
}
});
Y.mixin(Y, {
/**
* 定义一个构造函数
* summary:要使用这个函数也必须实例化
* @param {string} subClass 类的名称
* @param {string||array} parentClass 继承的父类名称
* @param {Object} prop 一些对象，将会被添加到subClass的原型链上，如果该subClass有父类将会被子类的属性或者方法覆盖掉
* <code>
* Y.declare("Hello",null,{
* msg:"HelloWorld",
* init:function(){
* Y.log(this.msg);
* }
* });
* var demo=new Y.Hello({
* msg:"super"
* });
* //print super
* </code>
*
* <code>
* Y.declare("HelloWorld",Y.Hello,{
* otherMsg:"this is helloworld",
* init:function(){
* Y.log(this.otherMsg);
* }
* });
* var test=new Y.HelloWorld();
* //print HelloWorld,this is helloworld
* </code>
*/
declare: function(subClass, superClass, prop){
var pro = prop;
//crack the superClass
if (superClass) {
if (superClass instanceof Array) {
Y.each(superClass, function(n){
pro = Y.mixin({}, n.prototype, pro);
});
}
else {
pro = Y.mixin({}, superClass.prototype, pro);
}
}
if (subClass.indexOf(".")) {
var modNameArray = subClass.split(".");
if (modNameArray.length == 1) {
Y[subClass] = function(){
var arg = arguments, s = this;
if (arg[0]) {
Y.each(arg[0], function(key, value){
s[key] = value;
});
}
this.init.call(this);
}
Y.extend(Y[subClass], pro);
}
else {
var s = Y.namespace(modNameArray.splice(0, modNameArray.length - 1).join(","));
s[modNameArray[modNameArray.length - 1]] = function(){
var arg = arguments, s = this;
if (arg[0]) {
Y.each(arg[0], function(key, value){
s[key] = value;
});
}
this.init.call(this);
}
Y.extend(s[modNameArray[modNameArray.length - 1]], pro);
}
}
return Y;
}
});
Y.namespace("Y.ui");
Y.mixin(Y, {
_allModuleNum: 0,
/**
* 为了确保ui中的widget加载JS完毕而设计的函数，避免出现未加载完毕而执行依赖ui的代码
* @param {function} callback
*/
ready: function(callback){
var self = this;
setTimeout(function(){
if (self._allModuleNum == 0) {
if (typeof callback == "function") {
callback();
}
}
}, 0);
},
/**
* 向Y对象中添加一个widget
* @param {string} modName
* @param {object} prop
* @param {Object} required
* <code>
* Y.add("Dialog",{
* dialogTitle:"this is a dialogTitle",
* init:function(){
* Y.log(this.dialogTitle);
* }
* },{
* js:"jquery",
* css:"dialog"
* });
* var d = new Y.ui.Dialog();
* //if jquery is loaded,will print "this is a dialogTitle"
* </code>
*/
add: function(modName, prop, required, superCls){
//required is an array
var isLoaded = false, self = this;
if (required) {
/* var loadingJs;
if (required.js) {
loadingJs = required.js.split(",");
Y.each(loadingJs, function(index, item){
self._loadJs(item);
});
setTimeout(function(){
if (self._allModuleNum == loadingJs.length) {
Y.declare(modName, superCls, prop);
self._allModuleNum = 0;
}
}, 0);
}*/
if (required.css) {
var loadingCss = required.css.split(",");
Y.each(loadingCss, function(index, item){
self._loadCss(item);
});
//setTimeout(function(){
// Y.declare(modName, superCls, prop);
// }, 0);
}
Y.declare(modName, superCls, prop);
}
else {
Y.declare(modName, superCls, prop);
}
},
_loadJs: function(src, callback){
if (src) {
var isLoaded = this._isExsit(src), self = this;
if (isLoaded) {
self._allModuleNum++;
}
else {
var script = document.createElement("script"), time;
script.type = "text/javascript";
script.src = Y.baseJsPath + src + ".js";
document.getElementsByTagName("head")[0].appendChild(script);
time = setTimeout(function(){
Y.log("can't load js from " + src, " are you sure the src that is correct?");
script.parentNode.removeChild(script);
}, 5000);
script.onreadystatechange = script.onload = function(){
Y.log("loadSuccess" + src + ".js");
Y.moduleLoaded.js.push(src);
self._allModuleNum++;
script.onreadystatechange = script.onload = null;
clearTimeout(time);
}
}
}
},
_loadCss: function(src){
if (src) {
var isLoaded = this._isExsit(src);
if (!isLoaded) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = Y.baseCssPath + src + ".css";
link.type = "text/css";
if (link.onload) {
link.onload = function(){
//do sth
}
}
else {
//do sth
}
document.getElementsByTagName("head")[0].appendChild(link);
Y.moduleLoaded.css.push(src);
}
}
},
_isExsit: function(src, type){
var compareModule = type == "js" ? Y.moduleLoaded.js : Y.moduleLoaded.css, isLoaded = false;
Y.each(compareModule, function(index, item){
if (item == src) {
isLoaded = true;
return false;
}
});
return isLoaded;
}
});
Y.namespace("util");
Y.mixin(Y.util, {
formatString: function(str, obj){
if (typeof str != "string") {
Y.log(str, "is not a string");
return Y;
}
if (obj) {
for (var key in obj) {
str = str.replace("{" + key + "}", obj[key]);
}
return str;
}
},
isIE6: typeof document.body.style.maxHeight == "undefined"
});
Y.declare("widget.Base", null, {
plugin: function(obj,opts){
var config;
if (typeof obj == "function") {
try {
var node = this.node;
if (this.node instanceof jQuery) {
node = (this.node)[0]
}
if(opts){
config=Y.mixin({},opts,{
node:node
});
}else{
config={
node:node
}
}
new obj(config);
}
catch (e) {
Y.log(e, "貌似没有为其作为插件接口");
}
}else{
Y.log(obj,"不存在这个构造函数！")
}
}
});
DEMO
可以拖动的div
我可以被拖动。。
拖放
我是可以放置的div
我是可以拖动的DIV
更多请checkout SVN：https://simple-ui.googlecode.com/svn/trunk
