Simulating the jquery framework, using native JS technology to encapsulate a JS framework to deepen the use of JQuery's Common API and the understanding of object-oriented principles;
One: Structural part
First, we construct a self-executing function using the closure, then use the selector function sizzle to get the DOM element, then set the entry function jquery, and return an instance of F;
Then the Jquery.prototype is set, then the prototype F is modified to point to the prototype of jquery, finally exposing two interfaces $ and jquery;
Two: JQuery.fn.extend = Jquery.extend = function () {}
By adding a extend method to the jquery prototype and jquery (see the Code extend section below);
Can be implemented to extend the tool class method and Dom operation, CSS operation class method;
JQuery.fn.extend (object); Yes, Jquery.fn is jquery.prototype.
The extension is to add a "member function" to the jquery class. An instance of the jquery class can use this "member function".
The code is as follows, please correct me
(function (window) {
Push and splice methods for pseudo-array borrowing arrays
var arr = [];//array.prototype;
var push = Arr.push;
var splice = Arr.splice;
Jquery.extend () type partial code preprocessing in the tool class method
var toString = Object.prototype.toString;
var types = "Number,string,boolean,null,undefined,array,object,function,math,date,regexp". Split (",");
var class2type = {};
for (var i = 0; i < types; i++) {
var type = Types[i];
class2type["[Object" + Type + "]"] = Type.tolowercase ();
}
/**
* Get a pseudo-array of DOM elements nodelist does not consider compatibility issues;
* @param Selector
* @returns {NodeList}
* @constructor
*/
var Sizzle = function (selector) {
return Document.queryselectorall (selector);
}
/**
* Set the entry function to return an instance object of F
* @param Selector
* @returns {*}
*/
function JQuery (selector) {
return JQUERY.FN.F (selector);
}
/**
* Jquery.prototype Settings
* @type {{constructor:jquery, f:function}}
*/
Jquery.fn = Jquery.prototype = {
Constructor:jquery,
Version: "0.0.1",
F:function (selector) {
if (jquery.isstring (selector)) {
if (Selector.charat (0) = = = "<" && Selector.charat (selector.length-1) = = = ">" && selector.length &G T;= 3) {
eg:$ ("<input>");
var div = document.createelement ("div");
div.innerhtml = selector;
for (var i =0;i<div.childnodes.length;i++) {
var child = Div.childnodes[i];
Push.call (This.child);
//}
Push.apply (this, div.childnodes);
} else {
eg:$ ("div")
Splice.call (this, 0, this.length);
var elements = Sizzle (selector);
Push.apply (this, elements);
}
} else if (Selector.nodetype) {
The thought of duck-type differentiation
This[0] = selector;
This.length = 1;
Push.call (this, selector);
} else if (selector.version = = = This.version) {
return selector;
}
Return this;//for chained programming
}
}
/**
* Extend method
* @type {Function}
*/
JQuery.fn.extend = Jquery.extend = function () {
var arglen = arguments.length;
var arg0 = arguments[0];
var sources = [];
var target;
if (Arglen = = = 0) return this;
if (Arglen = = = 1) {
Sources.push (arg0);
target = this;
} else {
for (Var i=1;i<arglen;i++) {
Sources.push (Arguments[i]);
//}
Push.apply (sources, arguments);
target = arg0;
}
for (var i = 0; i < sources.length; i++) {
var source = Sources[i];
for (var key in source) {
Target[key] = Source[key];
}
}
return target;
}
/**
* Tool class method, added to jquery, using the $. Method Name () call
*/
Jquery.extend ({
Judging data types
Type:function (data) {
return Class2type[tostring.call (data)];
},
Judging is not a string
Isstring:function (str) {
return Jquery.type (str) = = = = "string";
},
Judging is not a function
Isfunction:function (FN) {
Return Jquery.type (fn) = = = "function";
},
Throw exception
Error:function (msg) {
throw new Error (msg);
},
Remove spaces on both sides of a string
Trim:function (str) {
Return Str.replace (/^\s+|\s+$/g, "");
},
Traversal (the traversal of an array or the traversal of an object)
Each:function (Array, callback) {
var len = array.length;
var i;
if (typeof len = = = "Number" && len >= 0) {
for (i = 0; i < Len;) {
if (Callback.call (Array[i], I, array[i++]) = = = = False) {
Break
}
}
} else {
For (i in array) {
if (Callback.call (Array[i], I, array[i]) = = = = False) {
Break
}
}
}
}
})
Each method in Jquery.fn: this example of F, the each method owned by the jquery object
JQuery.fn.extend ({
Each:function (callback) {
Jquery.each (this, callback);
return this;
}
})
CSS Module
JQuery.fn.extend ({
Css:function () {
var arglen = arguments.length;
var arg0 = arguments[0];
var arg1 = arguments[1];
if (Arglen = = = 0) return this;
if (Arglen = = = 1) {
if (jquery.isstring (arg0)) {
Represents a CSS style that gets the first DOM element
var firstdom = this[0];
Return window.getComputedStyle (firstdom, NULL) [arg0];
} else {
is an object that represents setting multiple styles
Return This.each (function () {
var dom = this;
Jquery.each (Arg0,function (stylename,stylevalue) {
Dom.style[stylename] = Stylevalue;
// })
//})
Return This.each (function () {
Jquery.extend (This.style, arg0);
});
}
} else {
Pass two parameters; set a single CSS style
Return This.each (function () {
THIS.STYLE[ARG0] = arg1;
})
}
},
Show
Show:function () {
Return This.css ("Display", "block");
},
Hide
Hide:function () {
return this, CSS ("display", "none");
},
Toggle Show and Hide
Toggle:function () {
Return This.each (function () {
var $this = $ (this);
$this. CSS ("display") = = = = "None"? $this. Show (): $this. Hide ();
})
}
})
Property Module
JQuery.fn.extend ({
Attr:function (arg0, arg1) {
var arglen = arguments.length;
if (Arglen = = = 0) return this;
if (Arglen = = = 1) {
if (jquery.isstring (arg0)) {
Gets the property value of the first DOM element
var firstdom = this[0];
Return Firstdom.getattribute (arg0);
} else {
Set the properties of an object
Return This.each (function () {
var dom = this;
Jquery.each (function (ClassName, classvalue) {
Dom.setattribute (ClassName, Classvalue);
})
})
}
} else {
two parameters; setting properties
Return This.each (function () {
This.setattribute (arg0, arg1);
})
}
},
Hasclass:function (className) {
Traversal, as long as there is a DOM element containing classname this class name returns True
var isexist = false;
This.each (function () {
if (("" + This.classname + "). IndexOf (" "+ ClassName +" ") >-1) {
Isexist = true;
return false;
}
})
return isexist;
},
Addclass:function (className) {
var classnames = Classname.split ("");
Return This.each (function () {
for (var i = 0; i < classnames.length; i++) {
var singleclassname = classname[i];
if (!$ (this). Hasclass (Singleclassname)) {
This.classname + = "+ singleclassname;
}
}
})
},
Removeclass:function (className) {
if (!classname) {
Delete all class names
Return This.each (function () {
This.classname = "";
})
} else {
Delete one or more class names
var classnames = Classname.split ("");
Return This.each (function () {
var domclassname = "" + This.classname + "";
for (var i = 0; i < classnames.length; i++) {
var singleclassname = "" + Classnames[i] + "";
Domclassname = Domclassname.replace (Singleclassname, "");
}
This.classname = $.trim (domclassname);
})
}
}
})
Dom Action Method module
JQuery.fn.extend ({
Appendto:function () {
var $parent = $ (arguments[0]);
Return This.each (function () {
var child = this;
$parent. each (function () {
var parent = this;
Parent.appendchild (Child.clonenode (true));
})
})
},
Prependto:function () {
var $parent = $ (arguments[0]);
Return This.each (function () {
var child = this;
$parent. each (function () {
var parent = this;
Parent.insertbefore (Child.clonenode (True), parent.firstchild);
})
})
},
Append:function () {
var $parent = $this;
var $child = $ (arguments[0]);
$child. AppendTo ($parent);
return this;
},
Prepend:function () {
var $parent = $this;
var $child = $ (arguments[0]);
$child. Prependto ($parent);
return this;
},
Remove:function () {
Return This.each (function () {
This.parentNode.removeChild (this);
})
},
Html:function (HTML) {
if (html = = = undefined) {
Returns the HTML of the first DOM element
var firstdom = this[0];
return firstdom.innerhtml;
}
If null or other parameters are
Return This.each (function () {
this.innerhtml = html;
this.innerhtml = Html===null? "": HTML;
})
},
Text:function (text) {
if (html = = = undefined) {
var str = "";
This.each (function () {
str + = This.innertext;
})
return str;
}
Return This.each (function () {
This.innertext = text;
})
}
})
Event Module
JQuery.fn.extend ({
On:function (Type,callback) {
Return This.each (function () {
This.addeventlistener (Type,callback);
})
}
})
var eventtypes = "Click Dblclivk keydown keyup mousedown mouseup mouseout mouseenter mouseleave load". Split ("");
for (var i =0;i<eventtypes.length;i++) {
var eventtype = eventtypes[i];
$.fn[eventtype] = (function () {
var type = EventType;
return function (callback) {
Return This.on (Type,callback);
}
})()
}
Example of F = Example of jquery
Jquery.fn.f.prototype = Jquery.fn;
Exposing two interfaces
window.$ = Window.jquery = JQuery;
}) (window)
JS Framework package, Analog jquery Package