2012-02-08 29 views
32

Tôi đang có thời gian heckuva chuyển sang Dojo và cấu trúc AMD mới, và tôi hy vọng ai đó có thể làm sáng tỏ toàn bộ khái niệm. Tôi đã sống trên Google trong vài tuần qua để tìm thông tin về việc sử dụng không, nhưng cấu trúc và xu hướng thiết kế mẫu trong việc sử dụng điều này.Dojo yêu cầu() và AMD (1.7)

Tôi thấy lạ khi một ứng dụng javascript tương đối phức tạp, chẳng hạn như đối với trang chính nơi Dijits cần được tạo và tạo kiểu, các phần tử DOM được tạo, v.v ... mà tôi cần phải sử dụng, TON các mô-đun khác nhau có sẵn trong không gian tên dojo trước hệ thống AMD (hoặc ít nhất, không được gán cho 23 loại khác nhau).

Ví dụ:

require(['dijit/form/ValidationTextBox', 'dijit/form/SimpleTextarea', 'dijit/form/CheckBox', 'dijit/Dialog', 'dijit/form/Form']) 
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], 
function(ready, parser, style, registry, dom, event, construct){ 
    //...etc 
} 

Đó chỉ là một vài trong số các mô-đun cho một trong những trang tôi đang làm việc trên. Chắc chắn có một cách tốt hơn, không phá vỡ trong tương lai-phát hành cách truy cập các phương pháp này, vv Tôi có nghĩa là, tôi thực sự phải nhập khẩu một mô-đun hoàn toàn mới để sử dụng byId()? Và một cách khác để kết nối các sự kiện? Ngày đầu đó, tất cả sự lộn xộn được tạo ra bằng cách phải gán một tên biến trong danh sách đối số hàm để bám vào chỉ có vẻ như một bước lùi như vậy.

Tôi nghĩ có lẽ bạn chỉ cần require() mô-đun khi cần, chẳng hạn như mô-đun query, nhưng nếu tôi cần nhiều hơn một lần, thì rất có thể biến được gán cho nó nằm ngoài phạm vi và tôi cần đặt nó vào cuộc gọi domReady! hoặc ready. reaalllly .... ??!

Đó là lý do tại sao tôi chỉ có thể giả định đó là sự thiếu hiểu biết của tôi đối với dojo.

Tôi thực sự đã xem và tìm kiếm và mua sách (mặc dù, một bộ tiền AMD), nhưng thư viện này thực sự giúp tôi kiếm tiền. Tôi đánh giá cao ánh sáng bất cứ ai có thể đổ về điều này.

Chỉnh sửa cho Ví dụ

require(['dijit/form/ValidationTextBox']) 
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], function(ready, parser, style, registry, dom, event, construct){ 
    /* perform some tasks */ 
    var _name = new dijit.form.ValidationTextBox({ 
     propercase : true, 
     tooltipPosition : ['above', 'after'] 
    }, 'name') 

    /* 
    Let's say I want to use the query module in some places, i.e. here. 
    */ 
    require(['dojo/query', 'dojo/dom-attr'], function(query, attr){ 
     query('#list li').forEach(function(li){ 
      // do something with these 
     }) 
    }) 
} 

