Daily Learning Experience: $.extend () method and (function ($) {...}) (jQuery) Detailed daily summary

Source: Internet
Author: User
Tags anonymous extend instance method shallow copy
2014-02-09 Preface:

After the first two days of work, mainly to adjust the working condition. The project is not very tight, taking advantage of the weekend to meet some of the year before some of JS and jquery some of the questions to sum up. This is mainly about the Extend method of JQuery and (function ($) {}) (jquery), as well as some related knowledge. 1. The difference between substring and substr in JS

The substring method was used in the project before, because C # also has the method of intercepting the string substring, at that time did not think much of the two methods when the use of the same. In this way, directly in C # in the use of substring, directly in the JS substring, in the actual project, sometimes can get the right results, but sometimes the results are very confusing, and then after careful debugging tracking only to find, The original is JS in substring method and C # substring method is not the same. The method of string interception in C # is already simple, and is no longer described here. Mainly talk about a JS in the substring method, and then talk about the Substr method.

Substring:

The method can have one parameter or two parameters.

L One parameter:

Example: Var str= "Olive";

Str.substring (3);

Result: "VE"

Note: When substring has only one argument, the argument represents the intercept from the beginning of the string,

Intercept straight to the end of the string.

L Two parameters:

Example: Var str= "Olive";

1) str.substring (3,4);

2) str.substring (3,2);

Results: 1) "V" 2) 0

Note: When substring has two parameters, the first argument represents the interception from the beginning of the string, and the second argument represents the intercept to the first few of the strings. This is a different point in C # in which the characters are intercepted, which leads to different results.

SUBSTR:

The method can also have one or two parameters.

L One parameter:

Note: When substr a parameter, the action is the same as a parameter of the substring method.

L Two parameters:

Example: Var str= "Olive";

1) str.substr (3,2);

2) str.substr (3,4);

Results: 1 "VE" 2) "VE"

Note: When the substr has two parameters, the first parameter represents the interception from the beginning of the string, and the second parameter represents how many bits of string to intercept. This is the same as the character interception in C #, so in future use, if you want to avoid the problem of interception, it is best to use substr. 2 $.extend ()

Because there are some places in the project to see useful to this method, then do not know what it means, see a lot of thought

Solve it. Originally this method is very useful, more used in writing plug-ins, of course, it itself has some overloaded prototypes. 2.1 Extend (result,item1,item2 ...)

This method is mainly used for merging all the parameter items into result and returning result, but this

The sample will destroy the structure of result. 2.2 Extend ({},item1,item2,......)

With this method, you can combine the resulting results into {} and return them without breaking the structure of the original item.

Example:

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

Var item1={name: "Momo", Sex: "Gril"};

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

Results:

Result={name: "Momo", Age:23,sex: "Gril"};

Description

The above results show that the Extend method merges all the items into {}, but it's a bit more careful to see that the name: "Momo" in Item1 covers the item's name: "Olive". Please look down. 2.3 Extend (bool,{},item1,item2 ...)

The Extend method also has overloads with bool parameters.

A bool argument of TRUE indicates a deep copy, false to a shallow copy. You can use the example to illustrate:

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);

Results:

Result={name: "Olive", Age:23,sex: "Gril", Address:{provice: "Henan", City: "Beijing"};

Result1={name: "Olive", Age:23,sex: "Gril", address:{City: "Beijing"};

Description

The above results show that when the parameter is ture, in the case of a deep copy, when the subkey in the subkey Item1 has a different value than the same property as the subkey in item, the value of the ITEM1 item overrides the value in the Item subkey, and when the child Item1 property is not the same as the property in item, is merged with the item.

When the argument is false, the property value of the Item1 item1 the value in the item to fully overwrite the subkey in the subkey in the child item, as well as the child Item property in the item. 2.4 $.extend (item)

The method is to merge the item into the global object of jquery, which is equivalent to adding a

static methods (which correspond to the static method here, and of course the instance method, are described behind).

Example:

$.extend ({sayhello:function (value) {alert ("Hello" +value);});

Once you have written this, you can call the SayHello method directly:

$. SayHello ("Olive");

Description: This method is equivalent to adding a new method to the jquery class. 2.5 $.fn.extend (item)

The above mentioned $.extend (item) is to add a static method for the jquery class, then here the $.fn.extend (item

is to add an instance method to each instance.

Example:

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

After you have written this, you can call the method after you have obtained each example:

$ ("#id"). Hello ("Olive");

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

When I first saw this type of writing, confused, unintelligible. I found some information on the internet before I got a little understanding.

Let's look at the contents of the first bracket: function ($) {...}, this is not a functional anonymous. But its formal parameters are rather odd, which is $, mainly to not conflict with other libraries.

This makes it easier to understand that the first parenthesis defines an anonymous function, which we call a function with parentheses and arguments, but because of the precedence of the operator, the anonymous function we define needs to be enclosed.

Now I think you know what that means. The first bracket indicates that an anonymous function is defined, and then the second function represents the argument passed by the function, and the whole combination means that an anonymous function is defined and then called, and the function's argument is jquery.

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

This method is used to store the developed plug-ins, and when executing the code, the DOM object does not necessarily load. The opposite is $ (function () {}), which is loaded when the page's Dom object is used. In fact, the full write of the method is: $ (document). Ready (function () {});

Well, today summed up here, mainly with the writing plug-ins related to the commonly used methods, I hope to give you some help.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.