您的位置：首页 > 产品设计 > UI/UE

QUI的开工 -- 打造一个简单实用的UI库 , 征集LOGO

2016-08-25 16:14 615 查看

官方的JUI和EXT , MT的UI组件比起来实在没有多少可比性,Jquery的插件中有很多优秀的好东西,但是却都像个散兵游勇一样的,这样的优点是灵活,强大,有各自的专人维护,做到某一点上的极品.但是缺点也有,有些难以搭配,得仔细思量....

就像买电脑一样,除非你是绝对的高手,才能配置到各方面都很优秀的东西.

比如我的本本,TCL的,配置很低,4年半之前买的,到现在还在用,很好用,中间出来开机加了条内存,没有修过一次.只能说整体性能还行.

怎么说呢,QUI就是想做成一套比较中庸的,朴实的,简单的JQUERY UI框架,简单就是美,使用jquery来写代码很轻松也很方便,这点不用我来说,在这里我就不再议论它与其他框架的优劣了,适用就是最优了.我始终认为: JS是无需继承,多态的,这些名词其实是JAVA开发者故意为其加上去的,说白了就是就是精简代码,复用代码. 仅此而已,而且在JS中,根本就没有继承的

说法,大家所云的JS继承只是属性的复制与替换.

这星期工作比较忙,所以在昨天和大前天的晚上写了些初步代码,[前天谈个项目到晚上12点,不过蹭了顿九头鸟].

征集LOGO -- 色色的图片处理确实惨不忍睹,请群友或者博友予以帮助,弄个Logo啊

QUI当前版本命名为0.1,仅仅实现了以下功能:

资源文件的自动定位

JS的动态加载

命名空间定义

类定义

提供了一个扩展的alert方法 $qui.alert

命名空间对象的快捷方式的创建比如 $qui.alert

以下是代码和实例,组件代码都是使用JS动态加载来实现的,包括必需组件和自加载组件

Common.js -- 这个文件是必需的

/**
* @file: Common.js
* @author: 色色[vb2005xu]
* @date: 2009年4月21日9:34:06
* @description:
*   通用JS文件,里面定义了常用的一些函数
* 	 其中一些函数摘自 FF浏览器自带组件
*/

/**
* Returns true if the specified value is |null|
*/
function isUndefined(val) {
return typeof val == "undefined";
}

/**
* Returns true if the specified value is |null|
*/
function isNull(val) {
return val === null;
}

/**
* Returns true if the specified value is an array
*/
function isArray(val) {
return isObject(val) && val.constructor == Array;
}

/**
* Returns true if the specified value is a string
*/
function isString(val) {
return typeof val == "string";
}

/**
* Returns true if the specified value is a boolean
*/
function isBoolean(val) {
return typeof val == "boolean";
}

/**
* Returns true if the specified value is a number
*/
function isNumber(val) {
return typeof val == "number";
}

/**
* Returns true if the specified value is a function
*/
function isFunction(val) {
return typeof val == "function";
}

/**
* Returns true if the specified value is an object
*/
function isObject(val) {
return val && typeof val == "object";
}

/**
* Returns an array of all the properties defined on an object
*/
function getObjectProps(obj) {
var ret = [];

for (var p in obj) {
ret.push(p);
}

return ret;
}

/**
* Returns true if the specified value is an object which has no properties
* defined.
*/
function isEmptyObject(val) {
if (!isObject(val)) {
return false;
}

for (var p in val) {
return false;
}

return true;
}

var getHashCode;
var removeHashCode;

(function() {
var hashCodeProperty = "lang_hashCode_";

/**
* Adds a lang_hashCode_ field to an object. The hash code is unique for
* the given object.
*
* @param obj
*            {Object} The object to get the hash code for
* @returns {Number} The hash code for the object
*/
getHashCode = function(obj) {
// In IE, DOM nodes do not extend Object so they do not have this
// method.
// we need to check hasOwnProperty because the proto might have this
// set.
if (obj.hasOwnProperty && obj.hasOwnProperty(hashCodeProperty)) {
return obj[hashCodeProperty];
}
if (!obj[hashCodeProperty]) {
obj[hashCodeProperty] = ++getHashCode.hashCodeCounter_;
}
return obj[hashCodeProperty];
};

/**
* Removes the lang_hashCode_ field from an object.
*
* @param obj
*            {Object} The object to remove the field from.
*/
removeHashCode = function(obj) {
obj.removeAttribute(hashCodeProperty);
};

getHashCode.hashCodeCounter_ = 0;
})();

/**
* Fast prefix-checker.
*/
String.prototype.startsWith = function(prefix) {
if (this.length < prefix.length) {
return false;
}

if (this.substring(0, prefix.length) == prefix) {
return true;
}

return false;
}

