jquery - 如何在 Require.JS 上下文中删除 jQuery "html"函数？

Question

我正在尝试找出方法强制开发人员使用下划线模板而不是使用 html(html) 我们使用 jQuery、Backbone、Require.js 和 Underscore，以及我们的很多模板渲染代码最终会执行如下操作(为了可读性而简化):

  define(['jquery','underscore','backbone'], 
      function($,_,Backbone){
        var template = _.template("<strong><%= title %></strong>");
        $('.some-div').html(template({title: model.get('name')});
      }
  );

大约 10% 的情况下，我会在我们的代码库中找到这样的代码，我想避免这种情况。我想强制使用模板:

  define(['jquery','underscore','backbone'], 
      function($,_,Backbone){
        $('.some-div').html("<strong>"+ model.get('name') +"</strong>");
      }
  );

我想删除此上下文中的 jQuery html 函数，以强制开发人员使用我们团队定义的另一种方法(“renderTemplate”)，该方法需要使用模板。

如何做到这一点？

注意:我知道我们可以通过代码审查和最佳实践来做到这一点，但我更愿意迫使开发人员更快地走上这条路，因为 html 功能不会在那里，而且他们会问为什么。

编辑:我知道我可以从 jQuery 原型(prototype)中删除 html 函数，但对于我们外部的其他库，它需要存在外部 RequireJS 模块上下文。只需要为上面定义的模块上下文删除它。

Answer 1

仅映射

这是一种方法，仅使用映射。这是改编自documentation关于如何使用 noConflict 调用加载 jQuery。

您需要一个执行切除的jquery-private模块:

define(["jquery"], function ($) {
  $.noConflict();
  delete $.fn.html;
  return $;
});

以及以下配置:

  require.config({
    baseUrl: "./js",
    paths: {
       jquery: 'jquery-1.10.2'
    },
    map: {
      '*': { 'jquery': 'jquery' },
      'restricted': {'jquery': 'jquery-private'}
    }
  });

在上面的代码中，只有名为 restricted 的模块会被阻止使用 html 方法。在实际项目中，您可能希望使用算法来列出必须限制的所有模块。它们都必须使用与上面的 restricted 相同的映射。

基本原理是jQuery被加载两次。像 restricted 这样的模块每当请求 jquery 时都会加载 jquery-private 并获得修改后的版本。其他一切都获得未更改的版本。

请注意，map 选项带有严重的 caveat :它不适用于相对模块名称。

上下文

这是另一种方法，使用上下文。这是说明其工作原理的配置和主要代码:

  require.config({
    baseUrl: "./js",
    paths: {
       jquery: 'jquery-1.10.2'
    }
  });

  require(["jquery"], function ($) {
     console.log($("body").html);
  });

  var rr = require.config({
    context: "restricted",
    baseUrl: "./js",
    paths: {
       jquery: 'jquery-1.10.2'
    },
    map: {
      '*': { 'jquery': 'jquery-private' },
      'jquery-private': { 'jquery': 'jquery' }
    }
  });

  rr(["jquery"], function ($) {
     console.log($("body").html);
  });

这里 jQuery 也被加载了两次。它在默认上下文中加载一次并保持原样。第一个加载也是在全局空间中设置 $ 和 jQuery 的加载。它在 restricted 上下文中第二次加载，并且 html 方法被删除。所有受限代码必须加载到restricted 上下文中。必须访问 html 的代码必须使用默认上下文加载。