ホームページ > 記事 > ウェブフロントエンド > zhilizhili-uiは2016年にスタートしました。サンプルWebサイトを作ってみましょう(1)_html/css_WEB-ITnose
zhilizhili-uiは2016年にスタートしました。サンプルWebサイトを作ってみましょう(1)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:30:571054ブラウズ
またまた穴を掘りましたが、UI構築で穴を埋めることになるので、実際に穴を掘ったわけではありません。以前「大きなWebページを書いて将来のフロントエンドを考える」という記事を書きました。これは記事です。この非常に難しい記事を完成させるには、今年の半ばまでかかると推定されています。執筆の過程で、国内で大規模なフロントエンド戦争が発生しました。 2015 年末の戦争は、フロントエンドが新しい時代を迎えたかどうかを宣言できますか? 国内のフロントエンドは 2016 年も難しいかもしれません。海外のフロントエンドは、IE11 未満のブラウザを正式にサポートしなくなりました。今年中に、海外のフレームワークが ie10 互換レベルに完全に改善されると予想されており、この 1 年の間に、sass ライブラリを使用して sassstd scss-zhilizhili-mei を収集してコンパイルしました。 Sass はもはやそれほど新しいスタイルのプリコンパイル言語ではないかもしれませんが、確かにある程度のプレッシャーはありますが、スタイル構築プロセスには postcss のサポートが追加されており、2016 年には css4 とのシームレスな統合を開始する予定です
サンプル Web サイト
フロントエンド フレームワーク angular2 とバックエンド laravel を選択します
この記事ではデモはリリースされません
見つけたい場合は、ソース コードについては私の github プロジェクトにアクセスしてください
tde.blade .php
<!doctype html><!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]--><!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]--><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Mobile Component</title> <!-- 1. Load libraries --> <script src="/assets/static/node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="/assets/static/node_modules/systemjs/dist/system.src.js"></script> <script src="/assets/static/node_modules/rxjs/bundles/Rx.js"></script> <script src="/assets/static/node_modules/angular2/bundles/angular2.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.defaultJSExtensions = true; System.config({ map: { angular2: '/assets/static/node_modules/angular2', rxjs: '/assets/static/node_modules/rxjs' } }); System.import('/assets/mobile/controller/ui/tde') .then(null, console.error.bind(console)); </script> <link rel="stylesheet" href="/assets/static/css/normalize.css"> <link rel="stylesheet" href="/assets/mobile/css/ui/tde.css?v=<% rand(0, 1000) %>"> <script src="/assets/static/js/dom4.min.js"></script> <!--[if lte IE 10]> <script src="/assets/static/js/placeholders.min.js"></script> <![endif]--></head><body class="ui-tde dark-style"> <my-app>Loading...</my-app></body></html> angular2 と言えば、まだ皆さんあまり興味がないかもしれませんが、ブラウザが ie と向き合わなければならない時代、angular2 まではまだ 5 年先かもしれません。確かにダーティチェックですが、サポートを提供するためにワーカーzone.jsを使用します
2014年のngconfカンファレンスでzone.jsゾーンを導入しました。これはスレッドをシミュレートするプロセスに似ています。それも可能ですDartにはゾーンがあります
zoneは実行コンテキストです
通常は非同期jsを書きます
a();setTimeout(b, 0);setTimeout(c, 0); d();
彼女の実行順序
adbc
変更しても
start();a();setTimeout(b, 0);setTimeout(c, 0); d();stop();
b cは影響を受けません
zoneはコードを使用したいと考えています予測可能です
zone.run(function() { a(); setTimeout(b, 0); setTimeout(c, 0); d(); ));function onZoneEnter() {}function onZoneLeave() {} tde.ts
import {AppComponent} from './tde/app.component';import {bootstrap} from 'angular2/platform/browser';import {provide} from 'angular2/core';import { APP_BASE_HREF, ROUTER_PROVIDERS} from 'angular2/router';bootstrap(AppComponent, [ ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/wex/mtc'})]); zone は非同期操作もキャプチャできます。以前の $scope.apply はなくなっていますが、angular2 のデバッグは非常に優れています。もう
rxjs
リアクティブ プログラミング rxjava は素晴らしいですよね? これも良いです
RxJS は、監視可能なシーケンスと LINQ スタイルのクエリ演算子を使用して、非同期およびイベントベースのプログラムを作成するクラス ライブラリです。 RxJS を使用すると、開発者は Observable を使用して非同期データ フローを表現し、LINQ 演算子を介して非同期データ ボリュームをクエリし、スケジュールを使用して非同期データ フローの同時実行性をパラメーター化します。 簡単に言うと、Rx = Observables + LINQ + Scheduler です。
RxJS では、Observer オブジェクトを使用して複数の非同期データ ストリームを表現し、イベント ストリームをサブスクライブできます。 Observable オブジェクトは、イベントが発生したときにサブスクライブされたオブザーバーに通知します。
Observable シーケンスはデータのストリームであるため、Observable 拡張メソッドによって実装された標準クエリ演算子を使用してクエリを実行できます。このようにして、これらのクエリ演算子を使用して、複数のイベントに対して簡単にフィルター、投影、集計、結合、および時間ベースの操作を実行できます。さらに、強力なクエリの作成を可能にするリアクティブ ストリーム固有の演算子が他にも多数あります。 キャンセル、例外、同期はすべて、Rx が提供する拡張メソッドを通じて適切に処理できます。
Rx によって実装された Push モデルは、Observable/Observer のオブザーバー パターンとして動作します。 Observable は、状態が変化するとすべてのオブザーバーに自動的に通知します。 サブスクリプション経由で関心を登録するには、Observable で submit メソッドを使用します。このメソッドは、Observer を受け取り、Disposable オブジェクトを返します。 これにより、サブスクリプションを追跡し、そのサブスクリプションをキャンセルできるようになります。 基本的に、監視可能なシーケンスは通常のコレクションと考えることができます。
最初のページデザインを開始します
おそらくデスクトップ側にはフレームのようなものが必要で、パッド側とモバイル側では両側のサイドバーを非表示にする予定です
今後、グループ開発では多くの場合、スタイルは 1 人で開発されるものではありません。アーキテクチャ チームがページ要素を定義し、その後ビジネス実装チームが use フックを通じて開発することで、上位レベルのデザインが変更され、コードが効果的に変更されます。維持
tde.scss まず、メディアクエリを生成するための sass メソッドが必要です。これは良いことです
@import "../../../../../node_modules/sass-mediaqueries/media-queries";@function mq($args...) { $media-type: 'only screen'; $media-type-key: 'media-type'; $args: keywords($args); $expr: ''; @if map-has-key($args, $media-type-key) { $media-type: map-get($args, $media-type-key); $args: map-remove($args, $media-type-key); } @each $key, $value in $args { @if $value { $expr: "#{$expr} and (#{$key}: #{$value})"; } } @return #{$media-type} #{$expr};}@function screen($min, $max, $orientation: false) { @return mq($min-width: $min, $max-width: $max, $orientation: $orientation);} いくつかのグローバル変数が必要です 保存
$custom-deivces: ( "mobile": 320, "pad": 768, "desktop": 1280,) !global;$custom-deivces-media: () !global;$custom-deivces-hook: () !global;この場合、sass 実装を初期化するメソッドが必要です
@mixin initlize-media-hooks($custom-deivces) { $custom-deivces-indicators: map-keys($custom-deivces); $custom-deivces-indicatorslength: length($custom-deivces-indicators); @for $i from 1 through $custom-deivces-indicatorslength { $currentDeviceIndicator: nth($custom-deivces-indicators, $i); $currentDevice: map-deep-get($custom-deivces, $currentDeviceIndicator); $currentMedia: $currentDevice + 0px; $nextDeviceIndicator: if($i < $custom-deivces-indicatorslength, nth($custom-deivces-indicators, ($i + 1)), null); $nextDevice: if($nextDeviceIndicator !=null, map-deep-get($custom-deivces, $nextDeviceIndicator), 2881); $nextMedia: $nextDevice + 0px - 1; @include screen($currentMedia, $nextMedia) { $custom-deivces-media: map-deep-set($custom-deivces-media, $currentDeviceIndicator, screen($currentMedia, $nextMedia)) !global; $custom-deivces-hook: map-deep-set($custom-deivces-hook, $currentDeviceIndicator, "device #{$currentDeviceIndicator}") !global; } }}@mixin use-media-hook($device) { @media #{map-deep-get($custom-deivces-media, $device)} { @at-root { @content; } }} ページには異なる互換性条件がある可能性があります。その後、デバイスをカスタマイズして初期化するだけで済みます
$custom-deivces: map-extend($customo-device, (...));@include initlize-media-hooks($custom-deivces);
その後、独自に定義したデバイス クエリを使用できます
@include use-media-hook("pad") { @include use-hook(".main-inner .layout__item.layout__item--prefix") { position: absolute; left: 0; top: 0; } @include use-hook(".main-inner .layout__item.layout__item--suffix") { position: absolute; right: 0; top: 0; }}@include use-media-hook("mobile") { @include use-hook(".main-inner .layout__item.layout__item--prefix") { position: absolute; left: 0; top: 0; opacity: 0; z-index: -1; } @include use-hook(".main-inner .layout__item.layout__item--suffix") { position: absolute; right: 0; top: 0; opacity: 0; z-index: -1; }} その後、ハウツー ビデオ
happy fte