자바스크립트 모듈식 사고

JS를 깊이 있게 연구하고 사용하면서 점차 두 가지 문제점을 발견하게 되었습니다.

(1) 이전에 작성한 JS 코드의 재사용성이 매우 낮습니다.

(2) 함수가 분산되어 있고, 예를 들어 현재 날짜를 구하고 싶고, 현재 날짜에 1을 더한 값도 구하고 싶은데, 이는 내일 날짜입니다. 이전에는 두 개의 독립적이고 관련 없는 함수로 작성했지만 지금 생각해보면 그렇습니다. 그것에 대해 실제로는 하나의 날짜 개체로 분류될 수 있습니다. 두 가지 방법으로 개체에 바인딩하는 것이 더 낫지 않습니까?

1. 먼저 모듈화를 사용해야 하는 이유를 이해해야 합니까?

모든 기능은 요구 사항을 해결하도록 설계되었습니다. 모듈화가 가져올 수 있는 장점은 다음과 같습니다.

(1) 유지 관리성. 예를 들어 모듈화를 사용하지 않은 코드를 기름과 물이 섞인 코드로 비유하면, 모듈화 이후의 코드는 기름은 기름이고 물은 물이다라는 명확한 계층구조를 갖고 있습니다. 명확한 기능. JS 모듈화의 일반적인 흐름을 언급하기 위해서는 기름과 물이 필연적으로 계층화되는 현상을 활용하는 것이 적절할 것 같습니다.

(2) 네임스페이스. 여기서는 JS의 범위에 대해 이야기해야 합니다. 범위 체인이 다시 포함됩니다. 범위 체인에 익숙하지 않다면 내 다른 기사 "JavaScript의 범위 체인 이해"를 참조하세요. JS에서는 범위를 구별하기 위해 함수를 사용합니다. 모든 함수에는 범위 체인이 있습니다. 코드를 모두 합치면 적은 수의 코드 라인이면 괜찮겠지만, 코드 라인이 너무 많으면 필연적으로 "네임스페이스 오염"이 발생하게 됩니다.

(3) 재사용성. 네임스페이스를 이해하면 네임스페이스의 도움으로 모듈 코드를 캡슐화할 수 있으므로 이 함수가 필요할 때마다 이 함수 모듈을 직접 참조할 수 있습니다.

다음으로 내 JS 코드 경로를 사용하여 코드를 모듈화하는 방법을 보여줍니다.

(1) 원래 시대: 사용할 JS를 모두 넣습니다. 코드가 쌓입니다. 페이지의 <script> 태그 쌍에 있습니다. </script>

 function f1(){
      //函数体
 }
 function f2(){
      //函数体
 }

이런 방식으로 작성하는 경우의 단점: 기본적으로 코드를 재사용할 수 없으며, 페이지와 너무 밀접하게 통합되는 문제가 있을 수 있습니다. 또한 다양한 범위 문제도 고려해야 합니다.

(2) 고대: 모듈을 객체로 작성하는 아이디어입니다. 예를 들어 페이지 음악 재생, 중지, 다음 노래, 이전 노래를 제어할 수 있는 함수를 작성하려고 합니다. musicPlayer 객체를 캡슐화할 수 있습니다

// 将基本的方法封装起来
            var musicPlayer = {

                var musicDom = null, //播放器对象
                var musicList = [], //存放歌曲列表

                // 初始化音乐播放器
                var init =  function(){
                    
                },

                // 添加一首歌曲
                var add = function(src){
                   
                },

                // 根据数组下标决定播放哪一首，索引index从0开始
                var play = function(index){
                    
                },

                // 暂停播放
                var stop = function(){
                    
                },

                // 下一首
                var next = function(){

                },

                // 上一首
                var prev = function(){

                }
            };

이때는 모듈이라고 부를 수 있습니다. 전역 범위에서는 musicPlayer 객체를 window 객체에 바인딩한 다음 musicPlayer plus를 사용할 수 있습니다. '.' 내부 메소드를 호출합니다. "musicPlayer.init();"와 같은

이 메서드에도 단점이 있습니다. 즉, 노출하려는 콘텐츠를 제어할 수 없으며 musicPlayer 개체의 내부 메서드와 변수를 외부에서 다시 작성할 수 있습니다. .

(3) 모던. IIFE(즉시 실행 기능)를 포함해 증폭 모드, 광역 증폭 모드, 전역 변수 입력

　

IIFE를 제외하고 다른 세 가지 유형을 지금까지 간략히 살펴보겠습니다. 여기서 나 자신에 대해 이야기하십시오.

-IIFE (Immediately-Invoked Function Expression)

// 创建一个立即执行的匿名函数
// 该函数返回一个对象，包含你要暴露的属性
// 如下代码如果不使用立即执行函数，就会多一个属性i
// 如果有了属性i，我们就能调用counter.i改变i的值
// 对我们来说这种不确定的因素越少越好

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
}());

// counter其实是一个对象

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined i并不是counter的属性
i; // ReferenceError: i is not defined (函数内部的是局部变量)

위 코드에서 볼 수 있듯이 counter에는 i 속성이 없고 오직 노출된 콘텐츠를 반환합니다. 이런 식으로 우리는 나를 비공개로 만들었습니다.

- 증폭 모드

내가 이해한 증폭 모드는 원래 함수를 IIFE에 매개변수로 전달한 다음 원래 함수에 새로운 확장 방법을 추가하는 것입니다. , 확장된 함수가 반환됩니다. 이는 원래 기능의 "증폭"을 달성합니다.

var module1 = (function (mod){
 　　mod.m3 = function () {
　　　　//...
 　　};
 　　return mod;
 })(module1);

이 예에서는 새로운 메소드 m3이 module1에 추가되어 반환됩니다.

- 광역 확대 모드

광역 확대 모드는 확대 모드를 기반으로 새로운 기능을 추가합니다. IIFE의 매개변수는 빈 개체일 수 있습니다.

 var module1 = ( function (mod){
 　　//...
 　　return mod;
 })(window.module1 || {});

전달된 IIFE 매개변수: window.module1이 정의된 경우 매개변수를 전달하고, 정의되지 않은 경우 빈 객체를 전달합니다.

- 전역 변수 입력

IIFE 내에서 전역 변수를 사용하려면 매개 변수를 통해 전역 변수를 전달하는 것이 가장 좋습니다.

 var module1 = (function ($, YAHOO) {
　　//...
 })(jQuery, YAHOO);

위에 표시된 코드는 jQuery 및 YUI 라이브러리의 전역 변수를 module1에 매개변수로 전달합니다.