avalon2的这个例子下的function heredoc(fn)的作用

Question

在这个例子中的这段的作用是什么?
是不是avalonjs组件都要用类似的函数呢?

        function heredoc(fn) {
            return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
            replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
        }

Answer 1

该方法功能只是为了以字串形式返回指定函数中注释部分的代码。之所以这样用是因为，如果直接将html的字串赋值给模板的话，要进行转义，而且可读性会变差，不好修改维护。
比如：

function func () {
    /*
    <div class="tree-node" ms-click='@click' ms-class="@cls" ms-css="{'text-indent': @level * 30}">
    <p>第{{@level}}层</p>
    <div ms-for="(index,el) in @children">
       <wbr is="tree" ms-widget="[el, {level: @level+1, pid: @sid, pos:index}]" />
    </div>
    </div>
    */
})

调用 heredoc(func) 后，会直接返回注释中的html模板字串。即：

<div class="tree-node" ms-click='@click' ms-class="@cls" ms-css="{'text-indent': @level * 30}">
<p>第{{@level}}层</p>
<div ms-for="(index,el) in @children">
   <wbr is="tree" ms-widget="[el, {level: @level+1, pid: @sid, pos:index}]" />
</div>
</div>

但如果让你直接把这个模板字串赋值给某个变量，就需要转义处理，修改也会变麻烦。

所以结论就是，如果你有更好的加载模板内容的方式，可以不用 heredoc 方法。