Webフロントエンド開発の9つの一般的なヒント

1.ブラウザのアドレスバーでJavaScriptコードを実行します

JavaScriptのコードをブラウザのアドレスバーで直接実行するには、javascript:で始まり、その後に実行するステートメントを続けます。といった:

  javascript:alert('hello from address bar :)');

上記のコードをブラウザーのアドレスバーに貼り付けてEnterキーを押すと、アラートが正常に実行され、ポップアップウィンドウが表示されます。

やってみます、ポップアップウィンドウはありませんか?

その理由は:

コードをコピーしてブラウザのアドレスバーに貼り付けると、
IEとChromeは自動的にjavascript:をコードの先頭から削除するため、正しく実行するには手動で追加する必要があります
。Firefoxは自動的に削除しませんが、まったくサポートしていません。アドレスバーでJSコードを実行します、
ため息〜

2.ブラウザのアドレスバーでHTMLコードを実行する

上記の小さな秘密を知っている人が多いと、この秘密を知っている人は少なくなります。IE以外のカーネルを搭載したブラウザのアドレスバーでHTMLコードを直接実行できます。

たとえば、アドレスバーに次のコードを入力してEnterキーを押すと、指定したページコンテンツが表示されます。

data:text/html,<h1>Hello, world!</h1>

3、ブラウザーをエディターとして使用する

ブラウザーのアドレスバーで大騒ぎし、次のコードをアドレスバーに貼り付けて実行すると、ブラウザーは、Windowsに付属のメモ帳と同じように、プリミティブでシンプルなエディターになります。

data:text/html, <html contenteditable>

 

最後の分析では、HTML5に新しく追加されたcontenteditable属性のおかげで、この属性で要素が指定されると、要素のコンテンツが編集可能になります。

さらに、次のコードをconsole実行すると、ページ全体が編集可能になり、自由に踏みにじるようになります〜

document.body.contentEditable='true';

4番目に、タグを使用してURLを自動的に解析します

多くの場合、URLからドメイン名、クエリキーワード、変数パラメーター値などを抽出する必要がありますが、ブラウザーがクロールする常連を作成しなくても、このタスクを簡単に完了することができるとは思っていませんでした。メソッドは、JSコードでaタグを作成し、解析するURLをaのhref属性に割り当てて、必要なすべてを取得します。

var a = document.createElement('a');
 a.href = 'http://github.com/fly-sy/code';
 console.log(a.host);

5、ページ上のIDを持つ要素はグローバル変数を作成します

HTMLページでは、ID属性を持つすべての要素がJavaScript実行環境で対応するグローバル変数を作成します。つまり、document.getElementByIdは人間の付録のように冗長です。しかし、実際のプロジェクトでは、必要に応じて記述するのが最善であり、従来のコードで問題が発生する可能性ははるかに低くなります。

<div id="sample"></div>
<script type="text/javascript">
        console.log(sample);//直接写id名即可获取到元素
</script>

6. CDNファイルをロードするときは、HTTPロゴを省略できます

一般的なCDNは、専用サーバーからいくつかの一般的なJSおよびCSSファイルをロードすることです。セキュリティ上の理由から、一部のCDNサーバーはHTTPS接続を使用し、一部は従来のHTTPです。実際には、これを無視して変更できます。 URLから省略します。

<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

7、3番目の変数の値交換を宣言しない

2つの変数の値を交換する、つまり一時的に格納する中間変数を宣言する通常の方法は誰でも知っています。しかし、中間変数を宣言しない状況に異議を唱える人はほとんどいません。次のコードは、この実装を示しています。かなりクリエイティブ。

var a=1,b=2;a=[b,b=a][0];

8.他の人があなたのページをiframeでロードすることを禁止する

以下のコードは一目瞭然で、言うことはあまりありません。

if (window.location != window.parent.location) window.parent.location = window.location;

九、console.table

Chrome専用、IEバイパスコンソールメソッド。JavaScriptの連想配列を表形式でブラウザコンソールに出力できます。効果は素晴らしく、インターフェイスは美しいです。好き〜好き〜好き〜

var data = [{'品名': ' ', '数量': 4}, {'品名': ' ', '数量': 3}];
console.table(data);

おすすめ

転載: blog.csdn.net/GUDUzhongliang/article/details/108624738