Daily Learning Experience: $. extend () method and (function ($) {...}) (jQuery) Explanation

Preface:

The first two days after the festival, mainly to adjust the working status. The project is not very tight either. over the weekend, I would like to sum up some JS and JQuery problems that I encountered a year ago. It mainly introduces the extend method and (function ($) {}) (JQuery) of jQuery, and also involves some related knowledge.

1. Differences between substring and substr in JS

Previously, the substring method was used in the project, because C # also had the string truncation method Substring method. At that time, I didn't think much about it, so I mistakenly thought the two methods were the same. In this way, Substring is directly used in js according to the substring method in C #. In actual projects, the correct results are sometimes obtained, however, sometimes the results are incredible. After careful debugging and tracking, we found that the substring method in Js is different from the Substring method in C. The string truncation method in C # is very simple and will not be described here. This section mainly describes the substring method in js. By the way, we will talk about the substr method.

Substring:

This method can have either a parameter or two parameters.

L one parameter:

Example: var str = "Olive ";

Str. substring (3 );

Result: "ve"

Note: When substring has only one parameter, the parameter indicates the number of digits starting from the string,

To the end of a string.

L two parameters:

Example: var str = "Olive ";

1) Str. substring (3, 4 );

2) Str. substring (3, 2 );

Result: 1) "v" 2) 0

Note: When substring has two parameters, the first parameter indicates the number of characters in the string and the second parameter indicates the number of characters in the string. This is a different part of the character Truncation in C #, which leads to different results.

Substr:

This method can also have one or two parameters.

L one parameter:

Note: When substr is a parameter, the function is the same as when substring is a parameter.

L two parameters:

Example: var str = "Olive ";

1) Str. substr (3, 2 );

2) Str. substr (3, 4 );

Result: 1) "ve" 2) "ve"

Note: When substr has two parameters, the first parameter indicates the number of characters in the string and the second parameter indicates the number of characters in the string. This is the same as the character Truncation in C #. Therefore, in future use, substr is recommended if you want to avoid the interception problem.

2 $. extend ()

Because this method was useful in some parts of the project, I didn't know what it meant at the time. I thought about it when I saw it too much.

Solve the problem. Originally, this method was quite useful. It was mostly used to compile plug-ins. Of course, it also had some heavy-load prototypes.

2.1 extend (result, item1, item2 .....)

Here, this method is mainly used to merge all the parameter items into the result and return the result.

The result structure is damaged.

2.2 extend ({}, item1, item2 ,......)

This method can be used to merge all the obtained results into {} and return the results without damaging the structure of the original items.

Example:

Var item = {name: "olive", age: 23 };

Var item1 = {name: "Momo", sex: "gril "};

Var result = $. extend ({}, item, item1 );

Result:

Result = {name: "Momo", age: 23, sex: "gril "};

Note:

The above results show that the extend method combines all the items into {}. However, you will find that the name: "Momo" in item1 combines the name: "olive" is covered. What is going on? Next, let's look at it.

2.3 extend (bool, {}, item1, item2 ....)

The Extend method also contains heavy loads with bool parameters.

If bool is set to true, it indicates deep copy. If it is set to false, it indicates light copy. For details, refer to the following example:

Example:

Var item = {name: "olive", age: 23, address {provice: "Henan", city: "Zhengzhou "}};

Var item1 = {sex: "girl", address {city: "Beijing "}};

Var result = $. extend (true, item, item1 );

Var result1 = $. extend (false, item, item1 );

Result:

Result = {name: "olive", age: 23, sex: "gril", address: {provice: "Henan", city: "Beijing "}};

Result1 = {name: "olive", age: 23, sex: "gril", address: {city: "Beijing "}};

Note:

The above results indicate that when the parameter is true, it is a deep copy. When the subitem in item1 has the same attribute value as the subitem in item, the value of the sub-item in item1 overwrites the value in the sub-item. When the attributes of the sub-item item1 are different from those in the item, they are merged with the item.

If the parameter is false, the subitem in item1 is the same as the subitem attribute in item. The attribute value of the subitem in item1 completely overwrites the value in item.

2.4 $. extend (item)

This method combines items into the global objects of Jquery, which is equivalent to adding

Static Method (corresponding to the static method here, of course, there are also instance methods, which will be introduced later ).

Example:

$. Extend ({SayHello: function (value) {alert ("hello" + value );}});

After writing this code, you can directly call the SayHello method:

$. SayHello ("Olive ");

Note: This method is equivalent to adding a new method for the Jquery class.

2.5 $. fn. extend (item)

The $. extend (item) mentioned above is a static method added to the Jquery class, so $. fn. extend (item

) Is to add an instance method for each instance.

Example:

$. Fn. extend ({hello: function (value) {alert ("hello" + value );}});

After this is written, you can call this method after obtaining each example:

$ ("# Id"). hello ("Olive ");

 

3. (function ($ ){....}) (JQuery)

When I first saw this writing method, I was confused. I found some information on the Internet.

Let's first look at the content in the first bracket: function ($ ){....}, Isn't this an anonymous function? However, its parameter is strange, that is, $, which is mainly used to avoid conflicts with other libraries.

In this way, we can easily understand that the content in the first bracket defines an anonymous function. When we call a function, we add brackets and real parameters behind the function name, however, because of the operator priority, the defined anonymous functions also need to be included in.

Now I think you know exactly what this sentence means. The first parenthesis defines an anonymous function, and the second function represents the parameter passed by the function. The whole combination means that an anonymous function is defined and then the function is called, the real parameter of this function is jQuery.

Equivalent to: function fun ($ ){...}; Fun (jQuery );

This method is mostly used to store the development plug-ins. When the code is executed, the Dom object is not necessarily loaded. The opposite is $ (function () {}). When using this method, the Dom object of the page has been loaded. In fact, the full write of this method is: $ (document). ready (function (){});

 

Well, I will summarize it here today. It mainly involves some common methods related to writing plug-ins, hoping to help you.