/**
* Removes whitespace from the beginning and end of the string
*/
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, "");
}

/**
* Does simple python-style string substitution. "foo%s hot%s".subs("bar",
* "dog") becomes "foobar hotdot". For more fully-featured templating, see
* template.js.
*/
String.prototype.subs = function() {
var ret = this;

for (var i = 0; i < arguments.length; i++) {
ret = ret.replace(/\%s/, String(arguments[i]));
}

return ret;
}

/**
* Returns the last element on an array without removing it.
*/
Array.prototype.peek = function() {
return this[this.length - 1];
}

/**
* Repeat a string -- 2.1的为3 *
* @param double number
* @return str
*
* "1\n".repeat(2.1).alert();
*/
String.prototype.repeat = function(number){
var str = '' ;
number = isNumber(number) ? number : 1 ;
for (var i = 0; i < number; i++) {
str += this.toString();
}
return str ;
}

/**
* alert string using debug -- sese
*/
String.prototype.alert = function(){
alert(this.toString());
}

QUI.js -- 核心文件

/**
* 定义QUI命名空间
*
* 设计: 继承,多态的目的说白了就是 精简代码,复用代码
* 对JS产品而言则是易用性,快速性最优
*
* QUI计划是作为UCREN的Jquery版本的衍生品,不知道最后会变成什么,(*^__^*) 嘻嘻……
*
*/
function QUI(){
this.version = '0.1' ;
this.appPath = this.getAppPath();

/**
* {}对象命名空间 -- 摘自EXT JS
* 这个就相当于定义一个包
*/
this.ns = function(){
var a=arguments, o=null, i, j, d, rt;
for (i=0; i<a.length; ++i) {
d=a[i].split(".");
rt = d[0];
eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
for (j=1; j<d.length; ++j) {
o[d[j]]=o[d[j]] || {};
o=o[d[j]];
}
}
};

/**
* 定义类方法,如果前面的命名空间不存在则创建之
*/
this.Class = function(){
function cfn(fn){
var tpl = 'if (typeof #fn# == "undefined"){#fn# = function(){};}' ;
tpl = tpl.replace(/#fn#/g,fn);
eval(tpl);
};
var a=arguments ,ns_str=null ,d, fn;
for (var i=0; i<a.length; ++i) {
ns_str=arguments[i];
//确保前面的命名空间有效
d=ns_str.split(".");
if (d.length === 1)
cfn(ns_str);
else {
var dd = ns_str.replace(d[d.length - 1],'');
this.ns(dd);
cfn(ns_str);
}
}
};

/**
* 创建命名空间对象的快捷方式
* @param String quickIndex
* @param String destNS
* 例如:
* $qui.nsQuickIndex('$qui.alert','QUI.Widget.Alert.prototype.show');
* 将这个方法绑定到$qui.alert
*/
this.nsQuickIndex = function(quickIndex,destNS){
eval(quickIndex + '=' + destNS + ";");
}
}

QUI.prototype = {

/**
* 返回QUI所在的路径 , 用于加载资源文件
*/
getAppPath: function(){
var script = document.getElementsByTagName("script");
for (var i = 0; i < script.length; i++) {
var match = script[i].src.match(/.*QUI.js($|\?.*)/);
if (match) {
return script[i].src.replace(/QUI\.js.*/, '');
}
}
} ,

/**
* 动态加载脚本文件,非异步加载
* 仅限于QUI内部脚本
* @type {}
*/
include: function(){
$.ajaxSetup({async:false});
for (i=0; i<arguments.length; ++i) {
$.getScript($qui.appPath + arguments[i].replace(/\./g,'/') + '.js');
}
$.ajaxSetup({async:true});
}
};
var $qui = new QUI();
$qui.include('Common');
$qui.include('Widget.Alert');
$qui.nsQuickIndex('$qui.alert','QUI.Widget.Alert.prototype.show');

Widget/Alert.js -- 这个不用我说了吧

/**
* 提供多功能的alert函数
* 接收 变量,数组,对象,混合对象数组的alert
*
* 依赖 {QUI.appPath}/Common.js文件
*/
$qui.Class('QUI.Widget.Alert');
jQuery.extend(QUI.Widget.Alert.prototype,{
_array2str: function(arr,tnum){
//tnum \t的数量
tnum = isNumber(tnum) ? tnum : 0 ;
for (var i = 0; i < arr.length; i++) {
if (isArray(arr[i])) {
arr[i] = arguments.callee(arr[i],tnum + 1);
}
else if (isObject(arr[i])){
arr[i] = QUI.Widget.Alert.prototype._obj2str(arr[i],tnum+1);
}
}
return	"[" + "\n" +
"\t".repeat(tnum+1) +
arr.join(",\n" + "\t".repeat(tnum+1)).toString() +
"\n" + "\t".repeat(tnum) + "]" ;
} ,
_obj2str: function(o,tnum){
var s = '{' ;
tnum = isNumber(tnum) ? tnum : 0 ;
for(var p in o){
if (isFunction(o[p])){
//不显示函数对象体
s+= '\n' + "\t".repeat(tnum+1) + p + ":" + ' Function' + ',';
}
else if (isArray(o[p])){
//不显示函数对象体
s+= '\n' + "\t".repeat(tnum+1) + p + ":" + QUI.Widget.Alert.prototype._array2str(o[p],tnum+1) + ',';
}
else if (isObject(o[p])){
s+= '\n' + "\t".repeat(tnum+1) + p + ":" + arguments.callee(o[p],tnum + 1) + ',';
}
else
s+= '\n' + "\t".repeat(tnum+1) + p + ":" + o[p] + ',';
}
s = s.replace(/,$/, "") ;
s += "\n" + "\t".repeat(tnum) + '}' ;
return s;
},
show: function(){
var a = arguments[0];
if (isBoolean(a) || isNumber(a))
(a + "").alert();
else if (isString(a))
a.alert();
else if (isArray(a))
//a.alert();
QUI.Widget.Alert.prototype._array2str(a).alert();
else if (isFunction(a))
a.toString().alert();
else if (isObject(a))
//Objalert(a);
QUI.Widget.Alert.prototype._obj2str(a).alert();
}
});

TestCase/QUI/Widget/Alert.js -- 顾名思义也知道了吧

//file: TestCase.QUI.Widget.Alert.js
//($qui.appPath + 'test/' + 'TestCase.QUI.Widget.Alert.js').alert();

$qui.Class('TestCase.QUI.Widget.Alert');

TestCase.QUI.Widget.Alert.prototype.test = function(){
var a = ["bb","cc",1,{a: 1}];
//var b = ["bb","cc",1,[1,3,4]];
var c = ["bb","cc",1,[1,['x',['u',['i','a','o']]],{a: 4},4]];
//a.alert();
//b.alert();
//c.alert();
$qui.alert(a);
$qui.alert(c);

var d = {
a:1.0 ,
v:2 ,
d:function(){
} ,
m: {
a: 1 ,
b: 2 ,
c: ['1',[5,8,[7,{'mm':{bb:1234567890}}]],3] ,
d: {
a: 1 ,
b: 2
}

}

}
$qui.alert(d);

}

//以下代码将会定义在代码规范里面,
$qui.nsQuickIndex('$qui.alert.test','TestCase.QUI.Widget.Alert.prototype.test');

TestCase/Main.js -- 测试的主文件,主要方便测试使用的

/**
* 测试主文件
*/

$qui.include('TestCase.QUI.Widget.Alert');
$qui.alert.test();

以下是使用实例:

QUI是基于Jquery的,本人确实没有实力重建一套底层代码,所以在导入QUI.js之前需要导入Jquery.js,我是以的是jquery1.2.6. 很郁闷,上次在程序员杂志上发现JQUERY1.6呵呵,不知道这1.6从何而来啊

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试例子</title></head>
<body>

</body>
</html>
<script src='jq-1.2.6.min.js' type='text/javascript'></script>
<script src='qui/QUI.js' type='text/javascript'></script>
<script src='BJE.js' type='text/javascript'></script>

BJE.js -- 如下所示

//定义顶块命名空间
function BJE(){
this.v = '1.0' ;

}

BJE.prototype = {

};

var instance = new BJE();
$qui.include('TestCase.Main');

其中$qui.include('TestCase.Main'); 这个里面暂时只有

$qui.include('TestCase.QUI.Widget.Alert');
$qui.alert.test();

对浏览器自带的alert方法,我做了两点扩充,传统的功能对数组,对象都不能明确显示,很麻烦,有时候必须借助辅助工具才能查看,比较麻烦,我这里扩展了这两项: 不仅仅是数组,对象的显示扩展,包括数组对象的混合也可以,你可以见Alert的测试实例那个文件中的代码 [注意,对于复杂的对象请不要使用它来做,比如$('BODY')]这样的东西,第一是系统这个alert框装不下,第二是很占内存,第三是这个功能会在后面的调试日志功能中实现]

$qui.alert.test(); 注意这个的写法,之后的一些测试将会遵循 功能.test() 来呵呵呵

以下是一些截图 Alert功能的: