Cottage Html5api Classlist Class

Preface

Feel like you're going to write some classes, and you'll really find yourself in the wrong place. Actually, it's not that you implement a class, but how you design a class that makes it easier for developers to manipulate. For this style of operation, JavaScript can be used to access the style, but in the JavaScript advanced programming, it is said that CSS, JavaScript, HTML coupling is too high, not suitable for maintenance, and through classname, But we know that ClassName is a developer can read and write the string, if you want to delete and modify elements corresponding to the classname words, can be achieved, but more troublesome. This time HTML5 stand out, put forward the Classlist class, really convenient for our developers to use, but it has a drawback is that compatibility is not very good.

Introduction

Brief introduction El Ement.classlist, here are 4 ways to

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

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

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

Really feel like this API let developers do a lot less work, detailed can go to see element.classlist, after all, above is not I want to understand the knowledge point, I want to know deeply, I first to imitate others design API, see oneself can expand that API ( It's obvious that you haven't reached that level yet.

Description

Here I define the cssclasslist can go to my "javascript regular expression" \b "problem" to find, here I do not detail. We are mainly to implement the above 4 methods, can be used in browsers that do not support CLASSLISTAPI

A contains method (personally think this method is the most important, after the add remove and toggle methods are used)

CSSClassList.prototype.contains = function (CLS) {

var classname = this.el.className, Reg = new RegExp ("\\b" + cls + "\\b");

return reg.test (classname);

}

The problems encountered:

• 1 in the "javascript regular expression" \b "problem" actually mentioned a relatively easy to ignore the problem is the string "\b" and "\\b" difference.
• 2 How to convert a string to a regular expression

Solve the problem (1 is corresponding to the above problem 1, etc.)

• 1 in the JavaScript regular expression "\b" question, there is no more detail here.
• 2 in my mind now there are two ways, one is to use eval, but because of security and performance problems I vetoed, so I changed to the second method is to use the RegExp constructor. If you are reading my blog now, there is a better way please tell me, everyone to exchange.

Two Add methods

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 ideas:

If the class is found in the element, it is not added. Add if not found, how to add? I convert the classname string of the element to an array, then use the push method of the arrays and transform the array into a string to assign to the classname of the element.

The problems encountered:

• The split method for the string is not very skilled, such as the code above I wrote the var arr = classname.split ("/\s+/"); Remember that in the split argument is a regular expression but I added the double quotation mark "".

Solve the problem:

• String.prototype.split ()

Three-Remove method (this method or I have to toss it for a long time)

CSSClassList.prototype.remove = function (CLS) {

var classname = This.el.className;

if (!this.contains (CLS))

return-1;

else {

IndexOf still have compatibility issues

var arr = classname.split (/\s+/), index = Arrindexof (arr, CLS);

Arr.splice (index, 1);

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

return (This.el.className);

}

}

Design ideas: You can not find the class to delete to return 1, and then make sure that the element has this class, it is necessary to find out where the class is, and then delete it. It's still like that. The classname of the element is converted into an array, and then can use the ES5 Array.prototype.indexOf method to find the class corresponding subscript, but I vetoed, because this indexof can only be used in ie9+, such as ie9+ can use, in fact, there is no need to realize the classlist of the cottage, because ie9+ itself support, how to do? This is detailed below. Locate the corresponding subscript and use the splice of the array to remove the class and convert the deleted array to a string assigned to the element classname

Encounter problems

• How to use native JavaScript to implement the IndexOf method mainly?

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 do not have to explain too much, you should read the code is easy to understand, I am not a big, so I write code is very approachable.

Four-Toggle Method

CSSClassList.prototype.toggle = function (CLS) {

if (!this.contains (CLS))

This.add (CLS);

Else

This.remove (CLS);

}

This will not say, a look will know.

Summary

The