标签: js-amd

以下加载打字稿模块依赖关系的方法有什么区别？

/// <amd-dependency path="someFile"/>

/// <reference path="someFile.ts" />

import someFile = require("someFile");

我有两种类型的模块:

Require.js主文件:

    require.config({
      baseUrl: "/another/path",
      paths: {
        "some": "some/v1.0"
      },
      waitSeconds: 15,
      locale: "fr-fr"
    });


    require( ["some/module", "my/module", "a.js", "b.js"],
      function(someModule,    myModule) {
      }
    );

调解员模式:

define([], function(Mediator){

var channels = {};
if (!Mediator) Mediator = {};  

Mediator.subscribe = function (channel, subscription) {   
  if (!channels[channel]) channels[channel] = [];
   channels[channel].push(subscription);
};

Mediator.publish = function (channel) {
  if (!channels[channel]) return;
  var args = [].slice.call(arguments, 1);
  for (var i = 0, l = channels[channel].length; i < l; i++) {
    channels[channel][i].apply(this, args);
  } …

我对AMD模块的理解(使用例如RequireJs或curl.js)是:

require() 用于异步加载不同的模块,加载后执行回调fn.

要定义模块,您可以使用单独的脚本 define()

但我已经看到一些模块require()在其函数定义中使用,例如

define([a, b, c], function(i, ii, iii){ 
    require([d, e, f], function(d, e, f) {
        // do some stuff with these require()'d dependancies
    })
    /* rest of the code for this module */ 
}) 

但我发现这令人困惑,因为我认为如果一个模块具有依赖性,那么它们应该通过main define([dependancies], fnDefinition)函数传递,而不是通过require()上面的例子来实现.

这背后有理由吗？

require.js陈述define([requiremens], object)以最佳方式在模块内定义对象的方式.

因此,每个页面或其他js文件都将require()调用和接收模块作为参数.

这很好用,每个函数/模块都有自己的命名空间.

问题是我有:

// AJAX/Requests.js

define(['UI/Message'],function(Message){
var Requests={
    checkResponse:function(response){
        //1==ok
        //0==error
        //2==good message
        //3==good message, but still stop
        if(response.status==1){
            return true;
        }
        else if(response.status==2){
            Message.good(response.message);
            return true;
        }
        else if(response.status==3){
            Message.good(response.message);
            return false;
        }
        else{
            Message.bad(response.message);
            return false;
        }
    }
};
return Requests;
});

现在,UI/Message以相同的方式定义,并返回对象.

但是当我用请求编辑文件时,我无法通过代码导航,所以如果我想编辑Message对象,唯一的方法就是自己打开文件并找到我需要的函数,而不是让IDE跳到那里为了我.

是专门针对pycharm还是针对require.js的一些解决方法来解决这个问题？当你有很多代码时,导航它就变得一团糟,这就是我首先使用IDE的原因!

更糟糕的是:编辑永远不知道对象有什么功能!

我可以看到的一种可能的解决方案是不使用封闭的命名空间,并在define()调用之前声明全局变量,但在这种情况下,所有对象都应该像UI_Message,AJAX_Requests一样被调用.为了确定,我在两个不同的位置没有一些消息....

我不确定,如果require.js优化器将正确使用它.Require.js文档说明非常清楚,远离全局变量.

我正在尝试使用RequireJS中的填充程序加载Highcharts库.但是,当Highcharts加载时,它会抛出异常,因为它无法访问它所依赖的jQuery方法.

require配置如下所示:

require.config({
    baseUrl: "js",

    shim: {

        'libs/highcharts/highcharts.src.js': {
            deps: ['jquery'],
            exports: function(jQuery)
            {
                this.HighchartsAdapter = jQuery;

                return this.Highcharts;
            }
        }
    }
});

引发的异常是:

Uncaught TypeError: undefined is not a function

并且就这条线而言:

dataLabels: merge(defaultLabelOptions, {

问题是merge调用,最终将自身映射回jQuery(或Highcharts支持的其他适配器;但我只是使用jQuery).

我不确定如何确保Highcharts使用RequireJS和shim访问jQuery.

有没有人之前一起使用过RequireJS和Highcharts？我想问题不是特定于highcharts,而是任何具有其他种类依赖关系的库.

提前感谢任何建议或指向正确的方向!

为了增加更多的上下文,希望熟悉require.js或shims的人能够提供帮助而不必过于熟悉highcharts,这里有一些merge在Highcharts 中设置此方法的来源

var globalAdapter = win.HighchartsAdapter,
adapter = globalAdapter || {},

// Utility functions. If the HighchartsAdapter is not defined, 
// adapter is an empty object
// and all the utility functions will be null. In that …

我正在尝试从优化的脚本文件中删除版权注释.我们正在使用RequireJS和默认的UglifierJS.我查看了Uglifier,它本身有一个名为-ncor 的标志--no-comments,但看起来似乎并不像RequireJS允许你在构建配置文件中设置该选项.反正有没有这样做？

我有一个使用RequireJS的相当大的Backbone.js项目.随着项目规模的增长(这里"大小"指的是单独模块文件的数量),间歇性错误开始出现.大多数情况下,这是一个对象错误:

Uncaught TypeError: object is not a function

有时,它抱怨模块没有加载.

一旦项目通过r.js优化器运行,这些错误就会消失.它们仅在RequireJS加载单个模块时发生.

这让我想到了我的问题 - 当模块数量达到一定数量时,RequireJS是否开始出现模块加载问题？

我很难将Mocha连接到基于RequireJS的应用程序,可能是你能够想出一些东西:).经过几个小时,我一直在尝试加载AMD模块,只是在console.log中发送了一些模板已经加载的"信息"...没有发生任何事情 - 程序刚刚结束并打印出一些摩卡信息.

var facade = requirejs(['../../public/js/scripts/widgets/widgets/article/main.js'],      
    function(mod) {
        console.log('fired')
});
// run with: $ mocha -u tdd test.js --reporter spec

而且我想出了解决回调问题的想法:

setTimeout((function() {
    console.log('fired');
}), 5000);
// run with: $ mocha -u tdd test.js --reporter spec

也没用.所以最后我和两个人一起跑

$ node test.js 

最后它奏效了.所以问题是:如何使用回调处理来运行Mocha测试,因为这些对于AMD测试至关重要？

我正在将RequireJS集成到CMS中,因此我将其放在页面模板的底部:

<html>
<body>
  {Placeholder1}
  <script src="scripts/require.js" data-main="scripts/main"></script>
  {Placeholder2}
</body>
</html>

然后在每个页面上,我想创建一个利用RequireJS的函数.所以我尝试将它放在页面的底部:

<html>
<body>
    <h1>Home</h1>
    <div class="slider">Slider content</div>

    <script src="scripts/require.js" data-main="scripts/main"></script>

    <script type="text/javascript">
      require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
    </script>
</body>
</html>

但我在jquery,utils和slider js文件上获得404.好像它没有读我的main.js配置我:

require.config({
    paths: {
        jquery: 'libs/jquery-1.8.1.min',
        utils: 'libs/utils',
        slider: 'libs/jquery.slider.min'
    },
    shim: {
        slider: ['jquery']
    }
});

require([ 'utils' ], function (utils) {
    utils.init();
});

我尝试在页面头部加载RequireJS和main,但是这样得到了不一致的结果.有时jquery,utils和slider会及时加载,有时则不加载.就好像页面底部的内联"require"不知道页面上的主要RequireJS或依赖规则,但是我的断点在main.js中命中,所以我知道它正被调用.是因为main.js是异步加载的,但页面底部的内联"require"块是否在页面渲染中加载？我该如何解决这个问题？

我以前成功使用过RequireJS但没有使用CMS.我总是使用"define"并且总是异步调用模块,但是不必像这样调用RequireJS函数内联.有关正确方法的任何想法吗？

救命!

我是超级迷茫的家伙......我不知道我在做什么

昨天和今天我一直在关注RequireJS和AMD教程和示例,并且到了这一点,但是我认为我仍然对模块是什么有一个根本的误解.

• 我有一堆函数从我的HTML元素中被称为"onClick"...
  1. 如何使用RequireJS 定义我的函数以便我可以调用它们？很困惑:/我也不明白
  2. 如何让我的onLoad函数被调用(在我的情况下是$(function(),但是如何在RequireJS中启动它？)

我使用的是Node v0.10.12

<html>
...
<head>
<script data-main="" src="libraries/require.js"></script>
...
<script>
...
     //I really need all these javascript files for every function defined on this page...
     require(['simulatorConfiguration.js', 
              'modelConfiguration.js', 
              'libraries/jquery-1.10.2.min.js', 
              'libraries/jquery.lightbox_me.js', 
              'libraries/jquery-migrate-1.2.1.js', 
              'libraries/raphael-min.js'], function(start) { 

            $(function() {

                loadPage();  //<--- CALL LOAD PAGE, but it can't find the function
                //do some jquery stuff
            });

        });

    //function that get's called on body onload!
    define('loadPage', function loadPage()
    {
        hideAllDivs();
        //more …