JS Framework package, Analog jquery Package

Source: Internet
Author: User

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

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.