Back to the topic, an API style as easy to use as jQuery? So what kind of style is it? There are two points that I personally think are more important. One is the chained calls to DOM operations, which are all in a queue state. This not only makes the readable semantics of the code easy to understand, but also eliminates the need for multiple calls to the same DOM element. It is very important to embed callbacks in callbacks during chain operations.
The second is batch operation of elements, which is based on its powerful selector. The jq selector is very powerful, as everyone knows, so I won’t say more. And it certainly can’t be achieved in a day or two, so let’s talk about my views on the two points I mentioned.
Based on its powerful selector, all jquery DOM operations rely on an array obtained based on its selector. Many people like to call this a jq object. So let’s call it that for now. Then all DOM operations rely on each element in this jq object to be executed concurrently and in batches. Specific to each DOM operation, most of them are in the state of chained callbacks. That is to say, in this method chain, the order of their execution can be known directly based on the order of method calls in the chain. This method chain and serial form is a major feature of it.
So many people like to use jquery because they basically like it for two reasons. The selector is really powerful, the chain call is really convenient and easy to use, and the code logic becomes simple instantly. Precisely because it handles a lot of code logic internally, there are fewer issues left for coders to consider. So while you find it useful, you also lose an opportunity to practice coding logic. Therefore, I do not recommend that beginners learn to use jquery or other frameworks directly, because they will make you understand js less and less. My point of view is that all frameworks or libraries are used to improve development efficiency and management convenience, not to learn. (Of course, except those who study the source code).
So, since we think jquery’s API style is easy to use, why don’t we try to build this similar API style? (Disclaimer: The following attempts are only to provide an idea, the code is not perfect...)
var get = function (ids) {
var d = document, a = -1;
this.elements = [];
if (typeof ids != ' string' && !!ids.length) {
for (var i=0; ivar id = ids[i], o;
o = typeof id = = 'string' ? d.getElementById(id) : id;
this.elements.push(o);
}
} else {
while (typeof arguments[ a] == 'string ') {
this.elements.push(d.getElementById(arguments[a]));
}
}
}
Then extend some operations for it DOM method
get.prototype = {
each : function () {},
animate : function () {}
}
Of course, this method looks different from jQuery, but you can understand it, jquery is possible It looks like this:
jQuery = window.jQuery = window. $ = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {}
}
Next, batch operations on the acquired queues inevitably require an each traversal method.
each : function (fn) {
for ( var i=0; ifn.call(this, this.elements[i])
}
return this;
},
Each is a method extended by get.prototype, providing a parameter function, traversing the dom list, and binding the function to each element. Then let it return get.prototype, because the prototype itself has properties similar to a "superclass", so any method returned to the prototype object can continue to call the prototype extension method.
In order to make this attempt more meaningful, let’s make an animate function next. This function is a very common method for JQuery to operate DOM. With it, most animations have become so simple and easy. The following will be a simple implementation:
animate: function (config) {
if (!this.animQueue) this.animQueue = HR._animQueue = [];
var a = 0, time, tween, ease, callback;
while (arguments[ a]) {
if (typeof arguments[a] == 'number') time = arguments[a];
if (typeof arguments[a] == 'string') {
if (/^ease*/.test(arguments[a])) ease = arguments[a];
else tween = arguments[a];
}
if (HR.isFunction (arguments[a])) callback = arguments[a];
}
this.animQueue.push({
config: config,
time: time,
tween: tween,
ease: ease,
callback: callback
});
if (this.animQueue.length == 1) this.execute(this.animQueue);
return this;
},
You may not see any clues just by looking at this paragraph. Yes, because to make a serial method chain like jquery, a temporary queue is needed. Operation, otherwise even if the method chain is formed, these methods will be parallel and cannot achieve the effect we want. So the above piece of code mainly handles the logic of pushing animate into the queue, and then makes some judgments on the parameter arguments so that you can be more casual when writing parameters. Except for the first parameter and the last callback, the other parameters do not need to consider the position. and required to enhance ease of use.
The core transformation function is on execute,
execute : function (queue) {
var _this = this, m = 0, n = 0,
_anim = function (el, key, from, to, at, tw, ease, cb) {
var isOP = (key == 'opacity' && !HR.support.opacity), _key = key;
if (isOP) {to = to*100; _key = 'filter'}
var s = new Date ,
d = at,
b = parseFloat(from) || 0,
c = to-b;
(function () {
var t = new Date - s;
if (t >= d) {
n ;
t = d;
el.style[_key] = (isOP ? 'alpha(opacity=' : '') Tween .Linear(t, b, c, d) (key != 'opacity' ? 'px' : '') (isOP ? ')' : '');
!!cb && cb.apply(el) ;
if (m == n && _this.animQueue.length > 1) {
_this.animQueue.shift();
_this.execute(_this.animQueue);
}
return;
}
el.style[_key] = (isOP ? 'alpha(opacity=' : '') Tween[tw][ease](t, b, c, d) ( key != 'opacity' ? 'px' : '') (isOP ? ')' : '');
if (!HR.timers[el.id]) HR.timers[el.id ] = [];
HR.timers[el.id].push(setTimeout(arguments.callee, 16));
})();
},
_q = this.animQueue[0];
return this.each(function (el) {
for (var k in _q.config) {
m ;
_anim(el,
k,
k == 'opacity' && !HR.support.opacity ? HR.getStyle('filter', el) == '' ? 100 : parseInt(HR.getStyle('filter', el). match(/d{1,3}/g)[0]) : HR.getStyle(k, el),
_q.config[k],
typeof _q.time == 'number' ? _q .time : 1000,
typeof _q.tween == 'string' && !/^ease*/.test(_q.tween) ? _q.tween : 'Quart',
typeof _q.ease == ' string' && /^ease*/.test(_q.ease) ? _q.ease : 'easeOut',
_q.callback)
}
});
}
This section seems a little more complicated. The most basic change is still in the private function _anim. The rest of the code is basically doing some batch operations, compatibility with transparency changes, and whether the current transformation has been completed. Combining these two paragraphs, the effect of jquery's animate is basically achieved. Belongs to a simplified version.
Of course, we must not forget a very important point, that is, since it can be transformed, there must be a stop method to make the transformation controllable, otherwise the usability of this code will be greatly reduced. Please refer to the following code:
stop: function (clearQueue) {
if (clearQueue) HR ._animQueue.length = 0;
this.each(function (el) {
if (!!HR.timers[el.id])
for (var i=0; i});
return this;
},
Set up special temporary timer storage for different dom element IDs, HR.timers[el.id], then traverse the current dom list and clear the corresponding timers. The parameter clearQueue is an optional parameter, used to control whether to clear subsequent animates waiting for execution.
In order to make this method more fun, I added several additional easing methods. jquery only has one kind of swing, and then all the easing algorithms are placed in the Tween object for use. The following is the source code I used for testing, (please forgive me if there are any mistakes)
/* =========== animate js ============ */
/* @author:hongru.chen */
/* =================================== */
if (typeof HR == 'undefined' || !HR)
HR = {
extend : function (destination, source, override) {
if (override === #ff0000) override = true;
for (var property in source) {
if (override || !(property in destination)) {
destination[property] = source[property];
}
}
return destination;
}
};
(function () {
var Tween = { // The parameters of the following operators are represented respectively: t: running time, b: starting amount, c: total change, d: total time
Linear: function(t,b,c,d){ return c*t/d b; },
Quad: {
easeIn: function(t, b,c,d){
return c*(t/=d)*t b;
},
easeOut: function(t,b,c,d){
return -c * (t/=d)*(t-2) b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t b;
return -c/2 * ((--t)*(t-2) - 1) b;
}
},
Cubic : {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t b;
},
easeOut: function(t,b ,c,d){
return c*((t=t/d-1)*t*t 1) b;
},
easeInOut: function(t,b,c,d) {
if ((t/=d/2) < 1) return c/2*t*t*t b;
return c/2*((t-=2)*t*t 2) b;
}
},
Quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t* t b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) b ;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t* t b;
return -c/2 * ((t-=2)*t*t*t - 2) b;
}
},
Quint: {
easeIn: function (t,b,c,d){
return c*(t/=d)*t*t*t*t b;
},
easeOut: function(t,b,c,d ){
return c*((t=t/d-1)*t*t*t*t 1) b;
},
easeInOut: function(t,b,c,d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t b;
return c/2*((t-=2)*t *t*t*t 2) b;
}
},
Sine: {
easeIn: function(t,b,c,d){
return -c * Math. cos(t/d * (Math.PI/2)) c b;
},
easeOut: function(t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) b;
},
easeInOut: function(t,b,c,d){
return -c/2 * (Math.cos(Math.PI* t/d) - 1) b;
}
},
Expo: {
easeIn: function(t,b,c,d){
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) b;
},
easeOut: function(t,b,c,d){
return (t ==d) ? b c : c * (-Math.pow(2, -10 * t/d) 1) b;
},
easeInOut: function(t,b,c,d){
if (t==0) return b;
if (t==d) return b c;
if ((t/=d/2) < 1) return c/2 * Math.pow (2, 10 * (t - 1)) b;
return c/2 * (-Math.pow(2, -10 * --t) 2) b;
}
},
Circ: {
easeIn: function(t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) b;
},
easeOut: function(t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) b;
} ,
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t ) - 1) b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) 1) b;
}
},
Elastic: {
easeIn: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b c; if (! p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/ (2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s) *(2*Math.PI)/p )) b;
},
easeOut: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a =c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2, -10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) c b);
},
easeInOut: function(t,b,c,d,a ,p){
if (t==0) return b; if ((t/=d/2)==2) return b c; if (!p) p=d*(.3*1.5);
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math .asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s )*(2*Math.PI)/p )) b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2 *Math.PI)/p )*.5 c b;
}
},
Back: {
easeIn: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s 1)*t - s) b;
},
easeOut: function(t ,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s 1)*t s ) 1) b;
},
easeInOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/ =d/2) < 1) return c/2*(t*t*(((s*=(1.525)) 1)*t - s)) b;
return c/2*((t -=2)*t*(((s*=(1.525)) 1)*t s) 2) b;
}
},
Bounce: {
easeIn: function(t, b,c,d){
return c - Tween.Bounce.easeOut(d-t, 0, c, d) b;
},
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) b;
} else if (t < (2/2.75) ) {
return c*(7.5625*(t-=(1.5/2.75))*t .75) b;
} else if (t < (2.5/2.75)) {
return c *(7.5625*(t-=(2.25/2.75))*t .9375) b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t .984375 ) b;
}
},
easeInOut: function(t,b,c,d){
if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 b;
else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 c*.5 b;
}
}
}
var get = function (ids) {
var d = document, a = -1;
this.elements = [];
if (typeof ids != 'string' && !!ids.length) {
for (var i=0; i
var id = ids[i], o;
o = typeof id == 'string' ? d.getElementById(id) : id;
this.elements.push(o);
}
} else {
while (typeof arguments[ a] == 'string') {
this.elements.push(d.getElementById(arguments[a]));
}
}
}
get.prototype = {
each : function (fn) {
for (var i=0; ifn.call(this, this.elements[i])
}
return this;
},
setStyle : function (p, v) {
this.each(function (el) {
el.style[p] = v;
});
return this;
},
show : function () {
var _this = this;
this.each(function (el) {
_this.setStyle('display', 'block');
})
return this;
},
hide : function () {
var _this = this;
this.each(function (el) {
_this.setStyle('display', 'none');
})
return this;
},
animate: function (config) {
if (!this.animQueue) this.animQueue = HR._animQueue = [];
var a = 0, time, tween, ease, callback;
while (arguments[ a]) {
if (typeof arguments[a] == 'number') time = arguments[a];
if (typeof arguments[a] == 'string') {
if (/^ease*/.test(arguments[a])) ease = arguments[a];
else tween = arguments[a];
}
if (HR.isFunction(arguments[a])) callback = arguments[a];
}
this.animQueue.push({
config: config,
time: time,
tween: tween,
ease: ease,
callback: callback
});
if (this.animQueue.length == 1) this.execute(this.animQueue);
return this;
},
stop : function (clearQueue) {
if (clearQueue) HR._animQueue.length = 0;
this.each(function (el) {
if (!!HR.timers[el.id])
for (var i=0; i});
return this;
},
execute : function (queue) {
var _this = this, m = 0, n = 0,
_anim = function (el, key, from, to, at, tw, ease, cb) {
var isOP = (key == 'opacity' && !HR.support.opacity), _key = key;
if (isOP) {to = to*100; _key = 'filter'}
var s = new Date,
d = at,
b = parseFloat(from) || 0,
c = to-b;
(function () {
var t = new Date - s;
if (t >= d) {
n ;
t = d;
el.style[_key] = (isOP ? 'alpha(opacity=' : '') Tween.Linear(t, b, c, d) (key != 'opacity' ? 'px' : '') (isOP ? ')' : '');
!!cb && cb.apply(el);
if (m == n && _this.animQueue.length > 1) {
_this.animQueue.shift();
_this.execute(_this.animQueue);
}
return;
}
el.style[_key] = (isOP ? 'alpha(opacity=' : '') Tween[tw][ease](t, b, c, d) (key != 'opacity' ? 'px' : '') (isOP ? ')' : '');
if (!HR.timers[el.id]) HR.timers[el.id] = [];
HR.timers[el.id].push(setTimeout(arguments.callee, 16));
})();
},
_q = this.animQueue[0];
return this.each(function (el) {
for (var k in _q.config) {
m ;
_anim(el,
k,
k == 'opacity' && !HR.support.opacity ? HR.getStyle('filter', el) == '' ? 100 : parseInt(HR.getStyle('filter', el).match(/d{1,3}/g)[0]) : HR.getStyle(k, el),
_q.config[k],
typeof _q.time == 'number' ? _q.time : 1000,
typeof _q.tween == 'string' && !/^ease*/.test(_q.tween) ? _q.tween : 'Quart',
typeof _q.ease == 'string' && /^ease*/.test(_q.ease) ? _q.ease : 'easeOut',
_q.callback)
}
});
}
}
HR.extend(HR, {
get : function () {
return new get(arguments);
},
isFunction : function(o) {
return typeof(o) == 'function' && (!Function.prototype.call || typeof(o.call) == 'function');
},
getStyle : function (p, el) {
return el.currentStyle ? el.currentStyle[p] : document.defaultView.getComputedStyle(el, null).getPropertyValue(p);
},
support : (function () {
try {
var d = document.createElement('div');
d.style['display'] = 'none';
d.innerHTML = '';
var a = d.getElementsByTagName('a')[0];
return {
opacity: a.style.opacity === '0.5'
}
} finally {
d = null;
}
})(),
timers : {}
});
})();
Then in order to make it more intuitive for everyone, I made two demos
【demo1】
If you need to introduce external Js, you need to refresh to execute
]
[demo2]
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
