|
工具庫(kù)已經(jīng)在近幾個(gè)效果中使用:
JavaScript 多級(jí)聯(lián)動(dòng)浮動(dòng)菜單 (第二版)
JavaScript 浮動(dòng)定位提示效果
JavaScript Table行定位效果
JavaScript Table排序
這個(gè)工具庫(kù)的主要特點(diǎn)是:
【跨瀏覽器】
能在以下瀏覽器使用:IE6,IE7,IE8,F(xiàn)irefox 3.5.3,Chrome 3.0,Safari 4.0.3,Opera 10.10
ie系列是必須的,其他能支持最新版本就夠了。
【使用命名空間】
當(dāng)然不是真正“命名空間”,只是一些全局變量,用途相似而已。
有如下命名空間:
$$:代表Object,保存對(duì)象相關(guān)方法,也代替最常用的getElementById方法;
$$B:代表Browser,保存瀏覽器信息;
$$A:代表Array,保存數(shù)組和類(lèi)數(shù)組的相關(guān)方法;
$$F:代表Function,保存函數(shù)的相關(guān)方法;
$$D:代表Dom,文檔對(duì)象的相關(guān)操作和方法;
$$E:代表Event,事件的相關(guān)操作和兼容處理;
$$S:代表String,保存字符串的相關(guān)方法。
雖然我不反對(duì)有節(jié)制地?cái)U(kuò)展原生對(duì)象,但可以的話還是避免命名污染吧。
用多個(gè)命名空間(而不用單個(gè))只因管理容易,用起來(lái)方便。
用兩個(gè)$,不是要更多美刀(雖然很想),而是避免跟流行的框架沖突。
使用全部變量時(shí)我沒(méi)有用window.x的形式,因?yàn)槟菢訒?huì)導(dǎo)致一些問(wèn)題,具體參考這里。
【使用匿名函數(shù)】
貌似是jquery發(fā)揚(yáng)光大的,就是把代碼嵌在一個(gè)function里面。
其實(shí)就是利用閉包,一來(lái)可以使用局部變量,二來(lái)可以防止命名沖突。
【使用對(duì)象檢測(cè)】
“對(duì)象檢測(cè)天生地優(yōu)于瀏覽器檢測(cè)”,出自“ppk談JavaScript”的真理。
能用對(duì)象檢測(cè)的都盡量用,當(dāng)然有些實(shí)在太難搞的也不要太執(zhí)著。
對(duì)象檢測(cè)方面jQuery的support做的很好,建議去看一下。
追求目標(biāo)是:
【小體積】
這里的體積不是說(shuō)字符的多少,而是屬性和方法的數(shù)量。
工具庫(kù)的屬性和方法必須是很有用的,最好是“不得不加”的。
當(dāng)然隨著使用的增加,工具庫(kù)也會(huì)慢慢的擴(kuò)大,但要堅(jiān)持這個(gè)原則。
【高效率】
高效是不變的追求,當(dāng)然是在權(quán)衡利弊之后。
說(shuō)到高效不得不佩服一下google,它不但代碼追求效率,而且下載的代碼是已經(jīng)經(jīng)過(guò)瀏覽器檢測(cè)的。
具體可以自己用各個(gè)瀏覽器下載看看試試。
建立目的是:
【整合常用方法】
把常用的方法整合到一起,既利于代碼復(fù)用,也便于維護(hù)。
但也不可避免地添加一些無(wú)關(guān)的方法,從而增加了代碼量,降低了效率。
【解決兼容問(wèn)題】
解決一些常見(jiàn)的兼容性問(wèn)題,減輕編碼負(fù)擔(dān)。
各個(gè)部分說(shuō)明
【Object】
命名空間是:$$
$$本身就是最常用的方法:document.getElementById
它還包括兩個(gè)方法:extend和deepextend。
其中extend跟prototype.js的Object.extend是一樣的,用來(lái)擴(kuò)展對(duì)象,是用得最久的方法之一了。
而deepextend是深度擴(kuò)展,這里的深度跟深度復(fù)制里面的意思差不多,參考的是jQuery的extend。
【Browser】
命名空間是:$$B
通過(guò)userAgent獲取瀏覽器信息,主要獲取瀏覽器的類(lèi)型和版本。
這里基本是參考有啊的Browser,要了解這部分首先要知道各瀏覽器的userAgent。
下面是各瀏覽器的userAgent(除了ie其他是目前最新版):
ie6
Mozilla/4.0 (compatible; MSIE 6.0; ...)
ie7
Mozilla/4.0 (compatible; MSIE 7.0; ...)
ie8
Mozilla/4.0 (compatible; MSIE 8.0; ...)
ff
Mozilla/5.0 (...) Gecko/20090824 Firefox/3.5.3
chrome
Mozilla/5.0 (...) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.27 Safari/532.0
safari
Mozilla/5.0 (...) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9.1
opera
Opera/9.80 (...) Presto/2.2.15 Version/10.10
先通過(guò)判斷特有字符來(lái)判斷瀏覽器類(lèi)型:
var b = {msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
獲取版本信息就比較麻煩,有啊Browser的方法就比較巧妙(有修改):
for (var i in b) {
if (b[i]) {
vMark = i;
}
}
if (b.safari) {
vMark = "version";
}
b.version = RegExp("(?:" + vMark + ")[///: ]([//d.]+)").test(ua) ? RegExp.$1 : "0";
但參考上面的userAgent會(huì)發(fā)現(xiàn)opera的獲取應(yīng)該也是用"version"才對(duì)啊,問(wèn)題是它在10之前的userAgent是這樣的:
Opera/9.99 (...) Presto/9.9.9
并沒(méi)有用"version",為了適用大部分情況還是不要用"version"好了,而且這個(gè)判斷用的也不多。
【Array】
命名空間是:$$A
里面包括以下方法:
isArray:判斷對(duì)象是否數(shù)組
forEach:對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次指定的函數(shù)(callback)。(參考地址)
filter:對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次指定的函數(shù)(callback),并且創(chuàng)建一個(gè)新的數(shù)組,該數(shù)組元素是所有回調(diào)函數(shù)執(zhí)行時(shí)返回值為 true 的原數(shù)組元素。(參考地址)
every:對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次指定的函數(shù)(callback),直到此函數(shù)返回 false,如果發(fā)現(xiàn)這個(gè)元素,every 將返回 false,如果回調(diào)函數(shù)對(duì)每個(gè)元素執(zhí)行后都返回 true ,every 將返回 true。(參考地址)
some:對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次指定的函數(shù)(callback),直到此函數(shù)返回 true,如果發(fā)現(xiàn)這個(gè)元素,some 將返回 true,如果回調(diào)函數(shù)對(duì)每個(gè)元素執(zhí)行后都返回 false ,some 將返回 false。(參考地址)
map:對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次指定的函數(shù)(callback),并且以每次返回的結(jié)果為元素創(chuàng)建一個(gè)新數(shù)組。(參考地址)
indexOf:比較 searchElement 和數(shù)組的每個(gè)元素是否絕對(duì)一致(===),當(dāng)有元素符合條件時(shí),返回當(dāng)前元素的索引。如果沒(méi)有發(fā)現(xiàn),就直接返回 -1 。(參考地址)
lastIndexOf:比較 searchElement 和數(shù)組的每個(gè)元素是否絕對(duì)一致(===),當(dāng)有元素符合條件時(shí),返回當(dāng)前元素的索引。如果沒(méi)有發(fā)現(xiàn),就直接返回 -1 。(參考地址)
以上方法除了isArray,都是JavaScript 1.6里數(shù)組增加的方法,具體可以去mozilla查看。
不止數(shù)組能使用這些方法,只要對(duì)象能像數(shù)組那樣歷遍就能使用,例如NodeList對(duì)象,arguments對(duì)象。
【Function】
命名空間是:$$F
里面現(xiàn)在只有兩個(gè)方法:bind和bindAsEventListener。
這兩個(gè)是prototype.js里面的經(jīng)典方法了,是用來(lái)給function綁定this的。
原理是利用call/apply改變調(diào)用方法的對(duì)象。
其中用到Array.prototype.slice把a(bǔ)rguments對(duì)象轉(zhuǎn)成數(shù)組,不知道是誰(shuí)發(fā)現(xiàn)的,知道這個(gè)用法就行了。
ps:不止slice,其他像concat,join等也能這樣使用。
bindAsEventListener跟bind不同的是會(huì)把第一個(gè)參數(shù)設(shè)定為event對(duì)象,專(zhuān)門(mén)用在事件回調(diào)函數(shù)中。
其中用到fixEvent處理event的兼容性,后面Event的部分會(huì)詳細(xì)說(shuō)明。
【Dom】
命名空間是:$$D
這部分是工具庫(kù)中最大,最復(fù)雜也最重要的部分。
主要是儲(chǔ)存了一些Dom操作,并解決一般的兼容性問(wèn)題。
其中g(shù)etScrollTop和getScrollLeft分別是獲取文檔滾動(dòng)的scrollTop和scrollLeft。
一般來(lái)說(shuō)如果在標(biāo)準(zhǔn)模式下應(yīng)該用documentElement獲取,否則用body獲取。
但chrome和safari(都是用WebKit渲染引擎)即使在標(biāo)準(zhǔn)模式下也要用body來(lái)獲取。
這里用的方法是:
return doc.documentElement.scrollTop || doc.body.scrollTop;
優(yōu)先獲取documentElement的再選擇body的,這樣就基本能解決了。
但這個(gè)其實(shí)是不完善的,如果給文檔添加如下樣式:
在ie6/7會(huì)發(fā)現(xiàn)在標(biāo)準(zhǔn)模式下body的部分會(huì)按指定高度和寬度呈現(xiàn),而且能帶滾動(dòng)條。
就是說(shuō)documentElement和body能各自設(shè)置scrollTop。
那這個(gè)時(shí)候該獲取哪個(gè)就說(shuō)不清了,還好一般情況并不需要這樣設(shè)置的(至少我是沒(méi)碰過(guò))。
對(duì)于這樣的特例,知道有這個(gè)情況就行了,沒(méi)必要為了它增加太多代碼。
ps:獲取的scrollLeft/scrollLeft是不會(huì)有負(fù)值的。
contains方法是判斷參數(shù)1元素對(duì)象是否包含了參數(shù)2元素對(duì)象。
主要利用ie的contains和w3c的compareDocumentPosition來(lái)判斷。
具體參考這里的比較文檔位置部分。
有兩個(gè)元素坐標(biāo)相關(guān)的方法:rect和clientRect。
其中rect是相對(duì)瀏覽器文檔的位置,clientRect是相對(duì)瀏覽器視窗的位置。
當(dāng)支持getBoundingClientRect時(shí),利用它配合getScrollLeft/getScrollTop獲取文檔位置。
否則用循環(huán)獲取offsetParent的offsetLeft/offsetTop的方式獲取。
具體參考這里的比較元素位置部分。
還有三個(gè)樣式相關(guān)的方法:curStyle、getStyle、setStyle
curStyle是用來(lái)獲取元素的最終樣式表的,根據(jù)支持情況返回getComputedStyle(w3c)或currentStyle(ie)。
ps:這里要優(yōu)先判斷getComputedStyle,因?yàn)閛pera也支持currentStyle。
getStyle是用來(lái)獲取元素指定樣式屬性的最終樣式值的。
支持getComputedStyle的直接用它獲取樣式的computed value就行,關(guān)于computed value可以參考這里。
而currentStyle雖然跟getComputedStyle有點(diǎn)像都是獲取最終樣式,但兩者得到的值的形式是不同的。
它不像getComputedStyle那樣返回渲染完成后準(zhǔn)確的規(guī)格統(tǒng)一的值,而只是一個(gè)設(shè)置值。
而且這個(gè)值還不一定就是渲染后的準(zhǔn)確值。
程序主要做的就是在ie中盡量獲取接近getComputedStyle的值。
首先是處理透明度,ie雖然用的是濾鏡但它的值除以100就跟w3c的"opacity"的值一樣了:
if (/alpha/(opacity=(.*)/)/i.test(style.filter)) {var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
還有"float",這個(gè)比較簡(jiǎn)單換成"styleFloat"就行了。
獲取樣式后還有一個(gè)工作是轉(zhuǎn)換單位。當(dāng)判斷得到的值是一個(gè)數(shù)值而單位又不是px的話,就會(huì)進(jìn)行轉(zhuǎn)換。
方法是參考jQuery的curCSS的,理解之前先認(rèn)識(shí)兩個(gè)比較少用的屬性:runtimeStyle和pixelLeft。
runtimeStyle是ie特有的屬性,用法跟style差不多,但它有著最高的優(yōu)先級(jí)。
就是說(shuō)如果在runtimeStyle設(shè)置了樣式就會(huì)忽略掉style中同樣的樣式。
具體可以參考birdshome的“關(guān)于HTML Object中三個(gè)Style實(shí)例的區(qū)別”和“關(guān)于使用runtimeStyle屬性問(wèn)題討論”
而pixelLeft的作用是以像素px為單位返回元素的left樣式值,ie(還能用在runtimeStyle)和opera支持。
知道這兩個(gè)東西后,就能理解它的原理了:
1,先備份原來(lái)的值:
2,設(shè)置runtimeStyle的left為currentStyle的left:
目的是利用runtimeStyle的優(yōu)先級(jí)保證修改style后能按原來(lái)的樣式顯示;
3,設(shè)置style的left為要轉(zhuǎn)換的值,并巧妙地利用pixelLeft獲取這個(gè)值的px單位形式:
ret = style.pixelLeft + "px";
4,最后恢復(fù)原來(lái)的left值:
elem.runtimeStyle.left = rsLeft;
這樣就能在不改變渲染樣式的情況下轉(zhuǎn)換成像素值了。
ps:jQuery中有說(shuō)明這個(gè)方法也是Dean Edwards提出的,神啊。
最后還有一個(gè)setStyle用來(lái)設(shè)置樣式,主要用來(lái)批量設(shè)置樣式和解決一些兼容問(wèn)題。
可以用以下兩種方式的調(diào)用:
$$D.setStyle(元素或元素集合, { 樣式屬性名: 屬性值, ... })
$$D.setStyle(元素或元素集合, 樣式屬性名, 屬性值)
第一個(gè)參數(shù)是要設(shè)置樣式的元素或元素集合,如果是單個(gè)元素會(huì)自動(dòng)轉(zhuǎn)成單元素集合:
第二個(gè)參數(shù)是一個(gè)鍵值對(duì)集合,鍵是樣式屬性名,值是對(duì)應(yīng)的屬性值。
如果只設(shè)置一個(gè)樣式,可以設(shè)第二個(gè)參數(shù)是樣式屬性名,第三個(gè)參數(shù)是屬性值,由程序新建一個(gè)鍵值對(duì)集合:
再用forEach歷遍元素集合,綁定的函數(shù)里給元素設(shè)置用for in列出的所有樣式。
ps:?jiǎn)蝹€(gè)元素設(shè)置單個(gè)樣式應(yīng)該直接設(shè)置,除非是有兼容問(wèn)題。
剩下的就是解決兼容問(wèn)題了。
首先是透明度,ie是用濾鏡的,如果直接設(shè)置filter會(huì)把其他濾鏡都替換沒(méi)了。
參考jQuery的方法,先獲取原來(lái)的filter,替換掉透明濾鏡的部分,再加上要設(shè)置好的透明濾鏡:
"alpha(opacity=" + value * 100 + ")";
挺巧妙的方法,記得值要乘以100對(duì)應(yīng)w3c的"opacity"。
至于"float"就比較簡(jiǎn)單,ie用"styleFloat"其他用"cssFloat"就行了。
【Event】
命名空間是:$$E
這個(gè)是兼容性的老問(wèn)題了,這里包含三個(gè)方法:addEvent,removeEvent,fixEvent。
addEvent和removeEvent分別是添加和移除事件,以前我是用ie的attachEvent跟w3c的addEventListener做兼容。
但看到Dean Edwards的方法后,就改用他的了,除了兼容性更好外還能解決一些bug(詳細(xì)看這里的cloneNode的bug部分)。
代碼中的addEvent/removeEvent根據(jù)需要在Dean代碼的基礎(chǔ)上做了些修改,不過(guò)原理還是一樣的。
而fixEvent是用來(lái)修正event對(duì)象的兼容性的,主要是添加一些w3c的屬性和方法,上面bindAsEventListener就用到了它。
這里我只做了ie的兼容,其他都是直接使用event,這樣就做不到細(xì)致的兼容,不過(guò)夠用就行了。
jQuery的fix就做的比較完善,值得研究。
【String】
命名空間是:$$S
我比較少做String的高級(jí)應(yīng)用,所以暫時(shí)也沒(méi)什么方法需要放進(jìn)來(lái)。
里面有一個(gè)camelize方法,用來(lái)把橫杠形式的字符串(例如"border-top")轉(zhuǎn)換成駝峰形式(例如"borderTop")。
原理是利用replace第二個(gè)參數(shù)是function時(shí)的技巧:
這個(gè)可以用在樣式屬性名的轉(zhuǎn)換,在getStyle/setStyle中就使用了它。
調(diào)用方式
最后說(shuō)說(shuō)調(diào)用方式,跟調(diào)用一般函數(shù)方法是一樣的,只是前面要帶上命名空間。
例如:$$.extend(...)
像$$由于本身就是function,可以直接這樣用:$$(...)
鏈?zhǔn)秸{(diào)用或許比較酷,但不太適合用在這樣的工具庫(kù)上,除非是擴(kuò)展原生對(duì)象(這里也沒(méi)有使用)。
完整代碼
復(fù)制代碼 代碼如下:
/*!
* Cloudgamer JavaScript Library v0.1
* Copyright (c) 2009 cloudgamer
* Blog: http://cloudgamer.cnblogs.com/
* Date: 2009-10-29
*/
var $$, $$B, $$A, $$F, $$D, $$E, $$S;
(function(){
var O, B, A, F, D, E, S;
/*Object*/
O = function (id) { return "string" == typeof id ? document.getElementById(id) : id; };
O.extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
O.deepextend = function (destination, source) {
for (var property in source) {
var copy = source[property];
if ( destination === copy ) continue;
if ( typeof copy === "object" ){
destination[property] = arguments.callee( destination[property] || {}, copy );
}else{
destination[property] = copy;
}
}
return destination;
};
/*Browser*/
/*from youa*/
B = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) {
vMark = i;
}
}
if (b.safari) {
vMark = "version";
}
b.version = RegExp("(?:" + vMark + ")[///: ]([//d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version) == 6;
b.ie7 = b.msie && parseInt(b.version) == 7;
b.ie8 = b.msie && parseInt(b.version) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
/*Array*/
A = {
isArray: function( obj ) {
return Object.prototype.toString.call(obj) === "[object Array]";
},
forEach: function( array, callback, thisp ){
if (array.forEach) {
array.forEach(callback, thisp);
} else {
for ( var i = 0, len = array.length; i < len; i++ ) {
callback.call( thisp, array[i], i, array );
}
}
},
filter: function( array, callback, thisp ){
if (array.filter) {
return array.filter(callback, thisp);
} else {
var res = [];
for ( var i = 0, len = array.length; i < len; i++ ) {
callback.call( thisp, array[i], i, array ) && res.push(array[i]);
};
return res;
}
},
every: function( array, callback, thisp ){
if (array.every) {
return array.every(callback, thisp);
} else {
for ( var i = 0, len = array.length; i < len; i++ ) {
if ( !callback.call( thisp, array[i], i, array ) ) return false;
};
return true;
}
},
some: function( array, callback, thisp ){
if (array.some) {
return array.some(callback, thisp);
} else {
for ( var i = 0, len = array.length; i < len; i++ ) {
if ( callback.call( thisp, array[i], i, array ) ) return true;
};
return false;
}
},
map: function( array, callback, thisp ){
if (array.map) {
return array.map(callback, thisp);
} else {
var res = [];
for ( var i = 0, len = array.length; i < len; i++ ) {
res.push( callback.call( thisp, array[i], i, array ) );
};
return res;
}
},
indexOf: function( array, elt ){
if (array.indexOf) {
return array.indexOf(elt);
} else {
for ( var i = 0, len = array.length; i < len; i++ ) {
if ( array[i] === elt ) return i;
};
return -1;
}
},
lastIndexOf: function( array, elt, from ){
if (array.lastIndexOf) {
return array.lastIndexOf(elt);
} else {
var len = array.length;
if ( isNaN(from) || from >= len - 1 ) {
from = len - 1;
} else {
from = from < 0 ? Math.ceil(from) + len : Math.floor(from);
}
for ( ; from > -1; from-- ) { if ( array[i] === elt ) return i; };
return -1;
}
}
};
/*Function*/
F = (function(){
var slice = Array.prototype.slice;
return {
bind: function( fun, thisp ) {
var args = slice.call(arguments, 2);
return function() {
return fun.apply(thisp, args.concat(slice.call(arguments)));
}
},
bindAsEventListener: function( fun, thisp ) {
var args = slice.call(arguments, 2);
return function(event) {
return fun.apply(thisp, [E.fixEvent(event)].concat(args));
}
}
};
})();
/*Dom*/
D = {
getScrollTop: function(node){
var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop;
},
getScrollLeft: function(node){
var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollLeft || doc.body.scrollLeft;
},
contains: function(a, b){
return (this.contains = a.compareDocumentPosition
? function(a, b){ return !!(a.compareDocumentPosition(b) & 16); }
: function(a, b){ return a != b && a.contains(b); }
)(a, b);
},
rect: function(node){
var left = 0, top = 0, right = 0, bottom = 0;
//ie8的getBoundingClientRect獲取不準(zhǔn)確
if ( !node.getBoundingClientRect || B.ie8 ) {
var n = node;
while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };
right = left + node.offsetWidth; bottom = top + node.offsetHeight;
} else {
var rect = node.getBoundingClientRect();
left = right = this.getScrollLeft(node); top = bottom = this.getScrollTop(node);
left += rect.left; right += rect.right;
top += rect.top; bottom += rect.bottom;
};
return { "left": left, "top": top, "right": right, "bottom": bottom };
},
clientRect: function(node){
var rect = this.rect(node), sLeft = this.getScrollLeft(node), sTop = this.getScrollTop(node);
rect.left -= sLeft; rect.right -= sLeft;
rect.top -= sTop; rect.bottom -= sTop;
return rect;
},
curStyle: function(elem){
return (this.curStyle = document.defaultView
? function(elem){ return document.defaultView.getComputedStyle(elem, null); }
: function(elem){ return elem.currentStyle; }
)(elem);
},
getStyle: function(elem, name){
return (this.getStyle = document.defaultView
? function(elem, name){
var style = document.defaultView.getComputedStyle(elem, null);
return name in style ? style[ name ] : style.getPropertyValue( name );
}
: function(elem, name){
var style = elem.currentStyle;
//透明度 from youa
if (name == "opacity") {
if (/alpha/(opacity=(.*)/)/i.test(style.filter)) {
var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
};
if (name == "float") { name = "styleFloat"; }
var ret = style[ name ] || style[ S.camelize( name ) ];
//單位轉(zhuǎn)換 from jqury
if ( !/^/-?/d+(px)?$/i.test( ret ) && /^/-?/d/.test( ret ) ) {
style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left;
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
return ret;
}
)(elem, name);
},
setStyle: function(elems, style, value) {
if (!elems.length) { elems = [ elems ]; }
if (typeof style == "string") { var s = style; style = {}; style[s] = value; }
A.forEach(elems, function(elem){
for (var name in style) {
var value = style[name];
if (name == "opacity" && B.ie) {
//ie透明度設(shè)置 from jqury
elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha/([^)]*/)/, "" ) +
"alpha(opacity=" + value * 100 + ")";
} else if (name == "float") {
elem.style[ B.ie ? "styleFloat" : "cssFloat" ] = value;
} else {
elem.style[ S.camelize( name ) ] = value;
}
};
});
}
};
/*Event*/
E = (function(){
/*from dean edwards*/
var addEvent, removeEvent, guid = 1;
if ( window.addEventListener ) {
addEvent = function(element, type, handler){
element.addEventListener(type, handler, false);
};
removeEvent = function(element, type, handler){
element.removeEventListener(type, handler, false);
};
} else {
addEvent = function(element, type, handler){
if (!handler.$$guid) handler.$$guid = guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
};
removeEvent = function(element, type, handler){
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent() {
var returnValue = true, event = fixEvent();
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
}
function fixEvent(event) {
if (event) return event;
event = window.event;
event.pageX = event.clientX + D.getScrollLeft();
event.pageY = event.clientY + D.getScrollTop();
event.target = event.srcElement;
event.stopPropagation = stopPropagation;
event.preventDefault = preventDefault;
if(event.type == "mouseout") {
event.relatedTarget = event.toElement;
}else if(event.type == "mouseover") {
event.relatedTarget = event.fromElement;
}
return event;
};
function stopPropagation() { this.cancelBubble = true; };
function preventDefault() { this.returnValue = false; };
return {
"addEvent": addEvent,
"removeEvent": removeEvent,
"fixEvent": fixEvent
};
})();
/*String*/
S = {
camelize: function(s){
return s.replace(/-([a-z])/ig, function(all, letter) { return letter.toUpperCase(); });
}
};
/*System*/
// remove css image flicker
if (B.ie6) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}
};
/**/
$$ = O; $$B = B; $$A = A; $$F = F; $$D = D; $$E = E; $$S = S;
})();
打包下載
JavaScript技術(shù):JavaScript 工具庫(kù) Cloudgamer JavaScript Library v0.1 發(fā)布,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。