has been using the jquery framework, and some small projects still feel that the jquery framework is too powerful, so they have time to figure out how to write their own framework on a weekend. When it comes to JS's design pattern, we have to say that JS's class inheritance mechanism, JavaScript is different from PHP can easily implement class inheritance, but JavaScript class inheritance method is still there, the common building function, prototype extension, synthesis ..., there are also some special functions to write classes, For example, the author of jquery has a class inheritance function. A simple look at _________________________________________________________________________________________________ to the class inheritance The company has been using the jquery plugin framework, and some small projects still feel that the jquery framework is too powerful, so they have time to spend their weekends figuring out how to write a frame of their own. When it comes to JS's design pattern, we have to say that JS's class inheritance mechanism, JavaScript is different from PHP can easily implement class inheritance, but JavaScript class inheritance method is still there, the common building function, prototype extension, synthesis ..., there are also some special functions to write classes, For example, the author of jquery has a class inheritance function. About class inheritance can be simple to look at I wrote the framework also do not know what name, just started to write a W (surname Pinyin, before the jquery pop-up box plugin Wbox), now write this article re-organized a bit of thought, changed yq (name pinyin, you understand ~). Core Code framework design when possible to support chained notation, that is, return this, you Can $ (selector). Handler1 (). Handler2 (). Write indefinitely, as long as you do not have a return value to continue. Including the Event,dom,css, and fadein,fadeout animation (because of the re-construction of the love Wall [HTML5+CSS3] version, all handy added this function). If you mate with the sizzle selector It's even more bull! below to talk about the framework of the core code, and so perfect after the new version of HTML5 Love wall with the release, the main code is as follows: (function (window,document) { var doc = document,yq = window.$ = function (selector) { if (!selector) { return YQ.elems } typeof selector === ' String ' && (selector = getelements ( selector));//The Simple judgment is the DOM object, or the string, and the string starts the selector return superelems (selector); } function superelems (Elems) { if (Elems) { if (Elems.nodetype) {//To determine if dom if (typeof elems.getattribute !== "Unknown") { var temp = elems; elems = []; elems[0] = temp;//the first of itself as a super object, other methods to expand for (var i in yq.elems) { //extension objects, preserving existing methods typeof elems
= = = "undefined" && (elems = Yq.elems)
}
}
}else{//objects are extended if they are objects
Elems = Yq.extend (elems,yq.elems);
}
}
return elems;
}
function GetElements (selector) {
//Great selector that can be used sizzle
var dom = Doc.getelementbyid (selector);//...
return DOM;
}
Yq.tool = {
isfunction:function (obj) {//Simple judgment is a function
return obj && typeof obj = = = "function";
}
}
//Here are some extensions for the Super object
Yq.elems = {
each:function (dom,callback) {//strong each
if (YQ.tool.isFunction (DOM)) {
Arguments.callee.call (this,this,dom);
}else{
for (var i = 0, len = dom.length; i < Len; i++) {
Callback.call (DOM, I, Dom);
}
}
return this;
},
find:function (selector) {
var doms = [];
This.each (function (i,dom) {
Doms.push (YQ. Dom.find (Selector,dom));
})
return Superelems (doms);
}
}
Yq.each = window. Array.prototype.each = yq.elems.each;//Extended Array
yq.extend = function (subclass,baseclass) {
For (var i in BaseClass) {
Subclass = BaseClass;
}
return subclass;
}
YQ. AJAX = {}
YQ. CSS = {
names:{
' float ': ' cssfloat ',//differentiate cssfloat or stylefloat
opacity: ' Opacity '
//...
}
}
Yq.browser = {
Isie: ",
Isfirefox: ",
version: ' 3.6 '
//...
}
yq.event = {
names:{
mousewheel:YQ.browser? " Dommousescroll ":" MouseWheel "
},
Fix:function (e) {
if (e && e.clone) return e;//if already processed, return directly
e = window.event | | E;//event is a global variable
var FixE = {
Clone:true,
stop:function () {//bubbling
if (e&&e.stoppropagation) {
e.stoppropagation ();
}else{
e.canclebubble = True
}
},
prevent:function () {//default action
if (e && e.preventdefault) {
E.preventdefault ();
}else{
E.returnvalue = false;
}
},
Target:e.target | | e.srcelement,
X:e.clientx | | e.pagex,
Y:e.clienty | | e.pagey,
//mouse wheel Event Unified processing
wheel:e.wheeldelta/120 | |-E.DETAIL/3
}
return FixE;
}
}
YQ. DOM = {
find:function (selector,parentdom) {
//do something
}
}}) (window,document);
A simple analysis
the comments in the code are also detailed, combined with comments can be understood, below I say a few more words, Master floated, welcome to shoot bricks ...
it has to be an anonymous function that defines the global variable $ (which seems to like the dollar, if you have a favorite renminbi, add it next time), there is a Yq object in the function, there are many functions, including some private ones.
using $ can be used as a selector, if empty, The Yq.elems object is returned, the selected DOM is extended according to the Yq.elems, and the final comment is Superelems (the Superelems method referenced below Jraiser), similar to the superelems of jquery, binds a lot of methods and can Operation, The Yq method can be extended to the selected object by Yq.elems, and the main function of the selector getelements, you can use sizzle, which facilitates the DOM operation, but sizzle seems to be too much code, the future will support the simple label, #ID,. class, Tag +class selector.
In addition, some array,string are extended in the framework, such as the Array.each method above, YQ.elems.each is a heavyweight function method that supports SUPERELEMS traversal (returning itself), and also supports the traversal of simple arrays.
Some compatibility is also handled in the framework, such as YQ.event.fix handling events, and CSS handling of float
basically on these, today first said the core of the part, in fact, through this code has been very clear understanding of the framework of the idea, the follow-up continues to give force to the coding, supplemental expansion ...
so far, the framework has less than 800 lines of code, including the common jquery method, which is compressed less than 9k,gzip 4.5k~
See more:
http://www.huiyi8.com/jiaoben/
http://www.huiyi8.com/js/css/
Write a design pattern for a lightweight JavaScript framework
