호출 방법

Question

나는 "새로운"브라우저 - 또는에 "오래된"브라우저 스타일의 모듈 구조에서 프로젝트를 변경하고있어 - 서버 사이드 자바 스크립트 모듈 구조는 require.js입니다. 내가 오프 사이트를 사용하고 클라이언트에

는 jQuery를 호스팅, 그래서 나는 그들이 README의 "use priority config" 기술에주는 예에서 시작 :

<title>My Page</title> 
<script src="scripts/require.js"></script> 
<script> 
require({ 
    baseUrl: 'scripts', 
    paths: { 
     jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', 
     jqueryui: ..., 
     ... 
     ... // bunch more paths here 
    }, 
    priority: ['jquery'] 
}, [ 'main' ]); 
</script> 

이 실제로 모든 권리 노력하고 있습니다. 하지만 메인에서 HTML 웹 페이지로 기능을 내보내고 싶습니다. 예를 들어 :

<a class="button" href="#" onclick="MyApi.foo();"> 
    <img src="foo.png" alt="foo" />Click for: <b>Foo!</b> 
</a> 

는 AMD 모듈 패턴으로 피팅 전에, 나는 세계 공간에서 사전 개체를 만들어 내 다양한 ​​파일의 기능을 노출했던 :

// main.js 

var MyApi = {}; 

jQuery(document).ready(function($) { 
    // ...unexported code goes here... 

    // export function via MyApi 
    MyApi.foo = function() { 
     alert("Foo!"); 
    }; 
}); 

을하지만 나도 몰라 require.js의 올바른 접근 방식은 무엇입니까? HTML에 <script> 태그 안에 require 문을 넣은 다음 웹 페이지에서 사용할 수 있도록 모듈 이름을 지정해도됩니까? 아니면 항상 $('#foobutton').click(...)과 같이 main.js 내부에서 동적으로 수행해야합니까?

Answer 1

AMD를 사용하면 얻을 수있는 이점 중 하나는 네임 스페이스의 필요성을 없애는 것입니다. RequireJS로 다시 만들려고하면 AMD가 추진하는 패턴에 어긋납니다.

main.js을 사용하는 것과 관련하여 단일 페이지 응용 프로그램과 모든 코드를 한 곳에서 참조 할 때만 적합합니다. 필요한 경우 다른 모듈을 필요로하고 추가로로드 할 수 있습니다. 페이지 요청에서 다음

foo.js

define(['jquery'], function($) { 

    // Some set up 
    // code here 

    // Return module with methods 
    return { 
     bar: function() { 

     } 
    } 


}); 

page.js

require(['foo'], function(foo) { 

    // jQuery loaded by foo module so free to use it 
    $('.button').on('click', function(e) { 
     foo.bar(); 
     e.preventDefault(); 
    }); 

}); 

: 위에서 당신의 예를 사용

는

, 당신은 이런 식으로 접근 할 수 require가있는 page.js 파일페이지를

<script> 
    require(['page']); 
</script> 

일부 추가 점

• 을 위의 패턴을 사용 :

  위의 예를 사용 :

  require({ 
      // config stuff here 
  }, [ 'page' ]); 
  

  또는 더 아래 페이지에 넣기 .js는 쉽게 다른 많은 것을 요구할 수 있습니다. 모듈은 다른 페이지 관련 기능을로드합니다.

• 도메인 이름 공간에 회원을 추가하기 전에 은 해당 코드를 페이지에서 다시 사용할 수있는 별도 모듈로 분리합니다. 모두 글로벌 객체에 의존하지 않습니다. 당신의 DOM 요소에 이벤트를 연결하려면이 방법을 필요로 사용

• 은 RequireJS

  또한 자바 스크립트의 창 클래스에 대한 참조를 설정할 수 있습니다

Answer 2

마크 업 내부에 onclick=""을 넣는 것이 더러워진 것 같습니다. 콘텐츠와 프리젠 테이션을 혼합합니다. <script> 블록을 추가하고 그 안에 require을 넣은 다음 콜백 내부 및 다른 내부 내부에 $(document).ready()을 넣은 다음 정상적인 방법으로 이벤트 처리기를 연결하십시오 ($('#node').click(...)). 일반적으로 여러 페이지에 적용 할 수 있도록이 작업을 수행 할 수 있다면이를 축소, 결합 및 캐시 된 외부 파일에 저장하십시오. 하지만 일반적으로 이러한 것들은 페이지별로 이루어지기 때문에 페이지 하단의 <script> 태그는 다른 외부 리소스 요청을 피하기위한 좋은 해결책입니다.

Answer 3

에 의해 rely on the DOM Ready module 가장 가능성이 제공됩니다. 응용 프로그램 모듈의 하단에서

window.MyApi = MyApi;

<a class="button" href="#" onclick="MyApi.foo();"></a>

Answer 4

그냥 같은 코드 (물론 requirejs 페이지에 추가해야합니다)를 사용하는 또 다른 솔루션 :

<input type="button" onclick="(function() { require('mymodule').do_work() })()"/>