前端组件开发规范 - mindpin/docs GitHub Wiki

一般情况下我们基于 bootstrap 的样式开发前端组件原型，目前使用的是 bootstrap 3.
务必熟悉 bootstrap 3 涉及的所有基础要素样式，如按钮，输入框等。

在 rails 工程中开发时，由于一般来说会在前端使用 turbolinks 库，因此需要以

  jQuery(document).on 'page:change', ->
    # ...

来加载页面载入事件。

在实现组件时，不要在 document 上绑定事件，否则会因为 turbolinks 的存在，造成事件重复绑定。
取而代之地，应该在某个页面顶层元素上绑定事件。

每个组件需要遵循一定的 css classname 样式名命名方法，以便于调整样式，以及减少彼此的样式冲突。
例如，当某个组件顶层元素的样式名为 foobar 则他内部的元素在命名样式名时都应带上相同的前缀，命名为类似 foobar-create-button foobar-list 这样（如果本身还套用了 bootstrap 的样式名，则在多个样式名中包含这样的样式名即可）

如果用一个变量表示 jQuery 选择器产生的对象，则需要命名为 $xxx，如果它是一个 coffee 类的成员变量，则命名为 @$xxx, 以便于区分其他变量。

一些常用的缩写后缀（不断补充）

• 按钮：-btn
• 防止按钮或操作链接的元素：-ops
• 输入框：-ipt

如果用 reactjs 实现组件，则应该在 componentDidMount 方法里使用 jQuery 绑定事件。
不建议直接在 dom 上写 onclick 等事件。

考虑到一个页面上可能会渲染多次 reactjs 组件，reactjs 的组件应当绑定在组件的最外层元素上，使用 ref 来查找最外层元素。示例代码如下：

AddableItemsInputer = React.createClass
  render: ->
    <div className='addable-items-inputer'>
      ...
    </div>

  componentDidMount: ->
    @$elm = jQuery @getDOMNode()
    @bind_events()

  bind_events: ->
    @$elm.on 'click', '.addable-items-inputer-add-btn', (evt)->
      # do sth. ...