正则表达式

本次分享，帮助大家整体过一遍正则表达式的常用基础知识点，能够在以后的工作中，举一反三，不必害怕。

从最简单开始——尽可能严谨的给出匹配规则

现在有一串坚果pro在微信下的useragent信息，通过大量的观察，可以发现，所有的坚果pro都有一个OD标识，且后面紧跟一串数字作为他的具体型号。

1

Mozilla/5.0 (Linux; U; Android 7.1.1; zh-CN; OD105 Build/NMF26F) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.1.3.993 Mobile Safari/537.36

一、最简单Promnise

根据定义可知，promise是一个规范，规范并不在意promise是怎样create、reject，fulfill。规范只在意有木有一个then方法。
根据我们下面的使用方式

1
2
3
4
5
6
7
8
9

let p = new MyPromise(function (resolve, reject) {
    setTimeout(() => {
        resolve(100);
    }, 5000);
});

p.then(function (data) {
    console.log(data);
});

最近，业务上对照片处理的需求比较多，其中有一个照片瀑布流的效果，类似于500px，实现图片自适应的等高、无拉伸、无剪裁显示。大概效果如下图所示。

开始以为会有点好玩的算法，通过js简单控制图片的排列，后来发现，在已知每幅图的宽高的情况下，只需css即可实现这样的效果。

在这一节中，我们将给Feact增加setState方法，这个方法非常有趣，端起饮料好好享受吧。

给Feact添加state

state和props非常相似，他们都是组件在渲染的时候，流动在内部的数据。不同的是props来自于外部，state是内部的。到目前为止，Feact只支持props，所以，在我们搞出setState之前，我们得先给这个小框架增加个state这个概念。

上两篇中，React具有了基本的渲染能力。但是，一旦渲染发生，就不能再改变了。这一篇中，我们将在render中，添加更新功能,并且，将简单的展示虚拟dom的diff过程。

简单更新

让React应用实现更新，最普通的办法就是调用组件的setState()方法。但是，React也支持通过React.render()来实现更新。就像如下所示：

1
2
3
4
5

React.render(<h1>hello</h1>, root);

setTimeout(() => {
    React.render(<h1>hello again</h1>, root);
}, 2000)

本篇中，我们暂时忽略setState()，先通过Feact.render()来实现更新。说实话，这就是最屌丝的『props改变，所以更新』的模型，即如果你又render了，并且传入了不同的props给子组件，那么就更新呗。

上一篇中，简单的介绍了ReactJs的渲染结构，这里，会对组件的生命周期进行简单的分析。

首先，对createClass()这个函数进行简单的处理。

上一节，createClass()如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13

const Feact = {
    
    // 其他都一样

    createClass (spec) {
       function Constructor(props) {
           this.props = props;
       }
       Constructor.prototype.render = spec.render;

       return Constructor;
    }
}

从上面可以看出，render()方法仅仅接收了子组件的render方法，这里可以简单处理下，将整个spec挂载到组件的原型上去。让Constructor()能够继承包括componentWillMount等更多的属性和方法。

React是声明式的

在React中，写一个组件，通常会这么写

1
2
3
4
5

class Mycomponent extends React.Component {
    render () {
        return <div>hello</div>
    }
}

其中，return的内容，会被编译为

1
2
3
4
5

class Mycomponent extends React.Component {
    render () {
        return React.createElement('div', null, 'hello');
    }
}

在某种意义上说，我们是通过调用了React.createElement来创建
一个组件。但是，事实上我们仅仅是声明了这个组件，然后React帮助我们实例化了这个组件对象，并调用render()来创建了这个组件。我们仅仅需要描述我们需要什么，剩下的全部由React渲染页面。

新的开始，希望一切步入正轨。

父级元素设置display为flex或者inline-flex时，表示该元素将以弹性盒子方式布局。同时，该元素上的float、clear、vertical-align将全部失效。

1
2
3

.box {
    display: flex; /*inline-flex*/
}

基本概念：

• flex容器: 设置display为flex的父级元素为flex容器
• flex项目: 容器中所有的子元素，为容器的flex项目，即flex item
• 主轴(main asix): flex项目的填充方向，默认为水平方向；主轴的起始位置(flex容器边框的交叉点)为main start，结束位置为main end
• 交叉轴(cross asix): 与主轴垂直交叉的轴，叫交叉轴 ；交叉轴的起始位置为cross start，结束位置为cross end
• 主轴空间: flex项目占据的主轴空间为main size；占据的交叉轴空间为cross size

flex容器接收的属性：

1
2
3
4
5
6
7
8
9

.box {
    display: flex; /*inline-flex*/
    flex-direction: row; /*主轴的方向，默认row(从左到右)，可选row-reverse(从右到左)、column(从上到下)、column-reverse(从下到上)*/
    flex-wrap: nowrap; /*是否换行，默认nowrap(不换行)，可选wrap(换行，第一行在上方)、wrap-reverse(换行，第一行在下方)*/
    flex-flow: row nowrap; /*flex-direction和flex-wrap的连写*/
    justiy-content: flex-start; /*容器内的项目在主轴上的对齐方式，默认flex-start(左对齐)，可选flex-end(右对齐)、center(居中)、space-between(两端对齐，左侧的去最左右侧去最右，项目间隔相等)、space-around(左右间隔平分)*/
    align-items: stretch; /*容器内的项目在交叉轴上的对齐方式，默认stretch(拉伸，如果没设置高度，则垂直填充)，可选默认flex-start(上对齐)、flex-end(下对齐)、center(居中)、baseline(第一行文字下对齐对齐，即文字大小不同时，以文字下基线对齐)*/
    align-content: stretch; /*多轴线对齐方式(多行)，如果只有一根轴线(单行)，则无效，可选flex-start、flex-end、center、space-between、space-around*/
}

flex项目接收的属性：

1
2
3
4
5
6
7
8

.box > .item {
    order: 0; /*排序，越小越靠前，默认为0*/
    flex-grow: 0; /*分配剩余空间的比例，默认为0，有剩余空间也不分配*/
    flex-shrink: 1; /*缩小比例，如果容器空间不足，则按比例缩小，默认为1，如果为0则不缩小*/
    flex-basis: auto; /*分配空间前，项目占据的主轴大小，默认为auto，即为项目本身的大小*/
    flex: 0 1 auto; /*flex-grow, flex-shrink, flex-basis的连写*/
    align-self: auto; /*允许单个项目与其他不一样的交叉轴对齐方式，默认auto为继承父元素的align-items*/
}

妈的，这是天意么？

之前的github帐号莫名其妙的被封了，申诉无数次无果，一怒之下删除了帐号。

思来想去，彩笔到底是离不开这个网站，不要脸的又注册了一个。

就当新的开始把，在苦逼的2016结束之际，希望能有更崭新的一面。