여러 파일에 걸친 IIFE

Question

같은 IIFE에서 실행하기 위해 2 개 이상의 개별 파일로 정의 된 자바 스크립트 코드가 있습니까? 나는 이것을 달성하기 위해 꿀꺽 꿀꺽 거리는 도구 같은 도구를 사용하는 것에 익숙하다.

마치 평범한 문제처럼 보입니다. 내 코드를 정리하고 자체 파일 (분리 된 녹아웃 뷰 모델)로 분리하려고합니다. 그러나 나는 그들 모두가 같은 기능을 수행하고 지구를 오염시키지 않기를 바랍니다.

Answer 1

현대적인 방법은 모든 것을 IIFE에 넣는 대신 모듈을 사용하는 것입니다. 현재 모듈을 사용한다는 것은 RequireJS, SystemJS, Webpack, Browserify 등의 모듈 번들을 사용한다는 것을 의미합니다. 중기 적으로는 원하는 경우 브라우저에서 ES2015 + 모듈을 직접 사용할 수도 있고 또는 번들러를 다시 사용할 수도 있습니다. 그것들을 하나의 파일로 묶어 라. (당신은 바벨과 같은 transpilers과 ES2015 + 모듈 구문 오늘을 사용할 수 있지만, 당신은 여전히 ​​들러가 필요합니다.) 당신은 지금 RequireJS를 사용하지만 define 기능을 사용하지 않을 언급 한

. 일러스트레이션을 위해서 대략 모듈을 정의하는 방법 (저는 Require의 구문을 좋아하지 않지만 Babel을 사용하여 ES2015 구문을 추출 할 수 있습니다)

define("my-component", ["ko"], function(ko) { 
    // ...define the component... 

    // Return it 
    return MyComponent; 
}); 

그건 : KO로 구성 요소 정의 모듈

1. 이 모듈이라고 말한다을 my-component (모듈 이름, 옵션 그래서 예를 들어 응용 프로그램의 최상위 모듈은을 가질 필요가 없다 이름)
2. 모듈 (ko) (Knockout을 제공함)에 달려 있다고합니다.

   define(["my-component", "another-component"], function(MyComponent, AnotherComponent) { 
       // use MyComponent and AnotherComponent here 
   }); 
   

   : 그 의존성은 당신이 내 응용 프로그램에

그런 다음 모듈에 의해 정의 된 최상위 가지로 모듈을 MyComponent을

반환 값을 정의하는 데 사용하는 콜백에 대한 인수로 제공되는 방법을주의

단순하게하기 위해 그룹에서 일반적으로 사용되는 다른 모듈을 그룹화하는 모듈을 사용할 수도 있습니다.

my-component.js : ES2015 + 구문 대신에

import ko from "./ko"; 
// ...define MyComponent... 
export default MyComponent; 

app.js :

import MyComponent from "./my-component"; 
import AnotherComponent from "./another-component"; 

// ...use them... 

은 물론, 두 예제는 매우 간소화를하고 당신이 할 수있는 더 많은이있다.

Answer 2

이것은 두 가지 개별적인 문제입니다.

1. IIFE를 여러 파일로 확장 할 수 있습니까?
2. 여러 파일에서 클래스/함수/etc를 전역 범위에 적용 할 수 있습니까? 예!

   FILE3

   이를 달성하기위한 방법 (101)이 존재하는 매우 단순한 예로서

   myNS.OtherViewModel = function() { ... } 
   

   myNS.MyViewModel = function(){ ... } 
   

   var myNS = {}; 
   

   파일 2 FILE1

.