对 我又挖坑了 不过实在也不算挖坑 由于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要领 如许不错
@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