在项目的开发过程中,使用jQuery语言编写前端框架时,匿名函数是编写框架方法核心,懂得如何定和调用匿名函数,才是真正懂得运用jQuery,在都别人写的框架方法时,匿名函数也困扰了我很久,一直搞不明白。其实其原理并没有那么复杂,只是编写框架的人为了不然其他人那么容易看懂其代码,很多变量命名都与高级语言的命名都不一样,所以看起来特别费解,但是这些知识点往往是前端框架的核心,本人特别针对jQuery匿名函数进行了详细的讲解,代码如下,详见代码注释。
(function (exports){
var leo = {}; //定义一个私有变量,次变量外部不可以访问
//定义变量leo的一个方法pageArea,用于判断客户浏览器页面大小
leo.pageArea = function(){
//document.compatMode用来判断当前浏览器采用的渲染方式,用于调整浏览器的页面显示大小
if(document.compatMode === "BackCompat") {
return {
width : Math.max(document.body.scrollWidth, document.body.clientWidth),
// width : document.body.clientWidth,
height : Math.max(document.body.scrollHeight, document.body.clientHeight)
// height : document.body.clientHeight
}
} else {
return {
width : Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
height : Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
}
}
};
//定义$ID方法,用于返回指定id的对象,这个方法名用$ID而不是ID,是为了区别id与jQuery方法,
//其实业内有个不成文的约定,jQuery的变量和方法前一般都加上$,以区别JavaScript的变量和方法
leo.$ID = function(id){
return document.getElementById(id);
};
leo.$H = function(){
//业务方法略
return this;
};
leo.$SH = function(id){
//业务方法略
};
//定义启动方法,用于设置调用其他方法的时间间隔,其中参数fn为要调用的函数名,id为传给fn方法的id参数
leo.start = function(fn,id){
var that = this;
setInterval(function(){
fn.call(that,id);
},150);
};
//定义公有变量$J,外部可以访问,其中this为实参,exports为形参,
//此时exports为this,即$J变量前面加了this,所以$J为共有变量,
//并且把私有变量leo赋给公有变量$J,外部就可以通过$J访问私有对象leo的方法.
exports.$J = leo;
})(this);
//其中content为div标签的id,这样匿名函数$SH就可以被调用
$J.start($J.$SH,"content");
以上是使用jQuery编写前端框架方法的核心,懂了这些原理,对阅读前端框架的方法、修改框架Bug和编写前端框架的方法就非常容易了。