フロントエンドは遊び尽くされました！、他のクールなものは、変数にデフォルト値を割り当てるために演算子を使用するように、もはやニュースではありませんが、また、古いニュースに知られているように、今日、私はQuoraの、即座にフロントエンドのスキルの多くをGETし、そのうちのいくつかは、スキルに属している、そのうちのいくつかは、前代未聞の風邪の知識、消化するための時間です。今すぐあなたと共有するだけでなく、コンテンツのいくつかの通常の蓄積と拡張の一部を追加するために整理しました。
HTML
ブラウザのアドレスバーでJavaScriptコードを実行します。
この多くの人々はまだ知っている必要があります、ブラウザのアドレスバーで直接JavaScriptコードを実行することができます、練習はjavascriptにある：先頭に実行するステートメントが続きます。たとえば、次のようになります：
javascript:alert('hello from address bar :)');
上記のコードがブラウザのアドレスバーに貼り付けられ、enterアラートが正常に実行されると、ポップアップウィンドウが表示されます。
なお、コードをブラウザのアドレスバーにコピーペーストすると、IEとChromeはコードの先頭にあるjavascript:を自動的に削除してしまうので、正しく実行するためには手動で追記する必要がありますが、Firefoxは自動的に削除されることはありませんが、アドレスバーでJSコードを実行することには全く対応していません、ため息～！
ブラウザのアドレスバーでHTMLコードを実行してください。
上記の小さな秘密は多くの人に知られている場合は、この秘密は、非IEカーネルブラウザのアドレスバーで、直接HTMLコードを実行することができます少ない人に知られています！
例えば、以下のコードをアドレスバーに入力し、Enterキーを押して実行すると、指定したページの内容が表示されます。
data:text/html,<h1>Hello, world!</h1>
[]
ブラウザをエディターとして使えることをご存知ですか？
またはブラウザのアドレスバーに記事を行うには、次のコードをアドレスバーに貼り付けると、プリミティブでシンプルなエディタにブラウザを実行し、Windowsはメモ帳、轟音が付属しています。
data:text/html, <html contenteditable>
HTML5に新しく追加されたcontenteditable属性のおかげで、要素がこの属性を指定すると、要素の内容が編集可能になります。
ついでに、以下のコードをコンソールに入れると、ページ全体が編集可能になります！
document.body.contentEditable='true';
aタグを使ったURLの自動解決
多くの場合、URLからドメイン名、クエリのキーワード、変数のパラメータ値などを抽出する必要があり、ブラウザが簡単にキャプチャするために定期的に記述することなく、このタスクを完了するのに役立つことができるとは思わなかったです。JSコード内のメソッドは、タグを作成し、URLのhref属性に割り当てられている解析する必要があり、その後、あなたが望むすべてを取得します。
var a = document.createElement('a');
a.href = 'http://..com/wayou/p/';
console.log(a.host);
この原理を使い、少し拡張することで、URLのさまざまな部分を解析するための、より堅牢な汎用メソッドを得ることができます。以下のコードはJames。
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
hash: a.hash.replace('#',''),
path: a.pathname.replace(/^([^\/])/,'/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^\//,'').split('/')
};
}
ページが ID を持つ要素は、グローバル変数を作成します。
HTMLページでは、ID属性が設定されている要素はすべて、JavaScriptの実行環境で対応するグローバル変数が作成されます。つまり、document.getElementByIDは人の盲腸のように冗長なのです。しかし、実際のプロジェクトではどのように書くかを正直に話すのが一番です。結局のところ、通常のコードを台無しにする可能性はずっと小さくなります。
<div id="sample"></div>
<script type="text/javascript">
console.log(sample);
</script>
[]
CDNファイル読み込み時にHTTPロゴを省略可能
専用サーバーからいくつかの一般的なJSとCSSファイルをロードするためにある今、非常に人気のあるCDNは、セキュリティ上の理由から、いくつかのCDNサーバーは、いくつかの伝統的なTPは、実際には、この使用では無視することができますが、接続するHTTPSの方法を使用して、それはRLから省略されます。
<script src="//domain.com/path/to/script.js"></script>
スクリプトタグによる任意の情報の保存
scriptタグをtype='text'に設定すると、その中に任意の情報を保存することができ、JavaScriptコードから簡単にアクセスできるようになります。
<script type="text" id="template">
<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML
CSS
CSSのいたずらについて
以下のコードを見れば、何が起こるか予想がつくと思います。
*{
cursor: none!important;
}
[]
シンプルなテキストぼかし効果
簡単なCSS3コードの次の2行は、テキスト処理目的のぼかしによって達成することができ、効果のうち、PSフィルタの使用のようなビットですので、クールです！
p {
color: transparent;
text-shadow: #111 0 0 5px;
}
垂直センタリング
ブロガーがDIVの表示を垂直方向に中央寄せにする必要があることはよくありますが、CSSには当然、水平方向に中央寄せにするスタイルtext-align:centerがあることを知っています。
もちろん、コンテナをdisplay:tableに設定し、子要素をdisplay:table-cellに設定し、vertical-align:middleを追加することで、子要素を垂直中央に配置することもできますが、この実装では、display:tableが全体のレイアウトを崩してしまうことが多いため、以下のようにする方が良いでしょう。を直接テーブルタグで指定する方がよいでしょう。
次のスタイルでは、translateを使用して縦方向の中央揃えスタイルを巧みに実現しています。
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
対照的に、水平方向のセンタリングは、はるかに単純で、上記のようにtext-align:center、しばしば使用されるテクニックとmargin:0 autoです。しかし、マージンメソッドは、サブ要素の幅がコンテナの幅よりも小さい場合にのみ動作し、サブ要素の幅がコンテナの幅よりも大きい場合、メソッドは無効です。
同じように、leftとtransformを使うことで、水平方向の中央揃えも実現できますが、結局のところ、text-alignとmarginがほぼニーズを満たしているため、その意義は大きくありません。
.center-horizontal {
position: relative;
left: 50%;
transform: translateX(-50%);
}
複数のボーダー
box-shadowを繰り返し指定することで、複数のボーダーの効果を得ることができます。
/*CSS Border with Box-Shadow Example*/
div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
[]
リアルタイムCSS編集
styleタグのdisplay:blockスタイルを設定することで、ページにstyleタグを表示させることができ、contentEditable属性を追加すると、スタイルが編集可能になることができ、スタイルの効果の変更もリアルタイムで更新された後。無効の下にIEのこのテクニック。このスキルを使用すると、すべての確率に対して！
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
固定アスペクト比の要素の作成
親ウィンドウのpadding-bottomを設定することで、コンテナの長さの比率を一定に保つという目的を達成することができます。
<div style="width: 100%; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
簡単な操作はCSSでも可能です。
CSS のcalcメソッドでは、要素のスタイルを動的に指定するという目的を達成するために、簡単な算術演算を実行できます。
.container{
background-position: calc(100% - 50px) calc(100% - 20px);
}
#p#
JavaScript
ランダムな文字列を生成
Math.randomとtoStringを使ったランダムな文字列の生成。ここでのトリックは、toStringメソッドが引数として基数を取ることができるという原理を利用することです。指定がない場合、デフォルトの基数は10進数です。ちょっとちんぷんかんぷん！
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
整数演算
JavaScriptには整数の概念はありませんが、ビット演算子を使って簡単に扱うことができます。
|0や~~は浮動小数点を整数に変換する良い例で、対応するparseIntや Math.round よりも高速です。これは、ピクセルやアニメーションの変位などのエフェクトを扱うときに便利です。性能比較はこちらをブログ記事ください。
var foo = (12.4 / 4.13) | 0;//結果は3である
var bar = ~~(12.4 / 4.13);//結果は3である
ところで、!は、値を便利かつ迅速にブール値に変換します ！window===true.
新機能を実装するためのネイティブブラウザメソッドの書き換え
ダウンロードしたコードでは、ブラウザのアラートをオーバーライドすることで、ポップアップの数を追跡することができます。
(function() {
var oldAlert = window.alert,
count = 0;
window.alert = function(a) {
count++;
oldAlert(a + "
You've called alert " + count + " times now. Stop, it's evil!");
};
})();
alert("Hello World");
コンソールについてのいたずら
Chromeのconsole.logは、テキストのスタイル設定やイメージのロギングに対応しています。つまり、デフォルトのログメソッドを書き換えて、ログに記録するテキストに CSS のぼかし効果を適用すれば、誰かがconsole.log() を呼び出そうとしたときに、ぼやけたテキストしか表示されなくなります。だから寒いよ、笑わないって言ったでしょ。
var _log = console.log;
console.log = function() {
_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};
第3の変数を宣言せずに値を交換
2つの変数の値を交換する、つまり、中間変数を宣言して一時的に格納することは誰でも知っています。しかし、中間変数を宣言しないという挑戦をする人はほとんどいません。かなり独創的です。
var a=1,b=2;a=[b,b=a][0];
すべてがオブジェクトです
JavaScriptの世界では、すべてがオブジェクトです。nullとundefinedを除き、数値、文字列、ブーリアンなどの基本的な型はすべて、対応するラップされたオブジェクトを持っています。オブジェクトの特徴のひとつは、メソッドを直接呼び出せることです。数値の基本型の場合、toStringメソッドを呼び出そうとすると失敗しますが、括弧で囲むと失敗せず、内部実装では対応するラッパーオブジェクトを使って基本型をオブジェクトに変換します。つまり.toString() はnew Number(1).toString() と等価です。したがって、数値、文字列、ブーリアンなどの基本型をオブジェクトとして使用することができます。
また、JavaScriptの数値は浮動小数点型とシェーピング型に分かれていないことに注意してください。括弧があるのは、JSパーサーが1の後のドットを小数点として扱わないように修正するためです。内部実装としては、上記のように1.をラッパーオブジェクトでオブジェクトに変換してからメソッドを呼び出します。
Ifステートメントの変換
if文を書く必要があるときは、JavaScriptの論理演算子を使うという、もっとシンプルな方法を試してみてください。
var day=(new Date).getDay()===0;
//伝統的なif文
if (day) {
alert('Today is Sunday!');
};
//ロジックを使用して、ifを置き換える
day&&alert('Today is Sunday!');
たとえば、上記のコードは、最初の今日の日付を取得し、それが日曜日であれば、ポップアップウィンドウを、それ以外の場合は何もしません。短絡状況の存在の論理演算を知って、ロジックと式については、両方の真の結果のみ、偽のような裁判官の前に日の変数は、式の結果を持つ全体のために偽である場合、それはアラートの実装の後に行くことを続行されませんので、真の前に日だけでなく、真または偽の式全体を決定するコードを実行し続ける場合。ifの効果を達成するためにこれを使用します。
従来のif文では、実行可能なコードが複数のステートメントである場合、括弧を追加する必要がありましたが、カンマ式では、括弧を追加することなく、任意のコードを実行することができます。
if(conditoin) alert(1),alert(2),console.log(3);
上のif文では、条件が成立すると3つのアクションが実行されますが、3行のコードを花かっこで囲む必要はありません。もちろん、これは推奨されませんし、これは冷たい教室です :)
iframeでページを読み込ませないようにする方法
以下のコードで説明できます。
if (window.location != window.parent.location) window.parent.location = window.location;
console.table
Chromeの排他的な、IEのバイパスコンソールメソッド。JavaScriptの関連する配列は、テーブルの形でブラウザのコンソールに出力することができ、その効果は驚くべきものです、インターフェイスは非常に美しいです。
//調達
var teams_data = [{' : '杜雷斯', '数量': 4}, {' : '冈本', '数量': 3}];
console.table(teams_data);
