#jQuery global領域に'$'や'jQuery'をおかずに読み込む方法

Question

jQueryについて質問です

global領域に'$'や'jQuery'をおかずにjQueryを読み込むには？

global領域に'$'や'jQuery'をおかずに、その代わり、替わりの変数（例えばhoge）に読み込みませたいのですが、どのようにしたら良いですか？

• 一瞬でもグローバルに$やjQueryを置きたくないです。（既に予約されている$やjQueryがあるので。）
• jQueryファイルの中身を改変することは問いません。（当然ダウンロードしてきますが。）
• "そもそもそのようなシーンを疑うべき"という回答は受け付けておりません。

よろしくお願いします。

Answer 1

方法は2つ考えられます。

• その1 jQueryをnpm経由で供給して、Webpackなどでバンドルする

このようにすれば、npm経由のjQueryはWebpackに閉じたものになりますので、外側のjQueryと全く別物として動かせます。

• その2（一瞬だけ切り替わりますが）jQuery.noConflict(true)を使う

もともと複数のjQueryを使うことを考慮して、jQuery.noConflict()というメソッドが用意してあります（リファレンス）。

1番目のjQuery読み込み→2番目のjQuery読み込み→var j = jQuery.noConflict(true)のようにすれば、2番目に読み込んだjQueryはこのj経由で、1番目のjQueryはjQueryや$でアクセスできます。<script>を同期読み込みにしておけば、「2番目のjQuery読み込み→noConflict実行」の間に別なJavaScriptが割り込むことはないので、一瞬上書きされることによる問題も生じません。

Answer 2

jQueryを改変していいなら、

( function( global, factory ) {

	"use strict";

	if ( typeof module === "object" && typeof module.exports === "object" ) {

		// For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

↑を↓でいいような気がしますね。

var altjQuery = ( function( global, factory ) {
//...
	} else {
		return factory( global, true );
	}

簡単にしか動作確認してないですが。

Comments

[Lhankor_Mhy]

「jQueryファイルの中身を改変することは問いません。」と書いてあったので、「改変不問」＝「改変してもよい」と読んだが、もしかして「改変する回答について質問をしていません」って意味だったのかな？

普通は、不問って読むよね？

Answer 3

「一瞬でもグローバルに$やjQueryを置きたくない」という要件は満たせませんが、元の$やjQueryを維持したいという目的なのであれば、以下でどうでしょう？

<script src="1つめのjQuery"></script>
<script>
  //元のjQueryや$を退避
  var tmp_jQuery = jQuery;
  var tmp_$ = $;
</script>
<script> src="2つめのjQuery"></script>
<script>
  //２つめのjQueryや$を退避させて
  var jQuery2 = jQuery;
  var $2 = $;
  //先ほど退避させた元のjQueryや$を元に戻す
　jQuery = tmp_jQuery;
  $ = tmp_$;
</script>

Answer 4

絶対におすすめはしませんが「ajax.googleapis.com」はクロスサイトでテキストを返してくれるので
非同期でjsを文字列として読み込んで、evalしてみました
いまのままだとたぶんどこかバグを含んでいますが、細かくソースを検証していけば
動かないことは無いと思います

<script>
var async=fasle;
var ajax = new window.XMLHttpRequest();
ajax.open("get","http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js",async);
ajax.onreadystatechange=function(){
  if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){
    eval(ajax.responseText.replace(new RegExp("\$(?!/)","mig"),"_$").replace(new RegExp("jQuery","mig"),"__$"));
  }
}
ajax.send(null);
</script>

<script>
_$(function(){
  console.log(1);
});
__$(function(){
  console.log(2);
});

「$」を「_$」に、「jQuery」を「__$」に変換しました