Blog

Blog

PHODAL

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模板。而这是我们最需要的场景,而且不需要抛弃现有的代码。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签