모듈형 프로그래밍이란 무엇입니까? JS 모듈러 프로그래밍 요약

1 모듈러 프로그래밍이란 무엇입니까

2 모듈러여야 하는 이유

3 AMD

4 CommonJS

5 요약

기술을 이해하려면 먼저 기술의 배경과 기술이 해결하는 문제를 이해해야 합니다. , 오히려 그것을 사용하는 방법을 아는 간단한 문제여야 합니다. 이전 상태는 실제 원인과 이점을 모르고 단지 이해를 위해 이해하는 것이었을 수도 있으니 오늘은 정리해 보겠습니다.

1 기능을 결정하고, 이들 모듈 사이에 필요한 연결을 설정하고, 모듈의 상호 협력을 통해 전체 기능의 프로그래밍 방법을 완성합니다.

예를 들어 java의 import, C#의 using. 제가 이해하는 바는 모듈식 프로그래밍을 통해 서로 다른 기능을 분리할 수 있으며 한 기능을 수정해도 다른 기능에 영향을 미치지 않는다는 것입니다.

2 C.js 사용자가 B.js를 참조할 줄만 알면 A.js를 참조하지 않게 되어 프로그램 오류가 발생하고 파일 참조 순서도 틀릴 수 없습니다. 이는 전체 코드의 디버깅 및 수정에 불편을 초래합니다.

또 다른 문제가 있습니다. 위 코드는 전역 변수를 쉽게 오염시킬 수 있는 두 개의 전역 변수를 노출합니다.

3 AMD

AMD는 비동기 모듈 정의입니다. 모듈은 비동기적으로 로드됩니다. 모듈 로드는 후속 명령문의 실행에 영향을 주지 않습니다.

다음 상황

// A.jsfunction sayWord(type){
    if(type === 1){
        console.log("hello");
    }else if(type === 2){
        console.log("world");
    }
}// B.jsfunction Hello(){
    sayWord(1);
}// C.jsHello()

1이 페이지에 먼저 인쇄된 후 2018년 8월 9일이 인쇄된다고 가정해 보겠습니다. 따라서 AMD 로딩은 후속 명령문 실행에 영향을 미치지 않습니다.

비동기적으로 로드되지 않으면 어떻게 되나요?

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return '2018-08-9'
            }            if(type === 2){                return '2018 年 8 月 9 日'
            }
        }
    }
})// a-util.jsdefine(['./util.js'],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine(['./a-util.js'],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})
console.log(1);// 使用// <script src = "/require.min.js" data-main="./main.js"></script>

다음 명령문은 실행되기 전에 로드될 때까지 기다려야 합니다. 로드 시간이 너무 길면 전체 프로그램이 여기에 멈춥니다. 따라서 브라우저는 리소스를 동기적으로 로드할 수 없으며 이는 AMD의 배경이기도 합니다.

AMD는 브라우저 측의 모듈 개발을 위한 사양입니다. 이 사양은 원래 JavaScript에서 지원되지 않기 때문에 AMD 사양을 사용하여 개발할 때 타사 라이브러리 기능, 즉 RequireJS를 도입해야 합니다.

RequireJS가 해결한 주요 문제

• JS를 비동기식으로 로드하여 페이지 응답 손실을 방지하세요

• 1，然后才会打印 2018 年 8 月 9 日。因此 AMD 的加载并不会影响后续的语句执行。

  如果不是异步加载会出现什么情况呢

  var a = require('a');
  console.log(1)

  后面的语句需要等待 a 加载完成才能执行，如果加载时间过长，整个程序都会卡在这。因此，浏览器不能同步加载资源，这也是 AMD 的产生背景。

  AMD 是在浏览器端实现模块化开发的规范。由于该规范不是 JavaScript 原始支持的，使用 AMD 规范进行开发的时候需要引入第三方的库函数，也就是 RequireJS。

  RequireJS 主要解决的问题

  • 使 JS 异步加载，避免页面失去响应

  • 管理代码之间的依赖性，有利于代码的编写和维护

  下面来看看如何使用 require.js

  要想使用 require.js，首先要 define

  // ? 代表该参数可选
      define(id?, dependencies?, factory);

  • id：指的是定义的模块的名字

  • dependencies：是定义的模块所依赖模块的数组

  • factory：为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

    具体的规范说明可以参考 AMD (中文版)
    举个例子，创建一个名为 “alpha” 的模块，使用了 require，exports，和名为 “beta” 的模块:

  define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
         exports.verb = function() {
             return beta.verb();           //Or:
             return require("beta").verb();
         }
     });

  一个返回对象的匿名模块：

  define(["alpha"], function (alpha) {
         return {
           verb: function(){
             return alpha.verb() + 2;
           }
         };
     });

  一个没有依赖性的模块可以直接定义对象：

  define({
       add: function(x, y){
         return x + y;
       }
     });

  如何使用

  AMD 采用 require 语句加载模块

  require([module],callback);

  • module：是一个数组，里面的成员是要加载的模块

  • callback：加载成功之后的回调函数

  例如

  require(['./a.js'],function(a){
      var date = new Date()
      a.printDate(date)
  })

  具体的使用方法如下

  // util.jsdefine(function(){
      return {
          getFormatDate:function(date,type){
              if(type === 1){                return '2018-08-09'
              }            if(type === 2){                return '2018 年 8 月 9 日'
              }
          }
      }
  })// a-util.jsdefine(['./util.js'],function(util){
      return {
          aGetFormatDate:function(date){
              return util.getFormatDate(date,2)
          }
      }
  })// a.jsdefine(['./a-util.js'],function(aUtil){
      return {
          printDate:function(date){
              console.log(aUtil.aGetFormatDate(date))
          }
      }
  })// main.jsrequire(['./a.js'],function(a){
      var date = new Date()
      a.printDate(date)
  })// 使用// 

  假设这里有 4 个文件，util.js，a-util.js 引用了 util.js，a.js 引用了 a-util.js，main.js 引用了 a.js。

  其中，data-main 属性的作用是加载网页程序的主模块。

  上例演示了一个主模块最简单的写法，默认情况下，require.js 假设依赖和主模块在同一个目录。

  使用 require.config() 方法可以对模块的加载行为进行自定义。require.config()코드 간 종속성 관리 , 코드 작성 및 유지 관리에 도움이 됩니다

