Shanzhai HTML5API classList class

Preface

If you think you want to write some classes, you will find your own shortcomings. Actually, it's not how you implement a class, but how you design a class to make it easier for developers to operate. For this operation style, you can access the style through javascript. However, in javascript advanced programming, CSS, javascript, and HTML have a high Coupling Degree and are not suitable for maintenance. In addition, className, however, we know that className is a string that can be read and written by developers. It can be implemented if you want to add, delete, query, and modify the className corresponding to the element, but it is troublesome. At this time, HTML5 came out and proposed the classList class, which is really convenient for our developers to use, but it has a drawback that the compatibility is not very good.

Introduction

This section briefly introduces element. classList. The following are the four methods of element. classList.

1 add a class to an element's list of classes (add class for the element)

2 remove a class from an element's list of classes (delete an element's class)

3 toggle the existence of a class in an element's list of classes should See below about the optional second argument. (switch the class of the element)

4 check if an element's list of classes contains a specific class (check whether the element has this class)

It is true that such an API allows developers to do a lot less effort. For details, you can see the element. classList, after all, this is not a knowledge point I want to know in depth. What I want to know in depth is to imitate the APIS designed by others first, check whether you can extend the API (obviously you haven't reached that level ).

Description

The CSSClassList I have defined can be found in my javascript Regular Expression "\ B" question. I will not detail it here. We mainly implement the four methods mentioned above, which can be used in browsers that do not support classListAPI.

A contains method (I personally think this method is the most important, and the add remove and toggle methods will be used later)

CSSClassList. prototype. contains = function (cls ){

Var classname = this. el. className, reg = new RegExp ("\ B" + cls + "\ B ");

Return reg. test (classname );

}

Problems:

• 1. In javascript Regular Expression "\ B", a problem that is easy to ignore is the difference between string "\ B" and "\ B.
• 2. How to convert a string to a regular expression

Solve the problem (1 corresponds to problem 1 above, and so on)

• 1. I have said in the javascript Regular Expression "\ B" question. I will not detail it here.
• 2. There are two methods in my mind. One is to use eval, But I have rejected it because of security and performance issues. So I changed it to the second method to use RegExp to construct a function. If you are reading my blog now, please let me know if you have a better way.

2. add Method

CSSClassList. prototype. add = function (cls ){

Var classname = this. el. className;

If (this. contains (cls ))

Return;

Else {

Var arr = classname. split (/\ s + /);

Arr. push (cls );

This. el. className = arr. join ("");

}}

Design Concept:

If the class is found in this element, it will not be added. If you cannot find it, add it. How can you add it? I convert the className string of this element into an array, then use the push method of the array, convert the array into a string, and assign a value to the className of this element.

Problems:

• I am not very familiar with the string split method. For example, I wrote the following code as var arr = classname. split ("/\ s +/"); remember to use a regular expression in the split parameter, but I added double quotation marks to the image "".

Solution:

• String. prototype. split ()

Three remove methods (this method is still a long time)

CSSClassList. prototype. remove = function (cls ){

Var classname = this. el. className;

If (! This. contains (cls ))

Return-1;

Else {

// There are still compatibility problems with indexOf

Var arr = classname. split (/\ s +/), index = arrIndexOf (arr, cls );

Arr. splice (index, 1 );

This. el. className = arr. join ("");

Return (this. el. className );

}

}

Design Philosophy: if the class to be deleted is not found,-1 is returned. Then, determine where the element has this class and delete it. Or, convert the className of the element into an Array, and then use the Array of ES5. prototype. the indexOf method finds the subscript corresponding to the class, but it is rejected by me, because this indexOf can only be used in IE9 +, if IE9 + is used, in fact, there is no need to implement the classList of shanzhai, because IE9 + itself supports it. What should we do? It will be detailed below. Find the corresponding subscript, use the splice of the array to delete the class, and convert the deleted array into a string to assign the className of the element.

Problem Encountered

• How can I use native javascript to implement the indexOf method?

Solve the problem

• Function arrIndexOf (arr, searchEl ){

  If (arr. indexOf ){

  Return arr. indexOf (searchEl );

  } Else {

  For (var I = 0, len = arr. length; I <len; I ++ ){

  If (arr [I] === searchEl)

  Return I;

  }

  Return-1;

  }

  }

I don't need to explain it too much. It's easy to understand the code after reading it. I am not a good guy, so the code I write is very approachable.

Four toggle Methods

CSSClassList. prototype. toggle = function (cls ){

If (! This. contains (cls ))

This. add (cls );

Else

This. remove (cls );

}

I don't want to talk about this. I will know it at a glance.

Summary

When writing this class, you still encounter many problems, but they can always be solved one by one. I think the most important thing for a programmer is his ability to solve problems. After all, there are not many classes I have written. It may be my debut, but there are still many problems. If I have time, I will look at the code written by other Daniel and then compare the two, only when there is a comparison can there be a gap to make progress.