前端高质量总计之风华正茂,伊始使用Flexbox布局

日期:2019-11-03编辑作者:美高梅老虎机平台

Web重构之道

2015/10/25 · 底蕴能力 · 重构

初藳出处: 大漠   

前面贰个高质量总括之生机勃勃:WebWorkers

2017/10/21 · HTML5 · WebWorkers

原来的小说出处: magicly   

新近做二个档期的顺序,里面涉及到在前端做多量测算,直接用js跑了弹指间,大概需求15s的岁月, 也正是客户的浏览器会卡死15s,这几个完全接收不了。

就算如此有V8那样牛逼的内燃机,但咱们清楚js并不合乎做CPU密集型的精打细算,一是因为单线程,二是因为动态语言。大家就从那多个突破口动手,首先化解“单线程”的节制,尝试用WebWorkers来加快总括。

canvas 图像旋转与翻转姿势解锁

2017/05/26 · HTML5 · Canvas

原版的书文出处: 坑坑洼洼实验室   

多图预先警示,数学倒霉可径直跳至文末小结。

降落首屏时间,“直出”是个什么概念?

2015/12/31 · HTML5 · 2 评论 · 首屏

原来的文章出处: VaJoy Larn   

明年前端还地处刀耕火耘、JQuery独具特色的一时,前后端代码的耦合度非常高,三个web页面文件的代码大概是如此的:

图片 1

图片 2

那代表后端的程序员往往得承当生龙活虎部分修改HTML、编写脚本的办事,而前者开垦者也得询问页面上设有的服务端代码含义。

