feat/refactor: remove baiduTemplate

README.md

@@ -154,7 +154,7 @@ disqusjs.config {}
 - DisqusJS 检测访客的 Disqus 可用性是通过检测 `disqus.com/favicon.ico` 和 `${disqusjs.config.shortname}.disqus.com/favicon.ico` 是否能正常加载，如果有一个加载出错或超时（2s）就判定 Disqus 不可用。
 - 你应该已经注意到 DisqusJS 在页面注册了全局变量 `window.disqusjs`，你可以直接在控制台输入 `console.log(disqusjs)` 查看。关于里面每个子串的含义全部标注在 [DisqusJS 源文件](https://github.com/SukkaW/DisqusJS/blob/master/src/disqus.js) 的注释之中。
 - Disqus 自己的 config 保存在全局变量 `window.disqus_config` 中，你可能好奇为什么没有引入。实际上由于 `disqus_config` 和 `disqusjs.config` 中有很多重复的配置，所以 DisqusJS 直接将 `disqusjs.config` 中相关配置项赋给了 `disqus_config`，所以用户只需要配置 `disqusjs.config` 即可。
-- ES6 模板字符串不支持复用，所以引入了 [baiduTemplate](https://baidufe.github.io/BaiduTemplate/) 用来渲染评论条目。baiduTemplate 是一个超轻量级的浏览器端 EJS 模板实现。以后 DisqusJS 可能会通过复用函数的方法实现 ES6 模板字符串复用，届时就可以剥离掉 baiduTemplate 了。
+- ~~ES6 模板字符串不支持复用，所以引入了 [baiduTemplate](https://baidufe.github.io/BaiduTemplate/) 用来渲染评论条目。baiduTemplate 是一个超轻量级的浏览器端 EJS 模板实现。以后 DisqusJS 可能会通过复用函数的方法实现 ES6 模板字符串复用，届时就可以剥离掉 baiduTemplate 了。~~ 已经剥离 baiduTemplate。
 - Disqus API 中有一个 createComment 的 API 用于创建新的评论，但是调用时会有一些坑。
 - DisqusJS 并没有使用 Webpack 将 `disqusjs.css` 和 `disqus.js` 打包在一起，这样大家就可以开发自己的 DisqusJS 主题并引入。所有 DisqusJS 创建的 HTML 元素都在 `<div id="dsqjs"></div>` 之中、几乎所有的元素都有自己的类名并都以 `dsqjs-` 为前缀，防止污染。
 

src/disqus.js

@@ -1,224 +1,3 @@
-// Import baituTemplate
-/*! baiduTemplate | Verison 1.0.6 | BSD License */
-
-/**
- * baiduTemplate简单好用的Javascript模板引擎 1.0.6 版本
- * http://baidufe.github.com/BaiduTemplate
- * 开源协议：BSD License
- * 浏览器环境占用命名空间 baidu.template ，nodejs环境直接安装 npm install baidutemplate
- * @param str{String} dom结点ID，或者模板string
- * @param data{Object} 需要渲染的json对象，可以为空。当data为{}时，仍然返回html。
- * @return 如果无data，直接返回编译后的函数；如果有data，返回html。
- * @author wangxiao
-*/
-
-; (function (window) {
-
-    //取得浏览器环境的baidu命名空间，非浏览器环境符合commonjs规范exports出去
-    //修正在nodejs环境下，采用baidu.template变量名
-    var baidu = typeof module === 'undefined' ? (window.baidu = window.baidu || {}) : module.exports;
-
-    //模板函数（放置于baidu.template命名空间下）
-    baidu.template = function (str, data) {
-
-        //检查是否有该id的元素存在，如果有元素则获取元素的innerHTML/value，否则认为字符串为模板
-        var fn = (function () {
-
-            //判断如果没有document，则为非浏览器环境
-            if (!window.document) {
-                return bt._compile(str);
-            };
-
-            //HTML5规定ID可以由任何不包含空格字符的字符串组成
-            var element = document.getElementById(str);
-            if (element) {
-
-                //取到对应id的dom，缓存其编译后的HTML模板函数
-                if (bt.cache[str]) {
-                    return bt.cache[str];
-                };
-
-                //textarea或input则取value，其它情况取innerHTML
-                var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;
-                return bt._compile(html);
-
-            } else {
-
-                //是模板字符串，则生成一个函数
-                //如果直接传入字符串作为模板，则可能变化过多，因此不考虑缓存
-                return bt._compile(str);
-            };
-
-        })();
-
-        //有数据则返回HTML字符串，没有数据则返回函数 支持data={}的情况
-        var result = bt._isObject(data) ? fn(data) : fn;
-        fn = null;
-
-        return result;
-    };
-
-    //取得命名空间 baidu.template
-    var bt = baidu.template;
-
-    //标记当前版本
-    bt.versions = bt.versions || [];
-    bt.versions.push('1.0.6');
-
-    //缓存  将对应id模板生成的函数缓存下来。
-    bt.cache = {};
-
-    //自定义分隔符，可以含有正则中的字符，可以是HTML注释开头 <! !>
-    bt.LEFT_DELIMITER = bt.LEFT_DELIMITER || '<%';
-    bt.RIGHT_DELIMITER = bt.RIGHT_DELIMITER || '%>';
-
-    //自定义默认是否转义，默认为默认自动转义
-    bt.ESCAPE = true;
-
-    //HTML转义
-    bt._encodeHTML = function (source) {
-        return String(source)
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/\\/g, '&#92;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;');
-    };
-
-    //转义影响正则的字符
-    bt._encodeReg = function (source) {
-        return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
-    };
-
-    //转义UI UI变量使用在HTML页面标签onclick等事件函数参数中
-    bt._encodeEventHTML = function (source) {
-        return String(source)
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;')
-            .replace(/\\\\/g, '\\')
-            .replace(/\\\//g, '\/')
-            .replace(/\\n/g, '\n')
-            .replace(/\\r/g, '\r');
-    };
-
-    //将字符串拼接生成函数，即编译过程(compile)
-    bt._compile = function (str) {
-        var funBody = "var _template_fun_array=[];\nvar fn=(function(__data__){\nvar _template_varName='';\nfor(name in __data__){\n_template_varName+=('var '+name+'=__data__[\"'+name+'\"];');\n};\neval(_template_varName);\n_template_fun_array.push('" + bt._analysisStr(str) + "');\n_template_varName=null;\n})(_template_object);\nfn = null;\nreturn _template_fun_array.join('');\n";
-        return new Function("_template_object", funBody);
-    };
-
-    //判断是否是Object类型
-    bt._isObject = function (source) {
-        return 'function' === typeof source || !!(source && 'object' === typeof source);
-    };
-
-    //解析模板字符串
-    bt._analysisStr = function (str) {
-
-        //取得分隔符
-        var _left_ = bt.LEFT_DELIMITER;
-        var _right_ = bt.RIGHT_DELIMITER;
-
-        //对分隔符进行转义，支持正则中的元字符，可以是HTML注释 <!  !>
-        var _left = bt._encodeReg(_left_);
-        var _right = bt._encodeReg(_right_);
-
-        str = String(str)
-
-            //去掉分隔符中js注释
-            .replace(new RegExp("(" + _left + "[^" + _right + "]*)//.*\n", "g"), "$1")
-
-            //去掉注释内容  <%* 这里可以任意的注释 *%>
-            //默认支持HTML注释，将HTML注释匹配掉的原因是用户有可能用 <! !>来做分割符
-            .replace(new RegExp("<!--.*?-->", "g"), "")
-            .replace(new RegExp(_left + "\\*.*?\\*" + _right, "g"), "")
-
-            //把所有换行去掉  \r回车符 \t制表符 \n换行符
-            .replace(new RegExp("[\\r\\t\\n]", "g"), "")
-
-            //用来处理非分隔符内部的内容中含有 斜杠 \ 单引号 ‘ ，处理办法为HTML转义
-            .replace(new RegExp(_left + "(?:(?!" + _right + ")[\\s\\S])*" + _right + "|((?:(?!" + _left + ")[\\s\\S])+)", "g"), function (item, $1) {
-                var str = '';
-                if ($1) {
-
-                    //将 斜杠 单引 HTML转义
-                    str = $1.replace(/\\/g, "&#92;").replace(/'/g, '&#39;');
-                    while (/<[^<]*?&#39;[^<]*?>/g.test(str)) {
-
-                        //将标签内的单引号转义为\r  结合最后一步，替换为\'
-                        str = str.replace(/(<[^<]*?)&#39;([^<]*?>)/g, '$1\r$2')
-                    };
-                } else {
-                    str = item;
-                }
-                return str;
-            });
-
-
-        str = str
-            //定义变量，如果没有分号，需要容错  <%var val='test'%>
-            .replace(new RegExp("(" + _left + "[\\s]*?var[\\s]*?.*?[\\s]*?[^;])[\\s]*?" + _right, "g"), "$1;" + _right_)
-
-            //对变量后面的分号做容错(包括转义模式 如<%:h=value%>)  <%=value;%> 排除掉函数的情况 <%fun1();%> 排除定义变量情况  <%var val='test';%>
-            .replace(new RegExp("(" + _left + ":?[hvu]?[\\s]*?=[\\s]*?[^;|" + _right + "]*?);[\\s]*?" + _right, "g"), "$1" + _right_)
-
-            //按照 <% 分割为一个个数组，再用 \t 和在一起，相当于将 <% 替换为 \t
-            //将模板按照<%分为一段一段的，再在每段的结尾加入 \t,即用 \t 将每个模板片段前面分隔开
-            .split(_left_).join("\t");
-
-        //支持用户配置默认是否自动转义
-        if (bt.ESCAPE) {
-            str = str
-
-                //找到 \t=任意一个字符%> 替换为 ‘，任意字符,'
-                //即替换简单变量  \t=data%> 替换为 ',data,'
-                //默认HTML转义  也支持HTML转义写法<%:h=value%>
-                .replace(new RegExp("\\t=(.*?)" + _right, "g"), "',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'");
-        } else {
-            str = str
-
-                //默认不转义HTML转义
-                .replace(new RegExp("\\t=(.*?)" + _right, "g"), "',typeof($1) === 'undefined'?'':$1,'");
-        };
-
-        str = str
-
-            //支持HTML转义写法<%:h=value%>
-            .replace(new RegExp("\\t:h=(.*?)" + _right, "g"), "',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'")
-
-            //支持不转义写法 <%:=value%>和<%-value%>
-            .replace(new RegExp("\\t(?::=|-)(.*?)" + _right, "g"), "',typeof($1)==='undefined'?'':$1,'")
-
-            //支持url转义 <%:u=value%>
-            .replace(new RegExp("\\t:u=(.*?)" + _right, "g"), "',typeof($1)==='undefined'?'':encodeURIComponent($1),'")
-
-            //支持UI 变量使用在HTML页面标签onclick等事件函数参数中  <%:v=value%>
-            .replace(new RegExp("\\t:v=(.*?)" + _right, "g"), "',typeof($1)==='undefined'?'':baidu.template._encodeEventHTML($1),'")
-
-            //将字符串按照 \t 分成为数组，在用'); 将其合并，即替换掉结尾的 \t 为 ');
-            //在if，for等语句前面加上 '); ，形成 ');if  ');for  的形式
-            .split("\t").join("');")
-
-            //将 %> 替换为_template_fun_array.push('
-            //即去掉结尾符，生成函数中的push方法
-            //如：if(list.length=5){%><h2>',list[4],'</h2>');}
-            //会被替换为 if(list.length=5){_template_fun_array.push('<h2>',list[4],'</h2>');}
-            .split(_right_).join("_template_fun_array.push('")
-
-            //将 \r 替换为 \
-            .split("\r").join("\\'");
-
-        return str;
-    };
-
-})(window);
-
-// Import baiduTemplate finished
-
 /*!
  * DisqusJS | v0.1.1
  * Author: SukkaW
@@ -518,22 +297,27 @@
     }
 
     let renderComment = (data) => {
-        /*
+        let renderCommentItem = (s) => {
-        <div class="dsqjs-item-container">
+            /*
-            <div class="dsqjs-avater">
+            <div class="dsqjs-item-container">
-                <%- avatarEl %>
+                <div class="dsqjs-avater">
-            </div>
+                    ${s.avatarEl}
-            <div class="dsqjs-body">
+                </div>
-                <header class="dsqjs-header">
+                <div class="dsqjs-body">
-                    <span class="dsqjs-author"><%- authorEl %></span>
+                    <header class="dsqjs-header">
-                    <span class="dsqjs-bullet"></span>
+                        <span class="dsqjs-author">${s.authorEl}</span>
-                    <span class="dsqjs-meta"><time><%- (new Date(createdAt)).Format("yyyy-MM-dd hh:mm:ss") %></time></span>
+                        <span class="dsqjs-bullet"></span>
-                </header>
+                        <span class="dsqjs-meta"><time>${(new Date(s.createdAt)).Format("yyyy-MM-dd hh:mm:ss")}</time></span>
-                <div class="dsqjs-content"><%- message %></div>
+                    </header>
+                    <div class="dsqjs-content">${s.message}</div>
+                </div>
             </div>
-        </div>
+            */
-        */
+            let commentItemTpl = `<div class="dsqjs-item-container"><div class="dsqjs-avater">${s.avatarEl}</div><div class="dsqjs-body"><header class="dsqjs-header"><span class="dsqjs-author">${s.authorEl}</span><span class="dsqjs-bullet"></span><span class="dsqjs-meta"><time>${(new Date(s.createdAt)).Format("yyyy-MM-dd hh:mm:ss")}</time></span></header><div class="dsqjs-content">${s.message}</div></div></div>`
-        var commentBodyTpl = `<div class="dsqjs-item-container"><div class="dsqjs-avater"><%- avatarEl %></div><div class="dsqjs-body"><header class="dsqjs-header"><span class="dsqjs-author"><%- authorEl %></span><span class="dsqjs-bullet"></span><span class="dsqjs-meta"><time><%- (new Date(createdAt)).Format("yyyy-MM-dd hh:mm:ss") %></time></span></header><div class="dsqjs-content"><%- message %></div></div></div>`
+
+            return commentItemTpl
+        }
+
 
         data.map(s => {
             let childrenComments = (s) => {
@@ -575,7 +359,7 @@
 
                     html += `<li class="dsqjs-item" id="comment-${comment.id}">`
 
-                    html += baidu.template(commentBodyTpl, comment)
+                    html += renderCommentItem(comment)
 
                     html += `${childrenComments(s)}</li>`
                 })
@@ -609,7 +393,7 @@
 
             let html = `<li class="dsqjs-item" id="comment-${comment.id}">`
 
-            html += baidu.template(commentBodyTpl, comment)
+            html += renderCommentItem(comment)
 
             html += `${childrenComments(s)}</li>`;