JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布_js面向对象_脚本之家

style=elem.style,left=style.left,rsLeft=elem.runtimeStyle.left;

逐一部分表达

if(typeofstyle==”string”){vars=style;style={};style[s]=value;}

命名空间是:$$S

能在偏下浏览器选用:IE6,IE7,IE8,Firefox 3.5.3,Chrome 3.0,Safari
4.0.3,Opera 10.10ie多元是必得的,别的能帮衬新型版本就够了。

contains方法是判别参数1成分对象是还是不是含有了参数2成分对象。首要使用ie的contains和w3c的compareDocumentPosition来决断。具体参照他事他说加以考察这里的可比文档地点有个别。

上述措施除了isArray,都是JavaScript
1.6里数组增添的章程,具体能够去mozilla查看。

vardoc=node?node.ownerDocument:document;returndoc.documentElement.scrollTop||doc.body.scrollTop;

挺神奇的形式,记得值要乘以100对应w3c的”opacity”。

runtimeStyle是ie特有的本性,用法跟style差不离,但它富有最高的事情未发生前级。就是说要是在runtimeStyle设置了体制就能够忽略掉style中千篇风姿浪漫律的体裁。具体能够参谋birdshome的“关于HTML
Object中三个Style实例的分别”和“关于选择runtimeStyle属性难点探究”而pixelLeft的机能是以像素px为单位重返成分的left样式值,ie和opera扶助。

如此那般就能够在不改换渲染样式的情形下改动到像素值了。ps:jQuery中有认证那个格局也是DeanEdwards提议的,神啊。

if)/i.test{varopacity=parseFloat;returnopacity?opacity/100:0;}return1;

自然不是真正“命名空间”,只是风流罗曼蒂克对全局变量,用项相仿而已。犹如下命名空间:$$:代表Object,保存对象相关方法,也代表最常用的getElementById方法;$$B:代表Browser,保存浏览器音讯;$$A:代表Array,保存数组和类数组的相干方法;$$F:代表Function,保存函数的有关办法;$$D:代表Dom,文书档案对象的连带操作和格局;$$E:代表伊夫nt,事件的连锁操作和卓越管理;$$S:代表String,保存字符串的相关办法。就算作者不批驳有总统地强盛原生对象,但足以的话依然防止命名污染吗。用多少个命名空间只因管理轻易,用起来方便。用七个$,不是要更加多美刀,而是防止跟流行的框架冲突。使用全部变量时自壬申曾用window.x的花样,因为那样会促成有的主题素材,具体参照他事他说加以考查这里。

余下的正是缓和包容难点了。首先是折射率,ie是用滤镜的,假设一贯设置filter会把其他滤镜都替换没了。参谋jQuery的办法,先获得原本的filter,替换掉透明滤镜的一些,再增加要安装好的透明滤镜:

style.left=ret||0;ret=style.pixelLeft+”px”;

其次个参数是四个键值对集中,键是样式属性名,值是对应的属性值。倘诺只设置一个体制,可以设第二个参数是样式属性名,第2个参数是属性值,由程序新建三个键值对集中:

body{height:300px;overflow:scroll;width:500px;}

其间包罗以下措施:isArray:剖断目的是否数组forEach:对数组中的各样成分都实践贰回钦命的函数filter:对数组中的各类成分都推行一遍内定的函数,而且成立二个新的数组,该数组成分是两全回调函数试行时重临值为
true
的原数组成分。every:对数组中的每一种成分都实践一遍内定的函数,直到此函数再次来到false,要是发掘这些成分,every 将赶回
false,假若回调函数对各样元素执行后都回到 true ,every 将回到
true。some:对数组中的每一个成分都进行一遍钦定的函数,直到此函数重临true,假设开采这几个因素,some 将赶回
true,借使回调函数对每种成分实施后都回来 false ,some 将再次来到false。map:对数组中的各类成分都施行贰次钦命的函数,何况以每一次回来的结果为因素创制三个新数组。indexOf:比较searchElement
和数组的每一种成分是或不是相对相似,当有元素相符条件时,重回当前元素的目录。若无发掘,就径直返回-1 。lastIndexOf:比较 searchElement
和数组的每种成分是不是绝对平等,当有成分适合条件时,再次来到当前因素的目录。若无发觉,就径直回到
-1 。

那大器晚成部分是工具库中最大,最复杂也最主要的有些。首假诺储存了风华正茂部分Dom操作,并解决相符的包容性难题。

还恐怕有”float”,那一个比较轻便换到”styleFloat”就能够了。

style.left=left;elem.runtimeStyle.left=rsLeft;

再用forEach历遍成分集结,绑定的函数里给元素设置用for
in列出的具有样式。ps:单个成分设置单个样式应该平素设置,除非是有宽容难题。

把常用的法子结合到协同,既方便代码复用,也利于维护。但也不可防止地增进一些毫不相干的点子,进而增添了代码量,减弱了成效。

先通过判断特有字符来剖断浏览器类型:

首先是拍卖发光度,ie即便用的是滤镜但它的值除以100就跟w3c的”opacity”的值相近了:

命名空间是:$$A

varvMark=””;for{vMark=i;}}if{vMark=”version”;}b.version=RegExp[\/:]?RegExp.$1:”0″;

有多个要素坐标相关的情势:rect和clientRect。此中rect是相对浏览器文书档案的职分,clientRect是周旋浏览器视窗的职责。当支持getBoundingClientRect时,利用它特别getScrollLeft/getScrollTop获取文书档案地方。不然用循环获取offsetParent的offsetLeft/offsetTop的办法获取。具体参考这里的相比成分位置有些。

2,设置runtimeStyle的left为currentStyle的left:

中间getScrollTop和getScrollLeft分别是拿到文档滚动的scrollTop和scrollLeft。日常的话借使在规范情势下相应用documentElement获取,不然用body获取。但chrome和safari尽管在正儿八经情势下也要用body来博取。这里用的点子是:

火速是不改变的求偶,当然是在衡量利弊之后。谈到快速一定要叹性格很顽强在艰难困苦或巨大压力面前不屈一下google,它不光代码追求作用,并且下载的代码是曾经经过浏览器检查评定的。具体能够团结用种种浏览器下载看看试试。

解决部分大面积的包容性难点,缓和编码负责。

elem.style.filter=(elem.currentStyle.filter||””).replace+”alpha(opacity=”+value*100+”)”;

追求目的是:

相疑似jquery使好的守旧获得进步的,正是把代码嵌在八个function里面。其实正是行使闭包,一来可以利用部分变量,二来能够免止命名冲突。

