js 패키지 와 역할 영역 분석

6884 단어 js포장 하 다역할 영역
기본 코드 는 다음 과 같 습 니 다

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>  
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
<script type="text/javascript">    
      var text="test"; 
   var   t=new functionTest(text); 
    function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function ()
     {      
        alert(alertText);
     } 
      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }
    </script>
<body>
 <input type="button" id="btnSave" class="button" value="  "  />
 <input type="button" id="btnCancel" class="button" value="  " onclick="javascript:t.AlertTest;" />
</body>
</html>
.저장 을 클릭 하고 취소 할 때 일정한 조작 이 필요 합 니 다.첫 번 째 코드 는 위 와 같 습 니 다.저장 을 클릭 하면 반응 이 전혀 없습니다.이상 하 게 도 이런 가장 자주 사용 하 는 jquery 바 인 딩 사건 은 소 용이 없습니다.나중에 비교 해 보 니 바 인 딩 은$(document).ready(function(){}에서 진행 되 어야 한 다 는 것 을 잊 었 습 니 다.js 수정 은 다음 과 같다.

 var text="test"; 
   $(document).ready(function () {
      var   t=new functionTest(text); 
 });   
    function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function ()
     {      
        alert(alertText);
     } 
      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }
수정 한 후에 저장 을 클릭 하면 되 고 파 라 메 터 를 정확하게 전달 하면 서로 다른 상황 에서 서로 다른 파 라 메 터 를 전달 할 수 있다.그러나 페이지 에 탭 이 동적 으로 생 성 되 는 경우 도 있 습 니 다.이 탭 들 의 클릭 이벤트 도 처리 해 야 합 니 다.다시 취소 단 추 를 예 로 들 면 동적 생 성 이기 때문에 저장 과 같은 방법 을 사용 할 수 없습니다.onclick="javascript:t.AlertTest;"만 사용 할 수 있 습 니 다.이런 유사 한 귀속.그래서 다음 과 같은 테스트 가 있 습 니 다.수정

 <input type="button" id="btnCancel" class="button" value="  " onclick="javascript:t.AlertTest;" />
클릭 이 반응 하지 않 았 습 니 다.다음 과 같이 수정

 <input type="button" id="btnCancel" class="button" value="  " onclick="javascript:alertTestOuter;" />
클릭 했 습 니까?반응 이 없 었 습 니 다.수정 은 다음 과 같 습 니 다.

 <input type="button" id="btnCancel" class="button" value="  " onclick="javascript:alertTestOuter();" />
이번에 반응 이 있 었 습 니 다.괄호 가 한 쌍 빠 진 것 같 습 니 다.패 키 징 으로 변경 하 는 방법 은 다음 과 같 습 니 다.

<input type="button" id="btnCancel" class="button" value="  " onclick="javascript:t.AlertTest();" />
클릭 하면 반응 이 없습니다.Uncaught Reference Error:t is not defined 는 변수 t 가 정의 되 지 않 은 것 같 습 니 다.역할 영역 이 작 동 합 니 다.그래서 js 를 다음 과 같이 수정 합 니 다.즉,변 수 를 밖 에 두 고 할당 값 을 안에 두 는 것 입 니 다.바로 다음 과 같 습 니 다.

  var   t;
      var text="test"; 
   $(document).ready(function () {
          t=new functionTest(text); 
 });   
    function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function ()
     {      
        alert(alertText);
     } 
      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }
마지막 단 계 는 호출 을 취소 하 는 방법 에 파 라 메 터 를 어떻게 전달 합 니까?첫 번 째 단 계 는 js 를 다음 과 같이 수정 합 니 다.즉,호출 취소 함 수 를 전달 해 야 하 는 매개 변수 로 바 꾸 는 방법 입 니 다.코드 는 다음 과 같 습 니 다.

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

      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }
해당 하 는 html 수정 은 다음 과 같 습 니 다.

 <input type="button" id="btnCancel" class="button" value="  " onclick="javascript:t.AlertTest('124');" />
클릭 하여 파 라 메 터 를 정확하게 전달 하 는 지 확인 하 십시오.모든 것 이 정상 적 인 것 같 습 니 다.이렇게 하면 완 성 된 것 같 습 니 다.마지막 으로 js 코드 정리:통용 되 는 js 코드 를 js 파일 에 넣 고 여기에 common.js 에 넣 었 습 니 다.서로 다른 코드 는 htm 에 넣 었 습 니 다.수 정 된 모든 코드 는 다음 과 같 습 니 다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>  
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="common.js" type="text/javascript"></script> 
<script type="text/javascript">  
      var   t;//       ，       ，       t
      var text="test"; //     
   $(document).ready(function () {      
          t=new functionTest(text); // t  ，         
 });
    </script>
<body>
 <input type="button" id="btnSave" class="button" value="  "  />
 <input type="button" id="btnCancel" class="button" value="  " onclick="javascript:t.AlertTest('124');" />
</body>
</html>
common.js 코드:

 function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function (text)
     {      
        alert(text);
     }

      function alertTestInnert()
     {
        alert(alertText);
     } 
    }   
C\#문자열 자체 감소 알고리즘 상세 설명
js 정규 표현 식 사용 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage