index.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" >
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>lucefer</title>
  <meta name="description" content="details is the key to success" />
  <meta name="HandheldFriendly" content="True" />
  <meta name="MobileOptimized" content="320" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" type="text/css" href="/css/screen.css" />
  <!--<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" />
-->
  <meta name="generator" content="lucefer">

  
</head>


<body class="nav-closed">

<nav class="nav">
  <h3 class="nav-title">Menu</h3>
  <a href="#" class="nav-close">
        <span class="hidden">Close</span>
    </a>
  
    <ul id="menu" class="menu">
      
        <li class="menu-item menu-item-/">
          <a href="/" rel="section">
首页
          </a>
        </li>
      
        <li class="menu-item menu-item-/archives">
          <a href="/archives" rel="section">
归档
          </a>
        </li>
      
    </ul>
  

</nav>
<span class="nav-cover"></span>

  <div class="site-wrapper">
  <header class="site-head"  style="background-image: url(
    //ifanqi.top/img/header-bg.jpg)"
        >
        <nav class="main-nav overlay clearfix"><a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a></nav>
            <div class="vertical">
                <div class="site-head-content inner">
                    
                            <h1 class="blog-title"><a href="/">lucefer</a></h1>
                            <h2 class="blog-description">details is the key to success</h2>
                </div>
                <a class="bloglogo" href="https://github.com/lucefer" target="_blank">
    <span class="icon-github" style="color:white;font-size:2em"></span>
    </a>
            </div>
            <a class="scroll-down icon-arrow-left" href="#content"><span class="hidden">Scroll Down</span></a>
</header>

  
<main class="content" id="content" role="main">
  
  <article class="post">
    <header class="post-header">

      <h2 class="post-title"><a href="/2017/08/08/js-define-property/">浅谈Object.defineProperty</a></h2>
    </header>
    <section class="post-excerpt">
      <p>
      
        Object.defineProperty是伴随着ES5的发布而出现的，是一个很强大的属性，著名的前端框架vuejs就是借用它实现的数据变动检测，接下来我们学习一下它的用法。
传统方法如果不使用defineProperty，我们可以用以下两种方式定义属性：var a = &#123;&#125;// 通过.定义属性a.name = 'fanqi'// 通过属性字符串索引定义属性a["age"] = 10a.age = 20
上面两种方式
      
      </p>
      
      <p>
          <a href="/2017/08/08/js-define-property/" class="excerpt-link">Read More...</a>
      </p>
      
    </section>
    <span class="post-meta">
      <time datetime="2017-08-08T08:25:05.000Z" itemprop="datePublished">
          2017-08-08
      </time>
    
</span>
  </article>
  
  <article class="post">
    <header class="post-header">

      <h2 class="post-title"><a href="/2017/08/01/vue-bubble/">基于vuejs的消息气泡插件</a></h2>
    </header>
    <section class="post-excerpt">
      <p>
      
        之前介绍了一款基于vue的文本折行显示组件ellipisis-plus，今天介绍一款仿照QQ消息气泡的插件vue-bubble，演示地址在这里。

仿照QQ消息气泡想法的起源是来自掘金的安卓小伙伴们，看到他们在安卓平台实现了这种效果，所以想迁移到web上。在这里要感谢他们。

先放张图看一下效果：

实现原理
使用SVG绘制贝塞尔曲线以及圆形气泡。
关键点的坐标计算借鉴这位小伙伴的思路高仿QQ未读消息气泡拖拽黏连效果，非常感谢他。
气泡
      
      </p>
      
      <p>
          <a href="/2017/08/01/vue-bubble/" class="excerpt-link">Read More...</a>
      </p>
      
    </section>
    <span class="post-meta">
      <time datetime="2017-08-01T06:09:42.000Z" itemprop="datePublished">
          2017-08-01
      </time>
    
</span>
  </article>
  
  <article class="post">
    <header class="post-header">

      <h2 class="post-title"><a href="/2017/07/28/js-variable-memory/">可视化分析js的内存分配与回收</a></h2>
    </header>
    <section class="post-excerpt">
      <p>
      
        
之前写了一篇文章浏览器是怎么看闭包的，发现有些读者对js内存分配与回收懵懵懂懂，理解文章的配图比较困难，我想主要是因为配图省略了一些细节，所以导致大家理解困难。今天专门写一篇关于js内存分配回收的文章，帮助大家理解js代码的内存表示。

数据类型先唠叨些基本知识：

