摘要：使用，開發(fā)者用來(lái)表示異步數(shù)據(jù)流，通過(guò)操作符來(lái)查詢異步數(shù)據(jù)量，并使用來(lái)參數(shù)化異步數(shù)據(jù)流中的并發(fā)。在中，你可以表述多個(gè)異步數(shù)據(jù)流，并且使用對(duì)象訂閱事件流。因?yàn)樾蛄惺菙?shù)據(jù)流，你可以使用由擴(kuò)展方法實(shí)現(xiàn)的標(biāo)準(zhǔn)查詢操作符來(lái)查詢它們。

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

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

我選用前端框架angular2 后端laravel

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

tde.blade.php

    
    
    
    

    
    
    
    
    


    
    

    
    
    
    


    Loading...

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

通常我們寫異步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可以捕捉甚至異步操作 用過(guò)angular2的都知道她的debug非常好 就是使用的是zone.js
angular之前的$scope.apply沒(méi)有了 沒(méi)了 不要擔(dān)心了

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

RxJS 是使用可觀察序列和 LINQ 風(fēng)格查詢操作符來(lái)編寫異步和基于事件程序的類庫(kù)。 使用 RxJS， 開發(fā)者用 Observables 來(lái) 表示 異步數(shù)據(jù)流，通過(guò) LINQ 操作符來(lái) 查詢 異步數(shù)據(jù)量，并使用 Schedules 來(lái)參數(shù)化異步數(shù)據(jù)流中的并發(fā)。 簡(jiǎn)單地講， 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)查詢操作符 來(lái)查詢它們。這樣你可以通過(guò)這些查詢操作符很容易地在多個(gè)事件上進(jìn)行過(guò)濾、投射、聚合、 組合和執(zhí)行基于時(shí)間的操作。除此之外還有很多其他反應(yīng)式流特定的操作符使得可以書寫強(qiáng)大的查詢。 取消、異常和同步都可以通過(guò)由 Rx 提供的擴(kuò)展方法優(yōu)雅地處理。

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

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

未來(lái)組團(tuán)開發(fā)的時(shí)候 很多情況樣式并非一個(gè)人開發(fā) 可能架構(gòu)組會(huì)將頁(yè)面元素定下來(lái) register-hook 然后業(yè)務(wù)實(shí)現(xiàn)組 要通過(guò) use-hook 來(lái)開發(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è)頁(yè)面可能有不同兼容情況 然后只需要自定義設(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