Tại sao cú pháp đơn giản hóa CommonJS Wrapper không hoạt động trên mô-đun Dojo AMD của tôi?

Question

Im bắt đầu để loại quấn quanh đầu tôi requirejs và cấu trúc Dojo AMD mới, nhưng tôi có một vấn đề với một số xét nghiệm sớm:

cg/signup.js:

define(['dojo/_base/fx', 'dojo/dom'], function(fx, dom){  
    return function(){ 
     this.hidePreloader = function(id){ 
      var preloader = dom.byId(id); 
      fx.fadeOut({node : preloader}).play() 
     } 
    } 
}) 

này hoạt động tốt. Trong tệp cg.js chính:

require(['dojo/_base/kernel', 'dojo/_base/loader']) 
dojo.registerModulePath('cg', '../cg') 

require(['cg/signup', 'dojo/domReady!'], function(Signup){ 
     var sp = new Signup(); 
     sp.hidePreloader('preloader') 
}) 

Bam. Làm xong. Tuy nhiên, trong việc sử dụng cấu trúc giản CommonJS Wrapper:

define(function(require){  
    var fx = require('dojo/_base/fx'), 
     dom = require('dojo/dom'); 

    return function(){ 
     this.hidePreloader = function(id){ 
      var preloader = dom.byId(id); 
      fx.fadeOut({node : preloader}).play() 
     } 
    } 
}) 

tôi nhận được một lỗi undefinedModule. Nó dường như đến từ dòng dojo/_base/fx, nhưng tôi không biết tại sao.

CẬP NHẬT

Để làm rõ.

index.html script

<script type="text/javascript" src="js/dojo/dojo.js.uncompressed.js" data-dojo-config="isDebug:true,async:true"></script> 
<script type="text/javascript" src="js/cg.js"></script> 

cg.js

require(['dojo/_base/kernel', 'dojo/_base/loader']) 
dojo.registerModulePath('cg', '../cg') 

require(['cg/signup', 'dojo/domReady!'], function(signup){ 
    signup.testFunc() 
}) 

js/cg/signup.js

define(['require', 'exports'], function(require, exports){ 
    var dom = require('dojo/_base/kernel'); 
// Any other require() declarations (with very very few exceptions like 'dojo/_base/array throw undefinedModule errors!!! 

    // without any error causing requires, this works fine. 
    exports.testFunc = function(){ 
     alert("hello") 
    } 
}) 

Answer 1

dojo hỗ trợ hoàn toàn định dạng đơn giản CommonJS Wrapper. tuy nhiên, có một điều kiện tiên quyết ... bạn không có mảng phụ thuộc.

define(function (require, exports, module) { 
    var fx = require('dojo/_base/fx'), 
     dom = require('dojo/dom'); 

    // continue... 
}); 

này sẽ KHÔNG làm việc như nhau

define(['require', 'exports', 'module'], function (require, exports, module) { 
    var fx = require('dojo/_base/fx'), 
     dom = require('dojo/dom'); 

    // continue... 
}); 

cũng sẽ này ...

// in this case require, exports and module will not even exist 
define([], function (require, exports, module) { 
     var fx = require('dojo/_base/fx'), 
     dom = require('dojo/dom'); 

    // continue... 
}); 

Answer 2

là require được xác định? Tôi không thấy giá trị đối số đó đến từ đâu. Tôi nghĩ bạn có thể phải làm điều gì đó như

