Your awesome title

垂直居中的几个写法

2017-09-05T15:50:22+00:00

父元素定高

代码

<style>
    .block-fix-height{
        width: 500px;
        height: 200px;
        border: 1px solid red;
        font-size: 0;
    }
    .block-fix-height:before{
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .box1{
        width: 50px;
        height: 50px;
        background: green;
        display: inline-block;
        vertical-align: middle;
    }
    .box2{
        width: 150px;
        height: 150px;
        background: green;
        display: inline-block;
        vertical-align: middle;
    }
    img{
        vertical-align: middle;
    }
    span{
        font-size: 14px;
        vertical-align: middle;
    }
</style>
<div class="block-fix-height">
    <div class="box1"></div>
    <img src="images/dog.jpg" alt="">
    <div class="box2"></div>
    <span>this is a text</span>
</div>

表现

说明1：父元素font-size: 0是为了消除chrome带来的间距

说明2：父元素的伪类设置成inline-block，并且高度为100%

说明3：所有要居中的元素设置vertical-align: middle

父元素不定高

把上面的例子中的父元素换成

.block-no-height{
    width: 500px;
    border: 1px solid red;
    font-size: 0;
}

这样的父元素就不需要写伪类

表现

总结

只要子元素中有跟父元素一样高度的元素，并都设置了vertical-align: middle，都可以实现居中，如果没有就要造一个。

浮动元素脱离文档流的表现

2017-09-05T14:50:22+00:00

代码

<style>
    .box{
        width: 50px;
        height: 50px;
    }
    .box-up{
        background: blue;
    }
    .float-box{
        float: left;
        width: 500px;
        height: 200px;
        border: 1px solid red;
        background: rgba(255, 0, 0, 0.2);
    }
    .box-down{
        background: green;
    }
</style>

<div class="box-up box">up</div>
<div class="float-box"></div>
<span>this is a text</span>
<div class="box-down box">down</div>

在chrome在的表现

表现1：浮动元素只影响其在文档流下面的元素，其上面的元素不受影响，如box-up

表现2：浮动元素只影响块级元素，行内元素不受影响，如span,可以看到box-down里面的文字也不受影响。

有人会问为什么box-down不顶到float-box上边线呢？

这是因为box-down和span还在文档流中，所以box-down会另起一行，在span的下面。

脱离文档流的元素有哪些特征

2017-09-02T22:46:22+00:00

如何脱离文档流

float
position -> absolute \ fixed

脱离文档流后元素的变化

行内元素可以设置宽高
块级元素width无法默认100%，而是由内容撑开
margin对元素依旧有效

<style>
.box{
    position: relative;
    width: 400px;
    height: 400px;
    background: #ddd;
}
.popup{
    position: absolute;
    width: 50px;
    height: 50px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: blue;
}
.block{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    background: green;
}
.inline{
    float: left;
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-left: 20px;
    background: rebeccapurple;
}
</style>
<div class='box'>
    <span class="inline">inline</span>
    <div class="block">block</div>
    <div class='popup'>popup</div>
</div>

需要注意的是绝对定位元素在设了left后，才能设margin-left,同理设了right后才能设margin-right

以上这些特征基本和把元素设成inline-block的特性一样

详解Angular路由的懒加载

2017-08-27T13:46:22+00:00

Angular的路由功能是目前三大主流框架AVR中最强大的（没有之一），包含了多层嵌套路由、路由守护、路由模块懒加载等神奇的功能，完全能够满足各种复杂度的SPA需求了。我们来扒开这个强大功能的神秘面纱，今天就从路由懒加载开始。

在angular项目中配置懒加载路由

下面是一个典型的使用懒加载的配置方式：

AppModule中引入带loadChildren的路由。loadChildren是一切的关键，如果写成component了，那就没有效果了：

const appRoutes = [
    {
        path: 'button',
        loadChildren: './button/demo.module#ButtonDemoModule'
    }
];

@NgModule({
    declarations: [AppComponent],
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

在ButtonDemoModule中配置路由导航，下面的配置平淡无奇，写出来只是为了给大家一个上下文而已，关键部分在上面的loadChildren！

const buttonDemoRoutes = [
    {
        path: 'basic', component: ButtonBasicDemoComponent
    }
];

@NgModule({
    declarations: [ButtonBasicDemoComponent],
    imports: [
        RouterModule.forChild(buttonDemoRoutes)
    ]
})
export class ButtonDemoModule {
}

这样的配置效果是，/button 这一层的路由是懒加载的，而 /button/* 这各级路由就是非懒加载的。这里是一个在线演示 http://rdk.zte.com.cn/component/，关键部分的源码在这里 http://t.cn/RKV5jph

如果你喜欢Jigsaw组件库，请帮忙点个星星鼓励我们一下

下面这个图是给懒人准备的：

路由懒加载在Angular里的处理流程

我们深入学习了 Angular 路由的代码，发现我们在路由模块中的配置，实际上是一个 Route 数组，路由组件会根据浏览器的url和这个数组，找到这段路由的配置信息，包含对应的组件、路由插座、是否有守护、数据等信息。

路由懒加载的关键一步是：当 Route 数组中出现 loadChildren 配置信息时，路由模块会调用注入 NgModuleFactoryLoader 服务，发起请求下载对应的包文件，然后再执行路由的后续加载组件视图的操作。

这是大概的处理流程图：

路由懒加载究竟是如何实现的

一开始我们走了弯路，以为是路由模块实现的懒加载，但是在路由的实现代码中，死活找不到具体实现的方式，到后来才发现，这完全是webpack和angular-cli的功劳。

首先有一点非常重要：angular-cli是使用了webpack进行打包的，因此有必要先看看webpack是如何打包和懒加载的。

webpack是如何打包和懒加载的

以webpack对js中引用了第三方插件的懒加载为例，在js代码中使用require.ensure，webpack可以通过require.ensure区分正常require进行切片。

require.ensure([], (require) => {
    require("bootstrap/dist/css/bootstrap.min.css");
    require("eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css");
    require("eonasdan-bootstrap-datetimepicker");
}, 'datepicker'); // datepicker就是定义的切片包名

在webpack.config.js中配置切片名

output: {
    path: helpers.root('dist'),
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].chunk.js' // 切片命名
}

webpack的切片结果：

实际的运行效果如下，可以看到datepicker.chunk.js文件是懒加载下来的

喜欢刨根问底的同学会问，webpack是如何懒加载切片文件的呢？我们可以扒开打包后的文件来看看。

webpack打包后生成的文件里有三个重要的全局函数

webpackJsonp
__webpack_require__
__webpack_require__.e

下面逐个说明各自的作用。

`webpackJsonp`

webpack利用JSONP技术，先在浏览器定义好webpackJsonp这个函数，然后从后端下载用webpackJsonp进行封装的js，浏览器获取这样的js文件就可以立即执行了。webpackJsonp的源码如下：

(function(modules) {
    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
        // add "moreModules" to the modules object,
        // then flag all "chunkIds" as loaded and fire callback
        /*......*/
        for(moduleId in moreModules) {
            if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
                modules[moduleId] = moreModules[moduleId];
            }
        }
        /*......*/
    };
})([])

