Home >Web Front-end >JS Tutorial >A brief analysis of js encapsulation and scope_javascript skills

A brief analysis of js encapsulation and scope_javascript skills

WBOYOriginal: 2016-05-16 17:29:161042browse

The basic code is as follows

Copy the code The code is as follows:

<br>

Click save again. Certain operations are required when canceling. First The code for this time is as above:
Click save, but there is no response at all. It is strange that this most commonly used jquery binding event does not work. After a comparison, I found out that I had actually forgotten that the binding should be done in $(document).ready(function () {});

js was modified as follows:

Copy code The code is as follows:

 var text="test"; 
 $(document).ready(function () {
 var t=new functionTest(text); 
 }); 
 function functionTest(text)
 {
 var alertText=text 
 $("#btnSave") .click(function (e) {  
          alertTestInnert();                                     );
 } 
 function alertTestInnert()
 {
 alert(alertText);
 } } 
 } 
 } function alertTestOuter()
 {
 alert(text);
 }
 

After modification, click Save, and the parameters are passed correctly, so that different parameters can be passed at different points. 
But there is another situation where the page will dynamically generate some tags, and the click events of these tags also need to be processed. Take the cancel button as an example again. Since it is dynamically generated, you cannot use the same method as saving. 

You can only use bindings like onclick="javascript:t.AlertTest;"

. So there is a test as follows:
Modify

Copy code

The code is as follows:
No response when clicked, modify as follows

Copy code The code is as follows:

There is still no response and no error when clicking. Modify as follows:

Copy code The code is as follows:

There is a response this time. It seems that a pair of brackets are missing. . The method of modifying to encapsulation is as follows:

Copy the code The code is as follows:

No response when clicked, prompt Uncaught ReferenceError: t is not defined
It seems that the variable t is not defined and the scope is in effect. So I modified the js as follows, that is, put the variable t outside and the assignment inside, as follows:

Copy the code The code is as follows :

 var t;
 var text="test"; 
 $(document).ready(function () {
 t=new functionTest(text); 
 }); 
 function functionTest(text)
 {
 var alertText=text 
 $("#btnSave").click(function (e) { 
 alertTestInnert(); 
                                               {
 alert(alertText);
 } 
 } 
 function alertTestOuter()
 {
 alert(text);
 }



The last step is how to cancel the call Method passing parameters? 

The first step is to modify the js as follows, that is, change the function that cancels the call to a method that requires passing parameters. The code is as follows: 

Copy code

The code is as follows: var t; var text="test"; $(document).ready(function () { t =new functionTest(text);

});

Copy the code The code is as follows:

Click to see if the parameters are passed correctly. Everything is fine. It seems that it is completed.
Finally organize the js code:
Put the common js code into a js file, here put it in common.js, put different codes in htm, all the modified codes As follows:

Copy code The code is as follows:

<br>