RequiereJs 학습노트--RequireJS의 유래와 쓰레기 회수 메커니즘 이해의 클로즈업

Why?왜 RequireJs를 사용합니까?

프로그래머는 아무리 주석을 잘 써도 대형 프로젝트의 코드를 유지하기 어렵다.100줄 문제 없어, 1000줄 문제 없어, 3000줄은?5000행은요?나는 한 번 훑어보기만 해도 많은 시간을 들여서 정력을 크게 낭비했다.

그럼 어떡하지?뜯다

3000줄의 프로젝트를 수백 줄, 수백 줄의 작은 프로젝트로 분해하다.가장 멍청한 방법은 Scrip을 쓰는 거예요.

/*topbar    */
var $topbar=$('topbar')
//  100 
$topbar.on('click',function(){
  console.log('topbar')
})
/*$banners    */
var $banners=$('banners')
//  100 
$banners.on('click',function(){
  console.log('topbar')
})
/*slides    */
var $slides=('slides')
//  100 
$slides.on('click',function(){
  console.log('topbar')
})

이렇게 해서 코드를 몇 부분으로 나누는 데 성공했다.우리는 코드들을 모두 분리해서 수정된 위치를 잘못 찾지 않도록 매우 기뻤다.
그러나 이렇게 또 하나의 문제가 생겼다. 만약 어느 사람이 천박하게 다른 부분 사이를 억지로 호출한다면 어떻게 하겠는가?내가 원래 잘 구분해 놓은 다른 단락의 코드가 또 뒤죽박죽이 되어 정리할 수 없게 될 것이다.

패키지 해제 문제:

