JavaScript-create your first class library

JavaScript-create your first class library

Through the previous object-oriented and Prototype Learning Section. We know how to create a class, including private attributes and methods of the class, public attributes and methods, static attributes and methods. Here we will review it a little. First, you must create a class through 1.new object (). 2. Use the constructor function Person () {} and then use new Person (). Another way is to create an object using the literal method. The new operator cannot be used using the literal method because it is internally new object (). Here we need to make a distinction between classes and objects. In the image, if an animal is a class, a person can be one of them. In the above var person = new Person (); here, Person is a class, while person is an instantiated object, and there can be many derived classes, such as Man. prototype = new Person (); var man = new Man (); then this man is also an instantiated object. In short, classes are virtual, and objects are entity. After learning about the differences between objects and classes, let's take a simple look at how to create private classes, public clouds, static attributes, and methods.

Object-Oriented Knowledge

Var a = function () {var private1 = 'private1'; // Private field this. public1 = 'public1'; // a total of fields, instance field var privateMethod1 = function () {// Private method alert ('privatemethod1 ');} this. publicMethod1 = function (obj) {// public method, instance method private1 = obj;} this. publicMethod2 = function () {// return private1;}. 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); // return the instance of the returned object return private1 ;}}) (); var b1 = new a (); var b2 = new (); b1.publicMethod1 ('s '); console. log (b1.publicMethod2 (); console. log (b2.publicMethod2 ());

First class library base. js

After learning about the basic object-oriented and prototype, We will encapsulate our first class library. This class has the following functions: You can use id, class, and tagname to obtain elements, implement the concatenation function, set css, get text, and other basic functions:

Var $ = function () {return new Base ();} var Base = function () {this. elements = []; // indicates the Element Set} // obtains the element Base by Id. prototype. fId = function (id) {this. elements. push (document. getElementById (id); return this;} // use tagName to obtain 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 ;}; // obtain the element Base using className. 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 ;}; // text value Base. prototype. fText = function (str) {var texts = []; // obtain the innerHTML value function getInnerHTML (I, that) {texts. push (that. elements [I]. innerHTML) ;}; // set the value of innerHTML function setInnerHTML (I, that, str) {that. elements [I]. innerHT ML = str ;}; // obtain 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 no parameter is input, it is considered to be the obtained 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 set, 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 obtain the CSS value Base. prototype. fCss = function (cssName, cssValue) {var cssStrs = []; // obtain the value of getComputedStyle function getFFStyle (I, that, cssName) {var style = window. getComputedStyle (th At. elements [I]); cssStrs. push (style [cssName]) ;}; // obtain the value of currentStyle function getIEStyle (I, that, cssName) {var style = that. elements [I]. currentStyle; cssStrs. push (style [cssName]) ;}; // set the css value. float indicates reserved words, IE indicates styleFloat, and FF indicates 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 the CSS value lenFor (setCss, this, cssName, cssValue); return this ;}}; // Add the css class selector Base. prototype. addCssClass = function (className) {// obtain the class value of elements 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 the css class selector Base. prototype. removeCssClass = function (className) {// Delete the class value of elements 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 elements and executes 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 yet. After learning in the future, optimize it. Other class libraries will be expanded on the basis of this basic library to add its functions.