define(["require"], function(require){ ... 

Answer 3

Tôi bắt đầu nghĩ rằng có lẽ tôi không có ý định học Dojo. Nhưng, tất cả đi kèm với một chút đọc nhiều hơn. Tôi không chắc chắn chính xác những gì tôi đã làm khác nhau hoặc bất cứ điều gì, nhưng đây là cách bố trí làm việc.

script index.html và cấu hình

<script type="text/javascript"> 
dojoConfig = { 
    async : true, 
    isDebug : true, 
    debugAtAllCosts : true, 
    packages : [{ 
     name : 'cg', 
     location : '/../js/cg' 
    }] 
} 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"></script> 
<script type="text/javascript" src="js/cg.js"></script> 

js/cg.js

require(['cg/signup', 'dojo/ready'], function(signup){ 
    signup.init('preloader') 
}) 

js/cg/signup.js

define(['dojo', 'require'], function(dojo, require){ 
    var fx = require('dojo/_base/fx') 

    return new function(){  
     this.init = function(id){ 
      fx.fadeOut({node : dojo.byId(id)}).play() 
     } 
    } 
}) 

Again , n ot hoàn toàn chắc chắn lý do tại sao các tuyên bố var fx = require(...) hoạt động khác nhau trong này hơn những người khác, có thể là xây dựng tôi tải về so với CDN, những người quan tâm. Nó hoạt động.Một số liên kết Tôi sử dụng để giúp cho những người khác có thể trong cùng một thuyền:

Writing Modular JS

AMD vs CommonJS Wrapper

Dojo Toolkit AMD

Dojo Config (1.7)

Answer 4

Dưới đây là một chút wrapper xung quanh Dojo xác định có sử dụng mã lấy từ RequireJS để tính toán các phụ thuộc dựa trên hàm toString của hàm định nghĩa. Nó bao bọc "định nghĩa" hiện tại trong không gian tên chung, tính toán các phụ thuộc và sau đó gọi định nghĩa được bao bọc.

defineWrapper.js:

// Workaround for the fact that Dojo AMD does not support the Simplified CommonJS Wrapper module definition 
(function() { 
    var commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, 
     cjsRequireRegExp = /require\(\s*["']([^'"\s]+)["']\s*\)/g, 
     ostring = Object.prototype.toString; 
    function isArray(it) { 
     return ostring.call(it) === '[object Array]'; 
    } 
    function isFunction(it) { 
     return ostring.call(it) === '[object Function]'; 
    } 
    var oldDefine = define; 

    define = function(name, deps, callback) { 
     //Allow for anonymous functions 
     if (typeof name !== 'string') { 
      //Adjust args appropriately 
      callback = deps; 
      deps = name; 
      name = null; 
     } 

     //This module may not have dependencies 
     if (!isArray(deps)) { 
      callback = deps; 
      deps = []; 
     } 

     //If no name, and callback is a function, then figure out if it a 
     //CommonJS thing with dependencies. 
     if (!deps.length && isFunction(callback)) { 
      //Remove comments from the callback string, 
      //look for require calls, and pull them into the dependencies, 
      //but only if there are function args. 
      if (callback.length) { 
       callback 
        .toString() 
        .replace(commentRegExp, '') 
        .replace(cjsRequireRegExp, function(match, dep) { 
         deps.push(dep); 
        }); 

       //May be a CommonJS thing even without require calls, but still 
       //could use exports, and module. Avoid doing exports and module 
       //work though if it just needs require. 
       //REQUIRES the function to expect the CommonJS variables in the 
       //order listed below. 
       deps = (callback.length === 1 ? ['require'] : 
        ['require', 'exports', 'module']).concat(deps); 
      } 
     } 

     if(name === null) { 
      return oldDefine(deps, callback); 
     } else { 
      return oldDefine(name, deps, callback); 
     } 
    } 
})(); 

Làm thế nào bạn sẽ sử dụng nó?

<script src="...dojo..."></script> 
<script src="defineWrapper.js"></script> 
<script>require(["some_simplified_commonjs_defined_module"], function(module) { 
    // use module here 
});</script> 

Answer 5

Lưu ý rằng Dojo không hỗ trợ CommonJS đơn giản hóa phong cách để phát hiện sự phụ thuộc khi thực hiện một xây dựng . Điều này có nghĩa là bạn sẽ cần phải sử dụng kiểu danh sách phụ thuộc bình thường, hoặc bạn sẽ phải sao chép tất cả các phụ thuộc của bạn khi xác định các lớp trong hồ sơ xây dựng.

Dưới đây là các lỗi liên quan theo dõi của họ:

http://bugs.dojotoolkit.org/ticket/15350