JavaScript 패키지 사용 장면

4047 단어 JavaScript가방을 닫다
1. 패키지 닫기
자바스크립트 언어에서는 함수 내부의 하위 함수만 국부 변수를 읽을 수 있기 때문에 패키지는 다른 함수 내부 변수를 읽을 수 있는 함수입니다.그래서 본질적으로 폐쇄는 함수 내부와 함수 외부를 연결하는 다리이다.
예를 들어 다음 코드:

function f1() {
 var n = 999;
 function f2() {
 console.log(n);
 }
 return f2;
}
var result = f1();
result();//999
함수 f2는 함수 f1 내부에 포함되는데 이때 f1 내부의 모든 국부 변수는 f2에 대해 볼 수 있다.그러나 반대로 안 된다. f2 내부의 국부 변수는 f1에 대해 보이지 않는다.
이것이 바로 자바스크립트 언어 특유의'체인 작용역'구조(chain scope)입니다. 하위 대상은 모든 부모 대상의 변수를 한 단계 한 단계 위로 찾습니다.따라서 부모 대상의 모든 변수는 하위 대상에 대해 볼 수 있고 반대로 성립되지 않는다.
f2는 f1의 국부 변수를 읽을 수 있으므로 f2를 반환값으로 하면 f1 외부에서 내부 변수를 읽을 수 있습니다.
2. 패키지를 닫는 사용 장면
1.setTimeout
원래 set Timeout에서 전달된 첫 번째 함수는 매개 변수를 가지고 있을 수 없으며, 패키지를 닫으면 전참 효과를 실현할 수 있다.

function f1(a) {
 function f2() {
  console.log(a);
 }
 return f2;
}
var fun = f1(1);
setTimeout(fun,1000);// 1
2. 리셋
행동을 정의하고 사용자 이벤트에 연결합니다.코드는 보통 리셋 (이벤트가 촉발될 때 호출되는 함수) 으로 이벤트에 연결됩니다.
예를 들어 아래의 코드:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> </title>
</head>
<body>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-12">12</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-20">20</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-30">30</a>

 <script type="text/javascript">
  function changeSize(size){
   return function(){
    document.body.style.fontSize = size + 'px';
   };
  }

  var size12 = changeSize(12);
  var size14 = changeSize(20);
  var size16 = changeSize(30);

  document.getElementById('size-12').onclick = size12;
  document.getElementById('size-20').onclick = size14;
  document.getElementById('size-30').onclick = size16;

 </script>
</body>
</html>
숫자를 클릭하면 글씨체도 상응하는 크기가 된다.
3. 함수 떨림 방지
이벤트가 n초 동안 촉발된 후에 리셋을 실행합니다. 만약 이 n초 안에 또 촉발된다면 다시 시간을 재촉합니다.
실현의 관건은 바로 set Time Out이라는 함수에 있다. 시간을 저장하는 변수가 필요하기 때문에 전체 국면의 순수함을 유지하는 것을 고려하여 폐쇄를 통해 실현할 수 있다.
다음 코드와 같습니다.

/*
* fn [function]  
* delay [number]  ， 
*/
function debounce(fn,delay){
 let timer = null // 
 return function() {
  if(timer){
   clearTimeout(timer) // ， ， 。 ， 
   timer = setTimeOut(fn,delay) 
  }else{
   timer = setTimeOut(fn,delay) //  ， 
  }
 }
}
4. 개인 변수 봉인
다음 코드: js로 계수기 만들기
방법 1:

function f1() {
 var sum = 0;
 var obj = {
  inc:function () {
   sum++;
   return sum;
  }
};
 return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3
반환된 대상에서 패키지를 실행했습니다. 이 패키지는 국부 변수 x를 가지고 있고 외부 코드에서 변수 x에 접근할 수 없습니다.
방법 2:

function f1() {
 var sum = 0;
 function f2() {
  sum++;
  return f2;
 }
 f2.valueOf = function () {
  return sum;
 };
 f2.toString = function () {
  return sum+'';
 };
 return f2;
}
// f1， f2
console.log(+f1());//0
console.log(+f1()())//1
console.log(+f1()()())//2
모든 js 데이터 형식은valueOf와toString 두 가지 방법을 가지고 있습니다.null을 제외합니다
valueOf() 메서드: 지정된 객체의 원래 값을 반환합니다.
toString() 메서드: 객체의 문자열 표현을 반환합니다.
수치 연산에서는 valueOf, 문자열 연산에서는 toString 우선 호출
sum+''는 문자열 형식의 데이터입니다.
이상은 자바스크립트 클립의 사용 장면에 대한 상세한 내용입니다. 자바스크립트 클립에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!
java 그래픽 인터페이스의 레이아웃 디자인
[BOJ] 백준 15685 - 드래곤 커브

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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