西红柿爱番茄

Feed Rss

javascript精巧编写方式

03.19.2010, Javascript, by .

//////////////// 2010-05-25 updates //////////////

[javascript]
var getPointerPosition=function(evt){
evt = evt || window.event;
return {
x:evt.pageX || evt.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft),
y:evt.pageY || evt.clientY+(document.documentElement.scrollTop || document.body.scrollTop)
}
}

var getKeyPressed=function(evt){
evt = evt || window.event;
return {
"code":evt.keyCode,
"value":String.fromCharCode(evt.keyCode)
}
}

var getTarget=function(evt){
evt = evt || window.event;
var target=evt.target || evt.srcElement;
return target.nodeType===3 ? target.parentNode : target;
}
[/javascript]

//////////////// 2010-05-08 updates //////////////

下面的一个addListener函数通过使用三元运算符和Lazy Defined Pattern的方式来编写,感觉有些意思,避免了每次调用该函数都需要浏览器嗅探的判断:
[javascript]
var addListener=function(elem,type,handle){
addListener= elem.addEventListener ? function(elem,type,handle){
elem.addEventListener(type,handle,false);
} : (elem.attachEvent ? function(elem,type,handle){
elem.attachEvent("on"+type,handle);
} : function(elem,type,handle){
elem["on"+type]=handle;
});
addListener(elem,type,handle);
}
[/javascript]
//////////////// 2010-03-25 updates //////////////
[javascript]
//摘自Mootools release-1.1.1 版本库
function $merge(){
var mix = {};
for (var i = 0; i < arguments.length; i++){
for (var property in arguments[i]){
var ap = arguments[i][property];
var mp = mix[property];
if (mp && $type(ap) == ‘object’ && $type(mp) == ‘object’) mix[property] = $merge(mp, ap); //递归
else mix[property] = ap;
}
}
return mix;
};
//Usage:var mergedObj = $merge(obj1, obj2, obj3);
///////

//不错的自执行函数编写方式
(function(calc) {
if (ie) {
core.pageX = function(event) {
return event.clientX + calc(‘Left’);
};
core.pageY = function(event) {
return event.clientY + calc(‘Top’);
};
}
else {
core.pageX = function(event) {
return event.pageX;
};
core.pageY = function(event) {
return event.pageY;
};
}
})(function (side) {
return (element['scroll' + side] || 0) – (element['client' + side] || 0);
});
[/javascript]
//////////////// 2010-03-24 updates //////////////
[javascript]
//Javascript中labeled语句的实例,有助于归类代码,划分代码类型。
//Source:http://james.padolsey.com/javascript/labelled-blocks-useful/
var getJSONP = function(url, success){
declareVars: {
var ud = "_" + new Date(),
script = document.createElement("script"),
head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;

}
defineCallback: {
window[ud] = function(data){
head.removeChild(script);
delete window[ud];
success && success(data);
}
}
addScriptToDocument: {
script.src = url.replace(/callback=.*/, ‘callback=’ + ud);
head.appendChild(script);
}
}
//Usage:
getJSONP("http://www.ilovejs.net/lab/measure/measure-person-v2.js?callback=", function(d){
alert("success");
});
[/javascript]
//////////////// 2010-03-22 updates //////////////
[javascript]
优化循环:
function getElementsByClassName(className,node,tag){
var results=node.getElementsByTagName(tag);
var elements=[],length=results.length,classElements=[];
//将NodeList里的DOM元素保存到数组里
while(length–) elements[length]=results[length];
var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
for(var i=0,l=elements.length;i<l;i++){
if(pattern.test(elements[i].className)){
classElements.push(elements[i]);
}
}
return classElements;
}

优化遍历childNodes:nextSibling() better that childNodes[].
function loopChildren(elem){
var node = elem.firstChild;
while(node != null){
node=node.nextSibling;
}
}
/////worse:not recommended.
function loopChildren(elem){
var nodes=elem.childNodes();
var length=nodes.length;
for(var i=0;i<length;i++){
var node=nodes[i]; // bad

}
}
[/javascript]
俺非常喜欢Javascript一些另类的编写方式,也喜欢捣鼓捣鼓,在看一些js库源码的时候,当看到一些出乎意料的编写方式的时候,亦都兴奋不已,不得不佩服:他妈太有才了!!重在思维!!!下面是俺收集和原创的一些捣鼓代码,会陆续更新:
[javascript]
document.getElementsByTagName(‘body’)[0].appendChild((function(){
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.src = API + encodeURIComponent(tinypath) + ‘&callback=FireworkDisplay.updateTinyUrl’;
return s;
})());

///////////////////////////////////////////////////

var typeOf = (function(){
var toString = Object.prototype.toString;
return function(a,b) {
return toString.call(a).match(/\s(.+)\]/)[1].toLowerCase() === b;
};
})();

///////////////////////////////////////////////////

var setHTML=function(id,html){
(function(i){
return typeof i === "string" ? document.getElementById(i) : i;
)(id).innerHTML=html;
return arguments.callee;
}
//setHTML("div","a")("div","aa")("div","aaa");

///////////////////////////////////////////////////

//同一个函数三种写法:
function a(){
(arguments[0] || function() { console.log("it is funny");})();
}

(function(){
(arguments[0] || function() { console.log("it is funny");})();
}(function(){ console.log("it is funny");});

new function(){ //相当于自执行函数
(arguments[0] || function() { console.log("it is funny");})();
}

///////////////////////////////////////////////////

Function.prototype.partial = function(){
var fn = this, args = Array.prototype.slice.call(arguments);
return function(){
var arg = 0;
for (var i = 0; i < args.length && arg < arguments.length; i++)
if (args[i] === undefined)
args[i] = arguments[arg++];
return fn.apply(this, args);
};
};

///////////////////////////////////////////////////

Function.prototype.bind=function(context){
var that=this;
return function(){
return that.apply(context || that,arguments);
}
}

/////////////////////////////////////////////////////

Function.prototype.method=function(name,fn){
this.prototype[name]=fn;
return this;
}

////////////////////////////////////////////////////
//用于优化数组循环的操作,当每个循环需要花费比较多的时间来执行的时候,尤其有用
function chunk(array, process, context){
var items = array.concat(); //clone the array
setTimeout(function(){
var item = items.shift();
process.call(context, item);

if (items.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}
[/javascript]

javascript精巧编写方式 有1条回应

  1. 2010-06-18 在 09:51 深西陈

    这要抽空细细看才行。

发表评论

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

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>