ホームページ  >  記事  >  ウェブフロントエンド  >  宿題ヘルプのフロントエンドチュートリアルを模倣する

宿題ヘルプのフロントエンドチュートリアルを模倣する

一个新手
一个新手オリジナル
2017-09-13 10:45:071318ブラウズ


ボックスモデル

宿題ヘルプのフロントエンドチュートリアルを模倣する
標準モードの場合

box = margin+border+padding+content(width/height)

奇妙なモードの場合

box = margin+content(border+padding+width/height)

モバイルデバイスの適応

フレックスボックス
レム
詳細は後で追加

位置

相対: テキスト内のそれ自体の位置絶対: 親要素内の非静的に配置された要素に相対的に配置され、配置後にテキスト フローから切り離されます。
静的: 通常のテキスト フロー レンダリング

宿題ヘルプのフロントエンドチュートリアルを模倣する

イベント プロキシの利点宿題ヘルプのフロントエンドチュートリアルを模倣する

原理はイベント バブリングを使用することです

利点

メモリ使用量が多くなり、イベント登録が減少します。たとえば、ul は li のすべてのクリック イベントをプロキシします。 特に動的コンテンツに適しています

欠点

イベントプロキシの一般的な適用は上記の要件に限定する必要があります。すべてのイベントにイベントプロキシが使用される場合、イベントの誤判定が発生する可能性があります。つまり、トリガーすべきではないイベントがイベントにバインドされます。 配列重複排除

<style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    left:20px;        /*以下两张图分别展示*/
        position:relative;        
        position:absolute;    }
    .p2{        
    width:100px;        
    height:100px;        
    background-color:blue;    }
</style>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>

indexOfを使用できず、要素タイプを考慮する必要がある場合

function f(arr){
    var s = [];    
    for(var i = 0;i<arr.length;i++){
        if(s.indexOf(arr[i]) == -1){
            s.push(arr[i]);
        }
    }    return s;
}

、またはES6のSet

function f(arr){
    var s = {};    
    for(var i = 0;i<arr.length;i++){
        var type = typeof arr[i];
        var con = type+arr[i];
        if(!s[con]){
            s[con] = 1;
        }else{
            arr.splice(i,1);
            i--;
        }
    }    return arr;
}

を直接使用してマウスオーバーアバター表示の導入を実装します

重要なポイント:

1.バインドイベント

私が望むのは、イベントプロキシを使用することです


2. 配置を確実に表示し、素早くスワイプしたときに表示されないようにする方法
タイマーの使用

簡単なコードを使用して例を示してみましょう。 。 。
りー

以上が宿題ヘルプのフロントエンドチュートリアルを模倣するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。