Dựa tắt của định dạng này, được sử dụng với nhiều ví dụ cả từ các folks toolkit võ đường cũng như các trang web của bên thứ ba, nó sẽ là, IMHO, hoàn toàn vô lý để tải tất cả các mô đun được yêu cầu như là function(ready, parser, style, registy... đầu tiên sẽ lâu hơn và lâu hơn, và tạo ra các vấn đề với các xung đột đặt tên, v.v.

Bắn lên và require() tất cả các mô-đun tôi cần trong suốt thời gian của tập lệnh có vẻ ngớ ngẩn với tôi . Điều đó đang được nói, tôi sẽ phải xem xét một số kịch bản "quản lý gói". Nhưng đối với ví dụ này, nếu tôi muốn sử dụng mô-đun truy vấn ở những nơi được chọn, tôi sẽ phải tải mô-đun đó lên phần còn lại trong câu lệnh chính require(). Tôi hiểu lý do tại sao đến một mức độ nào đó, nhưng điều gì là xấu với các không gian tên dot-syntax chung? dojo.whatever? dijit.findIt()? Tại sao tải mô-đun, tham chiếu trong một tên duy nhất, đi qua đóng cửa, blah blah?

Tôi muốn đây là một câu hỏi dễ hỏi hơn, nhưng tôi hy vọng điều đó có ý nghĩa.

bực tức

Hãy gọi cho tôi một newb, nhưng điều này thực sự là .. thực sự .. lái xe cho tôi điên. Tôi không noob khi nói đến Javascript (rõ ràng là không) nhưng wow. Tôi không thể tìm thấy số này !

Đây là những gì tôi đang thu thập. Trong adder.js:

define('adder', function(require, exports){ 
    exports.addTen = function(x){ 
     return x + 10 
    } 
}) 

Trong một số trang chủ hoặc bất cứ điều gì:

require(['./js/cg/adder.js']) 

... mà không làm theo các require(['cg/adder']) định dạng gọn gàng nhưng bất cứ điều gì. Không quan trọng ngay bây giờ.

Sau đó, việc sử dụng adder nên là:

console.log(adder.addTen(100)) // 110 

Gần nhất tôi có được console.log(adder) trở 3. Vâng. 3. Nếu không, đó là adder is not defined.

Tại sao điều này lại khó như vậy? Tôi đang sử dụng thẻ noob của tôi về điều này, vì tôi thực sự không có ý tưởng tại sao điều này không đến với nhau.

Xin cảm ơn các bạn.

+0

Bạn nên đặt câu hỏi mới cho lần theo dõi của mình. Bạn không có đủ mã ở đây để hiển thị cho chúng tôi sự cố (ví dụ: bạn thậm chí không định nghĩa 'trình bổ sung'). – Domenic

+0

dựa trên mẫu của bạn ở trên, bạn chỉ cần hai phụ thuộc mô-đun, dijit/form/ValidationTextBox và dojo/truy vấn, trong một tuyên bố yêu cầu duy nhất. Phụ thuộc transitive được chăm sóc cho bạn. Giống như @Domenic nói, có thể có nhiều hơn ở đây và chúng ta nên bắt đầu lại. – peller

+0

Tôi không? Hmm yea Tôi sẽ bắt đầu lại. Cảm ơn các bạn. Chúc mừng – Phix

Trả lời

20

Các phụ thuộc dạng mảng:

define(["a", "b", "c"], function (a, b, c) { 
}); 

thực sự có thể gây phiền nhiễu và dễ bị lỗi. Phù hợp với các mục mảng để tham số chức năng là một nỗi đau thực sự.

Tôi thích định dạng require ("Simplified CommonJS Wrapper"):

define(function (require) { 
    var a = require("a"); 
    var b = require("b"); 
    var c = require("c"); 
}); 

Điều này sẽ giúp dòng ngắn gọn và cho phép bạn sắp xếp lại/xóa/thêm dòng mà không cần phải nhớ để thay đổi mọi thứ ở hai nơi.

Định dạng thứ hai sẽ không hoạt động trên các trình duyệt di động Opera cũ hơn của PS3, nhưng hy vọng bạn không quan tâm.


Đối với lý do tại sao làm điều này thay vì bằng tay namespacing đối tượng, câu trả lời @ peller của đưa ra một cái nhìn tổng quan tốt về việc tại sao mô đun là một điều tốt, và my answer to a similar question cuộc đàm phán về việc tại sao các hệ thống mô-đun như một cách để đạt được mô đun AMD và là một điều tốt.

Điều duy nhất tôi sẽ thêm vào câu trả lời của @ peller là mở rộng "chú ý đến các phụ thuộc thực sự làm cho mã tốt hơn nhiều". Nếu mô-đun của bạn yêu cầu quá nhiều mô-đun khác, đó là một dấu hiệu xấu! Chúng tôi có một quy tắc lỏng lẻo trong mã JavaScript 72K LOC của chúng tôi rằng một mô-đun phải dài ~ 100 dòng và yêu cầu từ 0 đến 4 phụ thuộc. Nó phục vụ tốt cho chúng tôi.

+0

một thực tế thú vị khác - với AMD, mã bạn phụ thuộc vào thực sự có thể thu thập rác khi mô-đun của bạn không còn được tham chiếu nữa. Điều này không xảy ra khi mọi thứ được giải quyết trên toàn cầu. – peller

+1

Ngoài ra, lưu ý rằng bộ nạp của Dojo là không đồng bộ (sử dụng asynch I/O), vì vậy trong khi nó hỗ trợ CJS "ngay" yêu cầu chữ ký @Dominic hiển thị ở đây, biến thể này sẽ * thất bại * nếu một số mã khác chưa tải mô-đun . Đó là lý do tại sao có một chữ ký yêu cầu lấy một mảng và một cuộc gọi lại. Khó xử như định dạng mảng phụ thuộc AMD, nó được thiết kế để đơn giản hóa nhiệm vụ tải các mô-đun một cách không đồng bộ. CJS được thiết kế chủ yếu cho các hệ thống phía máy chủ mà không có những hạn chế tương tự như các trình duyệt web. – peller

+0

@peller FALSE. Dojo và các trình tải tương thích với AMD khác sẽ sử dụng 'Function.prototype.toString' để phân tích phần thân của hàm factory, sau đó lắp ráp một mảng phụ thuộc. – Domenic

12

requirejs.org cung cấp một cái nhìn tổng quan về AMD là gì và tại sao bạn muốn sử dụng nó. Có, Dojo đang chuyển sang các mô-đun nhỏ hơn mà bạn sẽ tham chiếu riêng lẻ. Kết quả là bạn tải ít mã hơn, và các tham chiếu của bạn cho nó là rõ ràng. Chú ý đến các phụ thuộc thực sự làm cho mã tốt hơn nhiều, tôi nghĩ vậy. AMD cho phép tối ưu hóa và sau khi quá trình di chuyển hoàn tất, bạn không phải tải mọi thứ vào các hình ảnh chung nữa. Không còn va chạm nữa! Khối require() bao bọc mã sử dụng các mô-đun khác nhau. domReady! liên quan đến việc tải DOM và không liên quan gì tới các biến nằm trong phạm vi.

Dù sao, điều này bị lệch khỏi Q & Định dạng SO. Bạn có thể muốn đặt câu hỏi cụ thể.

+0

Cảm ơn thông tin. Tôi sẽ xem xét nhiều hơn về requirejs và tiếp tục hack thông qua điều này. * Đã chỉnh sửa ban đầu * – Phix

Các vấn đề liên quan