[Cycle.js] Hyperscript as our alternative to template languages
2016-02-20 18:17
537 查看
Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.
Code to be refactored:
Inside map, return a large object which represent html element.
We can create a function which accept 'tagName'and 'children', to simply our main function:
Also we can create function for each tagName to even simply our code:
The reason why we're introducing this function in the first place is that it looks really similar to what exists in cycle-dom, and it's a function called hyperscript. That's where the H comes from. That's our alternative to a template language.
This is a precursor to what we're going to see in cycle-dom. We're going to replace this outermost object, as well, with return H of H1 as a tag name, and the children are this array with the span. Then we can also simplify this error function like that.
Code to be refactored:
function main(sources) { const mouseover$ = sources.DOM.selectEvents('span', 'mouseover'); const sinks = { DOM: mouseover$ .startWith(null) .flatMapLatest(() => Rx.Observable.timer(0, 1000) .map(i => { return { tagName: 'H1', children: [ { tagName: 'SPAN', children: [ `Seconds elapsed: ${i}` ] } ] }; }) ), Log: Rx.Observable.timer(0, 2000).map(i => 2*i), }; return sinks; }
Inside map, return a large object which represent html element.
We can create a function which accept 'tagName'and 'children', to simply our main function:
function h(tagName, children) { return { tagName: tagName, children: children } } // Logic (functional) function main(sources) { const mouseover$ = sources.DOM.selectEvents('span', 'mouseover'); const sinks = { DOM: mouseover$ .startWith(null) .flatMapLatest(() => Rx.Observable.timer(0, 1000) .map(i => h('H1', [ h('SPAN', [ `Seconds elapsed: ${i}` ]) ]) ) ), Log: Rx.Observable.timer(0, 2000).map(i => 2*i), }; return sinks; }
Also we can create function for each tagName to even simply our code:
function h(tagName, children) { return { tagName: tagName, children: children } } function h1(children){ return { tagName: 'H1', children: children } } function span(children){ return { tagName: 'SPAN', children: children } } // Logic (functional) function main(sources) { const mouseover$ = sources.DOM.selectEvents('span', 'mouseover'); const sinks = { DOM: mouseover$ .startWith(null) .flatMapLatest(() => Rx.Observable.timer(0, 1000) .map(i => h1([ span([ `Seconds elapsed: ${i}` ]) ]) ) ), Log: Rx.Observable.timer(0, 2000).map(i => 2*i), }; return sinks; }
The reason why we're introducing this function in the first place is that it looks really similar to what exists in cycle-dom, and it's a function called hyperscript. That's where the H comes from. That's our alternative to a template language.
This is a precursor to what we're going to see in cycle-dom. We're going to replace this outermost object, as well, with return H of H1 as a tag name, and the children are this array with the span. Then we can also simplify this error function like that.
相关文章推荐
- 如何判断js中的数据类型
- JavaScript数据类型
- 2、JavaScript常用互动方法
- JavaScript中异步编程
- javascript变量声明提升(hoisting)
- JSON.parse()和JSON.stringify()
- 1、JavaScript入门篇
- [BZOJ1031][JSOI2007]字符加密Cipher 做题笔记
- 自己动手丰衣足食之Easyform表单验证插件&validate.js实时验证
- JS触发<a>,JS事件模拟
- js 不可变的原始值和可变的对象引用
- JavaScript基本语法、Console用法和Up&Going书籍总结
- Javascript作用域和变量提升
- XML,JSON文件解析
- javascript Date()
- JavaScript 实现Map
- javascript getTime()
- AutoComplete.js输入智能提示插件
- js中的arguments
- js中的小问题