Ractive 簡介

最近在寫一個微信編輯器，然后已經在編輯器那一塊選定了CKEditor，想想覺得UEditor雖然不錯，但是似乎已經很不更新了。

想想覺得編輯器這種東西，對于一般人來說還算挺常用的，但想著是不是可以作為一個LTS？？然后發現給CKEditor寫寫plugin，還是蠻方便的。

技術選型

選用怎樣的前端框架是一個有趣的話題，我需要一個數據綁定和模板。首先，我排除了React這個框架，我覺得他的模板會給我帶來一堆麻煩事。 Angluar是一個不錯的選擇，但是考慮Angluar 2.0就放棄了，Backbone也用了那么久。Knockout.js又進入了我的視野，但是后來我發現數據綁定到模板有點難。最后選了 Ractive，后來發現果然上手很輕松。

補充一句，這個框架比React誕生早了一個月，還是以DOM為核心。Ractive自稱是一個模板驅動UI的庫，在Github上說是下一代的DOM操作。因為Virtual Dom的出現，這個框架并沒有那么流行。

Ractive是什么？

起先，這個框架是在衛報創建的用于產生新聞的應用程序 。有很多工具可以幫助我們構建Web應用程序 ，但是很少會考慮基本的問題：HTML，一個優秀的靜態模板，但是并沒有為交互設計。Ractive可以將一個模板插到DOM中，并且可以動態的改變它。

下面是一個簡單的Hello，World。

  <script id='template' type='text/ractive'>
  <p>Hello, {{name}}!</p>
  </script>
  <script>
  var ractive = new Ractive({
    template: '#template',
    data: { name: 'world' }
  });
  </script>

這個Hello，World和一般的MVC框架并沒有太大區別，甚至和我們用的Backbone很像。

然后，讓我們來看一個事件的例子：

listView = new Ractive({
  el: 'sandboxTitle',
  template: listTemplate,
  data: {color: config.defaultColor, 'fontSize': config.defaultFontSize}
      });
      listView.on('changeColor', function (args) {
  listView.set('color', args.color);
      });

這是的on，需要你在某個地方Fire：

titleView.fire('changeColor', {color: color.toHexString()});

接著，問題來了，這和我們jQuery的on，或者React的handleClick似乎沒有太大的區別。接著Component來了：

     var Grid = Ractive.extend({
        isolated: false,
        template: parasTemplate,
        data: {
        }
      });

      var dataValue = 5;
      var category = 'category-3';

      var color = config.defaultColor;

      parasView = new Ractive({
        el: 'parasSanbox',
        template: '<Grid Style="{{styles}}" />',
        components: {Grid: Grid},
        data: {
          styles: [
            {section_style: 'border: 2px dotted #4caf50; margin: 8px 14px; padding: 10px; border-radius: 14px;', p_style: 'font-size: 14px;', color: color,  data_value: dataValue, category: category},
          ]
        }
      });

      parasView.on('changeColor', function(args) {
        parasView.findComponent('Grid').set('Style.*.color', args.color);
      });

上面是在 https://github.com/phodal/congee 中用到的多個模板的View，他們用了同一個component。

好吧，說實在的它并沒有什么神奇之處。這些功能React都有了，而且它還沒有Angluar強大。但是，我們可以使用模板，HTML模板。而這是我們最需要的場景，而且不需要拋棄現有的代碼。