不时某处页面逻辑的改造,鉴于代码的混合着去搭配,或者都不明显相应请后端照旧前面叁个来改动(即便他们都能管理卡塔尔。

图片 3

前面贰个框架热潮

有句俗语说的好——“人呀,若是擅于开口‘关自家屁事’和‘关你屁事’那俩句,能够省去人生中的超越四分之二时间”。

乘机那七年被 angular 起头带起的各样前端MV*框架的盛行,后端能够毋须再于静态页面开支激情,只需求全神关心开辟数据接口供前端接受就可以。得益于此,前后端终于得以安心地相互道一声“关小编屁事”或“关你屁事”了。

以 avalon 为例,前端只要求在页面加载时发送个ajax哀告得到数据绑定到vm,然后做view层渲染就可以:

var vm = avalon.define({ $id: "wrap", list: [] }); fetch('data/list.php') //向后端接口发出央求 .then(res => res.json()) .then(json => { vm.list = json; //数据注入vm avalon.scan(); //渲染view层 });

1
2
3
4
5
6
7
8
9
10
11
var vm = avalon.define({
    $id: "wrap",
    list: []
});
 
fetch('data/list.php')   //向后端接口发出请求
    .then(res => res.json())
    .then(json => {
        vm.list = json; //数据注入vm
        avalon.scan();  //渲染view层
    });

静态页面包车型地铁代码也由前端一手精晓,原来服务端的代码换到了 avalaon 的专项使用属性与插值表明式:

ul ms-controller="wrap"> li ms-repeat="list">{el.name}li> ul>

1
2
3
ul ms-controller="wrap">
    li ms-repeat="list">{el.name}li>
ul>

上下端代码隔开分离的格局大大进级了档期的顺序的可维护性和开垦功用,已经产生风流倜傥种web开拓的主流方式。它解放了后端工程师的双手,也将更加多的调控权转移给前端人士(当然前端也为此须求多学习一些框架知识卡塔 尔(阿拉伯语:قطر‎。

图片 4

弊端

内外端隔开的情势即便给开荒端来了低价,但对照仁同一视的旧形式,页面首屏的数码须要在加载的时候向服务端发去央求本领获得,多了乞请等候的年华(RTT)。

那代表客户访谈页面包车型地铁时候,这段“等待后端再次来到数据”的时延会处在白屏状态,倘使客商网速差,那么这段首屏等候时间会是很倒霉的体会。

本来拉到数据后,还得做 view 层渲染(顾客端引擎的拍卖或然非常快的,忽视渲染的时间卡塔 尔(阿拉伯语:قطر‎,那又依靠于框架本人,即框架要先被下载下来技能管理这个视图渲染操作。那么好东西,三个angular.min.js 就到达了 120 多KB,用着渣能量信号的顾客得多等上豆蔻梢头两秒来下载它。

这样看来,单纯前后端隔开的方式存在首屏时间较长的主题材料,除非以往平均网速达到上G/s,不然都是不杰出的资历。

其余利用前端框架的页面也不平价SEO,其实应当说不便中华民国内那一个渣寻找引擎的SEO,谷歌(Google卡塔尔曾经能从内部存储器中去抓数据(顾客端渲染后的DOM数据卡塔尔国。

so 如何做?相信广大相恋的人猜到了——用 node 来助阵。

图片 5

直出和同构

直出差相当的少其实正是“服务端渲染并出口”,跟早先大家聊起的光景端三位一体的开销形式为主形似,只是后端语言大家换来了 node 。

09年上马冒头的 node 今后成了当红炸子鸡,包蕴Ali、Tencent在内的各大商厦都恒河沙数地把 node 用到项目上,前后端整而为风流倜傥,纵然 node 的性状适用于您的品种,那么甘心情愿呢。

我们在那边也谈到了一个“同构”的定义,即上下端(这里的“后端”指的是直出端,数据接口不确定由node开荒卡塔尔国行使相似套代码方案,方便维护。

现阶段 node 在服务端有着广大主流抑或肥猪流的框架,包蕴express、koa、thinkjs 等,能够不慢上手,利用各个中间件得以拓宽急速开辟。

除此以外诸如 ejs、jade 那样的渲染模板能让大家轻巧地把首屏内容(数据或渲染好的DOM树卡塔 尔(英语:State of Qatar)注入页面中。

那样用户访谈到的正是曾经包括首屏内容的页面,大大减弱了守候时间,提高了体验。

图片 6

示例

在那地我们以 koa + ejs + React 的服务端渲染为例,来探视二个简便的“直出”方案是哪些完成的。该示例也能够在我的github上下载到。

品种的目录结构如下:

+---data //模拟数据接口,放了两个.json文件 +---dist //文件塑造后(gulp/webpack卡塔尔寄存处 | +---css | | +---common | | ---page | +---js | | +---component | | ---page | ---views | +---common | ---home +---modules //一些自行封装的通用业务模块 +---routes //路由计划 ---src //未构建的公文夹 +---css | +---common | +---component | ---page +---js | +---component //React组件 | ---page //页面入口文件 ---views //ejs模板 +---common ---home

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
+---data   //模拟数据接口,放了一个.json文件
+---dist  //文件构建后(gulp/webpack)存放处
|   +---css
|   |   +---common
|   |   ---page
|   +---js
|   |   +---component
|   |   ---page
|   ---views
|       +---common
|       ---home
+---modules  //一些自行封装的通用业务模块
+---routes  //路由配置
---src  //未构建的文件夹
    +---css
    |   +---common
    |   +---component
    |   ---page
    +---js
    |   +---component //React组件
    |   ---page //页面入口文件
    ---views  //ejs模板
        +---common
        ---home

1. node 端 jsx 分析管理

node 端是不会和睦分辨 React 的 jsx 语法的,故大家供给在品种文件中引进 node-jsx ,就算现行反革命得以设置 babel-cli 后(并加上预设卡塔尔选拔 babel-node 命令取代node,但前面一个用起来总会出标题,故一时照旧接收 node-jsx 方案:

//app.js require('node-jsx').install({ //让node端能解析jsx extension: '.js' }); var fs = require('fs'), koa = require('koa'), compress = require('koa-compress'), render = require('koa-ejs'), mime = require('mime-types'), r_home = require('./routes/home'), limit = require('koa-better-ratelimit'), getData = require('./modules/getData'); var app = koa(); app.use(limit({ duration: 1000*10 , max: 500, accessLimited : "您的乞请太过多次,请稍后重试"}) ); app.use(compress({ threshold: 50, flush: require('zlib').Z_SYNC_FLUSH })); render(app, { //ejs渲染配置 root: './dist/views', layout: false , viewExt: 'ejs', cache: false, debug: true }); getData(app); //首页路由 r_home(app); app.use(function*(next){ var p = this.path; this.type = mime.lookup(p); this.body = fs.createReadStream('.'+p); }); app.listen(3300);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//app.js
require('node-jsx').install({  //让node端能解析jsx
    extension: '.js'
});
 
var fs = require('fs'),
    koa = require('koa'),
    compress = require('koa-compress'),
    render = require('koa-ejs'),
    mime = require('mime-types'),
    r_home = require('./routes/home'),
    limit = require('koa-better-ratelimit'),
    getData = require('./modules/getData');
 
var app = koa();
 
app.use(limit({ duration: 1000*10 ,
    max: 500, accessLimited : "您的请求太过频繁,请稍后重试"})
);
app.use(compress({
    threshold: 50,
    flush: require('zlib').Z_SYNC_FLUSH
}));
 
render(app, {  //ejs渲染配置
    root: './dist/views',
    layout: false ,
    viewExt: 'ejs',
    cache: false,
    debug: true
});
 
getData(app);
 
//首页路由
r_home(app);
 
app.use(function*(next){
    var p = this.path;
    this.type = mime.lookup(p);
    this.body = fs.createReadStream('.'+p);
});
 
app.listen(3300);

2. 首页路由(’./routes/home’卡塔 尔(阿拉伯语:قطر‎配置

var router = require('koa-router'), getHost = require('../modules/getHost'), apiRouter = new router(); var React = require('react/lib/ReactElement'), ReactDOMServer = require('react-dom/server'); var List = React.createFactory(require('../dist/js/component/List')); module.exports = function (app) { var data = this.getDataSync('../data/names.json'), //取首屏数据 json = JSON.parse(data); var lis = json.map(function(item, i){ return ( <li>{item.name}</li> ) }), props = {color: 'red'}; apiRouter.get('/', function *() { //首页 yield this.render('home/index', { title: "serverRender", syncData: { names: json, //将取到的首屏数据注入ejs模板 props: props }, reactHtml: ReactDOMServer.renderToString(List(props, lis)), dirpath: getHost(this) }); }); app.use(apiRouter.routes()); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var router = require('koa-router'),
    getHost = require('../modules/getHost'),
    apiRouter = new router();
 
var React = require('react/lib/ReactElement'),
    ReactDOMServer = require('react-dom/server');
var List = React.createFactory(require('../dist/js/component/List'));
 
module.exports = function (app) {
 
    var data = this.getDataSync('../data/names.json'),  //取首屏数据
        json = JSON.parse(data);
 
    var lis = json.map(function(item, i){
       return (
           <li>{item.name}</li>
       )
    }),
        props = {color: 'red'};
 
    apiRouter.get('/', function *() {  //首页
        yield this.render('home/index', {
            title: "serverRender",
            syncData: {
                names: json,  //将取到的首屏数据注入ejs模板
                props: props
            },
            reactHtml:  ReactDOMServer.renderToString(List(props, lis)),
            dirpath: getHost(this)
        });
    });
 
    app.use(apiRouter.routes());
 
};

在乎这里大家选用了 ReactDOMServer.renderToString 来渲染 React 组件为纯 HTML 字符串,注意 List(props, lis) ,大家还传播了 props 和 children。

其在 ejs 模板中的应用为:

div class="wrap" id="wrap">-reactHtml%>div>

1
div class="wrap" id="wrap">-reactHtml%>div>

如同此轻易地成功了服务端渲染的拍卖,但还只怕有生机勃勃处难点,即使组件中绑定了风云,顾客端不会感知。

据此在客商端大家也必要再做贰回与服务端风度翩翩致的渲染操作,鉴于服务端生成的DOM会被打上 data-react-id 标记,故在顾客端渲染的话,react 会通过该标识位的自己检查自纠来幸免冗余的render,并绑定上相应的事件。

那也是我们把所要注入组件中的数据(syncData卡塔 尔(英语:State of Qatar)传入 ejs 的自始自终的经过,咱们将把它当作顾客端的一个全局变量来使用,方便顾客端挂载组件的时候用上:

ejs上注入直出多少:

script> syncData = JSON.parse(''); script>

1
2
3
  script>
    syncData = JSON.parse('');
  script>

页面入口文件(js/page/home.js卡塔 尔(阿拉伯语:قطر‎挂载组件:

import React from 'react'; import ReactDOM from 'react-dom'; var List = require('../component/List'); var lis = syncData.names.map(function(item, i){ return ( <li>{item.name}</li> ) }); ReactDOM.render( <List {...syncData.props}> {lis} </List>, document.getElementById('wrap') );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import ReactDOM from 'react-dom';
var List = require('../component/List');
 
var lis = syncData.names.map(function(item, i){  
    return (
        <li>{item.name}</li>
    )
});
ReactDOM.render(
    <List {...syncData.props}>
        {lis}
    </List>,
    document.getElementById('wrap')
);

3. 接济理工科程师具

为了玩鲜,在部分模块里写了 es二〇一五 的语法,然后选取 babel 来做转变管理,在 gulp 和 webpack 中都有利用到,具体可仿照效法它们的布置。

除此以外由于服务端对 es2016 的风味帮助残缺,同盟 babel-core/register 可能利用 babel-node 命令都存在包容问题,故针对具有供给在服务端引进到的模块(比方React组件卡塔 尔(阿拉伯语:قطر‎,在koa运转前先做gulp管理转为es5(这些创设立模型块仅在服务端会用到,客户端走webpack直接援引未改换模块就能够卡塔尔国。

ejs文件中样式或脚本的内联管理自身利用了团结付出的 gulp-embed ,有意思味的爱人能够玩后生可畏玩。

4. issue

说真话 React 的服务端渲染管理大器晚成体化支付是没难题的,便是付出体验缺乏好,主要缘由依旧各地方对 es二〇一六 帮衬不成就招致的。

虽说在服务端运维前,大家在gulp中动用babel对有关模块举办转移,但像 export default XXX 这样的语法转变后要么不可能被服务端扶助,只好降级写为 module.exports = XXX。但那样写,在别的模块就没办法 import XXX from ‘X’ 了(改为 require(‘X’)代替),总来讲之不坦率。只好希望后续 node(其实应当说V8卡塔尔再迭代一些版本能越来越好地支撑 es二零一五 的表征。

其它借使 React 组件涉及列表项,常规大家会加上 key 的props性情来进步渲染效能,但即便前后端传入雷同的key值,最后 React 渲染出来的 key 值是不均等的,会引致客户端挂载组件时再做一遍渲染处理。

对于那点我个人提出是,假如是静态的列表,那么统大器晚成都不加 key ,要是是动态的,那么就加吧,客商端再渲染二遍感到也没多大点事。(只怕你有越来越好方案请留言哈~)

5. 其它

临时服务端引进的模块里面,有个别东西是独自必要在客户端采取到的,我们以那么些示例中的组件component/List为例,里面包车型地铁体制文件

require('css/component/List');

1
require('css/component/List');

不应有在服务端施行的时候使用到,但鉴于同构,前后端用的豆蔻梢头套东西,这几个怎么解决吗?其实很好办,通过 window 对象来判别就可以(只要未有何样中间件给你在服务端也加了window接口卡塔 尔(英语:State of Qatar)

var isNode = typeof window === 'undefined'; if(!isNode){ require('css/component/List'); }

1
2
3
4
5
var isNode = typeof window === 'undefined';
 
if(!isNode){
    require('css/component/List');
}

只是请留神,这里作者通过 webpack 把组件的样式也打包进了客商端的页面入口文件,其实不妥当。因为通过直出,页面在响应的时候就已经把组件的DOM树都先出示出来了,但那个时候是还从未取到样式的(样式打包到进口脚本了卡塔 尔(阿拉伯语:قطر‎,须求等到进口脚本加载的时候技能观察科学的样式,那些历程会有叁个眨眼的历程,是种不安适的心得。

为此走直出的话,提议把首屏的体裁分离出来内联到头顶去。

1 赞 2 收藏 2 评论

图片 7

React Native基本功&入门教程:发轫使用Flexbox布局

2018/07/04 · JavaScript · React Native

原作出处: 赐紫英桃城控件   

在上篇中,小编分享了有的设置并调节和测试React Native应用进度里的一点经验,借使尚未曾看过的同班请点击React Native基本功&入门教程:调节和测量试验React Native应用的一小步》。

在本篇里,让大家联合来通晓一下,什么是Flexbox布局,以致怎么着利用。

后生可畏、长度的单位

在上马任何布局此前,让大家来第意气风发需求了然,在写React Native组件样式时,长度的不带单位的,它表示“与道具像素密度毫不相关的逻辑像素点”。

本条怎么明白啊?

我们精通,显示屏上三个发光的眇小点,对应着叁个pixel(像素卡塔 尔(英语:State of Qatar)点。

若果下边四个矩形,代表五个显示器大小同等的设备,不过,它们具有的分辨率(resolution卡塔尔差异:

图片 8

图1.同等尺寸的配备 不一致的分辨率

图上的每一个小格子,其实就意味着了叁个像素(pixel卡塔 尔(英语:State of Qatar)。能够看出,一个像素点的尺寸,在此个几个大要尺寸同样但有所分歧分辨率的设备上,是区别等的。

万后生可畏大家以像素为单位来设置贰个分界面成分的朗朗上口,比如说2px的莫斯中国科学技术大学学,那么那2px的长短上边的器材中就能是上面那个样子:

图片 9

图2.莫衷一是分辨率下的2px实在中度

它们真实展现出的尺寸是不平等的。

咱俩想要生机勃勃种长度单位,在同一物理尺寸大小的显示屏上(无论分辨率哪个人高哪个人低,只要物理尺寸大小相像即可卡塔 尔(阿拉伯语:قطر‎,1个单位的尺寸所表示的概况尺寸是相像的。这种单位就活该是独自于分辨率的,把它起三个名字叫做 density-independent pixels,简单的称呼dp。这实际上正是Android系统中所使用的长度单位。

比释尊讲来说,2dp宽,2dp高的源委,在分化分辨率但荧屏尺寸同样的道具上所突显出的大要大小是同等的。(两个题外话:有些Android开采者建议具备可点击的开关,宽高都不应当少于48dp。卡塔 尔(阿拉伯语:قطر‎

图片 10

图3. 2dp * 2dp大小的源委 在长期以来尺寸的显示屏中所攻下的物理大小同样

Android中字体大小使用其余二个单位,叫做scale independent pixels,简单的称呼sp。那些单位和dp很周边,不过它平常是用在对字体大小的设置中。通过它设置的字体,能够依据系统字体大小的改动而生成。

pixel与dp存在二个公式:px = dp * (dpi/160)。

dpi表示dot per inch,是每英寸上的像素点,它也可以有个体协会和的计算公式,具体这里就不开展了。只供给掌握大家由此要利用一个独自于设备分辨率的单位,主若是为着让使用在不相同分辨率的道具中,看起来豆蔻年华致。

在HighlanderN中,同样也富有三个相近于dp的长短单位。假如大家想知道本人的显示器以这种长度的乘除下是有一点单位,能够因此引进react-native包中的Dimensions获得,同期还足以查看本机的像素比例是稍稍。

import {   Text,   View,   Dimensions,   PixelRatio } from 'react-native'; const { height, width } = Dimensions.get('window'); const pxRatio = PixelRatio.get(); <View style={styles.container}>   <Text style={styles.welcome}>     {`width: ${width}, height: ${height}`}   </Text>   <Text style={styles.welcome}>     {`pixel radio: ${pxRatio}`}   </Text> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {
  Text,
  View,
  Dimensions,
  PixelRatio
} from 'react-native';
const { height, width } = Dimensions.get('window');
const pxRatio = PixelRatio.get();
 
<View style={styles.container}>
  <Text style={styles.welcome}>
    {`width: ${width}, height: ${height}`}
  </Text>
  <Text style={styles.welcome}>
    {`pixel radio: ${pxRatio}`}
  </Text>
</View>

前端高质量总计之风华正茂,伊始使用Flexbox布局。突显如下:

图片 11

图4. 当前手机的荧屏音信

它体现出,当前手提式有线话机显示器的大幅度并吞356个单位,中度侵吞6肆11个单位。像素比例是3,实际上那就是三个1080 * 一九一九 像素的无绳电话机。在那之中1080 = width * pixelRadio, 1920 = height * pixelRatio

二、Flexbox布局

Flexbox布局,也正是弹性盒模型布局。也会有Android开垦经验的冤家还对LinearLayout,RelativeLayout,FrameLayout等布局方法铭心镂骨,可是对于更驾驭CSS的Web开辟者来说,使用flexbox布局一定会让他心获得进一层顺手的开辟体验。

福睿斯N中的flexbox布局,其实来自CSS中的flexbox(弹性盒子卡塔尔布局标准。其实它在CSS中还处在Last Call Working Draft(最后征采意见稿卡塔尔国阶段,不过主流浏览器对它都有了天时地利的帮助。在科雷傲N中,大致统统借鉴了此中的布局语义,相同的时候更不曾浏览器宽容的抑郁,用起来是很平价的。LX570N中只是把CSS的性质用camelCase写法代替连字符写法。前面还还大概会看出,暗中同意的flex方向也不如。

明亮弹性盒模型布局,首先要驾驭多个最宗旨的概念:Flex Container(容器卡塔尔国,Flex Item(项卡塔 尔(阿拉伯语:قطر‎,Flex Direction(方向卡塔 尔(阿拉伯语:قطر‎和Axis(轴卡塔 尔(阿拉伯语:قطر‎。

1.Flex Container

正是包装内容的器皿,须求把它的display设置为‘flex’(或许’inline-flex’卡塔尔。

以下6个属性设置在容器上。

  1. alignItems 钦点item在侧轴上的对齐形式
  2. alignContent 内定item在多条轴上的对齐格局
  3. flexDirection 内定主轴方向
  4. flexWrap 钦点item在主轴方向怎么着换行
  5. flexFlow flexDirection属性和flexWrap属性的简写格局
  6. justifyContent 钦点item在主轴上的遍及方式

2.Flex Item

容器做直接包裹的要素。所谓弹性盒布局,平时想要布局的事物正是它们。

以下6个属性设置在品种上。

  1. alignSelf 各个item能够单独设置对齐形式 覆盖Flex Container给安装的alignItems
  2. order 钦定item排列顺序 数字越小越靠前
  3. flexGrow 钦定item的拉伸比例
  4. flexShrink 钦赐item的压缩比例
  5. flexBasis 钦点item在分配多余空间早先,占主轴的分寸
  6. flex 其实是 flexGrow flexShrink flexBasis的简写

3.Flex Direction and Axis

在弹性盒子中,项目暗许沿着main axis(主轴卡塔 尔(阿拉伯语:قطر‎排列,和主轴垂直的轴叫做cross axis,叫做侧轴,可能交叉轴。

在盒子中,排列项目又多少个样子:水平的正面与反面两个,垂直的正面与反面三个。

布局代码:

<View> <View style={styles.row}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.rowReverse}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.column}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.columnReverse}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<View>
    <View style={styles.row}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.rowReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.column}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.columnReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

体制代码:

row: { backgroundColor: '#ffe289', flexDirection: 'row' }, rowReverse: { flexDirection: 'row-reverse' }, column: { backgroundColor: '#ffe289', flexDirection: 'column' }, columnReverse: { flexDirection: 'column-reverse' },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
row: {
backgroundColor: '#ffe289',
flexDirection: 'row'
},
rowReverse: {
flexDirection: 'row-reverse'
},
column: {
backgroundColor: '#ffe289',
flexDirection: 'column'
},
columnReverse: {
flexDirection: 'column-reverse'
},

图片 12

图5. flexDirection

鉴于英特网有关flex布局疏解的能源挺丰盛的,读者能够参照最终交给的总是,大概机关上网物色,CSS中的和MuranoN是相通的。

这里根本分享个人在念书进程中,感到轻巧引起混淆的三个小点。

率先,justify-content和align-content这两性子格,大概相比比较简单于搞错它们功用的大势。

里头,justify-content是安装items沿着主轴上是如何布满的。align-content是设置items沿着侧轴如何对齐的。

恐怕拿以前的例证,私下认可意况下,flex的大方向是column(这么些与运动端与web页面分裂,在web页面用CSS设置flex布局,私下认可的fiex-direction是row,即水平从左往右卡塔尔国。

在移动端,主轴默许是笔直方向,从上往下。让我们把它的惊人设置高级中学一年级点,放3个item在其间:

组织代码:

<View> <View style={styles.defaultFlex}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
<View>
    <View style={styles.defaultFlex}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

体制代码:

defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex' }

1
2
3
4
5
defaultFlex: {
height: 300,
backgroundColor: '#ffe289',
display: 'flex'
}

图片 13

图6. 默认的flex

justify-content设置items在主轴方向的哪些布满,比方,要是我们加多justifyContent: ‘space-between’

defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex', justifyContent: 'space-between' }

1
2
3
4
5
6
defaultFlex: {
height: 300,
backgroundColor: '#ffe289',
display: 'flex',
justifyContent: 'space-between'
}

items就沿主轴分开了。

图片 14

图7. justifyContent: ‘space-between’

假若咱们设置alignItems: ‘center’,项目就沿侧轴(这里就是水平轴卡塔尔国居中了。注意那八个属性是能够而且起功能的。

图片 15

图8. justifyContent: ‘space-between’ 以及 alignItems: ‘center’

下一场,值得提议的是,flex那性情情,其实是flexGrow, flexShrink, flexBasis(对应的CSS属性flex-grow, flex-shrink和flex-basis)四特本性的组合。

我们习感觉常在运动端观望的flex:1以此装置,其实是对flex-grow的装置。后面一个的暗中同意值为0。使用把flex-grow设置为正整数的主意,能够让item按百分比遍及,或许在任何item为一定大小时撑满剩余的盒子空间,就雷同有着弹性同样。

布局代码:

<View style={styles.container}> <View style={styles.flex1}></View> <View style={styles.flex2}></View> <View style={styles.flex3}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.flex1}></View>
    <View style={styles.flex2}></View>
    <View style={styles.flex3}></View>
</View>

体制代码:

container: { flex: 1 }, flex1: { // height: 99, flexGrow: 1, backgroundColor: 'orange', }, flex2: { flexGrow: 2, backgroundColor: 'lightblue', }, flex3: { flexGrow: 3, backgroundColor: 'green', },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
container: {
flex: 1
},
flex1: {
// height: 99,
flexGrow: 1,
backgroundColor: 'orange',
},
flex2: {
flexGrow: 2,
backgroundColor: 'lightblue',
},
flex3: {
flexGrow: 3,
backgroundColor: 'green',
},

图片 16

图9. 按比例布满

急需专心的是,假若父容器的尺码为零(即没有安装宽高,恐怕未有设定flex卡塔尔,纵然子组件假设使用了flex,也是力不从心突显的。

之所以那边最外层的利用了flex布局的,flex:1,表示让它攻克了垂直的全体空间。

三、小小实战演习

让我们来回顾利用flex布局,对以前的事例稍加调治,完成叁个尾部,尾部固定低度,中间内容占满剩下的荧屏的布局:

率先步,调治结构:

<View style={styles.container}> <View style={styles.header}></View> <View style={styles.body}></View> <View style={styles.footer}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.header}></View>
    <View style={styles.body}></View>
    <View style={styles.footer}></View>
</View>

调动体制:

container: { flex: 1 }, header: { height: 60, backgroundColor: 'orange', }, body: { flexGrow: 1, backgroundColor: 'lightblue', }, footer: { height: 60, backgroundColor: 'green', }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
container: {
flex: 1
},
header: {
height: 60,
backgroundColor: 'orange',
},
body: {
flexGrow: 1,
backgroundColor: 'lightblue',
},
footer: {
height: 60,
backgroundColor: 'green',
}

图片 17

图10. 有头尾的布局

其次部,给header增添题目。

笔者们让底部的分成3有的,侧面模拟二个回到开关,中间展现标题文字,侧边模拟黄金时代把小叉:

<View style={styles.header}> <Text style={styles.back}>重回</Text> <Text style={styles.title}>那是一个题名</Text> <Text style={styles.exit}>×</Text> </View>

1
2
3
4
5
<View style={styles.header}>
    <Text style={styles.back}>返回</Text>
    <Text style={styles.title}>这是一个标题</Text>
    <Text style={styles.exit}>×</Text>
</View>

亟待把header的flexDirection设置为水平方向:

header: { height: 60, backgroundColor: 'orange', flexDirection: 'row', alignItems: 'center' }, back: { color: 'white', marginLeft: 15 }, title: { flexGrow: 1, fontSize: 20, color: 'white', textAlign: 'center' }, exit: { marginRight: 20, fontSize: 20, color: 'white' }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header: {
height: 60,
backgroundColor: 'orange',
flexDirection: 'row',
alignItems: 'center'
},
back: {
color: 'white',
marginLeft: 15
},
title: {
flexGrow: 1,
fontSize: 20,
color: 'white',
textAlign: 'center'
},
exit: {
marginRight: 20,
fontSize: 20,
color: 'white'
}

图片 18

图11. header有了标题

其三步,我们得以把footer三等分,模拟成菜单的标准:

<View style={styles.footer}> <Text style={styles.firstMenu}>添加</Text> <Text style={styles.menu}>删除</Text> <Text style={styles.menu}>修改</Text> </View>

1
2
3
4
5
<View style={styles.footer}>
    <Text style={styles.firstMenu}>添加</Text>
    <Text style={styles.menu}>删除</Text>
    <Text style={styles.menu}>修改</Text>
</View>

加多体制:

footer: { height: 60, backgroundColor: 'green', flexDirection: 'row', alignItems: 'center' }, menu: { flexGrow: 1, textAlign: 'center', borderColor: 'white', borderLeftWidth: 1, color: 'white' }, firstMenu: { flexGrow: 1, textAlign: 'center', color: 'white' },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
footer: {
height: 60,
backgroundColor: 'green',
flexDirection: 'row',
alignItems: 'center'
},
menu: {
flexGrow: 1,
textAlign: 'center',
borderColor: 'white',
borderLeftWidth: 1,
color: 'white'
},
firstMenu: {
flexGrow: 1,
textAlign: 'center',
color: 'white'
},

图片 19

图12. footer三等分 模拟菜单

最终,让大家在body里也填充多少个带开关的输入框。

引入TextInput和Button组件,然后把它们分三组放入body中,

JavaScript

<View style={styles.body}> <View style={styles.inputRow}> <TextInput style={styles.textInput}></TextInput> <Button style={styles.btn} onPress={() => {}} title="鲜明"></Button> </View> <View style={styles.inputRow}> <TextInput style={styles.textInput}></TextInput> <Button style={styles.btn} onPress={() => {}} title="特别明确"></Button> </View> <View style={styles.inputRow}> <TextInput style={styles.textInput}></TextInput> <Button style={styles.btn} onPress={() => {}} title="明确一定甚至自然"></Button> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<View style={styles.body}>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="非常确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定一定以及肯定"></Button>
    </View>
</View>

加上体制:

body: { flexGrow: 1, backgroundColor: 'lightblue', }, inputRow: { flexDirection: 'row', alignItems: 'center', marginLeft: 10, marginRight: 10 }, textInput: { flex: 1 }, btn: { minWidth: 60 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body: {
flexGrow: 1,
backgroundColor: 'lightblue',
},
inputRow: {
flexDirection: 'row',
alignItems: 'center',
marginLeft: 10,
marginRight: 10
},
textInput: {
flex: 1
},
btn: {
minWidth: 60
}

图片 20

flex布局的四个常用试行是,部分剧情定位宽高,让多余的内容自适应。

像下边那样,我们给Button有一个小小宽度,且TextInput的flexGrow为1,那样的做法得以达成,TextInput总是占满剩下的上涨的幅度,且可伸缩。

看了地点的例证,是或不是认为在React Native中利用Flexbox布局也挺轻便吗?

指望那是个正确的初叶。

1 赞 收藏 评论

图片 21

前言

Web重构之道是现年四月份在座新加坡Qcon环球软件开辟大会的新时期的前端专项论题的叁遍共享的主旨。本次有幸能跟@达峰、@sofish、@桂川等大神一齐协作分享,感觉卓殊的美观,也认为非常的压力。幸而分享已了结,借此机缘重新回想此次大会上温馨分享的主题。早前我第生龙活虎要谢谢@贺佬给自家上台分享的空子,感激@winter大大的推荐、提出与激励。最终多谢Qcon提供这么的享受平台。

什么是WebWorkers

简单说,WebWorkers是二个HTML5的新API,web开垦者能够经过此API在后台运维多个剧本而不堵塞UI,能够用来做需求多量乘除的事情,丰富利用CPU多核。

大家能够看看那篇随笔介绍https://www.html5rocks.com/en/tutorials/workers/basics/, 或者相应的汉语版。

The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.

能够展开其黄金时代链接温馨资历一下WebWorkers的加快效果。

这段时间浏览器基本都支持WebWorkers了。 图片 22

须要背景

从叁个玩耍须要谈起:
图片 23

  1. 技能选型:canvas
    上图所出示的游戏场景,“可乐瓶”里有八个“气泡”,须求设置分裂的卡通效果,且事关 deviceOrientation 的互相,须求有大气计量改换成分状态。从性质方面思量,canvas 是不二的精选。
  2. 技术点:canvas 绘制图像
    因而对游戏场景的越来越深入分析,可以预知场景中的“气泡”成分造型都是如出意气风发辙的,且不许绳,通过 canvas 直接绘制形状实现资产较高,由此必要在 canvas 上制图图像。
  3. 技巧点:canvas 图像旋转与翻转
    固然如此“气泡”成分是同样的,能够行使同生机勃勃的图像,但图像要求多个角度/多个方向显示,由此需求对图像进行相应的旋转与翻转(镜像卡塔尔国,那也是本文所要介绍的重大。

后文代码以下图左侧绿框的“气泡”为示范,右边显示了情况中用到的八个图像:
图片 24

分享认为

虽说技不比人,况兼知道知识也少,干货非常少,但本身是一人爱于分享的人。也是首先次到QCon这种宏大上的议会上分享,加上@sofish、@达峰、@桂川、@王沛和@佳辰叁个人嘉宾享受的主旨都是部分光辉上的话题,让自家倍感压力十分的大。加上自身国语不专门的学业(被@点头猪称为鞋城官话“最佳”一位),生怕把@贺佬的场子给砸了。可是幸好少数,在此以前也涉世了大器晚成部分“场子”,学会一些自黑,不会怯场,最器重的要么本身的脸皮厚如城邑(终归是人老了,皮糙肉厚)。

Parallel.js

一直行使WebWorkers接口照旧太繁杂,万幸有人曾经对此作了包装:Parallel.js。

注意Parallel.js能够透过node安装:

$ npm install paralleljs

1
$ npm install paralleljs

而是那几个是在node.js下用的,用的node的cluster模块。假设要在浏览器里采用以来, 需求直接使用js:

<script src="parallel.js"></script>

1
<script src="parallel.js"></script>

接下来可以获得二个全局变量,ParallelParallel提供了mapreduce七个函数式编制程序的接口,能够充裕有利的进展并发操作。

大家先来定义一下我们的标题,由于专业相比复杂,作者这里把难点简化成求1-1,0000,0000的和,然后在相继减去1-1,0000,0000,答案鲜明: 0! 那样做是因为数字太大的话会有数量精度的题目,三种情势的结果会有部分数之差别,会令人感到互相的艺术不可相信赖。此难题在自家的mac pro chrome61下直接省略地跑js运转的话大致是1.5s(大家实际上业务难题亟需15s,这里为了防止客户测量试验的时候把浏览器搞死,我们简化了难点卡塔 尔(阿拉伯语:قطر‎。

const N = 100000000;// 总次数1亿 function sum(start, end) { let total = 0; for (let i = start; i<=end; i += 1) total += i; for (let i = start; i<=end; i += 1) total -= i; return total; } function paraSum(N) { const N1 = N / 10;//我们分成10分,没分分别交付一个web worker,parallel.js会依照计算机的CPU核数建构适当的workers let p = new Parallel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) .require(sum); return p.map(n => sum((n - 1) * 10000000 + 1, n * 10000000))// 在parallel.js里面没有办法直接使用外界变量N1 .reduce(data => { const acc = data[0]; const e = data[1]; return acc + e; }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const N = 100000000;// 总次数1亿
 
function sum(start, end) {
  let total = 0;
  for (let i = start; i<=end; i += 1) total += i;
  for (let i = start; i<=end; i += 1) total -= i;
  return total;
}
 
function paraSum(N) {
  const N1 = N / 10;//我们分成10分,没分分别交给一个web worker,parallel.js会根据电脑的CPU核数建立适量的workers
  let p = new Parallel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    .require(sum);
  return p.map(n => sum((n - 1) * 10000000 + 1, n * 10000000))// 在parallel.js里面没法直接应用外部变量N1
    .reduce(data => {
      const acc = data[0];
      const e = data[1];
      return acc + e;
    });
}

代码比较容易,小编这边说几个刚用的时候蒙受的坑。

  • require全数需求的函数

举个例子在向上诉讼代码中用到了sum,你必要超前require(sum),假诺sum中由用到了另叁个函数f,你还亟需require(f),同样假诺f中用到了g,则还索要require(g),直到你require了具有应用的定义的函数。。。。

  • 没法require变量

我们向上申诉代码笔者自然定义了N1,可是没办法用

  • ES6编译成ES5未来的主题素材甚至Chrome没报错

事实上项目中一齐头大家用到了ES6的特性:数组解构。本来这是很简短的性状,今后大多浏览器都已支撑了,可是小编立刻陈设的babel会编写翻译成ES5,所以会扭转代码_slicedToArray,大家可以在线上Babel测试,然后Chrome下边始终不work,也从未其它报错音信,查了非常久,后来在Firefox下开发,有报错消息:

ReferenceError: _slicedToArray is not defined

1
ReferenceError: _slicedToArray is not defined

如上所述Chrome亦非全能的哟。。。

我们能够在此Demo页面测量试验, 提速大约在4倍左右,当然仍旧得看本人电脑CPU的核数。 别的我后来在相通的微处理器上Firefox55.0.3(64人卡塔 尔(英语:State of Qatar)测量试验,上诉代码居然只要190ms!!!在Safari9.1.1下也是190ms左右。。。

认识 canvas 坐标系

canvas 上海教室像的旋转和扭转,经常见到的做法是将 canvas 坐标种类开展改动。因而,大家必要先认知 canvas 坐标种类:
图片 25
由上海体育地方可得,canvas 2D 境况中坐标连串和 Web 的坐标类别是毫发不爽的,有以下多少个特色:

  1. 坐标原点 (0,0) 在左上角
  2. X坐标向右边增进
  3. Y坐标向下方延伸

归来上述须求中,大家获取 canvas 对象并设置相应的宽高:

XHTML

<canvas id='myCanvas'></canvas>

1
<canvas id='myCanvas'></canvas>

JavaScript

// 获取 canvas 对象 var canvas = document.getElementById('myCanvas') canvas.width = 750 canvas.height = 1054 // 获取 canvas 2D 上下文对象 var ctx = canvas.getContext('2d')

1
2
3
4
5
6
// 获取 canvas 对象
var canvas = document.getElementById('myCanvas')
canvas.width = 750
canvas.height = 1054
// 获取 canvas 2D 上下文对象
var ctx = canvas.getContext('2d')

那时,canvas 的坐标体系如下图所示:
图片 26

本文由澳门美高梅老虎机平台发布于美高梅老虎机平台,转载请注明出处:前端高质量总计之风华正茂,伊始使用Flexbox布局

关键词:

ReactNative学习试行,十行HTML实现抓达成实

十行HTML完毕拉长现实 2017/06/11 · HTML5 · 1评论 本文由 伯乐在线 -生龙活虎杯哈希不加盐翻译,艾凌风校稿。未经许可...

详细>>

得到跨域json数据工具,网页品质进步指南

HTML head 头标签 2016/02/24 · HTML5 · 1评论 ·头标签 原作出处:paddingme    HTML head 尾部分的竹签、成分有无数,涉及到浏...

详细>>

轻松一招完毕json数据可视化,幸免大范围的七种

差不离一招达成json数据可视化 2015/07/21 · JavaScript· JSON,数码可视化 初藳出处: 吕大豹    支付三个里边职能时遇上...

详细>>

基本概念,深切了然

10个简化HTML5编码的在线工具 2011/08/18 · HTML5 · 1评论 ·HTML5 HTML5料定是会深透改动大家创建网址和Web应用程序。在此篇...

详细>>