javascript-to create your first own class library

Learn by object-oriented and prototype in the previous section.

We know how to create a class that contains the privatized properties and methods of a class, public properties and methods, static properties, and methods. Think about it a little bit here. The first thing to do is to create a class that can pass a 1.new object (). 2. Use the constructor function person () {}, and then pass new Person (). The other is to create an object in a literal way, by literally not using the new operator, since he is inside his own new object ().

Here we want to have a certain distinction between classes and objects, in the image, suppose the animal is a class word. One can be one of the objects. On the var person above = new person (), the person here is a class. The person is one of his instantiated objects, and can have very many derived classes, such as Man.prototype = new Man (); var man = new Man (); then this man is also an instantiated object. Simply put, the class is virtual and the object is an entity. After you understand the difference between an object and a class. Let's take a quick look at how to create a class privatization. Public and static properties and methods.

Object-oriented knowledge

var a = function () {var private1 = ' private1 ';               private field This.public1 = ' Public1 ';     Co-owned field, instance field var privateMethod1 = function () {//Private method alert (' PrivateMethod1 '); } this.publicmethod1 = function (obj) {//public method.     Instance method private1 = obj;     } THIS.PUBLICMETHOD2 = function () {//public method return private1;                         }}a.filed1 = ' filed1 '; public static field var B1 = new A (), var b2 = new A (), B1.publicmethod1 (' SS '); Console.log (B1.PUBLICMETHOD2 ()); Console.log (                                   B2.PUBLICMETHOD2 ()); ****************************************************var a = (function () {//console.log (this);                              Window object var private1 = ' private1 ';     This is a private static property This.public1 = ' Public1 ';                              return function () {//console.log (this);              Object this.publicmethod1 = function (obj) {private1 = obj; } This. publicMethod2 = function () {//console.log (this);          Returns an instance of the object return private1; }}) (var B1 = new A (), var b2 = new A (); B1.publicmethod1 (' s '); Console.log (B1.PUBLICMETHOD2 ()); Console.log (b2.pub LICMETHOD2 ());

First Class library Base.js

After understanding the main object-oriented and prototype. Let's encapsulate our first class library.

This class has the following functions: ability to get elements through id,class,tagname, implement concatenating function, set CSS, get text and other main functions:

var $ = function () {return new Base ();} var Base = function () {this.elements = [];//] represents an element collection}//takes an element with an id Base.prototype.fId = function (id) {This.elements.push ( document.getElementById (ID)); return this;} Use tagname to get the element Base.prototype.fTag = function (tag) {var eles = document.getElementsByTagName (tag); for (var i = 0,len = Eles.length; i < Len; i++) {This.elements.push (eles[i]);} Return this;};/ /use ClassName to get the element Base.prototype.fClass = function (className) {var eles = Document.getelementsbyclassname (className); for (var i = 0,len = Eles.length; i < Len; i++) {This.elements.push (eles[i]);} Return this;};/ /literal value Base.prototype.fText = function (str) {var texts = [];//gets the value of innerHTML function getinnerhtml (i,that) {Texts.push ( that.elements[i].innerhtml);};/ /Set InnerHTML value function setinnerhtml (i,that,str) {that.elements[i].innerhtml = str;};/ /Gets the value of NodeValue function Getnodevalue (i,that) {Texts.push (that.elements[i].firstchild.nodevalue);};/ /Set the value of NodeValue function setNodeValue (i,that,str) {That.elements[i].firstchild.nodevalue = str;}; if (arguments.length = = = 0) {typeof this.elements[0].innerhtml! = "undefined"? Lenfor (Getinnerhtml,this): Lenfor ( Getnodevalue,this); return texts;} else if (arguments.length = = = 1) {typeof this.elements[0].innerhtml! = "undefined"? Lenfor (SETINNERHTML,THIS,STR): Lenfor (SETNODEVALUE,THIS,STR); return this;}};/ *if (arguments.length = = = 0) {//Assuming that no input is assumed to be the Get text value if (typeof this.elements[0].innerhtml! = "undefined") {var getinnerhtml = function () {Texts.push (this.elements[i].innerhtml);}} Else{for (var i = 0,len = This.elements.length; i < Len; i++) {Texts.push (This.elements[i].firstchild.nodevalue);}} return texts;} else if (arguments.length = = = 1) {//Assuming that the input parameter is set to the text value if (typeof this.elements[0].innerhtml! = "undefined") {for (var i = 0,len = This.elements.length; i < Len; i++) {this.elements[i].innerhtml = str;}} Else{for (var i = 0,len = This.elements.length; i < Len; i++) {this.elements[i].firstchild.nodevalue = str;}} return this;} *///set and get CSS values Base.prototype.fCss = function (cssname,cssvalue) {var cssstrs = [];//gets getcomputedstyle value function Getffstyle (i,that,cssname) {var style = window.getComputedStyle (that.elements[i ]); Cssstrs.push (Style[cssname]);};/ /Gets the value of Currentstyle function Getiestyle (i,that,cssname) {var style = That.elements[i].currentstyle;cssstrs.push (style[ Cssname]);};/ /set CSS value, in which float is reserved word, IE is stylefloat,ff for cssfloatfunction setcss (i,that,cssname,cssvalue) {that.elements[i].style[ Cssname] = cssvalue;}; if (arguments.length = = = 1) {typeof window.getComputedStyle! = "undefined"?
Lenfor (getffstyle,this,cssname): Lenfor (Getiestyle,this,cssname); return cssstrs;} else if (arguments.length = = = 2) {//Set CSS value lenfor (setcss,this,cssname,cssvalue); return this;}};/ /Add CSS class selector Base.prototype.addCssClass = function (className) {//Get Elements class value function add (i,that,classname) {var Name = That.elements[i].classname;var Partern = new RegExp ("(^|\\s)" + ClassName + "($|\\s)", "G"); if (!partern.test (name) {Name + = "" +classname;} That.elements[i].classname = name;}; Lenfor (add,this,classname); return this;};/ /Remove CSS class selector Base.prototype.removeCssClass = function (className) {//Delete elements class value function remove (i,that,classname {var name = That.elements[i].classname;var Partern = new RegExp ("(^|\\s)" + ClassName + "($|\\s)", "G"); That.elements[i]. ClassName = Name.replace (Partern, "");}; Lenfor (remove,this,classname); return this;};/ /loop The elements and run the FN function lenfor (FN,THAT,STR,STR1) {for (var i = 0,len = That.elements.length; i < Len; i++) {fn (I, THAT,STR,STR1);}};

This is the prototype of the first class library and has not been optimized. Be optimized after learning later. Other class libraries will be expanded on the basis of this basic library. To add its functionality.

javascript-to create your first own class library