フロントエンド技術集 ～ 継続アップデート_html/css_WEB-ITnose

目的: フロントエンド ツールについて幅広く理解し、プロジェクトでの開発に適切なフロントエンド ツールを選択し、半分の労力で 2 倍の結果を達成します。

ビルドツール

Gulp NodeJ に基づいて、さまざまなプラグインに依存して、コード圧縮、マージ、スタイルチェック、その他の操作を自動的に完了します。同様のものには、grunt、webpack などがあります

ビルド ツール プラグイン

コードの圧縮とマージ、画像圧縮、MD5 サフィックス

LESS CSS の開発と保守を容易にするために、CSS に関数、ネスト、その他の操作を導入します。同様のものには、SASS

Babel ES6/ES2015 から ES5 があります。 es6 の概要

CoffeeScript JS を記述するには、別のより合理化された構文を使用します。同様のものには次のようなものがあります: TypeScript

artTemplate テンプレートエンジン

RequireJs

JSファイルの非同期ロードを実装する(JSブロックを防ぐ)

モジュール間の依存関係を管理する(JSのロード順序を厳密に保証する)

はじめに 、 ドキュメント

MVC、MV*
AngularJs、Backbone 単一ページの複雑なインタラクティブ Web プロジェクトに適しています。

DOM操作ライブラリ

jQuery PCに最適

zeptoJs モバイルに最適

UI/コンポーネントライブラリ

jQuery UI、Kissy、Bootstrap、pureCss

アイコンフォント

素晴らしいフォント A セットフォント アイコンの場合、CSS を使用して一般的に使用されるアイコン/画像を置き換えます。

es5-shim.js

古いブラウザを es5 と互換性を持たせます。

es5-shim.js, es5入門

ハイブリッドアプリ開発

WebViewベース: APPCAN、phonegap

HTML5+ベース: MUI、Hbuilder

Reネイティブで行動する

反応する

コンポーネントを使用

ReactJs で開発 仮想 DOM (差分アルゴリズム) を使用して、DOM 操作の遅さや特殊効果カードの問題を軽減します。

React Canvas ReactJS と Canvas に基づいて、モバイル Web ページの特殊効果をさらに最適化します。

React Native は、IOS および Android アプリケーションの開発に使用されます。 (1) コンセプト: React の開発効率を維持しながらネイティブ ユーザー エクスペリエンスを実現します。(2) 一度学習すれば、どこでも記述できます。(3) Webview の代わりに JavaScriptCore + 独自開発のブラウザ レンダリング エンジンを使用します。 ;

コード管理

SVN集中型

Git/Github分散型

2つの比較