은 즉시 실행되는 함수 인 Immediately Invoked Function Expression을 설명합니다. 표현.
다음 코드와 같이 익명 즉시 실행 함수입니다.
(function(window, undefined){ // 代码... })(window);
2.1 Wrap function(){}
괄호의 의미
이 괄호의 목적은 function(){}
를 표현식으로 변환하는 것입니다. 일부 라이브러리의 소스 코드와 마찬가지로 저는 대신 다음 방법을 사용하는 것을 좋아합니다:
~function(){ // 代码... }();
또는 이 방법:
+function(){ // 代码... }();
사실 효과는 동일합니다. function(){}
쉽게 실행할 수 있도록 실행 가능한 표현식 공식으로 변환합니다.
괄호를 제거하면 오류가 보고됩니다. 단순 function(){}
은 실행 가능한 표현식이 아니기 때문에 오류가 직접 보고됩니다. 아래와 같습니다.
2.1 두 번째 괄호의 의미
이해 첫 번째 괄호의 의미를 이해한 후 두 번째 괄호는 매우 간단하게 표현식을 실행하는 것입니다.
매개변수를 설명하기 위해 이 코드를 예로 듭니다.
var wall = {}; (function(window, WALL, undefined){ })(window, wall);
매개변수는 형식 매개변수와 실제 매개변수로 구분됩니다. 세 개의 매개변수 function(window, WALL, undefined)
는 형식 매개변수이고 두 번째 괄호 (window, wall)
안의 두 매개변수는 실제 매개변수입니다.
은 window == window
, wall == WALL
로도 이해될 수 있습니다.
2.1 일반 형식 매개변수
일반 형식 매개변수는 전달되는 window
및 wall
과 같은 실제 변수 를 나타냅니다. 모든 유형의 변수에 대해 지정됩니다. 형식 매개변수는 실제 매개변수에 해당합니다
2.2 특수 형식 매개변수 undefound
형식 매개변수에 대해 추가로 undef를 작성해야 하는 이유는 무엇입니까? 주제.
이 예에서 볼 수 있듯이 실제 매개변수는 2개, 형식 매개변수는 3개뿐입니다. 따라서 함수가 실행되면 형식 매개변수 undefined
에는 기본적으로 정의되지 않은 값이 할당됩니다.
형식 매개변수 undefined
의 기능은 다음과 같습니다.
2.2.1 undefound라는 특수값이 악성코드에 의해 변조되는 것을 방지합니다.
IE6 등 하위 버전의 브라우저에서는 undefine을 수정할 수 있습니다. 이 특별한 값을 수정한 후에는 다음과 같은 판단이 무효화됩니다.
if(wall == undefined){ // 代码... }
따라서 여기에 추가 형식 매개변수를 추가하는 목적은 이러한 상황이 발생하는 것을 방지하는 것입니다. 이 IIFE 범위 내에 있는 한 undefound 는 정상적으로 얻을 수 있습니다.
2.2.2 압축된 코드는 정의되지 않은 것을 압축할 수 있습니다
정의되지 않은 것은 형식 매개변수로 사용되기 때문에 YUI 압축기와 같은 코드 압축 도구는 관련 값을 압축하여 작은 파일 크기를 줄일 수 있습니다.
4.1 공통 글쓰기
var wall = {}; // 声明定义一个命名空间wall // 定义方法 (function(window, WALL, undefined){ // 给wall命名空间绑定方法say WALL.say = function(){ console.log('hello'); }; })(window, wall); (function(window, WALL, undefined){ // 给wall命名空间绑定方法 whoIam WALL.whoIam = function(){ console.log('wall'); }; })(window, wall); // 调用 wall.say(); wall.whoIam();
먼저 네임스페이스를 정의한 후 이 네임스페이스에 항목을 추가합니다. 이것은 가장 일반적인 글쓰기 방식이며 가장 이해하기 쉽습니다.
단점은 해당 바인딩 코드를 실행하기 전에 네임스페이스를 선언해야 한다는 것입니다. 순차적 로딩에 문제가 있습니다.
4.2 증폭 모드
var wall = (function(window, WALL, undefined){ if(typeof WALL == 'undefined'){ WALL = {}; } // 给wall命名空间绑定方法say WALL.say = function(){ console.log('hello'); } return WALL; // 返回引用 })(window, wall); var wall = (function(window, WALL, undefined){ if(typeof WALL == 'undefined'){ WALL = {}; } // 给wall命名空间绑定方法 whoIam WALL.whoIam = function(){ console.log('wall'); } return WALL; // 返回引用 })(window, wall); // 调用 wall.say(); wall.whoIam();
증폭 모드의 장점은 코드가 로드되는 순서를 고려할 필요가 없다는 것입니다.
js에서는 wall
변수에 대해 반복적인 var 선언을 허용하므로 이 코드가 실행될 수 있습니다.
일반적인 글쓰기에서 주의해야 할 문제 없이 IIFE 함수를 여러 파일로 분할하여 로드할 수 있습니다.
주의사항:
1. IIFE의 헤더는 먼저 네임스페이스가 인스턴스화되었는지 여부를 확인해야 합니다. 인스턴스화되지 않은 경우 인스턴스화합니다.
2. IIFE가 끝나면 네임스페이스에 대한 참조가 반환되어야 후속 코드에서 최신 wall
네임스페이스 콘텐츠를 얻을 수 있습니다.
4.3 와이드 증폭 모드
(function(window, WALL, undefined){ // 给wall命名空间绑定方法say WALL.say = function(){ console.log('hello'); } })(window, window.wall || (window.wall = {})); (function(window, WALL, undefined){ // 给wall命名空间绑定方法 whoIam WALL.whoIam = function(){ console.log('wall'); } })(window, window.wall || (window.wall = {})); // 调用 wall.say(); wall.whoIam();
와이드 증폭 모드에서 주의할 점: 는 실제 매개변수 부분의 window.wall || (window.wall = {})
입니다. .
속임수를 사용하려면 ||연산자를 사용하세요.
window.wall
이 인스턴스화되면 정의되지 않습니다. 그런 다음 window.wall
의 참조를 직접 반환하고 이를 형식 매개변수 WALL
에 할당합니다. || 연산자 뒤에 오는 내용은 실행되지 않습니다.
window.wall
이 아직 인스턴스화되지 않은 경우 인스턴스화합니다. 여기서 주목해야 할 점은 인스턴스화는 오류가 보고되지 않도록 괄호로 묶고 표현식으로 변환하여 실행해야 하는 할당 작업이라는 것입니다.
표현식 (window.wall = {})
이 실행된 후 새 객체 window.wall
에 대한 참조가 반환됩니다.
宽放大模式的好处:是可以切割成多个文件进行加载,而不必考虑文件加载的先后顺序,不存在强耦合关系。
当然,如果IIFE里面的方法互相引用,还是存在加载依赖的问题。这个问题可以用加载器Require.js等工具解决,这里就不讨论了。
;(function(window, WALL, undefined){ // 给wall命名空间绑定方法say WALL.say = function(){ console.log('hello'); } })(window, window.wall || (window.wall = {}));
眼尖的已经看出区别了,就是文件开始的地方,先写上分号;
。
这样,多个文件合并的时候,才不会出现收尾相接,代码出现错乱的问题。比如下面这种情况:
// a.js 文件 wall.log() // b.js 文件 (function(window, WALL, undefined){ // 给wall命名空间绑定方法say WALL.say = function(){ console.log('hello'); } })(window, window.wall || (window.wall = {}));
由于a.js文件的wall.log()
少写了分号,跟b.js文件合并后,js就会认为‘wall.log()(...)’是需要这么执行的,结果代码就报错了。
觉得不错的,可以关注<a href="http://www.php.cn/js/js-weixinapp-module.html" target="_blank">模块化</a>
这个系列的文章,容我后续码字,敬请期待!
위 내용은 자바스크립트 모듈러 프로그래밍에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!