彻底攻略JS回调函数，手动实现一个简单的AOP框架

本文链接：https://blog.csdn.net/m0_60607536/article/details/136816939

是不是就变成这样了？那好，我就想请问一下了，你见过除了函数之外的什么东西要打括号吗？有没有，就问你一句话，有还是没有？只有函数才能打括号啊，你写一个var a = 10; 能打括号吗？所以，对jQuery来说，它本身就是一个函数，这一点要明确。

接下来，是不是传了一个回调函数进去了？

$(function(){

});

没错，的确是的。我在函数体里面alert一下，它肯定会给我弹出一个提示来。为什么会这样呢，毫无疑问，jQuery肯定在里面把这个回调函数执行了。就比如：

var $ = function(callback){

callback();

}

当然，这只是举一个例子，实际情况肯定要比这个复杂得多。

$(function(){

});

这个函数类似于window.onload。

接下来，我们来个例子：

我在body区域画了一个蓝色的方块，并且通过jQuery的方式，给它绑定了一个点击事件。你可能会说，这么简单的代码我还能看不懂？我天天写这种代码呢！点击事件就是典型的回调函数应用，因为我哪里知道你点击之后要干什么啊？这当然要你自己决定啊。所以，你自己传一个回调函数进去。

$(“#box”).on(‘click’,function(){

alert();

});

现在，我给点击事件里面的回调函数加一个参数e。

$(“#box”).on(‘click’,function(e){

alert();

});

你可能会觉得奇怪，心想，纳尼，这个e是什么鬼？？然后马上又一想，我好像没有在哪里定义一个叫做e的变量啊。如果你这么想了，说明你还是没有理解啥叫函数。亲啊，这是一个函数啊，函数的参数是e，e只是一个名字啊，你写aaa,bbb,ccc都行的！

$(“#box”).on(‘click’,function(aaa){

alert();

});

一个名字而已嘛，而且，这里只是定义了一个函数：

function(e){

alert();

}

我就问你，有没有打括号？如果你说有啊，（e）不是括号吗？如果你真的这么回答，那我就要哭了。。。回到正题，这里是不是还没有打括号？也就是说，我只是写了一个还未被执行的函数传进去了，这是一个回调函数。我知道，我传进去以后，你肯定会在某个地方打一个括号帮我执行的，就算不执行，它也肯定会把这个回调函数赋值给其他变量。这是第一点，第二点，我写的这个函数，还带了一个参数，参数的名字叫e。

OK，非常好。也就是说，我只管定义了一个有参数的函数，具体这个参数是啥，什么时候传进来，我不知道。这是由jQuery的on函数决定的。如果你还是不理解的话呢，我们先写一个简单点的例子：

function on(event,callback){

if(event == ‘click’){

var e = “Hello World”;

callback(e);

}

on(‘click’,function(e){

alert(e);

});

这样就很好理解了吧，对的，就是这么个意思。所以，当你看到别人写回调函数，还加了个参数e，最起码，不要再害怕了，它根本不高端，说来说去都是JavaScript的基础知识。所以有的人不重视基础，虽然也能完成开发任务，但却往往只是照猫画虎而已，真要出了点问题，就很难解决了。

让我们回到代码：

$(“#box”).on(‘click’,function(e){

alert();

});

这是jQuery给我们封装好的函数，专门用来绑定事件的。那么在这一讲的最后，我们就来模拟jQuery的写法，封装一个类似的功能吧！

页面上的div是这样的：

``` 第一步，是不是要专门写一个函数，取到这个div。在js中，我们可以用document.getElementById的方式取到dom元素，现在我们将这个方法也单独封装起来。 ``` var $ = function(id){ return document.getElementById(id); } ``` 这样就行了，可是有个问题，这个函数返回的是一个dom对象，而标准的dom元素是没有绑定事件的方法的。所以，我们不能直接返回dom，而应该返回一个json。（json虽然是后面的内容，这里先提前用一下吧）

我返回一个 json ，json的用处就大了，它是一个实实在在的对象，既有属性也有方法。在json中，属性和方法之间都是用逗号分隔的。

var $ = function(id){

return {

element : document.getElementById(id) ,

on : function(event,callback){

this.element[‘on’ + event] = callback;

}

关于this呢，我会在以后的章节中详细讲的，现在先这么用。

如果用js的方法给dom元素添加一个点击事件，一般我们会这么写：

dom.onclick = function(){}

dom[‘onclick’] = function(){}

两种写法都可以哈，这样应该比较好理解了吧。我返回的json中，有一个函数叫做on，专门用来绑定事件的。比如现在我这么调用：