Archive for the ‘未分类’ Category

js类 from qq

星期一, 06月 2nd, 2008

[复制此相关代码]CODE:
var Comment = new Object();
var $C = function(tagName)
{
return document.createElement(tagName);
};
String.prototype.trim = function()
{
return this.replace(/^\s*|\s*$/g,”");
};
String.prototype.realLength = function()
{
return this.replace(/[^\x00-\xff]/g,”**”).length;
};
String.prototype.left = function(n)
{
if (this.length > n)
{
return this.substr(0, n) ‘…’;
}
else
{
return this;
}
};
Array.prototype.remove = function(n)
{
if (n < 0)
{
return this;
}
else
{
return this.slice(0, n).concat(this.slice(n 1, this.length));
}
};
function findPosX(obj)
{
var curleft = 0;
if (obj && obj.offsetParent)
{
while (obj.offsetParent)
{
curleft = obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj && obj.x) curleft = obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj && obj.offsetParent)
{
while (obj.offsetParent)
{
curtop = obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj && obj.y) curtop = obj.y;
return curtop;
}
var input_domain = ‘http://input.comment.qq.com’;
var index_domain = ‘http://comment1.qq.com’;
var pinglun_domain = ‘http://pinglun.qq.com’;
var js_domain = ‘http://pinglun.qq.com’;
var img_domain = ‘http://mat1.qq.com/pinglun’;
Comment.Configure = {
version: ‘1.0′,
newline: ‘\n’,
site_length: 20,
key_length: 20,
id_length: 10,
index_line_sum: 10000,
index_width: 5,
default_mode: ‘origin_count’,
default_order: 1,
default_reply_per_page: 10,
quote_str_len: 60,
intro_len: 150,
debate_intro_len: 200,
content_len: 200,
reply_default_title: ‘请填写标题’,
intro_min_length: 20,
request_delay: 100,
login_frame_delay: 2000,
reply_type_def: {
‘1′: ‘<span class=”reply_top”>[精]</span> ‘,
‘2′: ‘<span class=”reply_commend”>[荐]</span> ‘,
‘3′: ‘<span class=”reply_expert”>[专]</span> ‘
},
postUrl: input_domain ‘/post.cmt’,
logoutUrl: input_domain ‘/cgi-bin/qqlogout’,
commentIndex: ‘http://pinglun.qq.com/’,
loginIframeUrl: index_domain ‘/i_login.htm’,
defaultLogoUrl: img_domain ‘/images/defpic.jpg’
}
Comment.Define = {
getReplyType: function(type)
{
if (Comment.Configure.reply_type_def[type])
{
return Comment.Configure.reply_type_def[type];
}
else
{
return ”;
}
}
}
Comment.PGV_Count = function(option)
{
if (typeof(pgvMain) == ‘function’)
{
pvRepeatCount = 1;
pvCurDomain = sDomain;
if (option)
{
if (option.domain)
{
pvCurDomain = option.domain;
}
if (option.path)
{
pvCurUrl = option.path;
}
}
pgvMain();
//Debug.log(’call pgv function’);
}
}
Comment.UrlFactory = {
get3LevelDir: function(id)
{
var path = parseInt(id / 1000000) ‘/’;
path = parseInt(id / 1000) ‘/’;
path = id / 1;
return path;
},
getCommentUrl: function(id)
{
return (this.get3LevelDir(id) ‘/’);
},
getDebateUrl: function(id)
{
return this.get3LevelDir(id);
},
getUserUrl: function(id)
{
return this.get3LevelDir(id);
},
getReplyUrl: function(key)
{
var path = key.substr(0, 8);
path = ‘/’ (key.substr(8, 4));
path = ‘/’ (key.substr(12, 2));
path = ‘/’ key;
return path;
},
getIndexUrl: function(id)
{
var length = id.toString().length;
if (length < Comment.Configure.index_width)
{
for (var i = 0; i < Comment.Configure.index_width - length; i)
{
id = ‘0′ id;
}
}
return id;
},
getIndexDir: function(mode)
{
var modes = {
‘origin_count’: ‘originindex’,
‘total_count’: ‘allindex’,
‘top_count’: ‘topindex’
};
return modes[mode];
},
getRangeHeader: function(start, length, line_len)
{
var range_start = start * line_len;
var range_length = length * line_len;
return ['Range','bytes=' range_start '-' (parseInt(range_start) parseInt(range_length) - 1 - Comment.Configure.newline.length)];
},
getCommentNormalUrl: function(site, id)
{
return ‘comment.htm?site=’ site ‘&id=’ id;
},
getCommentGroupUrl: function(site, id)
{
return ‘comment_group.htm?site=’ site ‘&id=’ id;
},
getCommentDebateUrl: function(site, id)
{
return ‘comment_debate.htm?site=’ site ‘&id=’ id;
},
getCommentUserUrl: function(uin)
{
return ‘comment_user.htm?uin=’ uin;
},
getCommentUserLink: function(uin, nick)
{
return ‘<a href=”‘ this.getCommentUserUrl(uin) ‘” target=”_blank”>’ (nick ? nick : uin) ‘</a>’;
},
getCommentListLink: function(site_en, site_cn, sort_en, sort_cn, className)
{
if (className)
{
className = ‘class=”‘ className ‘”‘;
}
else
{
className = ”;
}
return ‘<a href=”‘ Comment.Configure.commentIndex ‘” ‘ className ‘ target=”_blank”>评论首页</a> >> ‘
‘<a href=”list.htm?’ site_en ‘.” ‘ className ‘ target=”_blank”>’ site_cn ‘</a> >> ‘
‘<a href=”list.htm?’ site_en ‘.’ sort_en ‘” ‘ className ‘ target=”_blank”>’ sort_cn ‘</a>’;
}
}
Comment.ContentFormat = {
decode: function(content)
{
return content.split(Comment.Configure.newline);
}
}
Comment.DataObjectFactory = function(content, model)
{
content = Comment.ContentFormat.decode(content);
var dataModel = Comment.DataObject[model];
if (content.length - 1 != dataModel.length)
{
if (model != ‘commentinfo’ && model != ‘listsum’)
{
//alert(’[DEBUG 信息] O/R 映射失败,远程数据和本地模型数量不匹配!请检查!’);
}
}
var dataObject = new Object();
for (var i = 0; i < dataModel.length; i)
{
dataObject[dataModel[i]] = content[i];
}
return dataObject;
}
Comment.DataObject = {
‘commentinfo’:
[
'site_cn',
'sort_en',
'sort_cn',
'source',
'source_url',
'title',
'url',
'intro',
'intro_img',
'group_id',
'intro_show',
'create_time',
'debate_id'
],
‘groupinfo’:
[
'site_cn',
'title',
'url',
'intro',
'intro_img',
'comment_id',
'intro_show',
'create_time'
],
‘debateinfo’:
[
'site_cn',
'title',
'url',
'intro',
'intro_img',
'agree_id',
'disagree_id',
'middle_id',
'intro_show',
'create_time'
],
’sum’:
[
'origin_count',
'total_count',
'top_count'
],
‘reply’:
[
'comment_id',
'uin',
'nickname',
'pub_time',
'pass_time',
'ip',
'title',
'content',
'reply_key',
'is_del',
'reply_type',
'reply_kind',
'tips'
],
‘pksum’:
[
'agree',
'disagree',
'middle'
],
‘listsum’:
[
'all'
],
‘usersum’:
[
'total_count',
'top_count',
'is_expert'
],
‘userinfo’:
[
'user_img',
'user_intro'
]
}
/* 控制器类 */
Comment.Control = new Object();
/* 分页控制器 */
Comment.Control.Pagination = Class.create();
Comment.Control.Pagination.prototype = {
initialize: function(option)
{
this.totalPage = option.totalPage;
this.currPage = 1;
this.zoom_start = 3;
this.zoom_end = 613;
this.bindControl();
},
reset: function(option)
{
this.totalPage = option.totalPage;
this.currPage = 1;
this.movePageControl(this.currPage);
},
updateOrder: function()
{
},
countCurrPage: function(offset)
{
var page = parseInt(offset * this.totalPage / this.zoom_end) 1;
if (page > this.totalPage)
{
page = this.totalPage;
}
return page;
},
movePageControl: function(toPage)
{
if (toPage < 1 || toPage > this.totalPage)
{
return;
}
var offset = 0;
if (toPage == 1)
{
offset = this.zoom_start;
}
else if (toPage == this.totalPage)
{
offset = this.zoom_end;
}
else
{
offset = this.zoom_start (toPage - 1) * (this.zoom_end / (this.totalPage - 1));
}
$(’scrfloat’).style.left = offset ‘px’;
//$(’scrfloat_2′).style.left = offset ‘px’;
},
bindControl: function()
{
var self = this;
var tooltip = $(’Page_tip’);
var offsetX = 10;
var offsetY = -10;
function getSite(o)
{
var obj = o;
var objS = obj.offsetLeft;
while (obj != obj.offsetParent && obj.offsetParent)
{
obj = obj.offsetParent;
if (obj.tagName == ’span’)
{
objS = obj.offsetLeft;
}
}
return objS;
}
Event.observe($(’scr’), ‘mousedown’, mDown, false);
//Event.observe($(’scr_2′), ‘mousedown’, mDown, false);
var flag = false;
function mDown()
{
flag = true;
if(window.event.srcElement.id != ’scr’
&& window.event.srcElement.id != ’scr_2′)
{
$(’scrfloat’).style.left = $(’scrfloat’).offsetLeft;
//$(’scrfloat_2′).style.left = $(’scrfloat’).style.left;
}
else
{
$(’scrfloat’).style.left = (window.event.x - 5);
//$(’scrfloat_2′).style.left = $(’scrfloat’).style.left;
}
tooltip.style.display = ‘block’;
t = $(’scrfloat’).offsetLeft;
tooltip.innerHTML = self.countCurrPage(t);
tooltip.style.left = window.event.clientX offsetX ‘px’;
tooltip.style.top = window.event.clientY offsetY document.documentElement.scrollTop ‘px’;
}
function mMove()
{
if(flag)
{
$(’scrfloat’).style.left = window.event.clientX - getSite($(’scr’)) - 5 ‘px’;
//$(’scrfloat_2′).style.left = window.event.clientX - getSite($(’scr’)) - 5 ‘px’;
}
if (parseInt($(’scrfloat’).style.left.replace(’px’, ”)) > self.zoom_end)
{
$(’scrfloat’).style.left = self.zoom_end ‘px’;
//$(’scrfloat_2′).style.left = $(’scrfloat’).style.left;
}
if (parseInt($(”scrfloat”).style.left.replace(’px’, ”)) < self.zoom_start)
{
$(’scrfloat’).style.left = self.zoom_start ‘px’;
//$(’scrfloat_2′).style.left = $(’scrfloat’).style.left;
}
if (flag)
{
t = $(’scrfloat’).offsetLeft;
tooltip.innerHTML = self.countCurrPage(t);
tooltip.style.left = window.event.clientX offsetX ‘px’;
tooltip.style.top = window.event.clientY offsetY document.documentElement.scrollTop ‘px’;
}
}
function mUp()
{
if (flag)
{
t = $(’scrfloat’).offsetLeft;
self.setCurrPage(self.countCurrPage(t));
}
flag = false;
tooltip.style.display = ‘none’;
}
function mEnd()
{
window.event.returnValue = false;
}
window.document.onmousemove = mMove;
window.document.ondragstart = mEnd;
window.document.onmouseup = mUp;
Event.observe($(’up’), ‘click’, mUpBtn, false);
Event.observe($(’down’), ‘click’, mDownBtn, false);
function mUpBtn()
{
self.setCurrPage(self.currPage - 1, 1);
}
function mDownBtn()
{
self.setCurrPage(self.currPage 1, 1);
}
},
nextPage: function()
{
if (this.currPage < this.totalPage)
{
this.currPage;
this.onPageChange();
}
},
previousPage: function()
{
if (this.currPage > 0)
{
–this.currPage;
this.onPageChange();
}
},
setCurrPage: function(page, move)
{
if (page > 0 && page <= this.totalPage && page != this.currPage)
{
this.currPage = page;
this.onPageChange();
if (move != null)
{
this.movePageControl(page);
}
}
},
onPageChange: function()
{
},
getCurrPage: function()
{
return this.currPage;
}
}
Comment.Iterator = {
getIndex: function(objComment)
{
var rangeList = new Array();
function getIndexId(reply_id)
{
return parseInt(reply_id / Comment.Configure.index_line_sum);
}
function getReplyPos(reply_id)
{
return (reply_id % Comment.Configure.index_line_sum);
}
if (objComment.order == 0)
{
var reply_start = (objComment.currPage - 1) * objComment.replyPerPage;
var start_index_id = getIndexId(reply_start);
var start_reply_id = getReplyPos(reply_start);
var currReply = 1;
var replySum = 0;
while (currReply )
{
if (reply_start currReply > objComment.totalReply)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(start_reply_id, currReply - replySum - 1, objComment.index_line_len)
});
break;
}
if (currReply == objComment.replyPerPage)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(start_reply_id, currReply - replySum, objComment.index_line_len)
});
break;
}
if (start_reply_id currReply > Comment.Configure.index_line_sum)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(start_reply_id, currReply, objComment.index_line_len)
});
start_index_id ;
start_reply_id = 0;
replySum = currReply - 1;
}
}
}
else
{
var reply_start = objComment.totalReply - 1 - (objComment.currPage - 1) * objComment.replyPerPage;
var start_index_id = getIndexId(reply_start);
var start_reply_id = getReplyPos(reply_start);
var currReply = 1;
var replySum = 0;
while (currReply )
{
if (reply_start - currReply < 0)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(0, start_reply_id 1, objComment.index_line_len)
});
break;
}
if (currReply == objComment.replyPerPage)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(start_reply_id - currReply replySum 1, currReply - replySum, objComment.index_line_len)
});
break;
}
if (start_reply_id - currReply < 0)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(0, start_reply_id 1, objComment.index_line_len)
});
start_index_id–;
start_reply_id = Comment.Configure.index_line_sum - 1;
replySum = currReply;
}
}
}
return rangeList;
}
}
/* 显示样式控制器 */
Comment.Control.Display = Class.create();
Comment.Control.Display.prototype = {
initialize: function()
{
}
}
/* 页面显示类 */
Comment.Page = new Object();
/* 评论页控制接口 */
Comment.Page.Base = {
changeMode: function(mode)
{
this.mode = mode;
this.totalReply = this.data_sum[mode];
this.totalPage = parseInt(this.totalReply / this.replyPerPage)
(this.totalReply % this.replyPerPage != 0 ? 1 : 0);
},
changeOrder: function(order)
{
if (this.order == order)
return;
this.order = order;
this.currPage = 1;
this.resetPageControl();
this.bindPageNav();
this.bindReplyList();
this.bindOrderControl();
},
bindOrderControl: function()
{
var self = this;
if (self.order == 0)
{
$(’order_front’).style.cursor = ‘none’;
$(’order_front’).style.color = ‘#000′;
$(’order_front’).onclick = function(e)
{
return false;
}
$(’order_desc’).style.cursor = ‘pointer’;
$(’order_desc’).style.color = ‘#3B78AF’;
$(’order_desc’).onclick = function()
{
self.changeOrder(1);
return false;
}
}
else if (self.order == 1)
{
$(’order_front’).style.cursor = ‘pointer’;
$(’order_front’).style.color = ‘#3B78AF’;
$(’order_front’).onclick = function(e)
{
self.changeOrder(0);
return false;
}
$(’order_desc’).style.cursor = ‘none’;
$(’order_desc’).style.color = ‘#000′;
$(’order_desc’).onclick = function()
{
return false;
}
}
},
bindRowsPerPage: function()
{
var self = this;
$A($(’rows_page’).getElementsByTagName(’a')).each(function(button)
{
button.onclick = function()
{
self.replyPerPage = button.value;
self.currPage = 1;
self.resetPageControl();
self.bindPageNav();
self.bindReplyList();
return false;
}
});
},
selectTab: function(mode)
{
var self = this;
$A($(’mode_tab’).getElementsByTagName(’p')).each(function(tab)
{
if (tab.value == mode)
{
$A($(’mode_tab’).getElementsByTagName(’p')).each(function(t)
{
if (t.value != ”)
{
t.className = ‘none’;
}
});
tab.className = ‘c’;
}
});
},
appendTab: function(option)
{
var pTab = $C(’p');
pTab.innerHTML = option.title;
pTab.value = ”;
$(’mode_tab’).appendChild(pTab);
pTab.onclick = function()
{
window.open(option.url);
}
return false;
},
bindTabControl: function()
{
var self = this;
$A($(’mode_tab’).getElementsByTagName(’p')).each(function(tab)
{
var mode = tab.value;
if (mode != ”)
{
tab.onclick = function()
{
$A($(’mode_tab’).getElementsByTagName(’p')).each(function(t)
{
t.className = ‘none’;
});
this.className = ‘c’;
self.currPage = 1;
self.changeMode(mode)
self.resetPageControl();
self.bindPageNav();
self.bindReplyList();
return false;
}
}
});
},
bindPageRandom: function()
{
var self = this;
$A($(’page_random’, ‘page_random_2′)).each(function(button)
{
button.onclick = function()
{
if (self.totalPage == 1)
{
self.currPage = 1;
}
else
{
self.currPage = Math.floor(Math.random() * (self.totalPage 1));
if (self.currPage == 0)
{
self.currPage = 1;
}
}
self.bindPageNav();
self.bindReplyList();
return false;
}
});
},
bindPageNav: function(flag)
{
var self = this;
var currPage = self.currPage;
if (flag != 1)
{
this.pageControl.movePageControl(currPage);
}
var pagesPerRange = 6;
this.totalPage = parseInt(this.totalReply / this.replyPerPage)
(this.totalReply % this.replyPerPage != 0 ? 1 : 0);
var startPage = parseInt((self.currPage - 1) / pagesPerRange) * pagesPerRange 1;
createPageNav($(’page_nav’), false);
createPageNav($(’page_nav_2′), true);
function createPageNav(obj, top)
{
obj.innerHTML = ”;
var i = startPage;
if (self.currPage != 1)
{
obj.appendChild(createPage2(1, ‘第一页’, top));
obj.appendChild(createPage({
page: ‘上一页’,
onclick:function()
{
self.currPage = self.currPage - 1;
self.bindPageNav();
self.bindReplyList();
if (top)
{
window.location.replace(’#reload’);
}
return false;
}
}));
}
for (; i < startPage pagesPerRange; i)
{
if (i > self.totalPage)
{
break;
}
obj.appendChild(createPage2(i, ”, top));
}
if (self.currPage < self.totalPage)
{
obj.appendChild(createPage({
page: ‘下一页’,
onclick:function()
{
self.currPage = self.currPage 1;
self.bindPageNav();
self.bindReplyList();
if (top)
{
window.location.replace(’#reload’);
}
return false;
}
}));
obj.appendChild(createPage2(self.totalPage, ‘最末页’, top));
}
}
function createPage(option)
{
var p = $C(’a');
if (option.page == self.currPage)
{
p.style.fontWeight = ‘bold’;
}
p.innerHTML = (option.text && option.text != ”) ? option.text : option.page;
p.href = ”;
p.onclick = option.onclick;
if (option.title)
{
p.title = option.title;
}
return p;
}
function createPage2(page, text, top)
{
return createPage({
page: page,
onclick:function()
{
self.currPage = page;
self.bindPageNav();
self.bindReplyList();
if (top)
{
window.location.replace(’#reload’);
}
return false;
},
text: text != ” ? text : ”
});
}
},
bindPageControl: function()
{
this.totalPage = parseInt(this.totalReply / this.replyPerPage)
(this.totalReply % this.replyPerPage != 0 ? 1 : 0);
this.pageControl = new Comment.Control.Pagination({
totalPage: this.totalPage
});
/* overwrite event virtual function */
var self = this;
this.pageControl.onPageChange = function()
{
self.currPage = this.getCurrPage();
self.bindPageNav(1);
self.bindReplyList();
}
},
resetPageControl: function()
{
this.totalPage = parseInt(this.totalReply / this.replyPerPage)
(this.totalReply % this.replyPerPage != 0 ? 1 : 0);
this.pageControl.reset({
totalPage: this.totalPage
});
},
bindTopReply: function()
{
var self = this;
var rangeList = new Array();
function getIndexId(reply_id)
{
return parseInt(reply_id / Comment.Configure.index_line_sum);
}
function getReplyPos(reply_id)
{
return (reply_id % Comment.Configure.index_line_sum);
}
var top_show_sum = 5;
var index_line_len = self.index_line_len;
var reply_start = self.data_sum['top_count'] - 1;
var start_index_id = getIndexId(reply_start);
var start_reply_id = getReplyPos(reply_start);
var currReply = 1;
var replySum = 0;
while (currReply )
{
if (reply_start - currReply < 0)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(0, start_reply_id 1, index_line_len)
});
break;
}
if (currReply == top_show_sum)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(start_reply_id - currReply replySum 1, currReply - replySum, index_line_len)
});
break;
}
if (start_reply_id - currReply < 0)
{
rangeList.push({
url: Comment.UrlFactory.getIndexUrl(start_index_id),
range: Comment.UrlFactory.getRangeHeader(0, start_reply_id 1, index_line_len)
});
start_index_id–;
start_reply_id = Comment.Configure.index_line_sum - 1;
replySum = currReply;
}
}
var replyList = new Array();
var replyAllList = new Array();
var rangeSum = rangeList.length;
for (var i = 0; i < rangeList.length; i)
{
new getReplyList(i);
}
function getReplyList(i)
{
var comment_type = ‘normal’;
var comment_id = self.commentId;
if (self.name == ‘Group’)
{
comment_type = ‘group’;
comment_id = self.groupId;
}
var sCommentIndexUrl = ‘/’ self.site ‘/’ comment_type ‘/’
Comment.UrlFactory.getCommentUrl(comment_id)
Comment.UrlFactory.getIndexDir(’top_count’)
‘/’
rangeList[i].url
‘.htm’ noCacheUrl();
new Ajax.Request(
sCommentIndexUrl,
{
method: ‘get’,
asynchronous: true,
onSuccess: onSucc,
onFailure: onError,
requestHeaders:rangeList[i].range
}
);
function onSucc(response)
{
replyList[i] = Comment.ContentFormat.decode(response.responseText);
if (i == rangeSum - 1)
{
replySort();
self.bindReplyList();
}
}
function onError()
{
}
}
function replySort()
{
if (self.order == 0)
{
if (replyList.length == 1)
{
replyAllList = replyAllList.concat(replyList[0]);
}
else
{
for (var i = 0; i < replyList.length; i)
{
replyAllList = replyAllList.concat(replyList[i]);
}
}
}
else
{
if (replyList.length == 1)
{
for (var i = replyList[0].length - 1; i >= 0; –i)
{
replyAllList.push(replyList[0][i])
}
}
else
{
for (var i = 0; i < replyList.length; i)
{
for (var j = replyList[i].length - 1; j >= 0; –j)
{
replyAllList.push(replyList[i][j])
}
}
}
}
var str = ”;
for (var j = 0; j < replyAllList.length; j)
{
str = replyAllList[j] ‘\r\n’;
}
self.topReplyList = replyAllList;
}
}
}
Comment.User = {
logined: null,
uin: null
}
Comment.Post = {
init: function(option)
{
this.base = option.base;
this.option = option;
this.initAsyncForm();
this.bindPostTypeSelector();
this.bindOtherEvent();
this.bindPostBtn();
this.bindBottomPostBtn();
this.bindBottomTitleEvent();
this.bindBottomPostTypeEvent();
this.setDefault();
},
bindOpenPostBtn: function(btn, c_id)
{
$(btn).onclick = function()
{
Comment.Post.beforeOpenPost(0, ”, c_id);
return false;
}
},
formElem: [
'b_anonymous',
'c_id',
'c_site',
'c_sort',
'c_title',
'c_content',
'r_key',
'r_type',
'r_tips',
'g_id'
],
initAsyncForm: function()
{
var formElem = this.formElem;
var form = $C(’form’);
form.id = ‘post_form’;
$A(formElem).each(function(elem_name)
{
var elem = $C(’input’);
elem.type = ‘hidden’;
elem.name = elem_name;
elem.value = ”;
form.appendChild(elem);
});
document.getElementsByTagName(’body’)[0].appendChild(form);
},
clearAsyncForm: function()
{
$A($(’post_form’).getElementsByTagName(’input’)).each(function(elem)
{
elem.value = ”;
});
},
setDefault: function()
{
$(’stat_post_type’).innerHTML = ‘非匿名发表’;
},
bindOtherEvent: function()
{
if (!$(’r_quote_del’))
{
return;
}
/* 引用事件 */
$(’r_quote_del’).onclick = function()
{
$(’r_quote’).style.display = ‘none’;
return false;
}
/* 选择回复立场 */
$A($(’reply_type’).getElementsByTagName(’input’)).each(
function(radio)
{
if (radio.value == ‘middle’)
{
radio.checked = true;
}
radio.onclick = function()
{
if (this.value == ‘agree’)
{
$(’stat_reply_type’).innerHTML = ‘支持原帖’;
makeFormValue({r_type:’0′});
}
else if (this.value == ‘disagree’)
{
$(’stat_reply_type’).innerHTML = ‘反对原帖’;
makeFormValue({r_type:’1′});
}
else
{
$(’stat_reply_type’).innerHTML = ‘中立态度’;
makeFormValue({r_type:’2′});
}
}
});
/* 选择辩论立场 */
$A($(’debate_id’).getElementsByTagName(’input’)).each(
function(radio)
{
radio.onclick = function()
{
if (this.value == ‘agree’)
{
$(’stat_debate_type’).innerHTML = ‘我是正方’;
makeFormValue({c_id:Comment.Post.base.data_info.agree_id});
}
else if (this.value == ‘disagree’)
{
$(’stat_debate_type’).innerHTML = ‘我是反方’;
makeFormValue({c_id:Comment.Post.base.data_info.disagree_id});
}
else if (this.value == ‘middle’)
{
$(’stat_debate_type’).innerHTML = ‘我是中立方’;
makeFormValue({c_id:Comment.Post.base.data_info.middle_id});
}
}
});
},
setReplyType: function(type)
{
$A($(’reply_type’).getElementsByTagName(’input’)).each(
function(radio)
{
if (radio.value == type)
{
radio.click();
return;
/*
radio.checked = true;
var type_num = {
‘agree’: ‘0′,
‘disagree’: ‘1′,
‘middle’: ‘2′
};
makeFormValue({r_type:type_num[type]});
*/
}
else
{
radio.checked = false;
}
});
},
setDebate: function(type, c_id)
{
$A($(’debate_id’).getElementsByTagName(’input’)).each(
function(radio)
{
if (radio.value == type)
{
radio.checked = true;
makeFormValue({c_id:c_id});
}
else
{
radio.checked = false;
}
});
},
clearValue: function()
{
$A($(
‘l_c_title’,
‘l_c_content’
)).each(
function(input)
{
input.value = ”;
});
},
bindTitleEvent: function()
{
var d_title = Comment.Configure.reply_default_title;
$(’l_c_title’).value = d_title;
$(’l_c_title’).onfocus = function()
{
if ($(’l_c_title’).value == d_title)
{
$(’l_c_title’).value = ”;
}
}
$(’l_c_title’).onblur = function()
{
if ($(’l_c_title’).value == ”)
{
$(’l_c_title’).value = d_title;
}
}
},
bindBottomTitleEvent: function()
{
if (!$(’b_c_title’))
{
return;
}
var d_title = Comment.Configure.reply_default_title;
$(’b_c_title’).value = d_title;
$(’b_c_title’).onfocus = function()
{
if ($(’b_c_title’).value == d_title)
{
$(’b_c_title’).value = ”;
}
}
$(’b_c_title’).onblur = function()
{
if ($(’b_c_title’).value == ”)
{
$(’b_c_title’).value = d_title;
}
}
},
setPostTypeSelector: function(type)
{
if (type == ‘login_select’)
{
$(’l_login_frame’).src = ‘i_login.htm?l_login_frame’;
showElement(’l_login_post’);
$(’stat_post_type’).innerHTML = ‘登录发表’;
$(’l_b_tips’).disabled = false;
$(’l_b_tips’).checked = false;
$(’l_b_anonymous’).checked = false;
}
else if (type == ‘anonymous_select’)
{
hideElement(’l_login_post’);
$(’stat_post_type’).innerHTML = ‘匿名发表’;
$(’l_b_tips’).disabled = true;
$(’l_b_tips’).checked = false;
$(’l_b_anonymous’).checked = true;
}
},
bindPostTypeSelector: function()
{
if (!$(’l_b_anonymous’))
{
return;
}
$(’l_b_anonymous’).onclick = function()
{
if ($(’l_b_anonymous’).checked)
{
Comment.Post.setPostTypeSelector(’anonymous_select’);
}
else
{
Comment.Post.setPostTypeSelector(’login_select’);
}
}
},
bindPostBtn: function()
{
if (!$(’l_post_btn’))
{
return;
}
var self = this;
$(’l_post_btn’).onclick = function()
{
if (!getCookie(’skey’) && !$(’l_b_anonymous’).checked)
{
alert(’很抱歉,您尚未登录,请先登录’);
return;
}
if ($(’l_c_title’).value.length > 32)
{
alert(’很抱歉,标题不得超过32个字符’);
return;
}
var c_content = $(’l_c_content’).value.trim();
if (c_content == ”)
{
alert(’很抱歉,请填写评论内容’);
$(’l_c_content’).focus();
return;
}
else if (c_content.realLength() > 10000)
{
alert(’很抱歉,评论内容不能超过10,000个字符(5,000个汉字)’);
$(’l_c_content’).focus();
return;
}
if (self.base.min_len)
{
if (c_content.realLength() < self.base.min_len)
{
alert(’很抱歉,评论内容不能少于’ self.base.min_len ‘个字符(’ self.base.min_len / 2 ‘个汉字)’);
$(’l_c_content’).focus();
return;
}
}
makeFormValue(
{
b_anonymous: $(’l_b_anonymous’).checked ? ‘1′ : ”,
c_site: self.base.site,
c_sort: self.base.sort_en,
c_title: ($(’l_c_title’).value == Comment.Configure.reply_default_title ? ” : $(’l_c_title’).value),
c_content: $(’l_c_content’).value,
g_id: self.base.comment_g_id,
r_tips: $(’l_b_tips’).checked ? ‘1′ : ”
});
self.postData();
return false;
};
},
bindBottomPostBtn: function()
{
if (!$(’b_post_btn’))
{
return;
}
var self = this;
$(’b_post_btn’).onclick = function()
{
if (!getCookie(’skey’) && !$(’b_b_anonymous’).checked)
{
alert(’很抱歉,您尚未登录,请先登录’);
return;
}
if ($(’b_c_title’))
{
if ($(’b_c_title’).value.length > 32)
{
alert(’很抱歉,标题不得超过32个字符’);
$(’b_c_title’).focus();
return;
}
}
var c_content = $(’b_c_content’).value.trim();
if (c_content == ”)
{
alert(’很抱歉,请填写评论内容’);
$(’b_c_content’).focus();
return;
}
else if (c_content.realLength() > 10000)
{
alert(’很抱歉,评论内容不能超过10,000个字符’);
$(’b_c_content’).focus();
return;
}
if (self.base.min_len)
{
if (c_content.realLength() < self.base.min_len)
{
alert(’书评内容不能少于’ self.base.min_len ‘字符’);
$(’b_c_content’).focus();
return;
}
}
makeFormValue(
{
b_anonymous: $(’b_b_anonymous’).checked ? ‘1′ : ”,
c_site: self.base.site,
c_sort: self.base.sort_en,
c_title: ($(’b_c_title’).value == Comment.Configure.reply_default_title ? ” : $(’b_c_title’).value),
c_content: $(’b_c_content’).value,
g_id: self.base.comment_g_id,
c_id: self.base.commentId,
r_tips: $(’b_b_tips’).checked ? ‘1′ : ”
});
self.postData();
return false;
};
},
bindBottomPostTypeEvent: function()
{
var self = this;
if (!$(’b_b_anonymous’))
{
return;
}
if (self.base.name != ‘MiniNormal’)
{
setTimeout(setBottomLocation, Comment.Configure.login_frame_delay);
}
function setBottomLocation()
{
$(’b_login_frame’).src = ‘i_login.htm?b_login_frame’;
}
$(’b_b_anonymous’).onclick = function()
{
if ($(’b_b_anonymous’).checked)
{
hideElement(’b_login_post’);
with ($(’b_b_tips’))
{
disabled = true;
checked = false;
}
}
else
{
$(’b_login_frame’).src = ‘i_login.htm?b_login_frame’;
showElement(’b_login_post’);
$(’b_b_tips’).disabled = false;
}
if (self.base.name == ‘MiniNormal’)
{
self.base.updateHeight();
}
}
},
postData: function()
{
showLoading(’正在发送…’);
var post_form = $(’post_form’);
post_form.action = Comment.Configure.postUrl;
post_form.target = ‘post_async’;
post_form.method = ‘post’;
post_form.submit();
},
fastReplyWords:
[
[
'精彩,一针见血',
'观点独到',
'说得很对',
'您说得有道理'
],
[
'乱七八糟说什么',
'您说得没道理',
'简直是胡说八道'
]
],
fastReply: function(btn, type, r_key, c_id)
{
var self = this;
$(’fastLayer’).innerHTML = ”;
$(’fastLayer’).style.display = ‘block’;
$(’fastLayer’).style.left = findPosX(btn) 1 ‘px’;
$(’fastLayer’).style.top = findPosY(btn) 20 ‘px’;
var replyWords = this.fastReplyWords[type];
for (var i = 0; i < replyWords.length; i)
{
var word = $C(’a');
word.innerHTML = replyWords[i];
word.href = ‘#’;
$(’fastLayer’).appendChild(word);
word.onclick = function()
{
replyPost(this.innerHTML);
return false;
}
}
function replyPost(content)
{
makeFormValue(
{
b_anonymous: (getCookie(’skey’) ? ” : ‘1′),
c_id: c_id,
c_site: self.base.site,
c_sort: self.base.data_commentinfo.sort_en,
r_key: r_key,
r_type: (type == 0 ? ‘3′ : ‘4′),
r_tips: ”,
c_title: ”,
c_content: content,
g_id: self.base.comment_g_id
});
self.postData();
}
},
onError: function(msg)
{
alert(msg);
},
onSucc: function()
{
var self = this;
setTimeout(reload, 300);
function reload()
{
self.base.reload();
window.location.replace(’#reload’);
}
},
clearBottomInput: function()
{
$A($(
‘b_c_title’,
‘b_c_content’
)).each(function(elem)
{
if (elem)
{
elem.value = ”;
}
});
},
logout: function()
{
var url = Comment.Configure.loginIframeUrl ‘?l_login_frame’;
if ($(’l_login_frame’))
{
$(’l_login_frame’).src = Comment.Configure.logoutUrl ‘?url=’ url;
}
if ($(’b_login_frame’))
{
$(’b_login_frame’).src = Comment.Configure.logoutUrl ‘?url=’ url;
}
},
callback: function(url)
{
hideLoading();
$(’post_async’).src = ‘about:blank’;
var code = url.substr(url.indexOf(’code=’) 5);
if (code == ‘-’)
{
code = -1;
}
code = code / 1;
getFormValue(’r_type’);
if (code == -1 && Comment.Post.r_type >= 3)
{
code = 0;
}
var errMsg = ”;
switch (code)
{
case -1:
errMsg = ‘您de评论已提交审核,感谢您de参与!’;
this.closePostLayer();
this.clearBottomInput();
break;
case 0:
errMsg = ‘发表成功,感谢您de参与!’;
this.onSucc();
this.closePostLayer();
this.clearBottomInput();
break;
case 1:
errMsg = ‘很抱歉,您填写de内容不完整,请重新输入您de内容.’;
break;
case 2:
errMsg = ‘很抱歉,您尚未登录或登录已经过期,请先登录.’;
this.logout();
break;
case 3:
errMsg = ‘您de评论已提交审核,感谢您de参与!’;
this.closePostLayer();
this.clearBottomInput();
break;
case 4:
errMsg = ‘您deIP地址已暂时被屏蔽.’;
break;
case 5:
errMsg = ‘您deQQ号已暂时禁止在本评论系统发言.’;
break;
case 6:
errMsg = ‘很抱歉,您deQQ号码和密码不

javascript的函数

星期一, 06月 2nd, 2008

javascriptde函数

子乌注:一篇相当不错defunction入门文章,个人感觉相当经典.

词语翻译列表

function:函数(Function未翻译)

declare:定义

assign:指派,分配

functionbody:函数体(就是函数de内容)

object:对象

property:属性

unnamed:匿名(在这里没翻译成未命名)

object oriented programming:面相对相编程

class:类(比如后面declass data type我翻译成类数据类型)

pointer:指针

reassign:重新分配

nest:嵌套

feature:功能,特性

local/global:局部/全局

blueprint:蓝图(?)

user defined:用户自定义

instance:实例

prototype:原型(除了标题都不翻译)

internal:内部

constructor:构造器

duplication:复制

函数:定义

有以下这些方法可以定义一个函数.所有这些都是有效de,但是它们在后台如何实现de则有一些差别.

常用de写法

一般大家都用这个写法来定义一个函数:

functionName([parameters]){functionBody};

Example D1:

Language:javascript, parsed in: 0.005 seconds, using GeSHi 1.0.7.12

  1. function add(a, b)

  2. {

  3. return a b;

  4. }

  5. alert(add(1,2)); // 结果 3

运行示例

当我这么定义函数de时候,函数内容会被编译(但不会立即执行,除非我去调用它).而且,也许您不知道,当这个函数创建de时候有一个同名de对象也被创建.就我de例子来说,我现在有一个对象叫做“add”(要更深入了解,看底下函数:对象节.)

匿名函数

我也可以通过指派一个变量名给匿名函数de方式来定义它.

Example D2

Language:javascript, parsed in: 0.006 seconds, using GeSHi 1.0.7.12

  1. var add=function(a, b)

  2. {

  3. return a b;

  4. }

  5. alert(add(1,2)); // 结果 3

运行示例

这个相关代码和前一个例子做了同样de事情.也许语法看起来比较奇怪,但它应该更能让您感觉到函数是一个对象,而且我只是为这个对指派了一个名称.可以把它看做和var myVar=[1,2,3]一样de语句.以这种方式声明de函数内容也一样会被编译.

当我指派一个这样de函数de时候,我并不一定要求必须是匿名函数.在这里,我作了和ExampleD2一样de事情,但我加了函数名“theAdd”,而且我可以通过调用函数名或者是那个变量来引用函数.

Example D2A

Language:javascript, parsed in: 0.008 seconds, using GeSHi 1.0.7.12

  1. var add=function theAdd(a, b)

  2. {

  3. return a b;

  4. }

  5. alert(add(1,2)); // 结果 3

  6. alert(theAdd(1,2)); // 结果也是 3

运行示例

使用这种方式来定义函数在面向对象编程中是很有用de,因为我能像底下这样使一个函数成为一个对象de属性.

Language:javascript, parsed in: 0.005 seconds, using GeSHi 1.0.7.12

  1. var myObject=new Object();

  2. myObject.add=function(a,b){return a b};

  3. // myObject 现在有一个叫做“add”de属性(或方法)

  4. // 而且我能够象下面这样使用它

  5. myObject.add(1, 2);

new

我也能够通过使用运算符new来定义一个函数.

这是一个最少见de定义函数de方式并且并不推荐使用这种方式除非有特殊de理由(可能de理由见下).语法如下:

varName=new Function([param1Name, param2Name,...paramNName], functionBody);

Example D3:

Language:javascript, parsed in: 0.004 seconds, using GeSHi 1.0.7.12

  1. var add=new Function(“a”, “b”, “return a b;”);

  2. alert(add(3,4)); // 结果 7

运行示例

我在这里有两个参数叫做ab,而函数体返回abde和.请注意new Function(…)使用了大写F,而不是小写f. 这就告诉javascript,我将要创建一个类型是Functionde对象. 还要注意到,参数名和函数体都是作为字符串而被传递.我可以随心所欲de增加参数,javascript知道函数体会是右括号前de最后一个字符串(如果没有参数,您能够只写函数体).您没必要将所有东西都写在一行里(使用\或者使用字符串连接符 来分隔长相关代码).\标记告诉JavaScript在下一行查找字符串de其余部分.例子如下:

Example D4

Language:javascript, parsed in: 0.007 seconds, using GeSHi 1.0.7.12

  1. // 注意 ” “

  2. // 和 “\”de不同用法

  3. var add=new Function(“a”, “b”,

  4. “alert”

  5. “(’adding ‘ a ‘ and ‘ b);\

  6. return a b;”);

  7. alert(add(3,4)); // 结果 7

javascript:exampleD4();

采用这种方式定义函数会导致函数并没被编译,而且它有可能会比用其它方式定义de函数要慢.至于为什么,看一下这个相关代码:

Example D5

Language:javascript, parsed in: 0.022 seconds, using GeSHi 1.0.7.12

  1. function createMyFunction(myOperator)

  2. {

  3. return new Function(“a”, “b”, “return a” myOperator “b;”);

  4. }

  5. var add=createMyFunction(” “); // 创建函数 “add”

  6. var subtract=createMyFunction(“-”); // 创建函数 “subtract”

  7. var multiply=createMyFunction(“*”); // 创建函数 “multiply”

  8. // test the functions

  9. alert(“加de结果=” add(10,2)); // 结果是 12

  10. alert(“减de结果=” subtract(10,2)); // 结果是 8

  11. alert(“乘de结果=” multiply(10,2)); // 结果是 20

  12. alert(add);

运行示例

这个有趣de例子创建了三个不同defunction,通过实时传递不同de参数来创建一个新Function.因为编译器没法知道最终相关代码会是什么样子de,所以new Function(…)de内容不会被编译.那这有什么好处呢?嗯,举个例子,如果您需要用户能够创建他们自己de函数de时候这个功能也许很有用,比如在游戏里.我也许需要允许用户添加“行为”给一个“player”.但是,再说一次,一般情况下,我应该避免使用这种形式,除非有一个特殊de目de.

函数:对象

函数是javascript中de一种特殊形式de对象.它是第一个类数据类型.这意味着我能够给它增加属性.这里有一些需要注意de有趣观点:

对象de创建

就像刚才提及de,当我定义一个函数时,javascript实际上在后台为您创建了一个对象.这个对象de名称就是函数名本身.这个对象de类型是function.在下面de例子,我也许不会意识到这一点,但我实际上已经创建了一个对象:它叫做Ball.

Example 1

Language:javascript, parsed in: 0.006 seconds, using GeSHi 1.0.7.12

  1. function Ball() // 也许看起来有点奇怪,但是这个声明

  2. { // 创建了一个叫做Ballde对象

  3. i=1;

  4. }

  5. alert(typeof Ball); // 结果 “function”

运行示例

我甚至能将这个对象de内容打印出来而且它会输出这个函数de实际相关代码,Example 2: 点击 alert(Ball);来看看Ballde内容.

属性de添加

我能够添加给Object添加属性,包括对象function.因为定义一个函数de实质是创建一个对象.我能够“暗地里”给函数添加属性.比如,我这里定义了函数Ball,并添加属性callsign.

Language:javascript, parsed in: 0.007 seconds, using GeSHi 1.0.7.12

  1. function Ball() // 也许看起来有点奇怪,但是这个声明

  2. { // 创建了一个叫做Ballde对象,而且您能够

  3. } // 引用它或者象下面那样给它增加属性

  4. Ball.callsign=“The Ball”; // 给Ball增加属性

  5. alert(Ball.callsign); // 输出 “The Ball”

运行示例

指针

因为function是一个对象,我能够为一个function分配一个指针.如下例,变量ptr指向了对象myFunction.

Language:javascript, parsed in: 0.005 seconds, using GeSHi 1.0.7.12

  1. function myFunction(message)

  2. {

  3. alert(message);

  4. }

  5. var ptr=myFunction; // ptr指向了myFunction

  6. ptr(“hello”); // 这句会执行myFunction:输出”hello”

运行示例

我能够运行这个函数,就好像这个函数名已经被指针名代替了一样.所以在上面,这行ptr(”hello”); myFunction(”hello”);de意义是一样de.

指向函数de指针在面向对象编程中相当有用.例如:当我有多个对象指向同一个函数de时候(如下):

Example 4A

Language:javascript, parsed in: 0.017 seconds, using GeSHi 1.0.7.12

  1. function sayName(name)

  2. {

  3. alert(name);

  4. }

  5. var object1=new Object(); // 创建三个对象

  6. var object2=new Object();

  7. var object3=new Object();

  8. object1.sayMyName=sayName; // 将这个函数指派给所有对象

  9. object2.sayMyName=sayName;

  10. object3.sayMyName=sayName;

  11. object1.sayMyName(“object1″); // 输出 “object1″

  12. object2.sayMyName(“object2″); // 输出 “object2″

  13. object3.sayMyName(“object3″); // 输出 “object3″

运行示例

上例图示

因为只有指针被保存(而不是函数本身),当我改变函数对象自身de时候,所有指向那个函数de指针都会发生变化.我能够在底下看到:

Example 5:

Language:javascript, parsed in: 0.016 seconds, using GeSHi 1.0.7.12

  1. function myFunction()

  2. {

  3. alert(myFunction.message);

  4. }

  5. myFunction.message=“old”;

  6. var ptr1=myFunction; // ptr1 指向 myFunction

  7. var ptr2=myFunction; // ptr2 也指向 myFunction

  8. ptr1(); // 输出 “old”

  9. ptr2(); // 输出 “old”

  10. myFunction.message=“new”;

  11. ptr1(); // 输出 “new”

  12. ptr2(); // 输出 “new”

运行示例

指针de指向

我能够在一个函数创建之后重新分配它,但是我需要指向函数对象本身,而不是指向它de指针.在下例中,我将改变myfunction()de内容.

Example 6:

Language:javascript, parsed in: 0.007 seconds, using GeSHi 1.0.7.12

  1. function myFunction()

  2. {

  3. alert(“Old”);

  4. }

  5. myFunction(); // 输出 “Old”

  6. myFunction=function()

  7. {

  8. alert(“New”);

  9. };

  10. myFunction(); // 输出 “New”

运行示例

旧函数哪里去了??被抛弃了.

上例图示

如果我需要保留它,我可以在改变它之前给它分配一个指针.

Example 6A:

Language:javascript, parsed in: 0.008 seconds, using GeSHi 1.0.7.12

  1. function myFunction()

  2. {

  3. alert(“Old”);

  4. }

  5. var savedFuncion=myFunction;

  6. myFunction=function()

  7. {

  8. alert(“New”);

  9. };

  10. myFunction(); // 输出 “New”

  11. savedFuncion(); // 输出 “Old”

运行示例

上例图示

不过要小心,象下面这样de例子并不会有作用,因为是创建了另一个叫做myFunctionPtrde函数而不是修改它.

Example 6B:

Language:javascript, parsed in: 0.009 seconds, using GeSHi 1.0.7.12

  1. function myFunction()

  2. {

  3. alert(“Old”);

  4. }

  5. var savedFunc=myFunction;

  6. savedFunc=function()

  7. {

  8. alert(“New”);

  9. };

  10. myFunction(); // 输出 “Old”

  11. savedFunc(); // 输出 “New”

运行示例

内嵌函数

我还能够在一个函数中嵌套一个函数.下例,我有一个叫做getHalfOfde函数,而在它里面,我有另一个叫做calculatede函数.

Example 7

Language:javascript, parsed in: 0.015 seconds, using GeSHi 1.0.7.12

  1. function getHalfOf(num1, num2, num3)

  2. {

  3. function calculate(number)

  4. {

  5. return number/2;

  6. }

  7. var result=“”;

  8. result =calculate(num1) ” “;

  9. result =calculate(num2) ” “;

  10. result =calculate(num3);

  11. return result;

  12. }

  13. var resultString=getHalfOf(10,20,30);

  14. alert(resultString); // 输出 “5 10 15″

运行示例

您只能在内部调用嵌套de函数.就是说,您不能这么调用:getHalfOf.calculate(10),因为calculate只有当外部函数(getHalfOf())在运行de时候才会存在.这和我前面de讨论一致(函数会被编译,但只有当您去调用它de时候才会执行).

调用哪个函数?

您也许正在想命名冲突de问题.比如,下面哪一个叫做calculatede函数会被调用?

Example 8

Language:javascript, parsed in: 0.017 seconds, using GeSHi 1.0.7.12

  1. function calculate(number)

  2. {

  3. return number/3;

  4. }

  5. function getHalfOf(num1, num2, num3)

  6. {

  7. function calculate(number)

  8. {

  9. return number/2;

  10. }

  11. var result=“”;

  12. result =calculate(num1) ” “;

  13. result =calculate(num2) ” “;

  14. result =calculate(num3);

  15. return result;

  16. }

  17. var resultString=getHalfOf(10,20,30);

  18. alert(resultString); // 输出 “5 10 15″

运行示例

在这个例子中,编译器会首先搜索局部内存地址,所以它会使用内嵌decalculate函数.如果我删除了这个内嵌(局部)decalculate函数,这个相关代码会使用全局decalculate函数.

函数:数据类型及构造函数

让我来看看函数de另一个特殊功能--这让它和其它对象类型截然不同.一个函数能够用来作为一个数据类型de蓝图.这个特性通常被用在面向对象编程中来模拟用户自定义数据类型(user defined data type).使用用户自定义数据类型创建de对象通常被成为用户自定义对象(user defined object).

数据类型

在定义了一个函数之后,我也同时创建了一个新de数据类型.这个数据类型能够用来创建一个新对象.下例,我创建了一个叫做Ballde新数据类型.

Example DT1

Language:javascript, parsed in: 0.004 seconds, using GeSHi 1.0.7.12

  1. function Ball()

  2. {

  3. }

  4. var ball0=new Ball(); // ball0 现在指向一个新对象

  5. alert(ball0); // 输出 “Object”,因为 ball0 现在是一个对象

运行示例

这样看来,ball0=new Ball()作了什么?new关键字创建了一个类型是Objectde新对象(叫做ball0).然后它会执行Ball(),并将这个引用传给ball0(用于调用对象).下面,您会看到这条消息:“creating new Ball”,如果Ball()实际上被运行de话.

Example DT2

Language:javascript, parsed in: 0.009 seconds, using GeSHi 1.0.7.12

  1. function Ball(message)

  2. {

  3. alert(message);

  4. }

  5. var ball0=new Ball(“creating new Ball”); // 创建对象并输出消息

  6. ball0.name=“ball-0″; // ball0现在有一个属性:name

  7. alert(ball0.name); // 输出 “ball-0″

运行示例

我可以把上面这段相关代码de高亮de一行看做是底下de相关代码高亮处de一个简写:

Language:javascript, parsed in: 0.010 seconds, using GeSHi 1.0.7.12

  1. function Ball(message)

  2. {

  3. alert(message);

  4. }

  5. var ball0=new Object();

  6. ball0.construct=Ball;

  7. ball0.construct(“creating new ball”); // 执行 ball0.Ball(”creating..”);

  8. ball0.name=“ball-0″;

  9. alert(ball0.name);

运行示例

这行相关代码ball0.construct=BallExample 4中deptr=myFunction语法一致.

如果您还是不明白这行de含义那就回过头再复习一下Example 4.注意:您也许考虑直接运行ball0.Ball(”…”),但是它不会起作用de,因为ball0并没有一个叫做Ball(”…”)de属性,并且它也不知道您究竟想作些什么.

添加属性

当我象上面那样使用关键字new创建一个对象de时候,一个新deObject被创建了.我可以在创建之后给这个对象添加属性(就好像我在上面那样添加属性name.而接下来de问题就是如果我创建了这个对象de另外一个实例,我得象下面那样再次给这个新对象添加这个属性.)

Example DT3 (creates 3 ball objects)

Language:javascript, parsed in: 0.013 seconds, using GeSHi 1.0.7.12

  1. function Ball()

  2. {

  3. }

  4. var ball0=new Ball(); // ball0 现在指向了类型Ballde一个新实例

  5. ball0.name=“ball-0″; // ball0 现在有一个属性”name”

  6. var ball1=new Ball();

  7. ball1.name=“ball-1″;

  8. var ball2=new Ball();

  9. alert(ball0.name); // 输出 “ball-0″

  10. alert(ball1.name); // 输出 “ball-1″

  11. alert(ball2.name); // 哦,我忘记给ball2添加“name”了!

我忘记给ball2添加属性name了,如果在正式de程序中这也许会引发问题.有什么好办法可以自动增加属性呢?嗯,有一个:使用this关键字.this这个词在function中有特别de意义.它指向了调用函数de那个对象.让我看看下面de另一个示例,这时候我在构造函数中添加上这些属性:

Example DT4

Language:javascript, parsed in: 0.010 seconds, using GeSHi 1.0.7.12

  1. function Ball(message, specifiedName)

  2. {

  3. alert(message);

  4. this.name=specifiedName;

  5. }

  6. var ball0=new Ball(“creating new Ball”, “Soccer Ball”);

  7. alert(ball0.name); // prints “Soccer Ball”

运行示例

请记住:是new关键字最终使得构造函数被执行.在这个例子中,它将会运行Ball(”creating new Ball”, “Soccer Ball”);而关键字this将指向ball0.

因此,这行:this.name=specifiedName变成了ball0.name=”Soccer Ball”.

它主要是说:给ball0添加属性name,属性值是Soccer Ball.

我现在只是添加了一个name属性给ball0,看起来和上一个例子中所做de很象,但却是一个更好更具扩展性de方法.现在,我可以随心所欲de创建许多带有属性deball而无需我手动添加它们.而且,人们也希望创建deBall对象能够清晰de看懂它de构造函数并且能够轻松找出Ballde所有属性.让我添加更多属性到Ball里.

Example DT5

Language:javascript, parsed in: 0.026 seconds, using GeSHi 1.0.7.12

  1. function Ball(color, specifiedName, owner, weight)

  2. {

  3. this.name=specifiedName;

  4. this.color=color;

  5. this.owner=owner;

  6. this.weight=weight;

  7. }

  8. var ball0=new Ball(“black/white”, “Soccer Ball”, “John”, 20);

  9. var ball1=new Ball(“gray”, “Bowling Ball”, “John”, 30);

  10. var ball2=new Ball(“yellow”, “Golf Ball”, “John”, 55);

  11. var balloon=new Ball(“red”, “Balloon”, “Pete”, 10);

  12. alert(ball0.name); // 输出 “Soccer Ball”

  13. alert(balloon.name); // 输出 “Balloon”

  14. alert(ball2.weight); // 输出 “55″

运行示例

嘿!使用面向对象术语,您能够说Ball是一个拥有如下属性de对象类型:name, color, owner, weight.

将对象赋给属性

我并没被限制只能添加形如字符串或者数字之类de简单数据类型作为属性.我也能够将对象赋给属性.下面,supervisorEmployeede一个属性.

Example DT6

Language:javascript, parsed in: 0.021 seconds, using GeSHi 1.0.7.12

  1. function Employee(name, salary, mySupervisor)

  2. {

  3. this.name=name;

  4. this.salary=salary;

  5. this.supervisor=mySupervisor;

  6. }

  7. var boss=new Employee(“John”, 200);

  8. var manager=new Employee(“Joan”, 50, boss);

  9. var teamLeader=new Employee(“Rose”, 50, boss);

  10. alert(manager.supervisor.name ” is the supervisor of “ manager.name);

  11. alert(manager.name \’s supervisor is “ manager.supervisor.name);

会输出什么呢?运行示例

就像您在上面这个例子中看到de那样,managerteamLeader都有一个supervisor属性,而这个属性是类型Employeede一个对象.

将函数作为属性

任何类型de对象都可以作为一个属性,回忆一下前面deExample 4(不是Example DT4),函数也是一个对象.所以您可以让一个函数作为一个对象de一个属性.下面,我将添加两个函数getSalaryaddSalary.

Example DT7

Language:javascript, parsed in: 0.022 seconds, using GeSHi 1.0.7.12

  1. function Employee(name, salary)

  2. {

  3. this.name=name;

  4. this.salary=salary;

  5. this.addSalary=addSalaryFunction;

  6. this.getSalary=function()

  7. {

  8. return this.salary;

  9. };

  10. }

  11. function addSalaryFunction(addition)

  12. {

  13. this.salary=this.salary addition;

  14. }

  15. var boss=new Employee(“John”, 200000);

  16. boss.addSalary(10000); // boss 长了 10K 工资……为什么老板工资可以长这么多:’(

  17. alert(boss.getSalary()); // 输出 210K……为什么默认工资也那么高……:’(

运行示例

addSalarygetSalary演示了几种将函数赋给属性de不同方法.如果您记得我最开始de讨论;我讨论了三种声明函数de不同方式.所有那些在这里都是适用de,但是上面展示de两个最常用.

让我看看有什么不同.下面,注意一下9-12行de相关代码.当这部分相关代码执行de时候,函数getSalary被声明.如前面数次提到de,一个函数声明de结果是一个对象被创建.所以这时候boss被创建(接下来de高亮行),而boss里有一个getSalary属性.

Language:javascript, parsed in: 0.022 seconds, using GeSHi 1.0.7.12

  1. function Employee(name, salary)

  2. {

  3. this.name=name;

  4. this.salary=salary;

  5. this.addSalary=addSalaryFunction;

  6. this.getSalary=function()

  7. {

  8. return this.salary;

  9. };

  10. }

  11. function addSalaryFunction(addition)

  12. {

  13. this.salary=this.salary addition;

  14. }

  15. var boss=new Employee(“John”, 200000);

  16. var boss2=new Employee(“Joan”, 200000);

  17. var boss3=new Employee(“Kim”, 200000);

当您创建这个对象de更多实例时(boss2boss3),每一个实例都有一份getSalary相关代码de单独拷贝;而与此相反,addSalary则指向了同一个地方(即addSalaryFunction).

看看下面de相关代码来理解一下上面所描述de内容.

Example DT8

Language:javascript, parsed in: 0.036 seconds, using GeSHi 1.0.7.12

  1. function Employee(name, salary)

  2. {

  3. this.name=name;

  4. this.salary=salary;

  5. this.addSalary=addSalaryFunction;

  6. this.getSalary=function()

  7. {

  8. return this.salary;

  9. };

  10. }

  11. function addSalaryFunction(addition)

  12. {

  13. this.salary=this.salary addition;

  14. }

  15. var boss1=new Employee(“John”, 200000);

  16. var boss2=new Employee(“Joan”, 200000);

  17. // 给getSalary函数对象添加属性

  18. boss1.getSalary.owner=“boss1″;

  19. boss2.getSalary.owner=“boss2″;

  20. alert(boss1.getSalary.owner); // 输出 “boss1″

  21. alert(boss2.getSalary.owner); // 输出 “boss2″

  22. // 如果两个对象指向同一个函数对象,那么

  23. // 上面两个输出都应该是“boss2”.

  24. // 给addSalary函数对象添加属性

  25. boss1.addSalary.owner=“boss1″;

  26. boss1.addSalary.owner=“boss2″;

  27. alert(boss1.addSalary.owner); // 输出 “boss2″

  28. alert(boss2.addSalary.owner); // 输出 “boss2″

  29. // 因为两个对象都指向同一个函数,(子乌注:原文写are not pointing to the same function,疑为笔误)

  30. // 当修改其中一个de时候,会影响所有de实例(所以两个都输出“boss2”).

运行示例

也许不是重要de事情,但这里有一些关于运行类似上面degetSalaryde

Prototype1.4手册

星期一, 06月 2nd, 2008

prototype.js开发者手册

对应版本1.4.0

original article by sp(’Sergio Pereira’) Sergio Pereira

last update: March 30th 2006

中文版:THIN

最后更新:2006-3-31

看到一个很好de东西在国内没有被很多人使用起来,实在是不爽,所以花了很大功夫把这个手册翻译成中文,由于这篇文章很长,所以,翻译de工作量很大而且有些地方英文版也没有说清楚,虽得查看源相关代码,好在不是坚持做完了,大家鼓励下啊!^o^
prototype.js是一个非常优雅dejavascript基础类库,对javascript做了大量de扩展,而且很好de支持Ajax,国外有多个基于此类库实现de效果库,也做得很棒.
prototype.js不仅是一个有很大实用价值dejs库,而且有很高de学习价值,所以我强烈建议B/S开发人员和对JS开发感兴趣de朋友去浏览一些它de源相关代码,其中有很多de珠玑,您绝对会觉得读它de源相关代码是一种享受,当然要读得懂,呵呵.
网上也有人写过1.3版de源码解读,大家可以找来看看.不过1.4版做了很大de扩充,所以希望有朋友写出1.4版de源码解读.

几点说明:

  • 有朋友说prototye已经有人翻译过了,呵呵,是对de,说明您以前关注过它,不过原来翻译de是1.3版de文档,1.4版有很多重要de扩展,而且pre_1.5版现在也出来,不地改动不大.

  • 有朋友说有用多没有翻译地来de,拜托,只是各个方法de参数说明没有翻,这些说明很多都是什么类型,还是有空再弄吧,先将就一下,对不起了,翻到这个程序已经很累人了,毕竟有这么长.

  • 做成CHM文档de事也只能Sorry,因为我没有这个时间,也没有做过CHM,我觉得排版一下看网页和CHM是差不多吧.

prototype.js是什么?

万一您没有使用过大名鼎鼎deprototype.js,那么让我来告诉您,prototype.js是由Sam Stephenson写de一个javascript类库.这个构思奇妙,而且兼容标准de类库,能帮助您轻松建立有高度互动deweb2.0特性de富客户端页面.

如果您最近尝试使用它,您大概了解到文档并不是作者de一个强项.和在我以前使用这个类库de不少开发者一样,一开始,我不得不一头扎进阅读prototype.jsde源相关代码和实验它de功能中.我想,在我学习完它之后,把我学到de东西分享给大家是件不错de事.

同时,在本文中,我也将提供一个关于这个类库提供deobjects,classes,functions,extensions这对东东de非官方参考

在阅读这个文档时,熟悉Rubyde开发者将会注意到Rubyde一些内建类和本类库扩展实现之间非常相似.

相关文章

Advanced JavaScript guide.

一些实用de函数

这个类库带有很多预定义de对象和实用函数,这些东东de目de显然是把您从一些重复de打字中解放出来 .

使用$()方法

$() 方法是在DOM中使用过于频繁de document.getElementById() 方法de一个便利de简写,就像这个DOM方法一样,这个方法返回参数传入deidde那个元素.

比起DOM中de方法,这个更胜一筹.您可以传入多个id作为参数然后 $() 返回一个带有所有要求de元素de一个 Array 对象.

<HTML>

<HEAD>

<TITLE> Test Page </TITLE>

<script src=”prototype-1.3.1.js”></script>

<script>

function test1()

{

var d = $(’myDiv’);

alert(d.innerHTML);

}

function test2()

{

var divs = $(’myDiv’,'myOtherDiv’);

for(i=0; i<divs.length; i )

{

alert(divs[i].innerHTML);

}

}

</script>

</HEAD>

<BODY>

<div id=”myDiv”>

<p>This is a paragraph</p>

</div>

<div id=”myOtherDiv”>

<p>This is another paragraph</p>

</div>

<input type=”button” value=Test1 onclick=”test1();”><br>

<input type=”button” value=Test2 onclick=”test2();”><br>

</BODY>

</HTML>

另外一个好处是,这个函数能传入用string表示de对象ID,也可以传入对象本身,这样,在建立其它能传两种类型de参数de函数时非常有用.

使用$F()函数

$F()函数是另一个大收欢迎de“快捷键”,它能用于返回任何表单输入控件de值,比如text box,drop-down list.这个方法也能用元素id或元素本身做为参数.

<script>

function test3()

{

alert( $F(’userName’) );

}

</script>

<input type=”text” id=”userName” value=”Joe Doe”><br>

<input type=”button” value=Test3 onclick=”test3();”><br>

使用$A()函数

$A()函数能把它接收到de单个de参数转换成一个Array对象.

这个方法,结合被本类库扩展了deArray类,能方便de把任何de可枚举列表转换成或拷贝到一个Array对象.一个推荐de用法就是把DOM Node Lists转换成一个普通deArray对象,从而更有效率de进行遍历,请看下面de例子.

<script>

function showOptions(){

var someNodeList = $(’lstEmployees’).getElementsByTagName(’option’);

var nodes = $A(someNodeList);

nodes.each(function(node){

alert(node.nodeName ‘: ‘ node.innerHTML);

});

}

</script>

<select id=”lstEmployees” size=”10″ >

<option value=”5″>Buchanan, Steven</option>

<option value=”8″>Callahan, Laura</option>

<option value=”1″>Davolio, Nancy</option>

</select>

<input type=”button” value=”Show the options” onclick=”showOptions();” >

使用 $H() 函数

$H()函数把一些对象转换成一个可枚举de和联合数组类似deHash对象.

<script>

function testHash()

{

//let’s create the object

var a = {

first: 10,

second: 20,

third: 30

};

//now transform it into a hash

var h = $H(a);

alert(h.toQueryString()); //displays: first=10&second=20&third=30

}

</script>

使用$R()函数

$R()是new ObjectRange(lowBound,upperBound,excludeBounds)de缩写.

跳到ObjectRange 类文档可以看到一个关于此类de完整描述. 此时,我还是先来看一个例子以展示这个缩写能代替哪些方法吧.其它相关de一些知识可以在Enumerable 对象文档中找到.

<script>

function demoDollar_R(){

var range = $R(10, 20, false);

range.each(function(value, index){

alert(value);

});

}

</script>

<input type=”button” value=”Sample Count” onclick=”demoDollar_R();” >

使用Try.these()函数

Try.these() 方法使得实现当您想调用不同de方法直到其中de一个成功正常de这种需求变得非