美文网首页
jQuery 部分源码解析

jQuery 部分源码解析

作者: jrg陈咪咪sunny | 来源:发表于2019-07-08 01:43 被阅读0次

简洁的API

$.on
$.css
$.ajax
….

优雅的链式

var  xhr = $.ajax( "./example.php" )
    .done(function() { alert("success"); })
    .fail(function() { alert("error"); })

类CSS的选择器

$("div, span, p.myClass" )
$("div span:first-child")
...

便捷的操作

$("p").removeClass("myClass noClass").addClass("yourClass");
$("ul li:last").addClass(function(index) {
   return "item-" + index;
});
$('.container').append($('h2'));
…

2、立即调用表达式

任何库或者框架设计的第一个需要考虑的点就是解决命名空间和全局变量污染的问题,jQuery利用了JavaScript函数作用域的特性,采用立即执行函数包裹了自身的方法来解决这个问题。

jQuery的立即调用函数表达式的写法吧
one

(function(window, factory) {
    factory(window)
}(this, function() {
    return function() {
       //jQuery的调用
    }
}))

简化它就好了。这里我们可以开始剖解它

//相信这样大家很容易理解,对啊就是一个简单的匿名函数执行函数的两种写法
(function() {
    /*code*/
})()
or
(function() {
    /*code*/
}())

下面我们再看一个传参的立即执行函数

(function(a,b) {
    /*code*/
}(c,d))

我们知道在javascript中函数作为一等公民,我们可以将一个函数作为参数传入另一个函数中

//这里的factory是一个形参函数
(function(window, factory) {
    factory(window)
}(this, function() {    
    return function() {
       //jQuery的调用
    }
}))
//整个这样一段就是给上面的匿名函数传入第一个实参this,第二个实参一个function,并立即执行
(this, function() {    
    return function() {
       //jQuery的调用
    }
})

相关文章

网友评论

      本文标题:jQuery 部分源码解析

      本文链接:https://www.haomeiwen.com/subject/khowhctx.html