frankking (王涛)

Vuejs 初试

frankking — Wed, 25 May 2016 09:20:07 +0800

Vuejs 以极其简单且友好的方式解决了前端开发中 ViewModel 层面的问题，加上原来越完善的生态环境，让越来越的同学开始接触和学习这个框架。

之前我在学习的过程中曾经尝试以 Vuejs 为基础用最简洁的代码实现一个 Todo 应用，然后把心得体会写成了一片文章，在这里跟大家分享，希望对准备学习 Vuejs 的同学提供一个感官上的认识，欢迎 Vuejs 大牛们指正文中的错误 :- )

正文：

看到 Vuejs 的第一眼，觉得就算是前端开发经验不多的我，也能轻松地倒腾倒腾。为什么？

轻量，核心包很小
无依赖
学习成本低，Dom-based，双向数据绑定，动态组件

于是乎，我琢磨着搞一个 Todos 应用，功能如下：

当然，css 样式和本地数据持久化就不做了。

什么 MVC 啊，MVVM 都不需要考虑那么多，先写个能通过输入框添加 Todo 的列表：

<script type="text/javascript" src="http://cdn.jsdelivr.net/vue/1.0.16/vue.min.js"></script>

<div id="todos">
  <h4>Todos</h4>
  <input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="new to do"/>
  <ul>
    <li v-for="todo in todos">
      {{ todo.content }}
    </li>
  </ul>
</div>

<script type="text/javascript">
  new Vue({
    el: "#todos",
    data: {
      newTodo: '',
      todos: []
    },
    methods: {
      addTodo: function () {
        if (this.newTodo == '') { return }
        var todo = { done: false, content: this.newTodo }
        this.todos.push(todo)
        this.newTodo = ''
      }
    }
  })
</script>

简单的几行代码就搞定了，Vuejs 确实挺简洁的：

#todos 对应一个 Vue 对象
在 #todos 中可以双向绑定 Vue 对象中的数据
在 #todos 中可以绑定事件响应函数
v- 开头的属性中，可以使用 Vue 的 DSL
在非 vue 定义的属性中，使用 {{ }} 包裹 Vue 的 DSL

好了，有了这个基础版本，虽然有点太简陋了，但我们可以在此基础上添加新的功能：

显示当前剩余未完成的 Todo 的数量
显示所有未完成的 Todo/已完成的 Todo
完成一个 Todo
删除一个 Todo
删除所有已完成的 Todo

这些不就是对 todos 这个数组的查询，添加，删除的操作嘛？于是乎，当 todos 的业务逻辑变得复杂的时候，单单用 Array 这个基本数据类型就不行了，然后就有了所谓的 Model 这一层的抽象。

做好 Model 这一层后，我们响应一些 View 上的用户事件如，点击 Todo 完成按钮/Todo 删除按钮/清除已完成 Todo 的按钮，变换 Todo 列表的类型，响应其实就是在当事件发生时执行相应的 Model 操作。将 View 显示逻辑和 View 相关的 Model 联系起来所抽象的一层，就是所谓的 ViewModel.

而 Vuejs 所提供的功能之一就是简化 ViewModel 这一层的开发复杂度，或者说提出了一种开发思路及其相应的 api.

最终效果：

Todos 完整项目演示

所以在 Vuejs 的帮助下，我们可以轻松地以 Model 层的数据为基础，构建相应的 ViewModel.

更多资料：

vuejs.org Vue.js 框架的作者做客 Teahour

以 Huffman coding 为例看函数式编程

frankking — Mon, 02 May 2016 22:19:17 +0800

不同编程即为不同解决问题的思路

解决一个问题有很多思路，比如：

过程式 (C 语言)：将解决问题的方式分解成若干步骤来控制数据。
面向对象式 (Java/Ruby)：以对象为基本单位，定义其行为控制其内部状态，通过不同对象之间的协作解决问题。
函数式 (Lisp)：一切皆为函数，用连贯的思维方式定义过程，常用递归。
组合式：将不同的解决方式组合起来，golang 经常会将面向对象与过程式组合起来。

示例：Huffman 编码

用 Lisp 的一个方言 Scheme 来实现：