经过userAgent获取浏览器新闻,重要拿到浏览器的品类和本子。这里基本是参谋有啊的Browser,要打听这部分首先要清楚各浏览器的userAgent。下边是各浏览器的userAgent:ie6Mozilla/4.0
(compatible; MSIE 6.0; …卡塔尔(قطر‎ie7Mozilla/4.0 (compatible; MSIE 7.0;
…卡塔尔ie8Mozilla/4.0 (compatible; MSIE 8.0; …卡塔尔国ffMozilla/5.0
Gecko/20080824 Firefox/3.5.3chromeMozilla/5.0 AppleWebKit/532.0
Chrome/3.0.195.27 Safari/532.0safariMozilla/5.0 AppleWebKit/531.9
Version/4.0.3 Safari/531.9.1operaOpera/9.80 Presto/2.2.15 Version/10.10

varb={msie:/msie/.test&&!/opera/.test,opera:/opera/.test,safari:/webkit/.test&&!/chrome/.test,firefox:/firefox/.test,chrome:/chrome/.test};

命名空间是:$$D

获得版本音讯就相比困苦,有啊Browser的点子就相比神奇:

至于”float”就比较容易,ie用”styleFloat”其余用”cssFloat”就能够了。

elem.runtimeStyle.left=elem.currentStyle.left;

调用格局

而fix伊夫nt是用来修改event对象的包容性的,主假诺足够一些w3c的习性和办法,下边bindAs伊芙ntListener就用到了它。这里自身只做了ie的极度,其余都以一贯运用event,那样就做不到细致的合作,可是够用就行了。jQuery的fix就做的比较康健,值得研讨。

$$自己正是最常用的主意:document.getElementById它还包含七个点子:extend和deepextend。此中extend跟prototype.js的Object.extend是相仿的,用来扩充对象,是用得最久的章程之一了。而deepextend是深浅扩大,这里的纵深跟深度复制里面包车型大巴意味大概,参谋的是jQuery的extend。

命名空间是:$$B

穿梭数组能使用那些方法,只要对象能像数组那样历遍就能够应用,比方NodeList对象,arguments对象。

bindAs伊夫ntListener跟bind差异的是会把第多少个参数设定为event对象,特意用在事件回调函数中。当中用到fix伊芙nt管理event的宽容性,前边Event的局地会详细表达。

略知意气风发二那七个东西后,就能够领悟它的规律了:1,先备份原本的值:

取名空间是:$$E

先行得到documentElement的再接纳body的,那样就基本能缓慢解决了。但这么些其实是不周到的,如果给文书档案加多如下样式:

要害集中了自家写js时有些常用的不二等秘书籍,并参照了prototype.js,jquery,google,百度,有啊等框架。

returns.replace/ig,function{returnletter.toUpperCase;

4,最终复苏原本的left值:

if{elems=[elems];}

但参照他事他说加以考查上边包车型客车userAgent会开采opera的拿走相应也是用”version”才对呀,难点是它在10事情未发生前的userAgent是这么的:Opera/9.99
Presto/9.9.9并不曾用”version”,为了适用当先八分之四景观可能不要用”version”好了,何况以此论断用的也少之甚少。

终极说说调用格局,跟调用常常函数方法是均等的,只是前边要带上命名空间。举个例子:$$.extend像$$由于自身正是function,可以一直那样用:$$链式调用也许正如酷,但不太切合用在如此的工具库上,除非是扩展原生对象。完整代码复制代码 代码如下:/*! * Cloudgamer JavaScript
Library v0.1 * Copyright 2009 cloudgamer * Blog:
* Date: 2009-10-29 */ var $$, $$B, $$A,
$$F, $$D, $$E, $$S; { var O, B, A, F, D, E, S; /*Object*/ O = function
{ return “string” == typeof id ? document.getElementById : id; };
O.extend = function { for (var property in source) {
destination[property] = source[property]; } return destination; };
O.deepextend = function { 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 = { var
b = { msie: /msie/.test && !/opera/.test, opera: /opera/.test, safari:
/webkit/.test && !/chrome/.test, firefox: /firefox/.test, chrome:
/chrome/.test }; var vMark = “”; for { if { vMark = i; } } if { vMark =
“version”; } b.version = RegExp[\/: ] ? RegExp.$1 : “0”; b.ie =
b.msie; b.ie6 = b.msie && parseInt == 6; b.ie7 = b.msie && parseInt ==
7; b.ie8 = b.msie && parseInt == 8; return b;
})(window.navigator.userAgent.toLowerCase; /*Array*/ A = { isArray:
function { return Object.prototype.toString.call === “[object Array]”;
}, forEach: function( array, callback, thisp ){ if { array.forEach; }
else { for ( var i = 0, len = array.length; i < len; i++ ) {
callback.call( thisp, array[i], i, array ); } } }, filter: function(
array, callback, thisp ){ if { return array.filter; } else { var res =
[]; for ( var i = 0, len = array.length; i < len; i++ ) {
callback.call( thisp, array[i], i, array ) && res.push; }; return res;
} }, every: function( array, callback, thisp ){ if { return array.every;
} 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 { return
array.some; } 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 {
return array.map; } 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{ if {
return array.indexOf; } else { for ( var i = 0, len = array.length; i
< len; i++ ) { if return i; }; return -1; } }, lastIndexOf: function{
if { return array.lastIndexOf; } else { var len = array.length; if ||
from >= len – 1 ) { from = len – 1; } else { from = from < 0 ?
Math.ceil + len : Math.floor; } for ( ; from > -1; from– ) { if
return i; }; return -1; } } }; /*Function*/ F = { var slice =
Array.prototype.slice; return { bind: function { var args = slice.call;
return function() { return fun.apply(thisp, args.concat)); } },
bindAsEventListener: function { var args = slice.call; return function {
return fun.apply(thisp, [E.fixEvent; } } }; })(); /*Dom*/ D = {
getScrollTop: function{ var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop; },
getScrollLeft: function{ var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollLeft || doc.body.scrollLeft; },
contains: function{ return (this.contains = a.compareDocumentPosition ?
function{ return !!(a.compareDocumentPosition; } : function{ return a !=
b && a.contains; }, rect: function{ var left = 0, top = 0, right = 0,
bottom = 0; //ie8的getBoundingClientRect获取不许确 if (
!node.getBoundingClientRect || B.ie8 ) { var n = node; while { 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; top =
bottom = this.getScrollTop; left += rect.left; right += rect.right; top
+= rect.top; bottom += rect.bottom; }; return { “left”: left, “top”:
top, “right”: right, “bottom”: bottom }; }, clientRect: function{ var
rect = this.rect, sLeft = this.getScrollLeft, sTop = this.getScrollTop;
rect.left -= sLeft; rect.right -= sLeft; rect.top -= sTop; rect.bottom
-= sTop; return rect; }, curStyle: function{ return (this.curStyle =
document.defaultView ? function{ return
document.defaultView.getComputedStyle; } : function{ return
elem.currentStyle; } ); }, getStyle: function{ return (this.getStyle =
document.defaultView ? function{ var style =
document.defaultView.getComputedStyle; return name in style ? style[
name ] : style.getPropertyValue; } : function{ var style =
elem.currentStyle; //透明度 from youa if { if )/i.test { var opacity =
parseFloat; return opacity ? opacity / 100 : 0; } return 1; }; if { name
= “styleFloat”; } var ret = style[ name ] || style[ S.camelize ];
//单位转换 from jqury if ?$/i.test && /^-?d/.test { 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; } ); }, setStyle: function { if { elems = [
elems ]; } if (typeof style == “string”) { var s = style; style = {};
style[s] = value; } A.forEach{ for { var value = style[name]; if
(name == “opacity” && B.ieState of Qatar { //ie光滑度设置 from jqury
elem.style.filter = (elem.currentStyle.filter || “”卡塔尔.replace/, “” State of Qatar +
“阿尔法(opacity=” + value * 100 + “)”; } else if { elem.style[ B.ie ?
“styleFloat” : “cssFloat” ] = value; } else { elem.style[ S.camelize
] = value; } }; }); } }; /*Event*/ E = { /*from dean edwards*/ var
addEvent, removeEvent, guid = 1; if ( window.addEventListener ) {
addEvent = function(element, type, handler){ element.addEventListener;
}; removeEvent = function(element, type, handler){
element.removeEventListener; }; } else { addEvent = function(element,
type, handler){ if handler.$$guid = guid++; if element.events = {}; var
handlers = element.events[type]; if { handlers =
element.events[type] = {}; if { 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 { this.$$handleEvent = handlers[i]; if
(this.$$handleEvent { returnValue = false; } } return returnValue; }; }
function fixEvent 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{ return s.replace/ig,
function { return letter.toUpperCase; } }; /*System*/ // remove css
image flicker if { try { document.execCommand(“BackgroundImageCache”,
false, true); } catch {} }; /**/ $$ = O; $$B = B; $$A = A; $$F = F;
$$D = D; $$E = E; $$S = S; }State of Qatar(卡塔尔;打包下载

本身相当少做String的高端应用,所以权且也没怎么方式供给放进来。里面有一个camelize方法,用来把横杠方式的字符串变换来驼峰格局。原理是选取replace第三个参数是function时的技能:

获得样式后还应该有多个干活是改动工作。当决断获得的值是一个数值而单位又不是px的话,就博览会开退换。方法是参照jQuery的curCSS的,明白在此之前先认知多个比比较少用的属性:runtimeStyle和pixelLeft。

建立目标是:

getStyle是用来得到成分钦命样式属性的末尾样式值的。帮忙getComputedStyle的直接用它拿走样式的computed
value就行,关于computed
value可以参见这里。而currentStyle尽管跟getComputedStyle有一点点像都以拿到最后样式,但双边获得的值的款式是例外的。它不像getComputedStyle那样再次来到渲染达成后正确的准绳统豆蔻年华的值,而只是二个设置值。何况那个值还不自然正是渲染后的准确值。程序重要做的正是在ie中尽量得到临近getComputedStyle的值。

此间的体积不是说字符的多少,而是属性和章程的多寡。工具库的性质和措施必得是很有用的,最棒是“必须要加”的。当然随着使用的加码,工具库也会逐步的强大,但要百折不回那几个原则。

还应该有八个样式相关的不二秘技:curStyle、getStyle、setStylecurStyle是用来获得成分的结尾样式表的,遵照协助情状再次回到getComputedStyle。ps:这里要优先判别getComputedStyle,因为opera也帮忙currentStyle。

“对象检查测量试验天生地优于浏览器检查评定”,出自“ppk谈JavaScript”的真理。能用对象检验的都尽心竭力用,当然有些实在太难搞的也休想太执着。对象检验方面jQuery的support做的很好,建议去看一下。

在ie6/7会发觉在正经八百形式下body的片段会按钦定中度和宽窄展现,而且能带滚动条。便是说documentElement和body能分别设置scrollTop。那那个时候该获得哪个就说不清了,万幸常常处境并无需那样设置的。对于这么的特例,知道有其一场地就能够了,没必要为了它扩大太多代码。ps:获取的scrollLeft/scrollLeft是不会有负值的。

目标是接受runtimeStyle的优先级保险改良style后能按原本的样式呈现;3,设置style的left为要转移的值,并神奇地接受pixelLeft获取那些值的px单位方式:

命名空间是:$$

工具库已经在近多少个职能中利用:JavaScript 多级联合浮动浮动菜单 JavaScript
浮动定位提醒意义JavaScript Table行定位作用JavaScript Table排序
那几个工具库的关键特征是:

个中以后独有多个法子:bind和bindAs伊芙ntListener。那八个是prototype.js里面包车型客车经文方法了,是用来给function绑定this的。原理是采纳call/apply退换调用方法的对象。个中使用Array.prototype.slice把arguments对象转成数组,不驾驭是什么人发掘的,知道这么些用法就能够了。ps:不独有slice,其余像concat,join等也能那样使用。

其一是宽容性的老难题了,这里带有八个点子:add伊芙nt,remove伊夫nt,fixEvent。

其大器晚成能够用在体制属性名的转变,在getStyle/setStyle中就动用了它。

取名空间是:$$F

add伊芙nt和removeEvent分别是加上和移除事件,早先笔者是用ie的attachEvent跟w3c的add伊夫ntListener做合作。但看看Dean爱德华兹的措施后,就改用他的了,除了宽容性更加好外还能够一蹴而就部分bug(详细看这里的cloneNode的bug部分)。代码中的add伊夫nt/removeEvent遵照须求在Dean代码的底蕴上做了些修正,然而原理照旧同样的。

最后还应该有二个setStyle用来设置样式,主要用来批量设置样式和缓和部分包容难题。能够用以下二种办法的调用:$$D.setStyle(元素或因素集合,
{ 样式属性名: 属性值, …
}卡塔尔国$$D.setStyle第贰个参数是要安装样式的因素或因素会集,假设是单个成分会活动转成单成分集合:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图