require.js 사용법을 살펴보겠습니다

require.js를 사용하려면 먼저 정의해야 합니다

require.config({
    paths:{        "a":"src/a.js",        "b":"src/b.js"
    }
})

• id: 정의된 모듈의 이름을 나타냅니다

• dependents: 정의된 모듈이 의존하는 모듈의 배열

• factory: 모듈을 초기화합니다. 실행할 함수나 개체입니다. 함수라면 한 번만 실행되어야 합니다. 객체인 경우 이 객체는 모듈의 출력 값이어야 합니다.

  구체적인 사양은 AMD(중국어 버전)를 참조하세요.

  예를 들어 "alpha"라는 모듈을 만들고 require, 내보내기 및 "beta"라는 모듈을 사용합니다:

require.config({

　　　　baseUrl: "src",

　　　　paths: {

　　　　　　"a": "a.js",
　　　　　　"b": "b.js",

　　　　}

　　});

객체를 반환하는 익명 모듈:

const util = require('util');

종속성이 없는 모듈은 객체를 직접 정의할 수 있습니다:

const util = require('util');var date = new date();
util.getFormatDate(date,1);

사용 방법🎜🎜AMD는 require 문을 사용하여 모듈을 로드합니다🎜

// util.jsmodule.exports = {
    getFormatDate:function(date, type){
         if(type === 1){                return '2017-06-15'
          }          if(type === 2){                return '2017 年 6 月 15 日'
          }
    }
}// a-util.jsconst util = require('util.js')
module.exports = {
    aGetFormatDate:function(date){
        return util.getFormatDate(date,2)
    }
}

• 🎜module: 배열이고, 내부 멤버는 로드할 모듈입니다🎜
• 🎜callback: 로드 성공 후의 콜백 함수🎜
🎜예를 들어🎜

 // foobar.js
 // 定义行为
 function foobar(){
         this.foo = function(){
                 console.log('Hello foo');
        }  
         this.bar = function(){
                 console.log('Hello bar');
          }
 } // 把 foobar 暴露给其它模块
 exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar'

🎜구체적인 사용법은 다음과 같습니다🎜rrreee🎜여기에 4개의 파일이 있다고 가정하고, util.js, a-util.js는 util.js를 의미하고, a.js는 a-util.js를 의미하고, main.js는 a를 의미합니다. .js 🎜🎜그 중 data-main 속성은 웹 프로그램의 메인 모듈을 로드하는 데 사용됩니다. 🎜🎜위의 예는 기본 모듈을 작성하는 가장 간단한 방법을 보여줍니다. 기본적으로 require.js는 종속성이 기본 모듈과 동일한 디렉터리에 있다고 가정합니다. 🎜🎜모듈의 로딩 동작을 사용자 정의하려면 require.config() 메서드를 사용하세요. require.config()는 기본 모듈(main.js)의 헤드에 작성됩니다. 매개변수는 객체입니다. 이 객체의 paths 속성은 각 모듈의 로딩 경로를 지정합니다. 기본 디렉터리 변경(baseUrl)🎜rrreee🎜4 CommonJS🎜🎜commonJS는 nodejs의 모듈식 사양이며 현재 빌드 도구의 자동화 수준이 높기 때문에 npm 사용 비용은 다음과 같습니다. 매우 낮습니다. commonJS는 JS를 비동기적으로 로드하지 않고 동기적으로 한 번에 로드합니다. commonJS에는 🎜rrreee🎜와 같은 모듈을 로드하는 데 사용되는 전역 메서드 require()가 있습니다. 그러면 util🎜에서 제공하는 메서드를 호출할 수 있습니다. rrreee🎜commonJS에는 모듈 정의(내보내기), 모듈 참조(필수) 및 모듈 식별(모듈)의 세 가지 정의가 있습니다.🎜🎜exports() 개체는 유일한 내보내기 포트인 현재 모듈의 변수 또는 메서드를 내보내는 데 사용됩니다. require()는 외부 모듈을 소개하는 데 사용됩니다. 모듈 객체는 모듈 자체를 나타냅니다. 🎜🎜예를 들어🎜rrreee🎜또는 다음과 같은 방법🎜

 // foobar.js
 // 定义行为
 function foobar(){
         this.foo = function(){
                 console.log('Hello foo');
        }  
         this.bar = function(){
                 console.log('Hello bar');
          }
 } // 把 foobar 暴露给其它模块
 exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar'

5 总结

CommonJS 则采用了服务器优先的策略，使用同步方式加载模块，而 AMD 采用异步加载的方式。所以如果需要使用异步加载 js 的话建议使用 AMD，而当项目使用了 npm 的情况下建议使用 CommonJS。

相关推荐：

论JavaScript模块化编程

requireJS框架模块化编程实例详解

위 내용은 모듈형 프로그래밍이란 무엇입니까? JS 모듈러 프로그래밍 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!