前の問題を整理します.(四):JavaScriptテーマ

3885 ワード

1.一般イベントとイベントバインディングにはどんな違いがありますか?
  • 一般イベント
  • は、html要素に特定の属性
  • を追加する.
  • を採用しています.
  • document.querySelector('div').onclick = function(){}
  • を採用しています.
  • 通常のイベントは、同じ要素に単一のイベントを追加するだけで、後のイベントは前のイベント
  • をカバーします.
  • イベントバインディング
  • は、addEventListener()を使用してイベント
  • を追加する.
  • は、最初に追加されたイベントから順次実行されるイベントバインディングを使用して、複数のイベントを追加することができる.
  • 2.addEventListener()attachEvent()の違い
  • addEventListener()はW 3 C規格に適合する標準的な方法である.attachEvent()は、IEの低バージョンの非標準的な方法
  • である.
  • addEventListener()は、イベントの発泡およびイベントの捕捉をサポートする.一方、attachEvent()は、イベント発泡体
  • だけをサポートしています.
  • addEventListener()の最初のパラメータでは、イベントタイプはonを追加する必要がない.attachEvent()は'on'
  • を追加する必要があります.
  • 同じ要素で複数のイベントをバインディングすると、addEventListener()はイベントバインディングの順序に従って順次実行され、attachEvent()はイベントバインディングの順序に従って順次実行される.
    3.クローズドとは何ですかどんな特性がありますか
    (1)クローズド:関数の運転時に形成される閉じられた区間のクローズド.
    (2)特性:
  • は、クローズド内部で外部にアクセスできる変数ですが、外部の変数はクローズド内部の変数
  • に直接アクセスできません.
  • クローズドを採用して私有作用領域を実現する時、メモリが解放されないため、すべてメモリを占有します.
  • クローズドを使ってサンドボックスモードを実現し、グローバル汚染問題の発生を放置することができます.
    4.どのようにしてイベントの泡が発生し、htmlタグのデフォルト行動を阻止するか?
    (1)イベントの泡発生を防ぐ:
  • IE 8及び以下:window.event.cancelBubble = true
  • IE 9および以上/Chorme/Firefox:event.stopPropagation()
  • (2)htmlタグのデフォルトの挙動をブロックする:
  • IE 8及び以下:window.event.returnValue = false
  • IE 9および以上/Chorme/Firefox:event.preventDefault()
  • 5.配列の重量を減らす方法を編纂する
    方法1:配列のfilter方法を採用する
    function filterRepetition ( arr ) {
        return arr.filter(function ( item, index, array ){
            return array.indexOf( item ) === index;
        })
    }
    
    方法2:キャッシュを採用する方法
    function filterRepetition ( arr ) {
        var cache = {};
        var resultArr = [];
        for( var i = 0; i < arr.length; i++ ){
            if( cache[arr[i]] ) {
                continue;
            }else{
                cache[arr[i]] = true;
                resultArr.push( arr[i] );
            }
        }
        return resultArr;
    }
    
    より多くの方法は記事を参照することができます.「JavaScript配列フィルタリングと同じ要素の6つの方法」
    6.ページのすべてのcheckboxを取得する
    var resultArr= [];
    var input = document.querySelectorAll('input');
    for( var i = 0; i < input.length; i++ ) {
        if( input[i].type == 'checkbox' ) {
            resultArr.push( input[i] );
        }
    }
    //resultArr            checkbox
    
    7.以下のコードの出力結果
    console.log( null == undefined );
    console.log( null === undefined );
    console.log( [] == false );
    
    答えはそれぞれです.true、false、true.
    最後の理由は、Empty arrays seem to equal true and false at the same timeを参照してください.
    8.文字列foo=「get-element-by-ind」が知られています.functionを書いてラクダのピーク表現法「getElementById」に変換します.
    function getCamelCase ( str ) {
        var arr = str.split("-");
        var resultArr = [];
        for( var i = 0; i < arr.length; i++ ){
            if( i === 0 ) {
                resultArr.push( arr[i] ); 
            }else{
                resultArr.push( arr[i].charAt( 0 ).toUpperCase() + arr[i].slice( 1 ) );
            }
        }
        return resultArr.join('');
    }
    
    もっと多くの方法は文章を参考にしてください.
    9.今日の日付を出力し、YYYY-M-DDの方式で、例えば今日は2014年9月26日で、2014-09-26を出力します.
    function getDate () {
       var date = new Date();
       var arr  = [ date.getFullYear(), date.getMonth() + 1, date.getDate() ];
       return arr.join('-')
    }
    
    10.文字列"{$id}{$name}{$id}"{$id}10に置き換え、{$name}"Tony"に置き換える(正規表現を使う).
    var str  = '{$id}{$name}{$id}';
    var newStr = str.replace( /{\$id}/g, 10 ).replace( /{\$name\}/g, 'Tony' );