成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ractive 簡(jiǎn)介

mrli2016 / 779人閱讀

摘要：最近在寫(xiě)一個(gè)微信編輯器，然后已經(jīng)在編輯器那一塊選定了，想想覺(jué)得雖然不錯(cuò)，但是似乎已經(jīng)很不更新了。補(bǔ)充一句，這個(gè)框架比誕生早了一個(gè)月，還是以為核心。自稱是一個(gè)模板驅(qū)動(dòng)的庫(kù)，在上說(shuō)是下一代的操作。下面是一個(gè)簡(jiǎn)單的，。

最近在寫(xiě)一個(gè)微信編輯器，然后已經(jīng)在編輯器那一塊選定了CKEditor，想想覺(jué)得UEditor雖然不錯(cuò)，但是似乎已經(jīng)很不更新了。

想想覺(jué)得編輯器這種東西，對(duì)于一般人來(lái)說(shuō)還算挺常用的，但想著是不是可以作為一個(gè)LTS？？然后發(fā)現(xiàn)給CKEditor寫(xiě)寫(xiě)plugin，還是蠻方便的。

技術(shù)選型

選用怎樣的前端框架是一個(gè)有趣的話題，我需要一個(gè)數(shù)據(jù)綁定和模板。首先，我排除了React這個(gè)框架，我覺(jué)得他的模板會(huì)給我?guī)?lái)一堆麻煩事。Angluar是一個(gè)不錯(cuò)的選擇，但是考慮Angluar 2.0就放棄了，Backbone也用了那么久。Knockout.js又進(jìn)入了我的視野，但是后來(lái)我發(fā)現(xiàn)數(shù)據(jù)綁定到模板有點(diǎn)難。最后選了Ractive，后來(lái)發(fā)現(xiàn)果然上手很輕松。

補(bǔ)充一句，這個(gè)框架比React誕生早了一個(gè)月，還是以DOM為核心。Ractive自稱是一個(gè)模板驅(qū)動(dòng)UI的庫(kù)，在Github上說(shuō)是下一代的DOM操作。因?yàn)閂irtual Dom的出現(xiàn)，這個(gè)框架并沒(méi)有那么流行。

Ractive是什么？

起先，這個(gè)框架是在衛(wèi)報(bào)創(chuàng)建的用于產(chǎn)生新聞的應(yīng)用程序 。有很多工具可以幫助我們構(gòu)建Web應(yīng)用程序 ，但是很少會(huì)考慮基本的問(wèn)題：HTML，一個(gè)優(yōu)秀的靜態(tài)模板，但是并沒(méi)有為交互設(shè)計(jì)。Ractive可以將一個(gè)模板插到DOM中，并且可以動(dòng)態(tài)的改變它。

下面是一個(gè)簡(jiǎn)單的Hello，World。

這個(gè)Hello，World和一般的MVC框架并沒(méi)有太大區(qū)別，甚至和我們用的Backbone很像。

然后，讓我們來(lái)看一個(gè)事件的例子：

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，需要你在某個(gè)地方Fire：

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

接著，問(wèn)題來(lái)了，這和我們jQuery的on，或者React的handleClick似乎沒(méi)有太大的區(qū)別。接著Component來(lái)了：

      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: "",
        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中用到的多個(gè)模板的View，他們用了同一個(gè)component。

好吧，說(shuō)實(shí)在的它并沒(méi)有什么神奇之處。這些功能React都有了，而且它還沒(méi)有Angluar強(qiáng)大。但是，我們可以使用模板，HTML模板。而這是我們最需要的場(chǎng)景，而且不需要拋棄現(xiàn)有的代碼。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86155.html

