npm
/
comment-vedio
Watch 7
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

feat: 实现一个页面渲染多个 businessId 的方案

node 5 years ago
parent
10f157b08d
commit
afea7ee260
6 changed files with 250 additions and 3 deletions
Split View Show Diff Stats
  1. 80
    0
      README.md
  2. 6
    3
      assets/example.html
  3. 23
    0
      assets/example/example_multiple.html
  4. 58
    0
      assets/example/example_multiple.js
  5. 26
    0
      assets/example/rerender.html
  6. 57
    0
      assets/example/rerender.js

+ 80
- 0
README.md View File 

@@ -83,6 +83,86 @@ render() {
83 83 
 </html>
84 84 
 ```
85 85
86 
+#### 一个页面多次渲染评论
87 
+
88 
+有的场景可能需要在一个页面上根据不同 bid 多次渲染评论，可以参考 `./assets/example/rerender.html`。
89 
+
90 
+其方案就是，每次渲染之前，都清空之前渲染的节点内容，再重新渲染。否则 React 会任务两次 render 是同样的内容，就不渲染。
91 
+
92 
+详解：
93 
+
94 
+1. 首先清空父标签的内容
95 
+2. 动态创建渲染评论的标签
96 
+3. 渲染评论
97 
+
98 
+
99 
+```html
100 
+<!-- ... -->
101 
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/comment.0.5.13.css" />
102 
+<!-- ... -->
103 
+  <div id="RENDER_ELEMENT_WRAPPER"></div>
104 
+<!-- ... -->
105 
+  <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
106 
+<!-- ... -->
107 
+```
108 
+
109 
+```js
110 
+var RENDER_ELEMENT_WRAPPER = 'RENDER_ELEMENT_WRAPPER'; // 渲染评论的父标签
111 
+var RENDER_ELEMENT_COMMENT = 'comment'; // 渲染评论的标签的 id
112 
+
113 
+/**
114 
+ * 根据 id 创建节点
115 
+ * @param {string} id id
116 
+ */
117 
+function createElement(id) {
118 
+  var node = document.createElement('div');
119 
+  node.setAttribute("id", id);
120 
+  document.getElementById(RENDER_ELEMENT_WRAPPER).appendChild(node);
121 
+}
122 
+
123 
+/**
124 
+ * 根据 id 删除子节点
125 
+ * @param {string} id id
126 
+ */
127 
+function removeChild(id) {
128 
+  var myNode = document.getElementById(id);
129 
+  while (myNode.firstChild) {
130 
+    myNode.removeChild(myNode.firstChild);
131 
+  }
132 
+}
133 
+
134 
+function main() {
135 
+  document.getElementById('render').addEventListener('click', function() {
136 
+    // 首先清空父标签的内容
137 
+    removeChild(RENDER_ELEMENT_WRAPPER);
138 
+
139 
+    var id = RENDER_ELEMENT_COMMENT;
140 
+    // 动态创建渲染评论的标签
141 
+    createElement(id);
142 
+    // 渲染评论
143 
+    window.renderComment({
144 
+      id: id,
145 
+      type: 1,
146 
+      businessId: 'test'
147 
+    })
148 
+  })
149 
+
150 
+  document.getElementById('re-render').addEventListener('click', function() {
151 
+    removeChild(RENDER_ELEMENT_WRAPPER)
152 
+    var id = RENDER_ELEMENT_COMMENT;
153 
+    createElement(id)
154 
+    window.renderComment({
155 
+      id: id,
156 
+      type: 1,
157 
+      businessId: 'test1'
158 
+    })
159 
+  })
160 
+
161 
+}
162 
+
163 
+main();
164 
+```
165 
+
86 166
87 167 
 ## Comment
88 168

+ 6
- 3
assets/example.html View File 

@@ -13,12 +13,15 @@
13 13 
     <p>将其渲染到 id 为 `comment` 的节点上</p>
14 14 
     <div id="comment"></div>
15 15 
   </div>
16 
+
17 
+  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
16 18 
   <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
17 19 
   <script type="text/javascript">
20 
+    // 调用 renderComment 这个方法，渲染通用评论
18 21 
     window.renderComment({
19 
-      id: 'comment',
20 
-      type: 1,
21 
-      businessId: 'test'
22 
+      id: 'comment', // 渲染通用评论到 comment 这个节点，id 名称可 自定义
23 
+      type: 1, // 评论的 type
24 
+      businessId: 'test1' // 评论的 businessId
22 25 
     })
23 26 
   </script>
24 27 
 </body>

+ 23
- 0
assets/example/example_multiple.html View File 

@@ -0,0 +1,23 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+<head>
4 
+  <meta charset="utf-8" />
5 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
+  <title>通用评论 demo</title>
7 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
8 
+  <link rel="stylesheet" type="text/css" media="screen" href="../static/css/comment.0.5.13.css" />
9 
+</head>
10 
+<body>
11 
+  <div>
12 
+    <h1>在非 React.js 项目中使用通用评论</h1>
13 
+    <p>使用多个 bisunessId</p>
14 
+
15 
+    <button id="render">渲染评论 bid: test</button>
16 
+    <button id="re-render">重新渲染 bid: test1</button>
17 
+
18 
+    <div id="comment"></div>
19 
+  </div>
20 
+
21 
+  <script type="text/javascript" src="./example_multiple.js"></script>
22 
+</body>
23 
+</html>

+ 58
- 0
assets/example/example_multiple.js View File 

@@ -0,0 +1,58 @@
1 
+var COMMENT_URL = '../static/js/comment.0.5.13.js';
2 
+var RENDER_ELEMENT_COMMENT = 'comment'; // 渲染评论的标签的 ID
3 
+
4 
+/**
5 
+ * 异步加载 js 文件
6 
+ * @param {string} url 需要加载的 js 文件地址
7 
+ * @param {function} callback js 文件加载后的回调
8 
+ */
9 
+function loadScript(url, callback){
10 
+  var script = document.createElement("script")
11 
+  script.type = "text/javascript";
12 
+
13 
+  if (script.readyState){  //IE
14 
+      script.onreadystatechange = function(){
15 
+          if (script.readyState == "loaded" ||
16 
+                  script.readyState == "complete"){
17 
+              script.onreadystatechange = null;
18 
+              callback();
19 
+          }
20 
+      };
21 
+  } else {  //Others
22 
+      script.onload = function(){
23 
+          callback();
24 
+      };
25 
+  }
26 
+
27 
+  script.src = url;
28 
+  document.getElementsByTagName("head")[0].appendChild(script);
29 
+}
30 
+
31 
+
32 
+/**
33 
+ * 渲染评论组件搭配指定的节点
34 
+ * @param {string} id element id
35 
+ * @param {string} type 评论的 type
36 
+ * @param {string} businessId 评论的 businessId
37 
+ */
38 
+function render(id, type, businessId) {
39 
+  loadScript(COMMENT_URL, function() {
40 
+    window.renderComment({
41 
+      id: id,
42 
+      type: type,
43 
+      businessId: businessId
44 
+    })
45 
+  })
46 
+}
47 
+
48 
+
49 
+document.getElementById('render').addEventListener('click', function() {
50 
+  render(RENDER_ELEMENT_COMMENT, 1, 'test');
51 
+})
52 
+
53 
+document.getElementById('re-render').addEventListener('click', function() {
54 
+  render(RENDER_ELEMENT_COMMENT, 1, 'test1');
55 
+})
56 
+
57 
+
58 
+

+ 26
- 0
assets/example/rerender.html View File 

@@ -0,0 +1,26 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+<head>
4 
+  <meta charset="utf-8" />
5 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
+  <title>通用评论 demo</title>
7 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
8 
+  <link rel="stylesheet" type="text/css" media="screen" href="../static/css/comment.0.5.13.css" />
9 
+</head>
10 
+<body>
11 
+  <div>
12 
+    <h1>在非 React.js 项目中使用通用评论</h1>
13 
+
14 
+    <p>使用多个 businessId</p>
15 
+
16 
+    <button id="render">渲染评论 bid: test</button>
17 
+    <button id="re-render">重新渲染 bid: test1</button>
18 
+    <div id="RENDER_ELEMENT_WRAPPER"></div>
19 
+
20 
+  </div>
21 
+
22 
+  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
23 
+  <script type="text/javascript" src="../static/js/comment.0.5.13.js"></script>
24 
+  <script type="text/javascript" src="rerender.js"></script>
25 
+</body>
26 
+</html>

+ 57
- 0
assets/example/rerender.js View File 

@@ -0,0 +1,57 @@
1 
+var RENDER_ELEMENT_WRAPPER = 'RENDER_ELEMENT_WRAPPER'; // 渲染评论的父标签
2 
+var RENDER_ELEMENT_COMMENT = 'comment'; // 渲染评论的标签的 id
3 
+
4 
+/**
5 
+ * 根据 id 创建节点
6 
+ * @param {string} id id
7 
+ */
8 
+function createElement(id) {
9 
+  var node = document.createElement('div');
10 
+  node.setAttribute("id", id);
11 
+  document.getElementById(RENDER_ELEMENT_WRAPPER).appendChild(node);
12 
+}
13 
+
14 
+/**
15 
+ * 根据 id 删除子节点
16 
+ * @param {string} id id
17 
+ */
18 
+function removeChild(id) {
19 
+  var myNode = document.getElementById(id);
20 
+  while (myNode.firstChild) {
21 
+    myNode.removeChild(myNode.firstChild);
22 
+  }
23 
+}
24 
+
25 
+
26 
+
27 
+function main() {
28 
+  document.getElementById('render').addEventListener('click', function() {
29 
+    // 首先清空父标签的内容
30 
+    removeChild(RENDER_ELEMENT_WRAPPER);
31 
+
32 
+    var id = RENDER_ELEMENT_COMMENT;
33 
+    // 动态创建渲染评论的标签
34 
+    createElement(id);
35 
+    // 渲染评论
36 
+    window.renderComment({
37 
+      id: id,
38 
+      type: 1,
39 
+      businessId: 'test'
40 
+    })
41 
+  })
42 
+
43 
+  document.getElementById('re-render').addEventListener('click', function() {
44 
+    removeChild(RENDER_ELEMENT_WRAPPER)
45 
+    var id = RENDER_ELEMENT_COMMENT;
46 
+    createElement(id)
47 
+    window.renderComment({
48 
+      id: id,
49 
+      type: 1,
50 
+      businessId: 'test1'
51 
+    })
52 
+  })
53 
+
54 
+}
55 
+
56 
+
57 
+main();