webpackJsonp有三个参数

chunkIds 是包文件的标识；
moreModules 是包文件自带的 modules，与moduleId一一对应，webpackJsonp会把包文件的modules复制到全局的modules；
executeModules 是要立即执行的模块；

webpack打包出来的文件都是用webpackJsonp这个函数封装起来的，类似于：

webpackJsonp([12, 33],{
    111:
    (function(module, exports) {
        /*......*/
    }),

    112:
    (function(module, exports, __webpack_require__) {
        /*......*/
    }),
    /*......*/
})

`__webpack_require__`

主要根据moduleId从全局的modules加载模块。

`__webpack_require__.e`

通过动态插入script标签的方式，下载对应的chunk包文件，可以看看源码

__webpack_require__.e = function requireEnsure(chunkId) {
    /*......*/
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    /*......*/
    script.src = __webpack_require__.p + "" + chunkId + ".chunk.js";
    /*......*/
    head.appendChild(script);
    return promise;
}

angular-cli是如何打包的

angular-cli里面对webpack进行了定制化配置，不同于前面说的使用require.ensure进行切片打包，angular-cli 让webpack识别router里的loadChildren关键字进行打包。让我们来看看打包后的文件。

main.bundle.js

var map = {
    "./button/demo.module": [
        919,
        11
    ],
    "app/demo/demo-list": [
        923,
        23
    ]
};
function webpackAsyncContext(req) {
    var ids = map[req];
    if(!ids) {
        return Promise.reject(new Error("Cannot find module '" + req + "'."));
    }
    // __webpack_require__.e就是webpack用于懒加载的函数
    return __webpack_require__.e(ids[1]).then(function() {
        return __webpack_require__(ids[0]);
    });
};

可以看到webpack根据路由生成了一个url与数组ids对应的对象，url是用户在路由中配的loadChildren参数，ids[1]代表chunkId，也就是对应的包文件， ids[0]代表moduleId，即需要加载的模块。在webpackAsyncContext这个函数中，__webpack_require__.e 通过chunkId从后端下载到chunk包文件，然后 __webpack_require__ 通过moduleId加载到对应的模块。

button-demo-module对应的切片包 11.chunk.js

webpackJsonp([11,32],{
    919: (function(module, __webpack_exports__, __webpack_require__) {
        /* harmony export (binding) */
        __webpack_require__.d(__webpack_exports__, "ButtonDemoModule", function() { return ButtonDemoModule; });
        var ButtonDemoModule = (function () {
            function ButtonDemoModule() {
            }
            return ButtonDemoModule;
        }());
    })
})

最终结论

用户浏览器输入如下url时

http://localhost:4200/button/basic

RouterMoudule会通过注入的 NgModuleFactoryLoader 调取angular-cli的 webpackAsyncContext 函数。webpackAsyncContext 通过map拿到对应的chunkId，调用 __webpack_require__.e 的动态下载对应的chunk包文件，下载完成后，就像使用普通模块一样，调用 __webpack_require__ 执行对应的模块，于是在全局下就可以使用到这个模块了。

这个过程就是angilar-cli加载路由的 loadChildren 的过程。

看完了这个文章，我们发现Angular的代码和Angular-cli的关系是如此的紧（耦）密（合），所以请给我一个不使用angular-cli来初始化你的工程的理由！

题外话

这些文章都是我们在研发Jigsaw七巧板过程中的技术总结，如果你喜欢这个文章，请帮忙到 Jigsaw七巧板 (https://github.com/rdkmaster/jigsaw)的工程上点个星星鼓励我们一下，这样我们会更有动力写出类似高质量的文章。Jigsaw七巧板现在处于起步阶段，非常需要各位的呵护。

Welcome to Jekyll!

2017-08-27T13:14:22+00:00

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.