本文比较基础的分析了该项目的js文件,大神就可以忽略了
首先打开feeds.js就可以看见整个文件包裹在下面这样的一个函数中
$(function () {
.........
.........
}
上面这个$(function () {};是$(document).ready(function(){});的简写,而$(document).ready里面的代码是在整个页面内容都加载完才执行的。好了,下面进入正题:
var page_title = $(document).attr("title");
/*上面这一句定义变量page_title,并且取得全局属性title的值赋给它*/
function hide_stream_update() {
$(".stream-update").hide();
$(".stream-update .new-posts").text("");
$(document).attr("title", page_title);
};
/*定义无参函数hide_stream_update,前两行选择器取指定类分别执行hide()隐藏和text()取得对应属性的文本值,最后一个又用到了attr(""),但这次是给属性title赋后面的值*/
$("body").keydown(function (evt) {
var keyCode = evt.which?evt.which:evt.keyCode;
if (evt.ctrlKey && keyCode == 80) {
$(".btn-compose").click();
return false;
}
});
/*上面这段定义了在body中keydown按键按下后产生的事件*/
$("#compose-form textarea[name='post']").keydown(function (evt) {
var keyCode = evt.which?evt.which:evt.keyCode;
if (evt.ctrlKey && (keyCode == 10 || keyCode == 13)) {
$(".btn-post").click();
}
});
/*上面这段选择器选择了id=compose-form和name=post的文本框,规定了按键事件*/
$(".btn-compose").click(function () {
if ($(".compose").hasClass("composing")) {
$(".compose").removeClass("composing");
$(".compose").slideUp();
}
else {
$(".compose").addClass("composing");
$(".compose textarea").val("");
$(".compose").slideDown(400, function () {
$(".compose textarea").focus();
});
}
});
/*这是一个点击事件,进入后有一个判断含有.compose的元素是否也含有composing类,如果有进入下面操作,第一个就是删除该元素中的composing类,同时该元素向上滑动。如果没有则执行else里面的操作,首先是添加类,然后用val方法设置选定元素中的值为空,最后向下滑动指定大小后聚焦*/