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

2019年8月30日 230次阅读来源: andypinet

对我又挖坑了不过实在也不算挖坑由于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 对象。它让你能够跟踪你的定阅并能够作废该定阅。本质上你能够将可视察序列看作一个通例的鸠合。

最先最初的页面设想

《zhilizhili-ui 2016始动最先做个样例站吧（一）》

也许就是desktop端须要一个框架样的东西 pad端 mobile端就隐蔽两边边栏

将来组团开辟的时刻许多状况款式并不是一个人开辟能够架构组会将页面元素定下来 register-hook 然后营业完成组要经由过程 use-hook 来开辟如许上层设想转变代码也能够有用保护

tde.scss
起首我们须要一些天生media query的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;
    }
}

然后一个操纵视频

bilibili链接

happy fte

    原文作者：andypinet
    原文地址: https://segmentfault.com/a/1190000004233348
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。