Write a javascript plug-in from scratch (1) -- tab

Write a javascript plug-in from scratch (1) -- tab

The last time I wrote the series "Learning to create H5 application scenarios from scratch", the response was still good. So I was not too busy recently. I continued to write javascript plug-ins from scratch.

Today, we will start with the simplest way to rewrite an existing Tab switch function into a javascript plug-in.

Native function writing

The simplest way to rewrite a javascript method as a js plug-in is to mount this method to a window global object.

Let's take a look at the original code written using the function:

Tab.html

<code class="language-html hljs "></code>

• tab1
• tab2
• tab3
• tab4

Content 1 Content 2 Content 3 Content 4 <Script> window. onload = h_tab ('tab '); function h_tab (tabId) {var oLinks = document. getElementById (tabId ). getElementsByTagName ("a"); var oCons = document. getElementById (tabId ). getElementsByTagName ("section"); for (var I = 0; I

H.css

@ Charset "UTF-8"; // * // author: hjb2722404 // description: // date: 2016/2/18 */. tabs ul {width: 100%; list-style-type: none ;}. tabs ul li {width: 48%; display: inline-block; margin: 0; padding: 0 ;}. tabs ul li a {border-bottom: 3px solid # cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: ""; color: # a94442 }. tabs ul li. cur {border-bottom: 3px solid # f26123 ;}. tabCons section {display: none ;}. tabCons section: nth-child (1) {display: block ;}

The above two pieces of code are the basic code, and then we will improve the Code step by step.

Native plug-in writing

Now, we will rewrite this method to the plug-in mounted to the window object:

Tab.html

<Code class = "language-html hljs"> ...... // The following is the first change <! -- {Cke_protected} % 3 Cscript % 20 type % 3D % 22 text % 2 Fjavascript % 22% 20src % 3D % 22h_tabs.js % 22% 3E % 3C % 2 Fscript % 3E --> <! -- {Cke_protected} % 3 Cscript % 3E % 0A % 20% 20% 20% 20H_tab (% 22tab % 22) % 3B % 0A % 3C % 2 Fscript % 3E --> </code>

H_tabs.js

window.H_tab = function(tabId){       var oLinks = document.getElementById(tabId).getElementsByTagName("a");       var oCons = document.getElementById(tabId).getElementsByTagName("section");       for(var i = 0; i
    

However, we found that this method is simple, but there is also a problem: window is a global object. If we mount all our methods to it as a plug-in, there are many plug-ins, namespace conflicts are easy to generate. On the other hand, although native js can reduce external dependencies, it still has a large amount of code and is cumbersome to write.

Jquery

We try to introduce the jquery library and rewrite this plug-in to the jquery plug-in.

Jquery plugin has three forms: Class-level form, object-level form, and jquery UI component form.

Jquery class-level plug-in writing-a single method

Let's first look at the form of class-level plug-ins.

The first type of plug-ins directly mount this method to the root space of jquery as a tool method:

tab.html

<code class="language-javascript hljs "><code class="language-html hljs ">……<!--{cke_protected}%3Cscript%20src%3D%22..%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22h_tabs.js%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%3E%0A%20%20%20%20%24.h_tab('tab')%3B%0A%3C%2Fscript%3E--></code></code>

h_tabs.js

 $.h_tab = function(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName("a"); var oCons = document.getElementById(tabId).getElementsByTagName("section"); for(var i = 0; i 

Jquery class-level plug-in writing-multiple methods

If you want to bind multiple methods to the jquery Root Space, write as follows:

tab.html

<code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-html hljs ">……<!--{cke_protected}%3Cscript%20src%3D%22..%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22h_tabs.js%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%3E%0A%20%20%20%20%24.h_tab('tab')%3B%0A%20%20%20%20%24.h_hello('hjb')%3B%0A%3C%2Fscript%3E--></code></code></code>

h_tabs.js

 $.extend({ h_tab:function(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName("a"); var oCons = document.getElementById(tabId).getElementsByTagName("section"); for(var i = 0; i 

Although $. the extend () tool directly mounts functions to the jquery root namespace, which is simple and easy to use, but unfortunately, this method cannot use jquery's powerful sizzle engine, that is, the DOM element you choose cannot use this method.

Therefore, we need to use the object-level plug-in development method.

Jquery object-level plug-in writing

The development method of Object-level plug-ins is to bind their methods to the jquery prototype using the $. fn. extend () method, so that all jquery object teams can apply this method to execute the corresponding operations.

The Code is as follows:

tab.html

<code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-html hljs ">……<!--{cke_protected}%3Cscript%20src%3D%22..%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22h_tabs.js%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%3E%0A%20%20%20%20%2F%2F%E5%AF%B9%E8%B1%A1%E7%BA%A7%E5%88%AB%E7%9A%84%E6%8F%92%E4%BB%B6%E5%BC%95%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%8C%E6%B3%A8%E6%84%8F%E5%92%8C%E4%B8%8A%E9%9D%A2%E7%B1%BB%E7%BA%A7%E5%88%AB%E6%8F%92%E4%BB%B6%E7%9A%84%E5%86%99%E6%B3%95%E4%B8%8A%E7%9A%84%E5%8C%BA%E5%88%86%0A%20%20%20%20%24('%23tab').h_tab('tab')%3B%0A%3C%2Fscript%3E--></code></code></code></code>

h_tabs.js

(function($){ $.fn.extend({ h_tab:function(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName('a'); var oCons = document.getElementById(tabId).getElementsByTagName('section'); for(var i = 0; i 

Here, we use a closure to encapsulate the plug-in to avoid namespace pollution.

Here, there are still some problems, that is, our method must pass parameters before it can run, which leads to the use of $ ('# tab') for calling ') select the div whose id is tab, and then obtain the element based on the input ID in the plug-in.

Now that we have used the jquery selector, we can introduce this to solve the redundancy problem of repeated element acquisition.

Jquery object-level plug-in writing-introduce this

tab.html

<code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-html hljs ">……<!--{cke_protected}%3Cscript%20src%3D%22..%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22h_tabs.js%22%3E%3C%2Fscript%3E--><!--{cke_protected}%3Cscript%3E%0A%20%20%20%20%24('%23tab').h_tab()%3B%0A%3C%2Fscript%3E--></code></code></code></code></code>

h_tabs.js

(Function ($) {$. fn. extend ({h_tab: function () {// introduce this var oLinks = this here. find ('A'); var oCons = this. find ('region'); for (var I = 0; I 

Note that the element object we call this plug-in is ('Tab '), then using this. find () directly is equivalent ('Tab '). find (), instead of $ (this). find (). Note that the difference between the two statements is distinguished by the method of substitution.

As a plug-in, it should be controllable by developers, so it should also provide users with some configuration interfaces.

Jquery object-level plug-in writing-add configuration items

tab.html

<code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-javascript hljs "><code class="language-html hljs ">    ……        </code></code></code></code></code></code>

• tab1
• tab2
• ...... <Script src = ".. /jquery. js "type =" text/javascript "> </script> <script type =" text/javascript "src =" h_tabs.js "> </script> <script >$ ('# tab '). h_tab ({// make the style name of the current tab label customizable with curName: 'current'}); </script>

Here, we change the name of the "current tab label Style Class" from "cur" to "current" and import it as a configuration item to the plug-in.

h.css

. Tabs ul {width: 100%; list-style-type: none ;}. tabs ul li {width: 48%; display: inline-block; margin: 0; padding: 0 ;}. tabs ul li a {border-bottom: 3px solid # cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: ""; color: # a94442}/* Note the differences between the following line and the previous style code */. tabs ul li. current {border-bottom: 3px solid # f26123 ;}. tabCons section {display: none ;}. tabCons section: nth-child (1) {display: block ;}

We have made corresponding changes in the style sheet.

h_tabs.js

(Function ($) {$. fn. extend ({// pass an object to the method as the parameter h_tab: function (opts) {// define the default configuration var defaults = {curName: 'cur '}; // overwrite the default items in the default parameters and merge them into a new parameter object. var Opt = $. extend ({}, defaults, opts); var oLinks = this. find ('A'); var oCons = this. find ('region'); for (var I = 0; I 

Here we use jquery's $. the ability of the extend () method to merge objects, overwrite the default configuration items with user-passed configuration items, and finally merge them into a new configuration item for later programs.

After a few steps, we have basically completed the most simple javascript plug-in. All the code has been uploaded to my github. The following is the address:

Git code repository view source code