Experienced the first time to write an article, a little surprise, because I did not expect to be recommended to the home page, surprise and with a sense of urgency, because employment is near, so I want to seize the time to review knowledge, enrich my knowledge system. Today, I’d like to summarize the tool approach for Jquery version 3.5.1. Isn’t jquery obsolete? How also use, but I want to tell you, ‘there is no eternal library or framework, only the ideas which are the most precious, can also be combined with the game, is the version of a generation of god’

Jquery tool method summary

1. Download jquery3.5.1

If yarn is not installed, you can refer to the following link or use the NPM package to download the file. The command I use is as follows: yarn add [email protected]

For installation details, see: NPM Learn NPM

CNPM $NPM install - g - registry=https://registry.npm.taobao.org / / CNPM installationCopy the code

A yarn yarn website,

After the installation is complete, the folder is as follows:

2. Summary of jquery tools

(1) Detection type method

I wrote it at the end of my last article, but I was in such a hurry that I didn’t even explain it. This time I will write it more completely and return a lowercase letter of the data type, such as String

var class2type = {}; // Define an empty object var toString = class2type.tostring; / / equivalent to the Object. The prototype. ToString ["Boolean","Number","String","Function","Array","Date","RegExp","Object","Error","Symbol","BigInt","GeneratorFunction"]. forEach(item=>{ class2type["[object "+item+"]"] = item.toLowerCase(); // Add attributes and corresponding values to class2Type, Function toType(obj){if(obj==null){return obj+''; } return typeof obj === "object" || typeof obj === "function" ? class2type[toString.call(obj)] || "object" : typeof obj; }Copy the code

Details are as follows:

2. Check whether it is a function

This function checks if it is a function and returns a Boolean value

// In some browsers, typeof returns "function" for HTML <object> elements (that is, "file type"). CreateElement ("object") === "function" ') // We don't want to classify * any * DOM nodes as functions. Function isFunction(obj){return typeof obj === 'function' && typeof obj.nodeType! == "number"; }Copy the code

3. Check whether the alarm is Window

Check if it is a window and return a Boolean value

Function isWindow(obj){return obj! =null && obj.window === window; }Copy the code

4. Determine if it is a pure object

{},new Object, object.create (null)

var getProto = Object.getPrototypeOf; / / get the prototype var hasOwn = class2type. HasOwnProperty; / / equivalent to the object. The prototype. HasOwnProperty function isPlainObject (obj) {/ / judge whether pure object ({}, the new object, the object, the create (null)) var proto = getProto(obj), Ctol; if(! obj || toType(obj)! Return false} // Check whether proto has a constructor attribute. Constructor = hasown. call(ptoto,"constructor") &&proto.constructor; return typeof Ctol === "function" && fnToString.call( Ctor ) === ObjectFunctionString; }Copy the code

5. Check whether it is an empty object

Used to determine if an object is empty and returns a Boolean value

Original JQ code:

Function isEmptyObject: function(obj) {var name; For (name in obj) {// This loop returns false if it has an attribute. } return true; }Copy the code

As shown in figure:We want the current object to be considered empty if it has no attributes, not if it has a prototype object

After the modification

Function isEmptyObject (obj) {/ / judge whether an empty Object let arr = [... Object getOwnPropertyNames (obj), / / access to their own properties ... Object. GetOwnPropertySymbols (obj) / / obtain symbol] return arr. Length > 0; }Copy the code

6. Check if it is a class array

Used to check whether it is a class array or an array and returns a Boolean value

function isArrayLike( obj ) { var length = !! Obj && "length" in obj && obj. Length,//obj exists and has the length attribute, then go back to obj type = toType(obj); / / type of measurement in front of the if (isFunction (obj) | | isWindow (obj)) {/ / because a function and object has length attribute, so they return to exclude false; } return type === "array" || length === 0 || typeof length === "number" && length > 0 && ( length - 1 ) in obj; }Copy the code

7. Jq each traversal

Used to iterate over groups of numbers or objects, returning each item and index

The original jq:

Symbol function each(obj, callback) {var length, I = 0; if ( isArrayLike( obj ) ) { length = obj.length; for ( ; i < length; i++ ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } else { for ( i in obj ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } return obj; }Copy the code

As shown in the figure:Cannot iterate over symbol

Revised:

Function getPropertyname(obj){// Get symbol plus the property of the current object, Do not include prototype properties on return [... Object. GetOwnPropertyNames (obj), Object s getOwnPropertySymbols (obj)]} function each (obj, callback ) { var length, i = 0; if ( isArrayLike( obj ) ) { length = obj.length; for ( ; i < length; i++ ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } else { let keys = getPropertyname(obj), length = keys.length for(; i<length; i++){ if ( callback.call( obj[keys[i]], i, obj[keys[i]] ) === false ) { break; } } } return obj; }Copy the code

As shown in the figure:

Finally, I would like to thank those who praised and encouraged me in my first article, thank you, I will continue to update the article in the future, of course, if there is any bad place to write, please mention it, I hope to make progress together in the future!! cheer up