Write a design pattern for a lightweight JavaScript framework

The company has been using the jquery 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 is simple to read
_________________________________________________________________________________________________
The company has been using
jquery Plugin
Framework, some small projects still feel that the jquery framework is too strong, so they have time on the weekend to think about writing a frame of their own. When it comes to JS's design pattern, we have to talk about JS's class inheritance mechanism,
Javascript
Unlike PHP, you can easily implement class inheritance, but
Javascript
Class inheritance methods are common, there are building functions, prototype expansion, synthesis ..., there are also some specialized functions of writing classes, such as the author of jquery has a class inheritance function. A simple look at the class inheritance notation

I wrote the framework also do not know what name, just began 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

Frame design when possible to support the chain style, 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!

The following is the framework of the core code, and so perfect after the release with the new HTML5 love Wall, 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));//Simple judgment is Dom object, or String, string starts selector
return Superelems (selector);
}
function Superelems (elems) {
if (Elems) {
if (elems.nodetype) {//determines if the DOM
if (typeof Elems.getattribute!== "Unknown") {
var temp = Elems;
Elems = [];
Elems[0] = temp;//The first of its own as a super object, and other methods to extend
for (var i in Yq.elems) {
Extending objects, preserving existing methods
typeof Elems[i] = = = "undefined" && (elems[i] = yq.elems[i])
}
}
}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 of 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[i]);
}
}
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[i] = baseclass[i];
}
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,
Unified mouse Wheel Event 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/

Design pattern for a lightweight JavaScript framework written by