lvjian700 (吕健)

Vim 中快速移动行文本

lvjian700 — Tue, 19 Jan 2016 12:37:11 +0800

在使用 IDEA 时，可以用 Alt + Command Up/Down 可以对代码进行上移/下移。个人非常喜欢这个功能，本文介绍如何在 Vim 中实现这个功能：

在 vimrc 中加入如下配置

For windows

nnoremap <A-j> :m .+1<CR>==
nnoremap <A-k> :m .-2<CR>==
inoremap <A-j> <Esc>:m .+1<CR>==gi
inoremap <A-k> <Esc>:m .-2<CR>==gi
vnoremap <A-j> :m '>+1<CR>gv=gv
vnoremap <A-k> :m '<-2<CR>gv=gv

For Mac OS

nnoremap ∆ :m .+1<CR>==
nnoremap ˚ :m .-2<CR>==
inoremap ∆ <Esc>:m .+1<CR>==gi
inoremap ˚ <Esc>:m .-2<CR>==gi
vnoremap ∆ :m '>+1<CR>gv=gv
vnoremap ˚ :m '<-2<CR>gv=gv

normal & insert mode

Alt + k：上移当前行
Alt + j：下移当前行

visual mode

Alt + k：上移当前行或者选中行
Alt + j：下移当前行或者选中行

参考

http://vim.wikia.com/wiki/Moving_lines_up_or_down

在 Vim 中运行 RSpec 测试

lvjian700 — Tue, 19 Jan 2016 12:35:18 +0800

自从转到 Ruby，Vim 已成为平时主要的开发工具。Vim 配合 iTerm 2 能很好的满足平时的开发需求。但是在运行 RSpec 的时候总是需要切换到 iTerm，尤其是在运行单个测试时，总是感觉不方便。

本文介绍插件 vim-rspec 插件，它可以直接从 Vim 中直接运行 RSpec：

安装

vim-rspec 需要使用 vundle：

Plugin 'thoughtbot/vim-rspec'

配置和使用

将如下配置添加到 .vimrc 中：

" RSpec.vim mappings
map <Leader>t :call RunCurrentSpecFile()<CR>
map <Leader>s :call RunNearestSpec()<CR>
map <Leader>l :call RunLastSpec()<CR>
map <Leader>a :call RunAllSpecs()<CR>

" Link to current terminal app
let g:rspec_runner = "os_x_iterm"

在我的 Vim 中，<Leader> 键直接使用的 /：

let mapleader = "/"

上述配置等同：

/t，运行当前测试
/s，运行当前的 it
/l，运行上一次测试
/a，运行所有测试

写在最后

Vim 是一个非常强大的工具，它可以让 Developer 双手保持的键盘上，熟练的使用 Vim 可以让我们保持专注，达到眼到手到的境界。对于如何学习 Vim，唯有大量的使用才能提升 Vim 的能力。经过 10000 小时的练习后，Vim 会是 Developer 手上的瑞士军刀。

现在开始为 jQuery 编写插件

lvjian700 — Fri, 15 Jan 2016 09:19:01 +0800

jQuery 已经是现在 Front-End 开发必备工具，本文将介绍如何为 jQuery 编写一个 ColorButton plugin。

内容将涉及：

jQuery plugin 基本结构
编写一个简单的 plugin
引入封装，完成 ColorButton
为 plugin 编写 Unit Test

编写 jQuery 基本结构

创建 plugin 代码
为 plugin 添加方法
将 plugin 注册到 jQuery

(function($) {

  // 1. 创建 `plugin` 代码
  var ColorButton = function($select, options) {
    // 初始化
    this.$el = $select
    this.settings = $.extend({
      // 默认参数
    }, options || {});

    // binding 事件
  };

  // 2. 为 `plugin` 添加方法
  $.extend(ColorButton.prototype, {
    // 这里定义方法
  });

  // 3. 将 `plugin` 绑定到 jQuery
  $.fn.colorbutton = function(options) {
    return this.each(function() {
      var $select = $(this)
      if (!$select.data('colorbutton')) {
        $select.data('colorbutton', new ColorButton($select, options));
      }
    });
  };

})(jQuery);

// 使用
$('.color-button').colorbutton();

JSFildder 代码：https://jsfiddle.net/lvjian700/kn6qvmcz/1/

编写一个简单的 plugin

这里按照上述模板代码做一个最小的插件。

将 ColorButton 绑定到 button 上
当点击 button 时，在控制台输出 clicked

