Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the design patterns of jQuery". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what the design patterns of jQuery are.

First, publish and subscribe mode var eventHub = $({}) eventHub.on ('xxx', function () {console.log (' receive')}) eventHub.trigger ('xxx') 2. Implement plug-in system $.fn.modal = function () {(' # div1'). Modal ()

The plug-in for Vue 2 is a similar idea.

Event delegation $('div'). On (' click', 'span', function () {.})

To be honest, you asked the front end to write an event delegate in 2018, and I'm sure 90% of the code written has an "obvious" bug.

Fourth, chain call $('div'). Text (' hi'). AddClass ('red'). Animate ({left: 100}) 5. Function overloading (pseudo) $(fn) $(' div') $(div) $($(div)) $('span',' # scope1')

You will find that the arguments to the $function can be functions, strings, elements, jQuery objects, and even accept multiple arguments. How is this overloading done?

Namespace / / your plug-in binds many events $button.on ('click.plugin', function () {...}) $button.on (' mouseenter.plugin', function () {...}) / / then you want to remove all the above events $button.off ('.plugin') at some point in a button.

It will be troublesome if you don't use jQuery.

7. High-order function var fn2 = $.proxy (fn1, asThis, param1)

Proxy accepts a function and returns a new function.

The rest will not be listed one by one.

JQuery's API style is still popular.

Let's compare jQuery with Axios:

$.ajax ({url:'/api', method:'get'}) $.get ('/ api') .then (fn1,fn2) axios ({url:'/api', method:'get'}) axios.get ('/ api') .then (fn1,fn2)

Why is the popular axios in 2018 so similar to jQuery.ajax?

Because jQuery's API is so easy to use! The new library simply cannot surpass it, and there is no way to design a more concise API. After all, jQuery has been popular in the front end for nearly a decade.

So you learned jQuery and it's easy to transition to other similar new libraries.

JQuery can also do MVC.

Many people think that the front-end framework started with Vue, React and Angular. In fact, there have been jQuery-based MV* libraries in the jQuery era, such as the famous Backbone.js and Marionette.js.

Take a look at the following Backbone application code

Var TodoView = Backbone.View.extend ({tagName: 'div', template: _ .template ($(' # item-template'). Html ()), events: {'click .toggle': 'xxx',}, initialize: function () {this.listenTo (this.model,' change', this.render) }, render: function () {if (this.model.changed.id! = = undefined) {return;} this.$el.html (this.template (this.model.toJSON ()); return this;}}) Thank you for your reading, the above is the content of "what are the design patterns of jQuery". After the study of this article, I believe you have a deeper understanding of what the design patterns of jQuery have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.