javascript-Create the first own class library __java

Source: Internet
Author: User
Tags instance method tagname

Learn from the previous section on object-oriented and prototyping. We know how to create a class that includes the privatization properties and methods of classes, public properties and methods, static properties, and methods. A little review here. First you want to create a class that can be done through 1.new object (). 2. Use the constructor function function person () {}, and then through the new person (). There is also a literal way to create an object, by literally not using the new operator, because he is inside himself new object (). Here we want to have a certain distinction between class and object, image, if the animal is a class, people can be one of the objects. On the above var person = the new person (); This is a class, and the man is one of his instantiated objects, and can have many derived classes, such as Man.prototype = new People (); var mans = new Man (); then this man is also an instantiated object. Simply put, the class is virtual, and the object is an entity. Having learned the difference between objects and classes, let's look at how to create the privatization of classes, public and static properties and methods. Object-oriented knowledge

var a = function () {var private1 = ' private1 ';               private field This.public1 = ' Public1 ';
     Common fields, instance fields 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 returned private1;

}
     }    
})();
var B1 = new A ();
var b2 = new A ();
B1.publicmethod1 (' s ');
Console.log (B1.PUBLICMETHOD2 ()); Console.log (B2.PUBLICMETHOD2 ());

First Class library Base.js

Once we understand the basics of object-oriented and prototyping, we encapsulate our first class library. This class has the following functions: You can get the elements through id,class,tagname, realize the consonant function, set CSS, get the basic functions of text and so on:

var $ = function () {return new Base ();		var Base = function () {this.elements = [];
	Represents the Element collection}//get element Base.prototype.fId = function (id) {This.elements.push (ID) by ID);
return this;
	///use tagname to get 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 to this;

};
	Use ClassName to get 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 to this;

};
	Literal value Base.prototype.fText = function (str) {var texts = [];
	Gets the value function getinnerhtml (i,that) {Texts.push (that.elements[i].innerhtml) of the InnerHTML;
	};
	Set InnerHTML value function setinnerhtml (i,that,str) {that.elements[i].innerhtml = str;
	};
	Gets the value function Getnodevalue (i,that) {Texts.push (that.elements[i].firstchild.nodevalue) of the nodevalue;
	}; //Set NodeValue value 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 no arguments are considered to get the text value if (typeof this.elements[0].innerhtml!= "undefined") {var Getinne
		RHTML = 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.nodevalu
		e);
} return texts;  }else if (arguments.length = = 1) {//If input parameter is considered to 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 value Base.prototype.fCss = function (cssname,cssvalue) {var cssstrs = [];
		Gets the value of the getComputedStyle function Getffstyle (i,that,cssname) {var style = window.getComputedStyle (That.elements[i]);
	Cssstrs.push (Style[cssname]);
	};
		Gets currentstyle value function Getiestyle (i,that,cssname) {var style = That.elements[i].currentstyle;
	Cssstrs.push (Style[cssname]);
	}; Sets the value of the CSS, where float is reserved and IE is stylefloat,ff for cssfloat function 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's 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 CSS class selector Base.prototype.removeCssClass = function (className) {//delete elements's 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;











};
		Loops the elements and executes the FN function 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. To be optimized after learning later. Other class libraries will be expanded on the basis of this base base to increase their functionality.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.