그래서 똑똑한 전단은 즉각 집행 함수를 사용하여 격리를 하고 서로 다른 구역 간의 코드를 함수 내 코드로 바꾸는 것을 생각했다. 즉, 그것을 국부 변수로 만들어 함수에 넣는 것이다.(ES6에서 함수를 즉시 실행하는 것은 let이 존재하기 때문에 쓸데없는 말이다.)
function xxx(){
var $topbar =$('#topbar')
$topbar.on('click'),function(){
console.log('topbar')
}
함수 역할 영역의 블록이 나왔습니다. $topbar는 Undefined입니다. 그러면 전역 변수를 제거할 수 있습니다.
그러나 이렇게 또 하나의 문제가 생겼다. 우리는 함수 xxx()를 다시 전역 변수로 바꾸었다.이것은 매우 경직되어 있다. 우리는 전체 국면의 변수를 없애지 않았고, 하나를 없애고 또 하나를 사용했다.
그래서 또 하나의 똑똑한 앞머리가 사용을 생각했다!function.
이렇게 하면 모듈을 수정할 수 없다는 장점이 있다.이것이 바로 함수를 즉시 집행하는 의미로 환경을 분리하여 각 모듈 간에 서로 간섭하지 않도록 할 수 있다.
그런데 갑자기 새로운 수요를 발견했다고 쓰여 있다. 이미 격리되었으나 다른 모듈에서 기능을 하려면 이 작용역 내의 함수를 호출해야 하는데 어떡하지?

함수 작용역은 서로 방문할 수 없다. 우리는 작용역을 뚫을 수 없지만, 우리는 교량을 만들 수 있다.

우리가 하나의 작용역으로 새로 태어날 때마다 그것은 외딴 섬에 해당한다.
그럼 두 역할 영역이 교류를 하게 하려면 어떻게 해야 하나요?
전단들은 함수 안에서 윈도우를 사용할 것을 자연스럽게 생각했다.xxyyy=xxxyyy, 함수 내의 xxyyy를 window에 비추면 전역적으로 접근할 수 있지 않습니까?기지가 넘치네.
그러나 이렇게 해서 또 하나의 문제가 발생했습니다. 사용자name을 전역에 비추었습니다.만약 조심하지 않아 수정을 잘못하면 어떻게 합니까?역시 부적당하다.
저희가 필요한 게 뭐예요?username은 읽을 수 있고 쓸 수 없습니다.
그래서:
window.userGetter={
nameGetter:function(){
return user.name
},
ageGetter:function(){
return user.age
}
}
우리는 이 문제를 해결하기 위해 클로즈업을 한 번 사용했다.다른 역할 영역은user만 읽을 수 있고 user를 변경할 수 없습니다.

가방을 닫는 곳은 어디입니까?

여기서 내 이해를 말해봐.
패킷을 닫는 용도는 위와 같다. 하나의 독립된 작용역이 있어 전체 변수를 통해 내부의 변수를 직접 비출 수 있다.그러나 내가 폭로하면 일정한 위험이 있고 수정되기 쉽다. 그래서 나는 변수를 폭로하지 않고 함수를 폭로한다.이 함수는 이 변수를 수정할 수 있지만, 유한한 조작만 할 수 있다.외부에서 함수 이름만 알고 접근하면 실제로 자신이 조작한 변수 이름이 무엇인지 몰라서 변수의 값을 보호한다. 클립은 일종의 작용역의 특수한 사용 방식이다.
개인이 정의하는 경우:

  ：      ，             ，                    。

폐쇄의 작용 메커니즘은 JS의 쓰레기 회수 메커니즘으로 설명하면 비교적 명확할 수 있다고 생각합니다.
만약 내가 함수 a를 정의하고 함수 a에returnb를 썼다면.
그리고 var fb=a () 를 정의하고 호출합니다.
그러면 fb는returnb 패키지 함수의 인용입니다.var fb를 실행한 후에 a ()를 호출했습니다. 역할 체인은 함수 b → a () → window입니다.
fb는 변수를 찾을 때까지 순서대로 위로 찾습니다. (찾지 못하면undefined)
JS 쓰레기 회수 메커니즘은 인용하지 않으면 소각된다. 여기서 알 수 있듯이 역할 영역 체인에서 a()는 fb에 인용되고 b는 a()에 인용된다. 즉, fb의 인용이 존재하면 b는 소각되지 않는다는 것이다.
참고로 방법은 변수에 접근하고 변수는 메모리에 존재하기 때문에 메모리를 더 많이 사용할 수 있어야 한다.
——————————————————————————————————————————————
본론으로 돌아가다.이렇게 사용하면 이미 모든 문제가 해결된 것 같다.하지만 곧 일이 터질 것 같아서 기분이 나빠졌다.
코드는 전혀 관련이 없는데 왜 한 파일에 넣어야 합니까?너무헤어지자.
그래서:
topbar로 뜯어요.js,slide.js,banner.js, 그들 사이는 근본적으로 서로 영향을 줄 수 없다.완벽하다간단하고 거친 모듈화!!그렇게 빙빙 돌려서 뭐해!!!차라리 그림을 자르는 방법이 낫다!!!
전단 엔지니어: 너야, 어쨌든 Naive.
그럼 제가 몇 가지 기능을 썼는데 다시 쓰고 싶지 않아요. 예를 들어 topbar와banner는 비슷한 기능을 가지고 있어요. 저는 그들 중에서 공통된 부분을 쓰고 싶은데 어떻게 해야 하나요?플러그인을 쓰세요.골치 아픈 일이 또 생겨서 그들 사이는 서로 방문할 수가 없잖아!내가 써도 다른 JS 파일에서 호출할 수 없어.너 이렇게 모듈화하면 좀 뻣뻣하지 않니?예를 들면 다음과 같습니다.
new Plugin({element:'#banners>slides.js.'})
이 플러그인을 쓴 후에, 나는 우선plugin을 호출할 수 있을 뿐, 다른 것은 호출할 수 없다.순서가 정해졌다.
두 개의 국부 작용 영역이 window가 없으면 다른 부분을 영원히 호출할 수 없다는 것을 우리는 알고 있다.
하지만 JS 파일을 나눠준 후에 내가 이렇게 하는 것은 헛수고이다. 일단 내가 의존하려면 전체 국면에 노출되어야 한다.
전체 국면에 노출된 변수가 너무 많아서 짜증난다.그래서 똑똑한 앞머리에 먼저 윈도우를 만들었어요.app={}, 그리고 모든 것을 window에 마운트합니다.앱에서.그러면 나의 모든 호출은 app에서 호출된 것이고 전체 변수만 사용했다.시대를 뛰어넘는 방법이 아닐까!!(옆사람: 형제야, 너 자신을 속이는 거잖아...폭로할 게 하나도 없잖아)
이 방안은 전방에서 오랫동안 유지됐다.가장 유명한 라이브러리는 다음과 같습니다.
Jquery($기호), YUI 등.그들은 모두 이렇게 한다
리퀴드 Js가 나타날 때까지
Jquery의 방법은 변수를 분할하는 것은 바로 함수를 실행해야 하는 것이 아닙니까? 그럼 저에게 전해 주세요. 제가 실행해 드릴게요.위의 요구 사항을 JQ로 작성하면 JQ에 마운트합니다.
var Plugin=$.Plugin
그리고 $에서 내가 원하는 함수를 찾으세요.이런 방식으로 우리는 명명 공간이라고 부른다. (모든 이름은 같은 공간으로 마운트된다.)
requireJS: 난 네가 이 방법이 괜찮은 것 같아. 그럼 난...명명공간의 이름을 고정시키겠습니다.스타를속이냐형제!!)
window.require(['./plugin.js'],function(Plugin ))
이어서 메일만 쓰면 돼요.main.js는 세 개의 js에 의존했다고 성명했다. 각각 A\B\C.
ABC에서 분류를 진행하여 의존 순서를 성명하였으며, 모두 불러온 후에main을 실행하였다.js
QQ 이미지 20170613134855
그래서 RequireJS는 아주 좋은 창고가 되었어요. 오늘까지 계속...
응, 다음은 어떻게 사용하는지 배우는 거야. 이 구덩이는 천천히 채워.