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 Elementdom Attribute, usually used to selectselected, checked Disabledisabled And 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 ~