人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptを作り、あるページに設置する際(自分が管理できない他人のページも含む)、
既存のjavascriptに影響を与えない様にする為の注意事項を教えて下さい。

変数や関数が被らない様にするなど。。。

以前、下記の様な事を書いてあるのを見た記憶があるのですが定かではありません。

全体をこれで囲えば間違えないのでしょうか。

(function() {
ここに書くこと
})();

宜しくお願い致します。

●質問者: worldtravel
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

例えば、こういった内容は

var a = 123;
function hoge(){ alert(a); }
hoge();

このようにすれば、変数や関数は、既存の同じ名前の変数、関数とはコンフリクト?しないのでしょうか。

(function() {
var a = 123;
function hoge(){ alert(a); }
hoge();
})();


1 ● a-kuma3
●100ポイント ベストアンサー

無名関数のクロージャを使う方法は、名前空間を汚さない常とう手段だと思います。
質問の補足に書いたコードであれば、クロージャの外で変数 a とか、関数 hoge を使っているかどうかを気にせずに宣言&利用できます。
でも、それは外部から守ることはできても、外部を汚染しないという保証にはなりません。

<script>
n = 1; // グローバルな変数
...

functioy outer_function() { // グローバルな関数
 ...
}
</script>
<script>
(function() {
 // クロージャの中でも
 n = "a-kuma3"; // グローバルな変数を書き換えられる

 outer_function = function() { // もちろん、グローバルな関数も書き換えられる
 ...
 };
})();
</script>


クロージャを使うのは、あくまでも名前空間(変数名やクラス名)の範囲だけで、他にも外部と情報は共有してるものはあります。
例えば、DOM の属性。

(function() {
 var e = document.getElementById("...");

 e.data = ... // 組み込みの属性以外が衝突しないとは限らない

 e.style.backgroundColor = ... // もちろん、style も

 // イベントハンドラのこの書き方も、属性の変更です
 window.onload = function() {
 ...
 };
})();

イベントリスナーを使えば、つぶすことにはならないので、多少はマシになります。

(function() {
 window.addEventListener("load", function() {
 ...
 }, false);
 // 今どきは、DOMContentLoaded か。
})();

でも、複数のイベント処理が動いて、お互いに影響がない、という保証はありません。


ビルトインオブジェクトの書き換えも、グローバルな情報の書き換えです。
String や Array なんかに、こんなメソッドあると便利じゃん、ってやつ。

(function() {
 String.prototype.padStart = function() {
 ...
 };
})();

自分で意識しなくても、他のライブラリを使ってるとか、コードを拝借したとか。


他のライブラリと言えば、ライブラリ同士の競合とかも気を付けなければいけないことのひとつです。
最近はとんと見なくなりましたが、prototype.js の $ と、jQuery の $ とか。
jQuery のようにメジャーで息の長いライブラリだと、バージョンの競合の問題があります。

jQuery の場合には、バージョンを混在させる手段をライブラリが用意してくれていますが、これは珍しい方だと思います。
http://webnonotes.com/javascript-2/jquery-noconflict/



ぱっと思いついたのは、こんなところです。


worldtravelさんのコメント
ありがとうございます。 とても勉強になります。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