HiShop2.x版本中的上传插件分析，得出所用的模板语言为Underscore.js 1.6.0且自己已修改...

weixin_34268610

于 2016-12-27 23:30:00 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/589450

本文分析了一款酷炫的上传组件实现方式，该组件采用特殊模板语言编写，并对其使用的Underscore.js版本进行了深入探讨。文章指出，为避免与asp.net webform中%号语法冲突，开发团队对Underscore.js进行了定制修改。

效果：

上传组件非常的酷，但是分析其使用JS写法使用了模板语言的，代码如下：

    　　<script type="text/j-template" id="tpl_popbox_ImgPicker_listItem">
        <# _.each(dataset,function(url){ #>
        <li>
            <span class="img-list-overlay"><i class="img-list-overlay-check"></i></span>
            <img src="<#= url #>">
        </li>
        <# }) #>
        </script>

这里只列举的其中一个，居然使用#符号和type="text/j-template"，一开始是通过这样的格式去查的，发现业内几乎没有这样使用。

然后被我神奇的发现在这个文件夹下"...\Utility\Ueditor\js\dist\lib-min.js"的这个文件，里面写了Underscore.js 1.6.0的说明，然后再翻查Underscore，发现其写法是使用%号。这也给排查增加了难度。

所以，我得出的结论是HiShop使用Underscore.js 1.6.0源码进行改的，以扰乱视线。或者可以这么说，asp.net webform上%号的语法有冲突，所以改掉。

再分析"...\Utility\Ueditor\js\dist\componentIndex-min.js"这个文件也有作用。

==>如有问题，请联系我：easonjim#163.com，或者下方发表评论。<==