相關(guān)文章

  • Vue.js 的一些資源索引

    摘要：是剛出來(lái)的一個(gè)輕型的框架借鑒了現(xiàn)有的各種框架官網(wǎng)作者個(gè)人網(wǎng)站挺漂亮的作者微博尤小右作者是員工目前已經(jīng)在一些項(xiàng)目嘗試按去年月已經(jīng)開(kāi)始了項(xiàng)目項(xiàng)目主頁(yè)是今年月上線的作者記錄了上線一周的情況文檔主要是在官網(wǎng)上非常清晰目前還是比較簡(jiǎn)短的另 Vue.js 是剛出來(lái)的一個(gè)輕型的 MVVM 框架, 借鑒了現(xiàn)有的各種框架, 官網(wǎng) http://vuejs.org/ Github https://gith...

    yacheng 評(píng)論0 收藏0

  • 前端速查表大全,分享一些技術(shù)和工具的簡(jiǎn)明教程

    摘要：這個(gè)速查表主要是分享互聯(lián)網(wǎng)上一些比較常用的工具和技術(shù)常用內(nèi)容，如編輯器的快捷鍵的命令行的選擇器的屬性等，這個(gè)列表簡(jiǎn)單收集了常用的工具，可以收藏用于平時(shí)的備忘錄，需要用到的時(shí)候可以及時(shí)查閱。 這個(gè)速查表主要是分享互聯(lián)網(wǎng)上一些比較常用的工具和技術(shù)常用內(nèi)容，如編輯器的快捷鍵、git的命令行、jQuery的API選擇器、CSS的flexbox屬性等，這個(gè)列表簡(jiǎn)單收集了常用的工具，可以收藏用于平...

    xiaochao 評(píng)論0 收藏0

  • 前端速查表大全,分享一些技術(shù)和工具的簡(jiǎn)明教程

    摘要：這個(gè)速查表主要是分享互聯(lián)網(wǎng)上一些比較常用的工具和技術(shù)常用內(nèi)容，如編輯器的快捷鍵的命令行的選擇器的屬性等，這個(gè)列表簡(jiǎn)單收集了常用的工具，可以收藏用于平時(shí)的備忘錄，需要用到的時(shí)候可以及時(shí)查閱。 這個(gè)速查表主要是分享互聯(lián)網(wǎng)上一些比較常用的工具和技術(shù)常用內(nèi)容，如編輯器的快捷鍵、git的命令行、jQuery的API選擇器、CSS的flexbox屬性等，這個(gè)列表簡(jiǎn)單收集了常用的工具，可以收藏用于平...

    avwu 評(píng)論0 收藏0

  • 前端速查表大全,分享一些技術(shù)和工具的簡(jiǎn)明教程

    摘要：這個(gè)速查表主要是分享互聯(lián)網(wǎng)上一些比較常用的工具和技術(shù)常用內(nèi)容，如編輯器的快捷鍵的命令行的選擇器的屬性等，這個(gè)列表簡(jiǎn)單收集了常用的工具，可以收藏用于平時(shí)的備忘錄，需要用到的時(shí)候可以及時(shí)查閱。 這個(gè)速查表主要是分享互聯(lián)網(wǎng)上一些比較常用的工具和技術(shù)常用內(nèi)容，如編輯器的快捷鍵、git的命令行、jQuery的API選擇器、CSS的flexbox屬性等，這個(gè)列表簡(jiǎn)單收集了常用的工具，可以收藏用于平...

    chunquedong 評(píng)論0 收藏0

  • 最近想通的幾個(gè)單頁(yè)面應(yīng)用開(kāi)發(fā)的重點(diǎn)

    摘要：老實(shí)說(shuō)我不是第一次想歪了而且很慢總是不能很快抓住要點(diǎn)當(dāng)別人用后端從做博客做論壇聯(lián)系完成的應(yīng)用的時(shí)候我跑去學(xué)單頁(yè)面應(yīng)用還很久掙扎在的思路當(dāng)中我想說(shuō)的是走大多數(shù)人走的路的確是可以減少浪費(fèi)的時(shí)間和錯(cuò)誤的走少數(shù)人在的路當(dāng)然也刺激的我最近才明白原來(lái)前 老實(shí)說(shuō)我不是第一次想歪了, 而且很慢, 總是不能很快抓住要點(diǎn). 當(dāng)別人用后端 MVC 從做博客做論壇, 聯(lián)系完成 MVC 的應(yīng)用的時(shí)候 我跑去學(xué)單...

    yibinnn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<