jQuery的观察者模式的详细解释

在jQuery中，on方法可以为元素绑定事件设置事件。触发器方法可以手动触发事件。围绕这2种方法，我们将体验jQuery（观察员模式）中的观察者模式。

-关于绑定内置事件的方法，自然触发器

例如，我们将一个单击事件绑定到页面的主体元素，这是编写的。

复制代码代码如下所示：
$（函数（）{（））

$（'body '），（听到咔哒声，函数（））{

console.log（一~ ~）；

}）；

}）；

你好
在上面，我们只能通过点击身体来触发点击事件，也就是说，当一个内置事件绑定到页面元素时，该事件就会在内置事件发生时触发。

-关于绑定内置事件的方法，手动触发器

使用触发器方法，您还可以手动触发元素绑定的内置事件。
$（函数（）{（））

$（'body '），（听到咔哒声，函数（））{

console.log（一~ ~）；

}）；

$（'body）。Trigger（听到咔哒声）；

}）；
在上面，不需要单击正文，当加载页面时，主体会自动触发单击事件。

-绑定自定义事件的方法，手动触发器

我们知道，单击是jQuery中的一个内置事件，那么您可以自定义事件并手动触发它吗

复制代码代码如下所示：
$（函数（）{（））

$（'body '），（'someclick功能（））{

console.log（一~ ~）；

}）；

$（'body）。Trigger（'someclick）；

}）；
以上，我们定制了一个someclick事件和上面一样得到同样的结果。

因此，我们发现我们可以绑定元素的自定义事件并用触发器方法触发事件。

当然，自定义事件的名称可以写在命名空间的形式，自定义事件的名称，如app.someclick，这在大型项目中是特别有用的，它可以有效地避免自定义事件的名称冲突。

如果从发布订阅的角度来看

从异步访问JSON数据）体验jQuery观察器模式

在根目录下，有个data.json的文件。

{

：hello

两个：世界

}

现在，JSON数据是以异步方式获得的。

复制代码代码如下所示：
$（函数（）{（））

美元。getJSON（JSON数据。功能（数据）{

console.log（数据）；

}）；

}）；

如果一个全局变量用于接收异步获取的JSON数据。

复制代码代码如下所示：
$（函数（）{（））

变量数据；

美元。getJSON（JSON数据。功能（结果）{

数据=结果；

}）；

console.log（数据）；

}）；

这一次，我们得到了未定义的结果，这是为什么

因为当美元。getJSON方法仍然是获取数据，console.log（数据）被执行和数据没有数据在这个时间。

如何解决这个问题

如果我们定义要执行的美元以外的方法。getJSON方法，那么我们真的触发此方法在美元的回调函数。getJSON方法，我们解决了吗

复制代码代码如下所示：
$（函数（）{（））

美元。getJSON（JSON数据。功能（结果）{

$（document）。Trigger（'app。事件，结果）； / /等效释放

}）；

$（document），（'app。事件功能（E，结果）{ / /相当于认购

console.log（结果）；

}）；

}）；

上面的方法是一个用户，它支持自定义事件app.myevent，和触发的方法就像一个出版商。在发布事件和参数之后，它确实允许订阅服务器方法执行。

扩展方法- jQuery观察器模式

为此，我们还可以专门为jQuery观察器模式编写一个扩展方法。

复制代码代码如下所示：
$（函数（）{（））

美元。getJSON（JSON数据。功能（结果）{

美元。发布（'app。事件，结果）；

}）；

美元。订阅（'app。事件功能（E，结果）{

console.log（结果）；

}）；

}）；

（函数（$）{）

var（$）；自定义事件对象

每一美元（{

触发：'publish，

在'subscribe，

关：'unsubscribe

}函数（键，缬氨酸）{

函数（）{

o键}应用（o，参数）；

}；

}）；

}（jQuery）；

在上面，定义了全局发布和订阅方法，我们可以随时调用它。

复制代码代码如下所示：
$（函数（）{（））

美元。getJSON（JSON数据。功能（结果）{

美元。发布（'app。事件，结果）；

}）；

美元。订阅（'app。事件功能（E，结果）{

$（'bodyHtml（）。

的。

）；

}）；

}）；
总结：jQuery观察者模式实际上是一个自定义事件，它首先被on方法绑定，直到使用触发器方法触发事件。