Browse Source

Merge branch 'master' of node/npmcomment into master

node 6 years ago
parent
commit
eb6f8d9e44

+ 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();