javascript的数据类型分为基本类型和引用类型（对象）。基本类型分为如下几种：
数字字面量
字符串字面量
布尔字面量
undefined
null


引用类型分为
      
      </p>
      
      <p>
          <a href="/2017/07/28/js-variable-memory/" class="excerpt-link">Read More...</a>
      </p>
      
    </section>
    <span class="post-meta">
      <time datetime="2017-07-28T03:54:46.000Z" itemprop="datePublished">
          2017-07-28
      </time>
    
</span>
  </article>
  
  <article class="post">
    <header class="post-header">

      <h2 class="post-title"><a href="/2017/07/25/you-can-understand-closure/">浏览器是怎么看闭包的。</a></h2>
    </header>
    <section class="post-excerpt">
      <p>
      
        闭包，是javascript的一大理解难点，网上关于闭包的文章也很多，但是很少有能让人看了就彻底明白的文章。究其原因，我想是因为闭包涉及了一连串的知识点。只有把这一连串的知识点都理解透彻，实现一个概念的闭环，才可以真正理解它。今天打算换个角度来理解闭包，从内存分配与回收的角度阐述，希望能帮助你真正消化掉所看到的闭包知识，同时也希望本文是你看的最后一篇关于闭包的文章。

大家看本文中的配图时，请牢记箭头的指向。因为它是根对象window遍
      
      </p>
      
      <p>
          <a href="/2017/07/25/you-can-understand-closure/" class="excerpt-link">Read More...</a>
      </p>
      
    </section>
    <span class="post-meta">
      <time datetime="2017-07-25T09:36:54.000Z" itemprop="datePublished">
          2017-07-25
      </time>
    
</span>
  </article>
  
  <article class="post">
    <header class="post-header">

      <h2 class="post-title"><a href="/2017/07/17/js-ellipsis/">【文本截断】知多少</a></h2>
    </header>
    <section class="post-excerpt">
      <p>
      
        文本截断是我们前端经常会碰到的需求，有些文本比较长，设计师往往会在有限的空间内限制字符数量，以确保界面的美观性，而且会在一些字符后面加上省略号来表示截断，这个时候我们往往会使用css3的text-overflow:ellipisis来解决，单行文本截断没什么问题，多行文本我们也可以借助webkit的私有属性-webkit-line-clamp来解决。但是这是一个不规范的属性，并没有出现在CSS规范草案中，所以只能在webkit内核的浏览
      
      </p>
      
      <p>
          <a href="/2017/07/17/js-ellipsis/" class="excerpt-link">Read More...</a>
      </p>
      
    </section>
    <span class="post-meta">
      <time datetime="2017-07-17T06:31:33.000Z" itemprop="datePublished">
          2017-07-17
      </time>
    
</span>
  </article>
  
  <article class="post">
    <header class="post-header">

      <h2 class="post-title"><a href="/2017/07/03/how-to-write-compiler/">如何实现一个简易编译器</a></h2>
    </header>
    <section class="post-excerpt">
      <p>
      
        本篇文章的内容是设计一个新语法，并实现能够解析该语法的编译器，将新语法编译成javascript的标准语法，使之能够正常运行在生产环境中。读完这篇文章，再结合自身的实践，大家就能知道该如何写一个小型编译器了。如果对源码感兴趣，请移步这里进行查看。
OK，总结一下接下来要做的事情：

语法设计
编译器的实现
如何下手
词法分析
语法分析
语法树遍历器
目标代码生成
1.变量定义
2.变量赋值


结语

语法设计我们做的第一件事就是设
      
      </p>
      
      <p>
          <a href="/2017/07/03/how-to-write-compiler/" class="excerpt-link">Read More...</a>
      </p>
      
    </section>
    <span class="post-meta">
      <time datetime="2017-07-03T05:59:54.000Z" itemprop="datePublished">
          2017-07-03
      </time>
    
</span>
  </article>
  
  <nav class="pagination" role="pagination">
    
    <span class="page-number">Page 1 of 1</span>
    
  </nav>
</main>


<footer class="site-footer">
  
  <div class="inner">
     <section class="copyright">All content copyright <a href="/">lucefer</a><br/> &copy; 2014 &bull; All rights reserved.</section>
  </div>
</footer>

  <script src="/js/jquery.min.js"></script>

<script type="text/javascript" src="/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="/js/index.js"></script>


  <script type="text/javascript" src="http://tajs.qq.com/stats?sId=63051648" charset="UTF-8"></script>


</div>
</body>
</html>