今天我们开始正式进入riot.js项目开发实战html脚手架 DSDC前端框架 app.js/** 防止this污染 **/ var tag = this; /** jquery观察者 **/ (function ($) { var o = $({}); //自定义事件对象 $.each({ trigger: 'publish', on: 'subscribe', off: 'unsubscribe' }, function (key, val) { jQuery[val] = function () { o[key].apply(o, arguments); }; }); })(jQuery); $(function () { /** riot 全局混合函数 **/ riot.mixin({ /** riot 观察者 **/ observable: riot.observable(), /** mixin的其它方法... **/ extend: function (des, src, override) { if (src instanceof Array) { for (var i = 0, len = src.length; i < len; i++) this.extend(des, src[i], override); } for (var i in src) { if (override || !(i in des)) { des[i] = src[i]; } } return des; }, isEmptyObject: function (e) { var t; for (t in e) return !1; return !0 } }); /** 挂载app-main.tag **/ riot.mount('app-main'); /** jquery的观察者使用 **/ $.subscribe('toastr:show', function (e, arg = { type: 'success', title: '', message: '' }) { toastr[arg.type](arg.message, arg.title, { progressBar: true, closeButton: true }); }); $.publish('toastr:show', { type: 'success', title: '提醒', message: '系统升级成功！' }); /** riot的观察者使用 **/ tag.observable.on('metadata:table:reload', function () { $(tag.refs.metadataList).datagrid('reload'); }); tag.observable.trigger('metadata:table:reload'); }); metadata-list.tag 添加 更新 删除
1、自定义标签它允许所有浏览器【>ie8】，使用自定义标签，<=ie8的浏览器，可使用html5shiv.js或其它方法，使用riot.js { opts.title } {index}: {value} Add #{ items.length + 1 } 一个自定义标签，把脚本也html结构关联到一起，形成一个可重用的组件。2、可读性更强自定义标签，让你更简单的使用html，构建更复杂的views。你的应用，使用自定义标签后，看起来，就会像这样子： 欢迎学习riot.js 用自定义标签划分板块，结构会更加的清晰易懂，每个板块只管管好自己的逻辑，并不担心因板块太多，而显得混乱。3、虚拟dom 尽可能减少DOM重绘和回流的次数 单向的数据传输： update或unmount都是从 父亲->孩子 预编译和缓存表达式，解析更加高效 更多可控的事件 可用于服务器端 4、更加接近标准 没有独立的监听属性的系统【没额外的消耗】 事件对IE8友好 能很好的跟其它工具合作 没有额外的属性前缀 【不需要 data-xx 或 ng-xx】 jQuery友好 5、使用你自己喜欢的工具编译 能用coffeescript、jade、typescript、es6或任意的预处理器创建标签 整合到npm, commonjs, amd, bower和component 有gulp，grunt, browserfiy插件 特性1、友好的语法尽可能简单，但高效强大的语法，是它设计的初衷之一。 强大的属性缩写: class={enable: true, hidden: false} 不需要额外的手动绑定，像render，state，constructor等 可插值使用: Add #{items.length + 1} 或 class=”item {selectd: true}” 逻辑代码，可不放在script标签内 可使用【部分】es6方法声明 2、更短的学习曲线只有很少的API，常用的，就mount/unmount, route, on/trigger, observable3、体积小，但功能强大除了mvp常用功能外，还有路由，事件监听等强大的板块，几乎能满足日常的站点开发。4、零依赖而且不依赖其它类库，能独立运行。5、低耦合独立组件，随时可以插拔使用部分转载来源：da宗熊专栏 －－ 初识riot.js
Web Componnets(网页组件化) Web Component 是标准，所以会是组件技术的最终方向。最终互联网上将全部是这种标准组件，但这可能需要很长时间 Riot简介Riot的目标是使 UI 开发尽可能地简单。可以把它理解成 “web component的jquery” - 它提供了达成同样目标的更简短的语法。它简化了编写可重用组件的整体开发体验。Riot.js是一个客户端模型-视图-呈现(MVP)框架并且它非常轻量级甚至小于1kb。 尽管他的大小令人难以置信，所有它能构建的有如下：一个模板引擎，路由，甚至是库和一个严格的并具有组织的MVP模式。当模型数据变化时视图也会自动更新。MVP设计模式Riot使用Model-View-Presenter (MVP)设计模式来组织代码，这样它能够更模块化、更具可测试性且易于理解。 正如在MVC（模型-视图-控制器）或MVVM（模型-视图-视图模型）模式里，其目的是从应用程序的视图中分离逻辑，但MVP更简单。让我们把它和MVC比较一下： MVC模式更复杂。许多箭头围成一个圈。控制器的角色不明确，这种模式可以以许多不同的方式解释。事实上，这是造成有太多该模式下客户端框架的根本原因。MVP则相反，没有太多的解释空间，歧义少。每部分的作用是明确的。它适合大大大小小的工程，是单元测试的最佳模式。Riot的核心思想把部分的DOM和代码逻辑封装成一个为tag的文件，然后在需要的时候mount，在不需要的时候unmount。 mount: 加载，在页面中显示 unmount: 卸载，在页面中移除 my-tag 示例 { opts.title } { opts.text } mount 示例 更多riot.js文档 Riotjs v2.6.8 中文文档 不是最新版本，英文不是很好的先学懂 Riotjs v3.x 英文文档 Riotjs 代码风格指南 Riotjs Style Guide Riotjs segmentfault上的文章 Riotjs da宗熊专栏