// 1. 创建 plugin 代码
var ColorButton = function($select, options) {
  // 组建初始化代码
  this.$el = $select
  this.settings = $.extend({
    // 默认参数
  }, options || {});

  // binding 事件
  this.$el.click(function() {
    console.log('clicked');
  });
};

JSFildder 上的完整代码：https://jsfiddle.net/lvjian700/kn6qvmcz/2/

引入封装，完成 ColorButton

上篇我们在 plugin 初始化时进行了事件绑定。现在我们实现 ColorButton 的功能。当用户点击 ColorButton 时改变 button 的背景色。

步骤：

接收参数，提供 colors 选项，并且为 colors 提供默认参数
提供 getColor 方法提供当前的背景色
提供 changeColor 方法改变颜色
将 changeColor 班定到 click 事件

var ColorButton = function($select, options) {
  this.$el = $select;
  this.colorIndex = 0;

  // 1. 接收参数，提供 colors 选项，并且为 colors 提供默认参数
  this.settings = $.extend({
    colors: ['#ff0', '#f0f', '#0ff']
  }, options || {});

  var that = this;
  this.$el.click(function(e) {
    e.preventDefault();
    // 4. 将 changeColor 班定到 click 事件
    that.changeColor();
  });
};

$.extend(ColorButton.prototype, {
  // 3. 提供 changeColor 方法改变颜色
  changeColor: function() {
    this.$el.css({ backgroundColor: this.getColor() });
  },
  // 2. 提供 getColor 方法提供当前的背景色
  getColor: function() {
    var currentIndex = this.colorIndex;
    this.colorIndex = (this.colorIndex + 1) % this.settings.colors.length;

    return this.settings.colors[currentIndex];
  }
});

JSFildder 上的完整代码：https://jsfiddle.net/lvjian700/kn6qvmcz/3/

为 plugin 编写 Unit Test

Web 开发中我们一般使用 Cucumber 和 Capybara 对 UI 进行测试。这个层级的测试属于 UI Automattion Test，也可成为 Acceptance Test。这类测试运行成本比较高。

