javascript - 在非 AMD 代码上使用 dojo/select

Question

我的网站上有使用 Sizzle 作为选择器引擎的旧版 JavaScript。

我最近添加了 dojo 库 (v 1.8) 用于可视化目的（图表等）。因为 dojo 包含选择器 (dojo/select)，所以我认为 Sizzle 现在是多余的，我可以用 dojo/select 替换它。有没有办法让 dojo/select 与非 AMD 代码一起工作？

score 1 · Accepted Answer

根据文档，您可以将 DOJO 选择器引擎换成 AMD/Dojo 兼容版本的sizzle或slick。因此，如果我是你，我会保留 Sizzle 并将 dojo 的底层选择器更改为 Sizzle，从而消除冗余而无需触及遗留代码。

我们还可以使用其他选择器引擎级别。Sizzle 和 Slick 都是与 dojo/query 一起工作的优秀选择器引擎。AMD/Dojo 兼容版本（仅包含 AMD）可在此处获得：

https://github.com/kriszyp/sizzle

https://github.com/kriszyp/slick

安装后，您可以使用选择器引擎模块 ID 作为指定的选择器引擎级别。我们可以将 Sizzle 设置为我们页面的查询引擎：
<script data-dojo-config="selectorEngine: 'sizzle/sizzle'" src="dojo/dojo.js">
</script>
或将 Slick 设置为特定模块的引擎：
define(["dojo/query!slick/Source/slick"], function(query){
  query(".someClass:custom-pseudo").style("color", "red");
});

score 1 · Accepted Answer

Brandon Boone的回答非常有用，因此您不必重写选择器字符串。我认为您要问的是如何导出dojo/query到全局命名空间，即window通过 AMD 的异步特性导出到对象中。有两种选择：

如果你使用release版本，它dojo/query已经打包了dojo.js，所以你不必关心模块工厂函数的异步执行，只需导出变量：

<script 
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"
    data-dojo-config="async:true"
></script>

<script>
    // export query module to global namespace (window object)
    require(["dojo/query"], function(query) {
        window.query = query;        
    });
</script>

<script>
    // query function is now available globally
    console.log(query("li"));
</script>

在 jsFiddle 上查看此示例：http: //jsfiddle.net/phusick/gvnGu/

如果你使用 baseless dojo，它会更加棘手，因为你实际上必须等待dojo/query加载：

<script src="dtk-sdk/dojo/dojo.js" data-dojo-config="async:true"></script>

<script>
    // wrap your lecacy code into a function so it's not executed immediately
    var executeNonAmdCode = function() {
        console.log(query("li"));
    }
</script>

<script>
    require(["dojo/query"], function(query) {
        // export query module to global namespace (window object)
        window.query = query;
        // execute the legacy code
        executeNonAmdCode();
    });
</script>

score 0 · Accepted Answer

要添加到@phusick 的答案，我刚刚了解到从 v1.8 dojo 开始支持这一点：

<script type="dojo/require">
    "myApp.query": "dojo/query"
</script>

上面的代码会将查询方法添加到全局 myApp 对象中（并在需要时创建 myApp）。

来源：

http://dojotoolkit.org/reference-guide/1.8/dojo/parser.html#dojo-parser

javascript - 在非 AMD 代码上使用 dojo/select

3 回答 3

Related

Reference