JavaScript-create your first class library, javascript-class library

JavaScript-create your first class library, javascript-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.

I want to encapsulate my own javascript class library. What should I do?

2 books recommended
First, the javascript advanced program design (speaking of object-oriented scripts, it will suddenly become open-minded after reading the basics .)
The second advanced JavaScript DOM Program Design (describes the nature of javascript and teaches you how to implement your own script library, which is difficult, in-depth, and understandable. You will be ecstatic .)
2. They are all Turing books, and the translation is very good.

You need to directly read the 2nd Library (if you have a good foundation)
It definitely allows you to learn class libraries by yourself
First, we need to use the "namespace" knowledge, prototype attributes, and so on .... The specifics are unclear. After you finish reading the 2nd book, you will understand the principles of the class library.

How to create your own java class library and call

Suppose you have a class
Class {
Int id = 0;
}
Javac a. java under cmd
Compile class a into class.
Put a. class in the folder named abc.
Then, in cmd, package the jar abc folder into abc. jar.
When using
Use import abc. a; To call the class.