當(dāng)前位置：首頁 >

zhilizhili-ui 2016始动开始做个样例站吧（一）

發(fā)布時(shí)間：2025/3/8 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 zhilizhili-ui 2016始动开始做个样例站吧（一）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

對(duì) 我又挖坑了不過其實(shí)也不算挖坑因?yàn)閡i構(gòu)建中就會(huì)有填坑的文章之前一直在寫《編寫大型web頁面結(jié)合現(xiàn)有前端形勢(shì)思考未來前端》這是一篇巨難寫的文章估計(jì)要到年中才能寫好了寫作的過程中發(fā)生了國內(nèi)前端大撕逼 2015的尾聲大戰(zhàn) 是否可以宣告前端是否開始新的時(shí)代 2016年國內(nèi)前端可能還會(huì)依舊艱難國外前端也不是很好微軟正式不再支持ie11以下的瀏覽器估計(jì)今年內(nèi) 國外框架就要完全提高至ie10兼容水平了

zhilizhili-ui

自己從有這個(gè)想法到現(xiàn)在zhilizhili-ui發(fā)展到1.24版本已經(jīng)快一年了這一年里自己收集和編寫了sassstd scss-zhilizhili-mei 這些一直在用sass庫 sass可能不再是很新鮮的樣式預(yù)編譯語言了的確受到一些壓力不過自己也在積極改進(jìn)樣式構(gòu)建的流程自己加入了postcss支持 2016年打算開始和css4無縫對(duì)接

寫個(gè)樣例站吧

我選用前端框架angular2 后端laravel

本文不會(huì)特地放出demo

要想找到源碼請(qǐng)到我的github項(xiàng)目上

tde.blade.php

<!doctype html>   <html class="" lang="zh-cn"> <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><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><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> </head> <body class="ui-tde dark-style"><my-app>Loading...</my-app> </body> </html>

說到angular2 大家可能對(duì)她還不是很感興趣但是在瀏覽器依舊要面對(duì)ie的時(shí)代這個(gè)時(shí)代可能還要5年 angular2的確是給了一個(gè)大型應(yīng)用的解決方案的確還是臟檢查不過使用的是worker zone.js提供了支持

2014年的ngconf大會(huì) angular團(tuán)隊(duì)介紹了zone.js zone 就像java thread ok 好吧用進(jìn)程模擬線程也是可以的 dart有zones

zone is a execution context

通常我們寫異步j(luò)s

a(); setTimeout(b, 0); setTimeout(c, 0); d();

她的執(zhí)行順序

a d b c

如果我們改改

start(); a(); setTimeout(b, 0); setTimeout(c, 0); d(); stop();

b c是不會(huì)被影響的

zone希望去使代碼可預(yù)測(cè)

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沒有了沒了不要擔(dān)心了

rxjs

響應(yīng)式編程 rxjava很牛對(duì)吧這個(gè)也不錯(cuò)

RxJS 是使用可觀察序列和 LINQ 風(fēng)格查詢操作符來編寫異步和基于事件程序的類庫。使用 RxJS，開發(fā)者用 Observables 來表示異步數(shù)據(jù)流，通過 LINQ 操作符來查詢異步數(shù)據(jù)量，并使用 Schedules 來參數(shù)化異步數(shù)據(jù)流中的并發(fā)。簡單地講， Rx = Observables + LINQ + Schedulers。

在 RxJS 中，你可以表述多個(gè)異步數(shù)據(jù)流，并且使用 Observer 對(duì)象訂閱事件流。 Observable 對(duì)象會(huì)在事件發(fā)生時(shí)通知已訂閱的 Observer。

因?yàn)?Observable 序列是數(shù)據(jù)流，你可以使用由 Observable 擴(kuò)展方法實(shí)現(xiàn)的標(biāo)準(zhǔn)查詢操作符來查詢它們。這樣你可以通過這些查詢操作符很容易地在多個(gè)事件上進(jìn)行過濾、投射、聚合、組合和執(zhí)行基于時(shí)間的操作。除此之外還有很多其他反應(yīng)式流特定的操作符使得可以書寫強(qiáng)大的查詢。取消、異常和同步都可以通過由 Rx 提供的擴(kuò)展方法優(yōu)雅地處理。

由 Rx 實(shí)現(xiàn)的 Push 模型表現(xiàn)為 Observable/Observer 的觀察者模式。 Observable 會(huì)自動(dòng)在任何狀態(tài)改變時(shí)通知所有的 Observers。要通過訂閱注冊(cè)一個(gè)關(guān)注，你要使用 Observable 上的 subscribe 方法，它接收一個(gè) Observer 并返回一個(gè) Disposable 對(duì)象。它讓你能夠跟蹤你的訂閱并能夠取消該訂閱。本質(zhì)上你可以將可觀察序列看做一個(gè)常規(guī)的集合。

開始最初的頁面設(shè)計(jì)

大概就是desktop端需要一個(gè)框架樣的東西 pad端 mobile端就隱藏兩邊邊欄

未來組團(tuán)開發(fā)的時(shí)候很多情況樣式并非一個(gè)人開發(fā) 可能架構(gòu)組會(huì)將頁面元素定下來 register-hook 然后業(yè)務(wù)實(shí)現(xiàn)組要通過 use-hook 來開發(fā) 這樣上層設(shè)計(jì)改變代碼也可以有效維護(hù)

tde.scss
首先我們需要一些生成media query的sass方法這樣不錯(cuò)

@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;

這樣的話我們需要一個(gè)初始化sass實(shí)現(xiàn)的方法

@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;}} }

每個(gè)頁面可能有不同兼容情況然后只需要自定義設(shè)備在初始化一下

$custom-deivces: map-extend($customo-device, (...)); @include initlize-media-hooks($custom-deivces);

然后我們就可以使用自己定義好的設(shè)備查詢

@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;} }

然后一個(gè)操作視頻

bilibili鏈接

happy fte

總結(jié)

以上是生活随笔為你收集整理的zhilizhili-ui 2016始动开始做个样例站吧（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：控制JSP头部引入外部文件编译后在第一行
下一篇：《小强升职记》读后感和思维导图