javascriptを作り、あるページに設置する際(自分が管理できない他人のページも含む)、

既存のjavascriptに影響を与えない様にする為の注意事項を教えて下さい。

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

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

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

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

宜しくお願い致します。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2016/04/02 01:33:09
  • 終了:2016/04/02 21:21:33
id:worldtravel

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

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

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

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

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4412ベストアンサー獲得回数18032016/04/02 12:42:51

ポイント100pt

無名関数のクロージャを使う方法は、名前空間を汚さない常とう手段だと思います。
質問の補足に書いたコードであれば、クロージャの外で変数 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/



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

id:worldtravel

ありがとうございます。
とても勉強になります。

2016/04/02 13:20:12

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4412ベストアンサー獲得回数18032016/04/02 12:42:51ここでベストアンサー

ポイント100pt

無名関数のクロージャを使う方法は、名前空間を汚さない常とう手段だと思います。
質問の補足に書いたコードであれば、クロージャの外で変数 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/



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

id:worldtravel

ありがとうございます。
とても勉強になります。

2016/04/02 13:20:12

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません