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 includes the privatized properties and methods of a class, public properties and methods, static properties, and methods. A little recap here. The first thing to create is a class that can be passed 1.new object (). 2. Use the constructor function person () {}, and then pass new Person (). There is also a literal way to create an object that cannot be used in the literal way by using the new operator, because he is inside his own new object (). Here we want to have a certain distinction between classes and objects, in the image, if the animal is a class, the person can be one of the objects. On the var person above = new person (), here is a class, and the man is one of his instantiated objects, and can have a lot of derived classes, such as Man.prototype = new Person (); 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 understanding the differences between objects and classes, let's look briefly at how to create the privatization, public, and static properties and methods of a class.

Object-oriented knowledge

var a = function () {var private1 = ' private1 ';               private field This.public1 = ' Public1 ';     Total 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 basic object-oriented and prototype, let's encapsulate our first class library. This class has the following functions: You can get elements through id,class,tagname, implement concatenating functions, set up CSS, get text and other basic 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) {//If the parameter is not entered is considered 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) {//If the input parameter is assumed to be the set 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, where 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;};/ /delete CSSClass 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 execute 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 base library to increase their functionality.

javascript-to create your first own class library