标签：
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:
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.
[Cycle.js] Hyperscript as our alternative to template languages
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/5203727.html
