zoukankan      html  css  js  c++  java
  • [Cycle.js] Hyperscript as our alternative to template languages

    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.

  • 相关阅读:
    windows下面Nginx日志切割
    C#通过DocX创建word
    leetcode 189 Rotate Array
    leetcode 172 Factorial Trailing Zeroes
    leetcode 169 Majority Element 冰山查询
    leetcode 165 Compare Version Numbers
    leetcode 160 Intersection of Two Linked Lists
    【windows-》linux】SCP
    【设计】B端和C端区别
    【Flask】部署
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5203727.html
Copyright © 2011-2022 走看看