phương pháp gọi trong module RequireJs từ các phần tử HTML như bộ xử lý onclick

Question

Tôi đang thay đổi một dự án từ một cấu trúc mô-đun trình duyệt theo kiểu "cũ" sang "mới" browser- hay-server-side-javascript mô-đun cấu trúc với require.js.

Trên client Tôi đang sử dụng một ngoại vi tổ chức jQuery, vì vậy tôi bắt đầu từ ví dụ họ đưa ra trong kỹ thuật "use priority config" của README:

<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> 

này được thực sự làm việc ổn thôi. Nhưng tôi muốn xuất chức năng từ chính sang trang web HTML. Ví dụ:

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

Trước khi lắp vào kiểu mô-đun bộ xử lý AMD, tôi đã tiếp xúc với chức năng từ các tập tin khác nhau của tôi bằng cách tạo ra một đối tượng từ điển trong không gian toàn cầu:

// main.js 

var MyApi = {}; 

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

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

Nhưng tôi không biết cách tiếp cận đúng trong require.js là gì. Có thể đặt các câu lệnh require vào HTML của các thẻ <script> và sau đó đặt tên mô-đun để nó có thể được sử dụng từ bên trong trang web không? Hoặc điều này luôn luôn được thực hiện tự động bên trong main.js, chẳng hạn như $('#foobutton').click(...)?

Answer 1

Một lợi ích từ việc sử dụng AMD là giảm nhu cầu về không gian tên. Cố gắng tạo ra chúng một lần nữa với RequireJS sẽ đi ngược lại các mẫu mà AMD khuyến khích.

Đối với việc sử dụng main.js, điều này chỉ thực sự phù hợp khi bạn có một ứng dụng trang và tất cả mã của bạn đều được tham chiếu từ một nơi. Bạn được tự do thực hiện các cuộc gọi bổ sung để yêu cầu và tải các mô-đun khác khi bạn cần chúng.

Sử dụng ví dụ của bạn từ trên cao, bạn có thể tiếp cận nó theo cách này:

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(); 
    }); 

}); 

Sau đó, trong yêu cầu trang của bạn tệp page.js có yêu cầu.

Sử dụng ví dụ của bạn ở trên:

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

Hoặc tải nó trong trang tiếp tục xuống:

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

Một số điểm bổ sung

• Sử dụng mô hình trên, trang .js có thể dễ dàng yêu cầu nhiều khác mô-đun để tải các chức năng liên quan đến trang khác.

• Nơi trước khi bạn đính kèm thành viên vào không gian tên chung của mình, bạn giờ chia mã đó thành các mô-đun riêng biệt có thể được sử dụng lại trên bất kỳ trang nào. Tất cả đều không phụ thuộc vào một đối tượng toàn cầu.

• Sử dụng đòi hỏi theo cách này để đính kèm các sự kiện để các yếu tố DOM của bạn nhiều khả năng rely on the DOM Ready module sẽ được cung cấp bởi RequireJS

Answer 2

đặt onclick="" bên trong đánh dấu của bạn cảm thấy trình bày hỗn hợp dơ bẩn với nội dung. Tôi khuyên bạn nên thêm một khối <script> và đặt require vào trong đó và một lần bên trong cuộc gọi lại và bên trong một số khác bên trong $(document).ready() nếu cần, sau đó kết nối các trình xử lý sự kiện của bạn theo cách thông thường: $('#node').click(...). Nếu bạn có thể làm điều này một cách tổng quát đủ để nó có thể áp dụng cho nhiều trang, thì hãy đặt nó bên trong một tệp bên ngoài được rút gọn, kết hợp và lưu trữ. Nhưng thông thường, những điều này kết thúc bằng từng trang cụ thể, do đó, thẻ <script> ở cuối trang là giải pháp tốt để tránh yêu cầu tài nguyên bên ngoài khác.

Answer 3

Bạn cũng có thể thiết lập các tài liệu tham khảo trên lớp cửa sổ javascript của.

Ở dưới cùng của các module ứng dụng window.MyApi = MyApi;

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

Answer 4

Một giải pháp là chỉ cần sử dụng mã như thế (tất nhiên requirejs phải được thêm vào trang):

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