zhilizhili-ui 2016始动 开始做个样例站吧 （一）
生活随笔
收集整理的這篇文章主要介紹了
zhilizhili-ui 2016始动 开始做个样例站吧 （一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
對 我又挖坑了 不過其實也不算挖坑 因為ui構建中就會有填坑的文章 之前一直在寫《編寫大型web頁面 結合現有前端形勢思考未來前端》這是一篇巨難寫的文章 估計要到年中才能寫好了 寫作的過程中 發生了國內前端大撕逼 2015的尾聲大戰 是否可以宣告前端是否開始新的時代 2016年 國內前端可能還會依舊艱難 國外前端也不是很好 微軟正式不再支持ie11以下的瀏覽器 估計今年內 國外框架就要完全提高至ie10兼容水平了
zhilizhili-ui
自己從有這個想法到現在zhilizhili-ui發展到1.24版本已經快一年了 這一年里自己收集和編寫了sassstd scss-zhilizhili-mei 這些一直在用sass庫 sass可能不再是很新鮮的樣式預編譯語言了 的確受到一些壓力 不過自己也在積極改進樣式構建的流程 自己加入了postcss支持 2016年 打算開始和css4無縫對接
寫個樣例站吧
我選用前端框架angular2 后端laravel
本文不會特地放出demo
要想找到源碼 請到我的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的時代 這個時代可能還要5年 angular2的確是給了一個大型應用的解決方案 的確 還是臟檢查 不過使用的是worker zone.js提供了支持
2014年的ngconf大會 angular團隊介紹了zone.js zone 就像java thread ok 好吧用進程模擬線程 也是可以的 dart有zones
zone is a execution context
通常我們寫異步js
a(); setTimeout(b, 0); setTimeout(c, 0); d();她的執行順序
a d b c如果我們改改
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可以捕捉甚至異步操作 用過angular2的都知道她的debug非常好 就是使用的是zone.js
angular之前的$scope.apply沒有了 沒了 不要擔心了
rxjs
響應式編程 rxjava很牛對吧 這個也不錯
RxJS 是使用可觀察序列和 LINQ 風格查詢操作符來編寫異步和基于事件程序的類庫。 使用 RxJS， 開發者用 Observables 來 表示 異步數據流，通過 LINQ 操作符來 查詢 異步數據量，并使用 Schedules 來參數化異步數據流中的并發。 簡單地講， Rx = Observables + LINQ + Schedulers。
在 RxJS 中，你可以表述多個異步數據流，并且使用 Observer 對象訂閱事件流。 Observable 對象會在事件發生時通知已訂閱的 Observer。
因為 Observable 序列是數據流，你可以使用由 Observable 擴展方法實現的標準查詢操作符 來查詢它們。這樣你可以通過這些查詢操作符很容易地在多個事件上進行過濾、投射、聚合、 組合和執行基于時間的操作。除此之外還有很多其他反應式流特定的操作符使得可以書寫強大的查詢。 取消、異常和同步都可以通過由 Rx 提供的擴展方法優雅地處理。
由 Rx 實現的 Push 模型表現為 Observable/Observer 的觀察者模式。 Observable 會自動在任何狀態改變時通知所有的 Observers。 要通過訂閱注冊一個關注，你要使用 Observable 上的 subscribe 方法， 它接收一個 Observer 并返回一個 Disposable 對象。 它讓你能夠跟蹤你的訂閱并能夠取消該訂閱。 本質上你可以將可觀察序列看做一個常規的集合。
開始最初的頁面設計
大概就是desktop端需要一個框架樣的東西 pad端 mobile端 就隱藏兩邊邊欄
未來組團開發的時候 很多情況樣式并非一個人開發 可能架構組會將頁面元素定下來 register-hook 然后業務實現組 要通過 use-hook 來開發 這樣上層設計改變 代碼也可以有效維護
tde.scss
首先我們需要一些生成media query的sass方法 這樣不錯
我們需要一些全局變量保存
$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;} }然后一個操作視頻
bilibili鏈接
happy fte
總結
以上是生活随笔為你收集整理的zhilizhili-ui 2016始动 开始做个样例站吧 （一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 控制JSP头部引入外部文件编译后在第一行
- 下一篇： 《小强升职记》读后感和思维导图