preface
JavaScript is object-oriented at its core, but it also provides powerful and flexible OOP language capabilities. This article will teach you how to write a class library like jQuery using native JS in an object-oriented way. We will learn the following:
- Closures: Reduce variable contamination and shorten the scope of variable lookup
- Use of self-executing functions in objects
- Extend implementation principle
- How to implement event listening across browsers
- Prototype chains and inheritance
Next, I will explain and show the core API of the class library. At the end of the article, the complete source code of the class library is attached. In my previous article “3 minutes to teach you to implement the file upload Preview component with progress listening with native JS”, I also used a similar way.
For a more complete library address, see Github Xuery — A Lightweight extensible Native JS Framework mimicking jquery API Style.
Class library design ideas
API introduction and effect display
- Event binding xuery. on(eventName, fn) example:
Xuery('#demo').on('click'.function(e){
alert('hello world! ')})Copy the code- Access and set the CSS Xuery. CSS (string | object,? [string]) Example:
/ / access to CSS
Xuery('#demo').css('width')
/ / set the CSS
Xuery('#demo').css('width'.'1024px')
/ / set the CSS
Xuery('#demo').css({
width: '1024px'.height: '1024px'
})
Copy the code- Access and set properties Xuery. Attr (string | object,? [string]) Example:
/ attr/visit
Xuery('#demo').attr('title')
/ / set the attr
Xuery('#demo').attr('title'.'1024px')
/ / set the attrs
Xuery('#demo').attr({
title: '1024px'.name: '1024px'
})
Copy the code- To access and set HTML examples:
/ / access
Xuery('#demo').html()
/ / set
Xuery('#demo').html('Front-end Learning native Framework')
Copy the codeThere are a few other commonly used apis that I will not cover here, but you can check them out on my Github or extend your own JS framework based on this basic framework.
The core source
The following source code related functions I made comments, I suggest you read carefully, involving the prototype chain and the constructor pointing to the problem, is the core of the way to achieve the above call, and do not understand can be communicated in the comment area.
/** * implement your own js library */ (function(win, doc){
var Xuery = function(selector, context) {
return new Xuery.fn.init(selector, context)
};
Xuery.fn = Xuery.prototype = {
constructor: Xuery,
init: function(selector, context) {// set element length this.length = 0; / / the default access element's context document context = context | | document; // The id selector is used to convert -1 to 0if(~selector.indexOf(The '#')) {
this[0] = document.getElementById(selector.slice(1));
this.length = 1;
}else{/ / in the context of choice var doms = context. The getElementsByTagName (selector), I = 0, len = doms. Length;for(; i<len; i++){
this[i] = doms[i];
}
}
this.context = context;
this.selector = selector;
returnPush: []. Push, sort: []. Sort, splice: [].splice}; // Extend the method xuery. extend = xuery.fn. Extend =functionVar I = 1, len = arguments.length, target = arguments[0], j;if(i === len){ target = this; i--; } // Merge the parameter object into the targetfor(; i<len; i++){
for(j inarguments[i]){ target[j] = arguments[i][j]; }}returnTarget} // extend the event method xuery.fn. Extend ({on: (function() {if(document.addEventListener){
return function(type, fn){
var i = this.length -1;
for(; i>=0; i--){ this[i].addEventListener(type, fn, false)}returnThis} // Internet Explorer dom2 level event}else if(document.attachEvent){
return function(type, fn){
var i = this.length -1;
for(; i>=0; i--){ this[i].addEvent('on'+type, fn)
}
returnThis} // Browsers that do not support dom2}else{
return function(type, fn){
var i = this.length -1;
for(; i>=0; i--){ this[i]['on'+type] = fn;
}
returnThis}}})()}) // Convert '-' to xuery.extend ({camelCase:function(str){
return str.replace(/\-(\w)/g, function(all, letter){
returnletter.toUpperCase(); // set CSS xuery.fn. Extend ({CSS:function(){
var arg = arguments,
len = arg.length;
if(this.length < 1){
return this
}
if(len === 1) {
if(typeof arg[0] === 'string') {
if(this[0].currentStyle){
return this[0].currentStyle[arg[0]];
}else{
return getComputedStyle(this[0], false)[arg[0]]
}
}else if(typeof arg[0] === 'object') {for(var i in arg[0]){
for(var j=this.length -1; j>=0; j--){ this[j].style[Xuery.camelCase(i)] = arg[0][i]; }}}}else if(len === 2){
for(var j=this.length -1; j>=0; j--){ this[j].style[Xuery.camelCase(arg[0])] = arg[1]; }}returnThis}}) // set the property xuery.fn. Extend ({attr:function(){
var arg = arguments,
len = arg.length;
if(len <1){
return this
}
if(len === 1){
if(typeof arg[0] === 'string') {return this[0].getAttribute(arg[0])
}else if(typeof arg[0] === 'object') {for(var i in arg[0]){
for(var j=this.length -1; j>= 0; j--){
this[j].setAttribute(i, arg[0][i])
}
}
}
}
else if(len === 2){
for(var j=this.length -1; j>=0; j--){ this[j].setAttribute(arg[0], arg[1]); }}returnXuery.fn. Extend ({HTML:function(){
var arg = arguments,
len = arg.length;
if(len === 0){
return this[0] && this[0].innerHTML
}else{
for(var i=this.length -1; i>=0; i--){ this[i].innerHTML = arg[0]; }}return this
}
})
Xuery.fn.init.prototype = Xuery.fn;
window.Xuery = Xuery;
})(window, document);
Copy the codeThe last
Welcome to follow the public account below to get more front-end knowledge and learning community:
To restore the learning path, it will acquire the mind map of the front-end learning path of the author’s years of experience;
More recommended
- How to use gulP4 development project scaffolding
- A summary of common JS functions that make you more productive in an instant
- A picture shows you how to play vue-Cli3 quickly
- 3 minutes teach you to use native JS implementation with progress listening file upload preview component
- 3 minutes teach you to use native JS implementation with progress listening file upload preview component
- Developing travel List with Angular8 and Baidu Maps API
- Js basic search algorithm implementation and 1.7 million data under the performance test
- How to make front-end code 60 times faster
- Front End Algorithm series array deweighting
- Vue Advanced Advanced series – Play with Vue and vuex in typescript
- In the first three years, talk about the top five books worth reading