3

このコードを小さくするにはどうすればよいですか? トグルかもしれませんが、これは jQuery で簡単にできると言われていました。しかし問題は、コード内の 1 つのことだけに jQuery を使用するのが好きではないことです。

function open() {
document.getElementById('message').style.display='block';
document.getElementById('fade').style.display='block';
}

function close() {
document.getElementById('message').style.display='none';
document.getElementById('fade').style.display='none';
}
4

5 に答える 5

4 
var message = document.getElementById('message'),
    fade = document.getElementById('fade');

function open() {
    message.style.display = fade.style.display = 'block';
}

function close() {
    message.style.display = fade.style.display = 'none';
}

または：

function toggle() {
    var message = document.getElementById('message'),
        fade = document.getElementById('fade'),
        currentdisplay = getComputedStyle(message, null)['display'];

    if(currentdisplay == 'block' || currentdisplay == 'inline')
        message.style.display = fade.style.display = 'none';
    else
        message.style.display = fade.style.display = 'block'; /* or inline */
}

または：

function toggle() {
    var currentdisplay = getComputedStyle(arguments[1], null)['display'],
        i,
        newdisplay;

    if(currentdisplay == 'block' || currentdisplay == 'inline')
        newdisplay = 'none';
    else
        newdisplay = 'block';

    for(i = 0; i < arguments.length; i++)
        arguments[i].style.display = newdisplay;
}

var message = document.getElementById('message'),
    fade = document.getElementById('fade');

toggle(message, fade); /* hide */
toggle(message, fade); /* show */

document.body.onclick = function(){
    toggle(message, fade);
}

</p>

トグルの例:

http://jsfiddle.net/djHTq/

于 2012-06-26T22:59:23.660 に答える
4

乾かしてください。

var b='block',h='none',m='message',f='fade';
function s(i,d){document.getElementById(i).style.display=d}
function open(){s(m,b);s(f,b)}
function close(){s(m,h);s(f,h)}

空白と適切な変数名 (ミニファイヤに渡される) を使用すると、次のようになります。

var show = 'block', hide = 'none', message = 'message', fade = 'fade';

function setStyle(id, display) {
  document.getElementById(id).style.display=display;
}
function open() {
  setStyle(message, show);
  setStyle(fade, show);
}
function close() {
  setStyle(message, hide);
  setStyle(fade, hide);
}

質問に関係のないベストプラクティスがいくつかありますが、プロジェクトがこの些細な状況を超えて成長する場合は検討する価値があります。

  • ミニファイヤを使用します。私のお気に入りはuglifyjsです。これにより、縮小されていないコードで意味のある変数名を使用できます (2 番目の例のように)。ミニファイヤは、最初の例に似た (おそらくそれよりも優れた) コードを出力します。ミニファイヤを使用しても、できることとできないことについて考え続けてください。document.getElementById のような長いパブリック API へのプライベート ショートカットを作成すると、その API を頻繁に使用する場合にミニファイに役立ちます。縮小されたコードを見て、それを最適化するためにできることがないことを確認してください。
  • 可能であれば、JavaScript を、ページとは別に、非同期的にロードされる .js モジュールに分割します。
  • すべての静的アセット (.js モジュールなど) を管理して、キャッシュ タイムアウトが長くなるようにします ( Expires:http ヘッダーを使用します)。次に、実際に変更されたときに URL を変更します。このようにして、クライアントは、変更するまで無期限にキャッシュできます。その後、クライアントはすぐに新しいバージョンを取得します。
  • 個別のモジュールを関数ラッパー内に配置して、変数が他のコード片 (独自のモジュールまたはサード パーティのモジュール) と競合しないようにします。変数を公開したい場合は、明示的に行います。window.pubvar =
于 2012-06-26T23:01:00.633 に答える
3 
var toggle = function(doc){
    var $ = doc.getElementById, message = $('message'), fade = $('fade'), open = true;
    return function(){
        var display = open ? 'none' : 'block';
        message.style.display = display;
        fade.style.display = display;
        open = !open;
    } 
}(document);

toggle(); // Hide both elements
toggle(); // Show both elements. Rinse and repeat.
于 2012-06-26T23:03:46.120 に答える
2

1 つのことは、要素にスタイルを設定するためのヘルパー関数を作成できることです。これは、多くの異なる要素を設定する必要がある場合に役立ちます。

function setStyle(element, style, value) {
    document.getElementById(element).style[style] = value;
}
function open() {
    setStyle('message', 'display', 'block');
    setStyle('fade', 'display', 'block');
}
function close() {
    setStyle('message', 'display', 'none');
    setStyle('fade', 'display', 'none');
}

要素を頻繁に使用する場合は、要素を変数に設定することもできます。

var message = document.getElementById('message'), fade = ...
于 2012-06-26T23:02:59.183 に答える
2

グローバル スコープの汚染を回避します。

(function() {
    var msgstl = document.getElementById('message').style,
        fdestl = document.getElementById('fade').style;
    window.open = function() {msgstl.display = fdestl.display = "block";};
    window.close = function() {msgstl.display = fdestl.display = "none";};
})();
于 2012-06-26T23:01:57.813 に答える