Common tips for jQuery, zepto, and js: jqueryzepto

Common tips for jQuery, zepto, and js: jqueryzepto

The following is only a record of common fragments and experiences of your work. If you have any questions, please correct them. Thank you ~

JQuery/zepto determine whether an element exists

// Determine whether the length exists. The correct if ($ elem. length) {} // error, because the empty array is also trueif ($ elem ){}

Rational Determination of Data Types

First look at the Code:

function case(str) {  return str.match(/reg/);}

It looks okay, but when str is null (false, null, etc.), it crashes. Appropriate checks make the code more robust, such:

Function case (str) {return "string" = typeof str? Str. match (/reg/): null; // or forcibly converted return String (str ). match (/reg/);} function case2 (callback) {if ("function" === typeof callback) {callback ();}}

For example, to obtain the parameters in the address bar:

Function getQuery (key) {// no matter whether the Page Link has querystring, location. search will be a string // substr to ignore? Var result = location. search. substr (1). match (new RegExp ("(? : ^ | &) "+ Key +" = (. + ?) (? : $ | &) "); // If the match is successful, return result is returned for the array? Result [1]: result ;}

To determine whether the result exists, a variable result is added. However, you can use the default value to replace it:

Function getQuery (key) {return (location. search. substr (1). match (new RegExp ("(? : ^ | &) "+ Key +" = (. + ?) (? : $ | &) ") | [" "," I am the default value, because I am blank before "]) [1];}

Reasonable try and catch

Try is not recommended under normal circumstances, but it is recommended in some unknown situations. For example, there are too many data structures after the asynchronous interface is successful:

// The original judgment success: res => {// The 200 response that is null in zepto will also trigger success if (res & res. data & res. data. result & res. data. result [0] & res. data. result [0]. list & res. data. result [0]. list. length) {// res. data. result [0]. list. forEach ();} else {// data processing error }}

Emma, the judge is so long, but directly using without judgment may report js errors, so:

// Original judgment success: res => {try {// try to use it. When an error is reported, enter the following branch res. data. result [0]. list. forEach ();} catch (e) {// data processing error }}

Rational use of dataset

Dataset is an attribute field named data-* added to an html element.
Click to view compatibility
Use DOM. dataset to obtain the DOMStringMap object of an element. You can directly assign values to DOM. dataset. key and delete DOM. dataset. key, for example, document. body. dataset. xxoo = 1.
It is often used to store custom data, such: <a href = "#" rel = "external nofollow" data-uid = "1" data-name = "xxoo"> I am a soldier </a>
More semantic
Differences between. data,. attr,. prop, and dataset

Note:. data,. attr,. prop is the jQuery, zepto method.

Name	Description	Whether to display on the dom tree
Attr	Operationdom.getAttribute	Yes
Prop	Operation ElementdomAttribute, usually used to selectselected, checkedDisabledisabledAnd so on	No
Dataset	Node data of operation elements	Yes

For database-related. data, such:

Name	Description	Whether to display on the dom tree
JQuery	.data(key)-First determine the cache object, and obtain it if it does not existattr('data-key')And write to the cache$.cache[id].data[key]  .data(key, value)-Set Cache	No
Zepto	Direct use.attr('data-' + key, value)	Yes
Zepto-Loaddata.js	.data(key)-First determine the cache object, and obtain it if it does not existattr('data-key')  .data(key, value)-Set Cache	No

With the above conclusions, you can choose your own scenario. For example, you can use a selector such as div [data-xx = '1'] {} in css to control the style, you need to use it. attr () or dataset operations, you know ~