输入 '((A 1) (B 3) (C 2)), A B C 为带编码字符，1 2 3 为出现次数。输出 '((b 0) (a 0 1) c 1 1)

定义叶子节点

(define (make-leaf symbol weight)
  (list 'leaf symbol weight))

(define (leaf? object)
  (eq? (car object) 'leaf))

(define (symbol-leaf object)
  (cadr object))

(define (weight-leaf object)
  (caddr object))

如果没有接触过 lisp 的同学可能对上面的表示方式有点陌生，其实就是用括号代表方法调用，括号里的第一个位置是方法名称，后面的是调用该方法的参数。

上面的几行代码定义了叶子节点 leaf 及相关函数。

定义树节点

(define (make-code-tree left right)
  (list 
    left
    right
    (append (symbols left) (symbols right))
    (+ (weight left) (weight right))))

(define (left-branch tree) (car tree))

(define (right-branch tree) (cadr tree))

(define (symbols tree)
  (if (leaf? tree)
    (list (symbol-leaf tree))
    (caddr tree)))

(define (weight tree)
  (if (leaf? tree)
    (weight-leaf tree)
    (cadddr tree)))

同样的道理，定义了用于在构造 Huffman 树中非叶子的节点 tree 及其相关取值函数。

有序 list 构造方法

(define (adjoin-set x set)
  ;如果 set 为空，则返回以 x 作为唯一元素的 list
  (cond ((null? set) 
      (list x)) 
    ;如果 set 的第一个元素的 weight 大于 x 的 weight，则将 x 和 set 组合成一个新的 list 返回
    ((> (weight (car set)) (weight x))
      (cons x set)) 
    ; 否则将 set 的以第一个只取出，让后递归调用 `adjoin-set`
    (else (cons (car set) (adjoin-set x (cdr set))))))

adjoin-set 的功能就是 x 插入到有序 list set 中，保证插入后的 list 仍然有序。lisp 中的 cond 可理解为其他语言中的 switch，而 cons 可理解为将两个元素结合成一个 list。乍一看这个所谓“插入”元素的方法有点奇怪，而且没有用任何临时变量。其思路将整个插入的过程用递归调用的方式表示：用过程（函数）代替了临时变量。举了例子：(adjoin-set 3 '(1 2))，执行顺序是：

(cons 1 (adjoin-set 3 '(2)))
(cons 1 (cons 2 (adjoin-set 3 '())))
(cons 1 (cons 2 (cons 3 '())))
(cons 1 (cons 2 '(3)))
(cons 1 '(2 3))
'(1 2 3)

可以看到在执行序列中，推迟 cons 的执行，用参数求值压栈从而省去了临时变量。在 make-leaf-set 中思路也一样：不断地从 paris 中取元素，交给 adjoin-set 插入到 list 中。整个编写过程中基本上用程序流畅地表达了我们的解题思路，代码如下：

(define (make-leaf-set pairs)
  (if (null? pairs)
    '()
    (let ((pair (car pairs)))
      (adjoin-set (make-leaf (car pair) (cadr pair))
        (make-leaf-set (cdr pairs))))))

Huffman 树构造方法

在插入元素这种简单的问题中函数式威力还远远没有体现出来，请看下面构造 Huffman 树的函数实现：

(define (make-tree leaves)
  (cond ((or (null? (car leaves)) (null? (cadr leaves)))
      (error "leaves is not enough"))
    ((null? (cddr leaves))
      (make-code-tree (car leaves) (cadr leaves)))
    (else (make-tree (adjoin-set (make-code-tree (car leaves) (cadr leaves)) (cddr leaves))))))

几行代码就将构造 Huffman 树的核心逻辑表达清楚了：将按 weight 升序 leaves 的前两个拿出来做成一个 tree node，adjoin-set 到剩下的 leaves 中，然后不断重复这个操作，直到 leaves 中只剩下两个元素，将这两个元素最为最终 Huffman 树的左右子树，然后返回。怎么样？一气呵成。

编码

对 Huffman 树遍历编码的实现也是精炼得有种思维的美感：先进行左子树遍历，直到找到叶子节点，构造成结果 list 中一个元素，然后回到上一层递归，进入右子树，不断重复直到遍历完所有节点。

(define (encode tree)
  (define (visit n bits)
    (if (leaf? n)
      ; 找到了一个叶子节点
      (cons (symbol-leaf n) bits)
      ; 用 cons 对 visit 的递归调用
      (cons (visit (left-branch n) (cons 0 bits))
        (visit (right-branch n) (cons 1 bits)))))
  (visit tree '()))

;测试
(define leaf-set (make-leaf-set '((A 1) (B 3) (C 2))))
(define tree (make-tree leaf-set))
(encode tree) ; outputs: ((b 0) (a 0 1) c 1 1)

详细代码请进 github

ps: 本篇用到部分《计算机程序的构造与解析》代码。强烈建议大家学习 MIT 的这门公开课。

各位同学是如何解决另一半问题的？

frankking — Wed, 06 Apr 2016 08:33:44 +0800

想了解一下论坛里的各位前辈是如何解决女朋友/男朋友问题？学校里面谈的恋爱就不算了，主要是工作以后的。

通过何种方式认识合适的异性朋友？（朋友介绍，豆瓣，相亲，婚恋网......）
作为程序员，大家对异性朋友有哪些基本要求？
交往后，自己在工作和生活中有哪些变化？
交往多长时间会考虑结婚的问题？

大家也给像我这样刚进入社会的年轻程序员支支招呗。

Ruby 搭建本地 Golang 文档服务器

frankking — Sat, 12 Mar 2016 15:59:54 +0800

平时我们看 golang 文档的方式通常有：

go doc <package>
golang.org/pkg 或者国内的 godoc.golangtc.com/pkg/
看源码，当然这是最好的方式，只是需要更多的时间和耐心。

如果没有网络，我一般会选择方式 1 + 方式 3，但缺点是可读性差。

后来了解到，godoc -html <package> 可以生成 HTML 文档，所以就思考如何搭建本地的 localhost:3000/pkg

先取个名字，godocserver

步骤如下：

获取所有 golang built-in packages 名称
遍历所有 packages 运行 godoc -html <package>
保存所有文件，启动一个静态文件服务器

利用 Ruby 实现步骤 1、2，要注意遍历 $GOPATH/src/ 时要过滤一些不需要的目录，创建文件时，要先创建对应的目录。

启动静态服务器用 golang 和 ruby 都可以，我用的是 negroni，就三行代码。

问题是，这样的页面完全没有样式啊，所以我不得不去 golang.org/pkg 上 copy css 和 js 文件。

然后将 Index 的样式修改成这样：

最后实现 package 导航：

这个功能我们需要知道所有已存文档的名称，所以我们需要维护一个文件 all_documents.json 供前端使用，然后我们需要做一个带有过滤功能的列表。这里用 Vue.js 作双向数据绑定 (好用，好用，好用)。

至此，我们就可以愉快的在本地看 golang 文档啦。

更多阅读：

godocserver 项目地址

Vuejs 初试

[讨论] 用 Ruby 实现 Ruby 的 inject 方法

frankking — Tue, 09 Dec 2014 13:04:19 +0800

Ruby 新手，自己用 Ruby 实现了 Ruby 的Enumerable#inject方法：Enumerable#my_inject 代码如下：

module Enumerable
  def my_inject *arg
    initial = method = nil 
    tmp = Array.new(self)
    # 判断参数个数及类型
    if arg.length > 2
      raise ArgumentError, "wrong number of arguments #{arg.length} for 0..2"
    elsif arg.length == 2
      initial, method = arg[0], arg[1] 
    elsif arg.first.is_a? Symbol
      method = arg.first
    elsif arg.first
      initial = arg.first
    end
    # 给accumulation赋值
    accumulation = initial ? initial : tmp.shift

    # 如果参数中有Symbol（方法）
    if method 
      tmp.each do |element|
        accumulation = accumulation.send(method, element)
      end
    else 
      tmp.each do |element|
        accumulation = yield accumulation, element
      end
    end

    accumulation
  end
end

大家有兴趣的可以一起来讨论有没有更优雅的写法？还有，我是新手，有经验的前辈可否指点一下我的代码？（思路、命名、注释..）