QUI的开工 -- 打造一个简单实用的UI库 , 征集LOGO
官方的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功能的:
如果你要查看 某个方法的实现,只需这样:
$qui.alert($qui.alert);
就可以查看到改方法的实现
- 大小: 7.3 KB
- 大小: 8.7 KB
- 大小: 10.4 KB
- 大小: 12.1 KB
- 查看图片附件
QUI的开工 -- 打造一个简单实用的UI库 , 征集LOGO相关推荐
- html+css+小图标,HTML+CSS入门 一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门 一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
- 用CSS和JS打造一个简单的图片编辑器
用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...
- python程序30行_30行Python代码,打造一个简单的微信群聊助手,简单方便
大家都知道,最近代码君迷上了Python,一直在研究这门语言,还是那句话,人生苦短,我学Python,今天代码君要教大家一个黑科技,30行代码实现自己定制的微信群聊助手,这个助手有什么用呐,就是用来活 ...
- 一个简单实用的SSAO实现
转自 http://blog.csdn.net/xoyojank/article/details/5734537 by José María Méndez 原文链接: http://www.gamed ...
- linux平台 一个简单的helloworld动态库的制作与使用
编写一个简单的动态库并调用. 动态库代码: HelloWorld.c /*** 简单动态库文件使用*/ #include "HelloWorld.h"void hello(void ...
- 一个简单实用的,基于EF的三层架构
到底什么样的框架才是好框架呢?或许不同人有不同的看法.我个人觉一个好的框架,最重要的要是简单实用,能快速适开发,可维护性高(不会出现复制黏贴的代码),并能快速响应各种业务场景的变化的框架,同时性能不会 ...
- easyeda,一个简单实用的探索性数据分析工具
在算法工程师的日常工作中,探索性数据分析(Exploratory Data Analysis)是一种常见的任务.通过分析数据的缺失情况,分布情况,以及和标签的相关性等,数据EDA可以帮助算法工程师评估 ...
- WinForm_2一个简单实用的小应用——桌面时钟
对于WinForm编程呢,我准备采用编写不同的小应用或小游戏这种方式--因此,可能每一个程序会包揽相对较多的东西,毕竟WinForm编程还是挺简单的^_^ 今天先来做一个挺实用的小应用--桌面时钟,也 ...
- 运用HashMap和ArrayList打造一个简单的带文件的控制台学生管理系统(附上类及类方法的思维导图+控制台运行界面截图+源代码)
文章目录: 一.本文由来 二.适合人群 三.类及类方法思维导图 四.控制台运行界面截图 五.项目源代码链接 六.后记 七.再回首 一.本文由来 今天是2020年1月23日.因为在2019年上半学期Ja ...
最新文章
- 计算机AL教程笔记,计算机系统基础学习笔记(2)-数据的位运算操作
- 中国担保市场竞争战略规划与运营效益分析报告2022-2027年版
- LVS三种工作模式、十种调度算法介绍
- 布林通道参数用20还是26_布林通道(BOLL)策略的投资效果如何?
- DBUtils的概述
- TensorFlow on Windows: “Couldn't open CUDA library cudnn64_5.dll”
- 下载完apk安装包后实现自动安装;
- 当spark遇见hbase
- 跟踪算法原理_「综述」目标跟踪算法
- 第二章 Maven的安装和配置
- java路径的上一级_java路径两种写法/和\\以及 ./和../以及/之间的区别?
- LeetCode解题汇总目录
- 在配置SSH免密登录时报错:/usr/bin/ssh-copy-id: ERROR: failed to open ID file '/root/.pub': 没有那个文件或目录
- 2.5 Moblin项目提供的开发工具
- Android客户端与PC服务器如何实现Socket通信
- 收藏夹功能打开解析视频连接
- linux用mpi运行命令,linux mpirun命令
- 申请邮箱需要什么,邮箱申请方法开通条件教程分享
- 十六进制和BCD码的那些事(终结篇)
- Bugku杂项——论剑
热门文章
- 什么是IMAP?什么是POP3?
- 二手房政策(by quqi99)
- C++ for循环警告:Missing reference in range-for with non trivial type (QString)
- Java程序员常用英语整理
- Intel CEO:中国正成为真正的创新中心
- 基于simulink的图像处理算法的建模和仿真
- 数据压缩原理与应用 WAV文件的分析
- 再看Java基本类型
- bacula 备份mysql_企业级的开源备份工具Bacula之安装
- ps2021没法用神经元滤镜,ps2021版神经滤镜能用吗