所以这里采用 Unit Test`方式对 plugin 进行测试。

工具：

mocha：提供类 RSpec 风格的 Test Case
chai：提供 assertion 和 matcher
chai-jquery：提供更好用的 assertion

更好的工具，但是本文没有使用：

karma：当然我们可以使用 karma 在命令行中运行测试，本文暂时没有使用
sinon：可以做 sub、mock、spy, mock network

如果你用的 Rails，可以使用 teaspoon 来运行测试。

编写测试的基本结构：

describe('ColorButton', function () {

  beforeEach(function() {
      // 加载 fixture
      // 初始化 plugin
  });

  afterEach(function() {
      // remove fixture
  });

  describe('描述 Context', function() {
    beforeEach(function() {
      // 准备 Context
    });
    it('assertion 描述', function() {
      // 我们期待 ...
    });
  });

  // 更多 Context ...
});

对 ColorButton 的测试：

describe('ColorButton', function () {

  beforeEach(function() {
    $('body').append('<a id="color-button" href="#">Button</a>');
    $('#color-button').colorbutton({
      colors: ['#ff0', '#f0f']
    });
  });

  afterEach(function() {
    $('#color-button').remove();
  });

  describe('when click button once', function() {
    beforeEach(function() {
      $('#color-button').click();
    });

    it('should change button color', function() {
      expect($('#color-button')).to.have.css('backgroundColor', 'rgb(255, 255, 0)')
    });
  });

  // 更多 Context ...
});

完整的代码：https://github.com/lvjian700/color-button，参考 readme 即可运行测试。

写在最后

如果你的项目只想用简单的 jQuery 并不想使用类似 BackBone、Angular.js、React.js 的框架，使用 jQuery plugin 模块化 UI 组建也是一个不错的选择。

理解 Ruby 中的 include 和 prepend

lvjian700 — Tue, 12 Jan 2016 22:40:30 +0800

Ruby 中使用 mixin 优雅的解决了 multiple inheritance 问题。在 Java 世界中使用 interface 解决这个问题，在 Ruby 中使用 module，与 Java 中不同的是：Ruby 中的 module 不但可以定义接口，而且还能提供实现。

在 Ruby 提供 include 和 prepend 两种方式使用 module，而对 include 或者 prepend module 这种方式，Ruby 称为 mixin。本文将介绍这两种不同的 mixin 方式。

先认识一下 include 和 prepend

猜一下这段代码的输出：

class SuperSpeaker
  def speak
    puts 'Super class speaking...'
  end
end

module Chinese
  def speak
    puts '在说中文...'
    super
  end
end

module Thai
  def speak
    puts 'ฉันกำลังพูด...'
    super
  end
end

class Speaker < SuperSpeaker
  include Chinese
  prepend Thai

  def speak
    puts 'Subclass speaking...'
    super
  end
end

p Speaker.ancestors
speaker = Speaker.new
speaker.speak

这段代码将输出：

[Thai, Speaker, Chinese, SuperSpeaker, Object, Kernel, BasicObject]
ฉันกำลังพูด...
Speaker is speaking...
在说中文...
Super speaker is speaking...

通过输出我们可以看到：

include 会将 Chinese module 加入到 Speaker 的后面
prepend 会将 Thai module 加入到 Speaker 的前面

从 Ruby 的 Method lookup 机制理解 include 和 prepend

在理解 include 和 prepend 时，我们需要知道，当我在一个 instance 上调用方法时，都发生了什么？

Ruby 中方法存在 Class 中，instance 只有变量没有方法。当在 instance 上调用方法时，会先从 instance 对应的 Class 中查找（先向右查找）
当无法在当前 Class 找到改方法时，Ruby 会按照继承链向上查找方法（后向上查找）

这个机制在 Ruby 中称为 Method lookup，一句话总结 Method lookup 机制：

『先向右，后向上』

在上段代码中，我们输出了 Speaker 的继承链：

p Speaker.ancestors
# => [Thai, Speaker, Chinese, SuperSpeaker, Object, Kernel, BasicObject]

Method lookup 过程是这样的：

从 Method lookup 角度来理解 include 和 prepend：

include 将 Chinese module 加入到 Speaker 继承链的上方
prepend 将 Thai module 加入到 Speaker 继承链的下方

这样也就解释了，为什么 Speaker#speak 会先输出泰文：『ฉันกำลังพูด...』。

使用 include 和 prepend 实现一个简单的 DSL

在 Rails controller 中，before_action 非常好用，这里我们使用 include 和 prepend 实现一个简单的 before_action：

module BeforeAction
  def self.included(klass)
    klass.extend(ClassMethods)
  end

  module ClassMethods
    def before_action(method_name, options)
      action_module = Module.new do
        send :define_method, options[:for] do |*args, &block|
          send method_name

          super(*args, &block)
        end
      end

      prepend action_module
    end
  end
end

class Speaker
  include BeforeAction

  before_action :chinese_self_intro, for: :speak

  def speak
    puts 'I am speaking...'
  end

  private

  def chinese_self_intro
    puts 'Hello, I come from china.'
  end
end

Speaker.new.speak

输出一下 Speaker 的继承链，便于我们理解 before_action 的原理：

p action_module.class_methods
#=> [:speak]
p Speaker.ancestors
#=> [#<Module:0x007fe1ca254be0>, Speaker, BeforeAction, Object, Kernel, BasicObject]

使用 include 将 BeforeAction mixin 到 Speaker 继承链上面，此时在定义 Speaker 时便可使用 before_action
在 before_action 中 prepend 将带有 speak 方法的 Anonymous module，将 Anonymous module 插入到继承链的底端。这样在调用 Speaker#speak 时，先调用 Anonymous module 中的 speak
在 Anonymous module 中的 speak 方法调用 for 参数指定的 chinese_self_intro
在 Anonymous module 中的 speak 方法的最后，使用 super(*arg, &block) 调用继承链上方的方法（即：Speaker#speak）

总结

Ruby 中的 include 和 prepend 为 Ruby 提供了 mixin 机制，这个机制不但解决 multiple inheritance 问题，而且为 Ruby 的 DSL 能力提供了强大的支持。

那么什么时候用 mixin，什么时候用 inheritance？

从一个 Java 程序员角度来讲，当你想定义 interface 时便可使用 mixin。

Gem 总是报 Insecure world writable dir /Users/lvjian/.rvm/gems in PATH, mode 040777 错误

lvjian700 — Mon, 26 Aug 2013 17:19:36 +0800

使用 gem 总是会包这个警告： /Users/lvjian/.rvm/rubies/ruby-2.0.0-p247/bin/gem:4: warning: Insecure world writable dir /Users/lvjian/.rvm/gems in PATH, mode 040777

这个怎么解决？