[Cycle.js] Hyperscript as our alternative to template languages

最新推荐文章于 2024-11-13 13:05:22 发布

转载最新推荐文章于 2024-11-13 13:05:22 发布 · 46 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5203727.html

本文介绍了一种通过编写函数来创建自定义模板语言的方法，并展示了如何利用这些函数作为领域特定语言（DSL）来构建DOM描述对象。此外，还提供了一个重构代码的例子，演示了如何简化代码并提高其可读性。

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.

转载于:https://www.cnblogs.com/Answer1215/p/5203727.html