我想使用requireJS,我正在使用jQuery.

推荐答案

这也正是我要问的问题!我还必须使用较旧的jQuery,但也必须使用更"传统"的javascript库.要做到这一点,最好的技术是什么?(如果您不介意,我可以把您的问题修改得更宽泛一些.)这是我学到的东西.

《RequireJS》的作者詹姆斯·伯克(James Burke)解释了advantages of the combined RequireJS + jQuery file.你有两件事.

  1. 有一个模块jquery可用,它是jQuery对象.这是安全的:

    // My module depends on jQuery but what if $ was overwritten?
    define(["jquery"], function($) {
      // $ is guaranteed to be jQuery now */
    })
    
  2. jQuery已经在任何require()define()个东西之前加载了.所有模块都保证jQuery已经就绪.你甚至不需要require/order.js插件,因为jQuery基本上是先硬编码加载的.

To me, #2 isn't very helpful. Most real applications have many .js files that must load in the right order—sad but true. As soon as you need Sammy or Underscore.js, the combined RequireJS+jQuery file doesn't help.

My solution is to write simple RequireJS wrappers that load my traditional scripts using the "order" plugin.

Example

假设我的应用程序有这些组件(按依赖关系).

  • My app, greatapp
    • greatapp depends on a custom jquery (old version I must use)
    • greatapp depends on my_sammy (SammyJS plus all its plugins I must use). These must be in order
      1. my_sammy depends on jquery (SammyJS is a jQuery plugin)
      2. my_sammy depends on sammy.js
      3. my_sammy depends on sammy.json.js
      4. 我的萨米全靠sammy.storage.js
      5. 我的萨米全靠sammy.mustache.js

In my mind, everything above that ends with .js is a "traditional" script. Everything without .js is a RequireJS plugin. The key is: high-level stuff (greatapp, my_sammy) are modules, and at deeper levels, it falls back to traditional .js files.

Booting

It all starts with a booter telling RequireJS how to start.

<html>
  <head>
    <script data-main="js/boot.js" src="js/require.js"></script>
  </head>
</html>

In js/boot.js I put only the config and how to start the application.

require( // The "paths" maps module names to actual places to fetch the file.
         // I made modules with simple names (jquery, sammy) that will do the hard work.
         { paths: { jquery: "require_jquery"
                  , sammy : "require_sammy"
                  }
         }

         // Next is the root module to run, which depends on everything else.
       , [ "greatapp" ]

         // Finally, start my app in whatever way it uses.
       , function(greatapp) { greatapp.start(); }
       );

Main Application

In greatapp.js I have a normal looking module.

define(["jquery", "sammy"], function($, Sammy) {
  // At this point, jQuery and SammyJS are loaded successfully.
  // By depending on "jquery", the "require_jquery.js" file will run; same for sammy.
  // Those require_* files also pass jQuery and Sammy to here, so no more globals!

  var start = function() {
    $(document).ready(function() {
      $("body").html("Hello world!");
    })
  }

  return {"start":start};
}

RequireJS module wrappers around traditional files

require_jquery.js:

define(["/custom/path/to/my/jquery.js?1.4.2"], function() {
  // Raw jQuery does not return anything, so return it explicitly here.
  return jQuery;
})

require_sammy.js:

// These must be in order, so use the "order!" plugin.
define([ "order!jquery"
       , "order!/path/to/custom/sammy/sammy-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.json-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.storage-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.mustache-0.6.2-min.js"
       ]

       , function($) {
           // Raw sammy does not return anything, so return it explicitly here.
           return $.sammy;
         }
      );

Jquery相关问答推荐

JQuery日期 Select 器未设置从jQuery中 Select 的月份起90天或3个月

提交表单时运行自定义验证脚本

jQuery .append() 创建两个元素而不是一个

在 Bootstrap 3 中向工具提示添加换行符

在 jQuery 事件中控制this的值

在 jQuery 中构建 html 元素的最清晰方法

如何使用 jQuery 获取所有 ID?

输入类型=文件的jQuery更改方法

是否可以使用 javascript 打开一个弹出窗口,然后检测用户何时关闭它?

对混合的字母/数字数组进行排序

如何立即启动 setInterval 循环?

如何将参数传递给 JavaScript 中的匿名函数?

如何通过 DOM 容器访问 Highcharts 图表?

使用 jquery 在 radio 上单击或更改事件

$(document).ready(function(){});页面底部的 vs 脚本

从 Select 元素中获取选定的选项

jQuery 发送字符串作为 POST 参数

在 Firefox 上开发的 Javascript 在 IE 上失败的典型原因是什么?

将多个参数传递给 jQuery ajax 调用

如何获取 jQuery 下拉值 onchange 事件