在ES6样式中,如何从"./js/jquery.js"中将jQuery *导入为jQuery后,如何将jQuery作为函数(而不是作为模块符号); [英] how to get `jQuery` as a function (not as a Module symbol) after ES6 style `import * as jQuery from "./js/jquery.js";`
问题描述
我正在尝试在Chrome中提供<strong>原生ES6模块支持. jQuery不是es6模块(不导出)-我知道.尽管如此,试图了解这对我们意味着什么.
I'm experimenting with native ES6 modules support in Chrome. jQuery is not es6 module (no export) - I know. Still, trying to understand what does it mean for us.
这有效,没有错误:
<script type="module">
import * as jQuery from "./js/jquery.js";
window.console.log(jQuery);
</script>
但是,当然jQuery
不是功能,而是Module
符号.
问题是:是否有可能从jQuery模块中提取jQuery/$函数?何时在模块上未定义导出?
But of course jQuery
thereis not a function but a Module
symbol.
The question is: is it possible to extract jQuery/$ function from jQuery module? When there are no exports defined on module?
那么,我们是否有一种方法可以从Chrome的Module中提取未导出的功能(例如在browserfy中)?
So do we have a method to extract not exported function from Module in Chrome (as we have it e.g. in browserfy)?
P.S.我犯了一个愚蠢的错误("as jQuery"<->"as jQyery"),但是它什么也没有改变,它只是别名.
P.S. I have made an stupid error ("as jQuery" <-> "as jQyery") but it changes nothing, it is only alias name.
推荐答案
此:
<script type="module">
import "./js/jquery.js";
window.console.log(window.$);
</script>
在窗口上创建jQuery作为副作用". jQuery代码
creates jQuery on window as "side effect". JQuery code
( function( global, factory ) {
"use strict";
if (typeof module === "object" && typeof module.exports === "object") {
// ...
} else {
// we are there when loading as ES6 native module
factory( global );
}
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
// ... jquery code
});
其中有些特定之处,并且所有旧版"脚本都无法期望具有相同的行为.
There is some specific in this and the same behaviour can't be expected from all "legacy" scripts.
接下来有趣的事情也起作用(我的解释:由于获取第一条规则")
What is interesting next also works (my explaination: because of "fetching first rule")
<script type="module">
window.console.log(window.$); // also works and will return $ function even if import is declared bellow
import "./js/jquery.js";
</script>
语法import "module-name"
在那里描述
https://developer.mozilla.org/zh-美国/docs/Web/JavaScript/Reference/Statements/import
Google文章: https://developers.google.com/web/fundamentals/底漆/模块
Google article: https://developers.google.com/web/fundamentals/primers/modules
这也将仅加载jquery(并仅执行一次):
Also this loads jquery ONLY ONCE (and execute it ONLY ONCE):
<script type="module">
import("./js/jquery.js").then(
function(){
window.console.log("inline 2a = " + window.$);
}
);
</script>
<script type="module">
import("./js/jquery.js").then(
function(){
window.console.log("inline 2b = " + window.$);
}
);
</script>
这是可以在开发中使用的重要功能.
This is important feature that can be used in development.
P.S.
这也有效,但有陷阱:
<script type="module">
import * as jQuery from "./js/jquery.js"
window.console.log(jQuery); // returns Module
window.console.log(window.jQuery); // returns jQuery function
</script type="module">
这篇关于在ES6样式中,如何从"./js/jquery.js"中将jQuery *导入为jQuery后,如何将jQuery作为函数(而不是作为模块符号);的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!