index.html

<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    

    <!--Author-->
    
        <meta name="author" content="ZhangChengbin">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="btFrankenstein"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="btFrankenstein"/>

    <!--Type page-->
    
        <meta property="og:type" content="website" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>btFrankenstein</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    

    <!-- favicon -->
    
    <link rel="icon" href="/img/favicon.png">
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">btFrankenstein</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in the theme's configuration: index_cover -->
<header class="intro-header" style="background-image: url('/img/home-cover.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1>btFrankenstein</h1>
                    <hr class="small">
                    <span class="subheading">Challengers are always on the way</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            
                <div class="post-preview">
    <a href="/2018/04/26/浏览器加载过程/">
        <h2 class="post-title">
            浏览器加载过程
        </h2>
        
        <div class="post-content-preview">
          
本文是根据谷歌开发者文档 Constructing the Object Model 和 Render-tree Construction, Layout, and Paint 两个章节翻译整理而成

Document Object Model (DOM)先看下图，解释了 DOM 的创建过程


转化（Conversion）：浏览器读取 HTML 文件，根据不同的编码方式（比如 UTF-8）将原...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
            Posted by chengbin on
        
        2018-04-26
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2018/03/12/Vue服务端渲染-SSR-初探/">
        <h2 class="post-title">
            Vue服务端渲染(SSR)初探
        </h2>
        
        <div class="post-content-preview">
          SSR？SSR - 是Server-Side Rendering（服务端渲染）的缩写。通常情况下，我们使用 Vue.js 构建单页面应用的。在这种方式下，页面最开始只有一个 &lt;div id=&quot;app&quot;&gt;&lt;/div&gt; 元素，该元素内部的所有其他的 DOM 和数据都是通过 js 渲染加载出来的。SSR 则不同，每个页面或者组件会被渲染为服务器端的 HTML ...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
            Posted by chengbin on
        
        2018-03-12
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2018/02/28/Vue源码之Observer/">
        <h2 class="post-title">
            Vue源码之Observer
        </h2>
        
        <div class="post-content-preview">
          这篇文章讲解上篇文章没有覆盖到的 Observer 部分的内容，还是先看官网这张图

Observer 最主要的作用就是实现了上图中 touch - Data(getter) - Collect as Dependency 这段过程，也就是依赖收集的过程。
还是以下面的代码为例子进行梳理
123456789101112var vm = new Vue(&#123;  el: '#demo',  ...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2018-02-28
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2018/02/11/Vue响应式原理之 Watcher 和 Dep/">
        <h2 class="post-title">
            Vue 响应式原理之 Watcher 和 Dep
        </h2>
        
        <div class="post-content-preview">
          之前在学习 Vue 官方文档深入响应式原理时，大概对响应式有一个概念性的了解以及它的效果是什么样子的。最近通过阅读 Vue 的源码并查询相关资料，对响应式原理有了更进一步的认识，并且大体上可以还原出它的实现过程。最近几篇文章会记录一下自己的理解过程。
响应式原理我理解可以分为两步，第一步是依赖收集的过程，第二步是触发-重新渲染的过程。Observer 用来使用 Object.defineProp...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2018-02-11
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2018/02/08/观察者（发布订阅）模式/">
        <h2 class="post-title">
            观察者（发布订阅）模式
        </h2>
        
        <div class="post-content-preview">
          最近在看 Vue 的源码，发现会涉及到观察者模式的相关知识。因此写篇文章记录一下该模式的基本知识。下面关于观察者模式的定义来自维基百科。

观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。

观察者模式也被称作发布-订阅模式，它由三个角色构成。...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2018-02-08
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2018/02/08/Vue项目实践-打造智能数据商场后台管理系统/">
        <h2 class="post-title">
            Vue项目实践-打造智能数据商场后台管理系统
        </h2>
        
        <div class="post-content-preview">
          Smart Data Market 以下简称（SDMK）是 TalkingData 作为数据行业的先行者推出的智能数据服务商城。SDMK 在之前有一个1.0版的后台管理系统。但是随着业务和需求的增加，以及公司前端技术栈的统一。我们使用 Vue 重构了之前的系统，命名为 SDMK-ADMIN，同时也根据需求增加新功能。下图是 SDMK-ADMIN 的基本页面样式


目录结构123456789101...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2018-02-08
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2018/01/18/管理服务编织页面的状态/">
        <h2 class="post-title">
            使用 vuex 管理服务编织页面的状态
        </h2>
        
        <div class="post-content-preview">
          之前的后台管理项目中，组件之间的状态管理大多采用的是 eventBus 或者 $emit $on的方式进行通信。在最近新上线的服务编织页面中，终于系统性的使用 vuex 进行状态管理。该篇文章是对使用的过程做一个记录。
背景介绍先看一下服务编织页面的具体操作过程

页面大体上分为两个区域：

左侧列表区域，其中包含已购服务和编织历史两个 tab 页的内容
右侧编织区域。列表区域的已购服务标签内，可...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2018-01-18
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2017/11/13/Webpack优化/">
        <h2 class="post-title">
            使用 vue-cli 构建项目中的 Webpack优化
        </h2>
        
        <div class="post-content-preview">
          通过之前的两篇文章，了解 webpack 相关的一些知识。现在终于可以进入到实践了。手里的项目自从用 vue-cli 构建完成之后，就再也没有动过 webpack 里面的相关配置。随着项目规模越来越大，每次上测试或者生产环境用于打包的时间越来越长。一次构建将近90s的时间，实在无法忍受。于是着手进行优化。
webpack 升级 3.x根据官方的 release 声明，webpack 3.x ...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2017-11-13
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2017/11/02/webpack中的代码分割/">
        <h2 class="post-title">
            webpack中的代码分割
        </h2>
        
        <div class="post-content-preview">
          代码分割（code splitting）是webpack相当重要的一个特性。它可以让代码分割到不同的文件（bundle）中，以便按需或者并行加载这些文件。代码分割可以得到更小的文件，控制资源加载的优先级。如果使用得当，更是可以优化加载的时间。
这里先看一个使用 vue-cli 构建的实际项目打包出来的 bundle 都有什么

这里只关注 js 文件。可以看到除了上篇文章提到的 app、vendo...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2017-11-02
    </p>
</div>
<hr>
            
                <div class="post-preview">
    <a href="/2017/10/31/vue-cli中的CommonsChunkPlugin都做了哪些工作/">
        <h2 class="post-title">
            vue-cli中的CommonsChunkPlugin都做了哪些工作
        </h2>
        
        <div class="post-content-preview">
          最近有需求需要对 vue-cli 生成的项目需要做一些 webpack 构建速度方面的优化。要想优化，首先要明白 webpack 配置文件中各种配置的作用是什么。所以想写一系列文章来记录一下自己的研究过程。文章应该不会涵盖所有内容，只会对自己感兴趣的部分做记录和分析。
vue-cli中的CommonsChunkPlugin下图是使用 vue-cli 构建之后，webpack.prod.conf.j...
        </div>
    </a>
    <p class="post-meta">
        <!-- Date and Author -->
        
        2017-10-31
    </p>
</div>
<hr>
            

            <ul class="pager">
    
    
        <li class="next"><a href="/page/2/">Older Posts  &rarr;</a></li>
    
</ul>
        </div>
    </div>
</div>


    <!-- Footer -->
    <!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                        <li>
                            <a href="https://github.com/btfrankenstein" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                </ul>
                <p class="copyright text-muted">&copy; 2018 ZhangChengbin<br></p>
                <!-- <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p> -->
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->


</body>

</html>