优化JS代码细节 v1.0.1

Sumsung524 · Sumsung524 · commit aefe17bd8d4e · 2022-09-06T14:47:42.000+08:00
diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
 # docsify-backTop
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/Sumsung524/docsify-backTop/blob/master/LICENSE)[![License: MIT](https://img.shields.io/badge/version-v1.0.0-green.svg?style=flat-square)](https://github.com/Sumsung524/docsify-backTop/releases)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/Sumsung524/docsify-backTop/blob/master/LICENSE) [![License: MIT](https://img.shields.io/badge/version-v1.0.0-green.svg?style=flat-square)](https://github.com/Sumsung524/docsify-backTop/releases)
 
 一个[docsify文档](https://docsify.js.org)的返回顶部插件，同时适用于其他需要添加回到顶部组件的所有页面。
 
 
 
 演示地址：[docsify backTop Demo](https://xmq.plus/docs#/git/1.%E8%B5%B7%E6%AD%A5)
 
-![screenshot](/screenshot.gif)
+![screenshot](screenshot.gif)
 
 ## 特征
 
@@ -97,12 +97,12 @@ jsDelivr CDN引入或本地方式引入`docsify-backTop.min.js`文件：
 
 ## 参数说明
 
-| 参数    | 参数取值                                                     | 说明                         |
-| ------- | ------------------------------------------------------------ | ---------------------------- |
-| size    | 数值，必填                                                   | 设置回到顶部组件大小         |
-| bottom  | 数值，必填                                                   | 设置回到顶部组件底部偏移距离 |
-| right   | 数值，必填                                                   | 设置回到顶部组件右侧偏移距离 |
-| logo    | 字符、svg代码，内容使用单引号`''`包含，必填                  | 设置回到顶部组件Logo         |
+| 参数    | 参数取值                                                                                  | 说明                         |
+| ------- | ----------------------------------------------------------------------------------------- | ---------------------------- |
+| size    | 数值，必填                                                                                | 设置回到顶部组件大小         |
+| bottom  | 数值，必填                                                                                | 设置回到顶部组件底部偏移距离 |
+| right   | 数值，必填                                                                                | 设置回到顶部组件右侧偏移距离 |
+| logo    | 字符、svg代码，内容使用单引号`''`包含，必填                                               | 设置回到顶部组件Logo         |
 | bgColor | 16进制颜色码(\#2096ff)、颜色(blue)等，内容使用单引号`''`包含，logo参数为svg图标时，不填。 | 设置回到顶部组件背景底色     |
 
 回到顶部组件Logo中的svg代码可至[阿里巴巴矢量图库](https://www.iconfont.cn/)搜索“回到顶部”，选择自己喜欢的图标复制svg代码设置。
diff --git a/dist/docsify-backTop.js b/dist/docsify-backTop.js
@@ -3,28 +3,28 @@ window.addEventListener('DOMContentLoaded', function () {
 
     // 4. 封装函数docsifyBackTopFn()
     // 4.1 调用函数
-    docsifyBackTopFn(docsifyBackTop.size, docsifyBackTop.bottom, docsifyBackTop.right, docsifyBackTop.logo, docsifyBackTop.bgColor);
+    docsifyBackTopFn(docsifyBackTop);
     // 4.2 封装函数
-    function docsifyBackTopFn(backTopSize, backTopBottom, backTopRight, backTopLogo, backTopBGColor) {
+    function docsifyBackTopFn(obj) {
 
         // 1. 创建元素
         // 1.1 获取body元素
         var body = document.body;
         // 1.2 创建回到顶部组件div
         var div = document.createElement('div');
         div.className = 'backTop';
-        div.innerHTML = backTopLogo;
+        div.innerHTML = obj.logo;
         body.appendChild(div);
         // 1.3 回到顶部CSS
         div.style.opacity = 0;
         div.style.position = 'fixed';
-        div.style.bottom = backTopBottom + 'px';
-        div.style.right = backTopRight + 'px';
-        div.style.width = backTopSize + 'px';
+        div.style.bottom = obj.bottom + 'px';
+        div.style.right = obj.right + 'px';
+        div.style.width = obj.size + 'px';
         div.style.height = div.style.width;
         div.style.textAlign = 'center';
         div.style.lineHeight = div.style.width;
-        div.style.backgroundColor = backTopBGColor;
+        div.style.backgroundColor = obj.bgColor;
         div.style.borderRadius = '50%';
         div.style.cursor = 'pointer';
         div.style.transition = 'opacity 0.5s';
diff --git a/dist/docsify-backTop.min.js b/dist/docsify-backTop.min.js
diff --git a/index.html b/index.html
@@ -17,13 +17,13 @@
 <body>
     <script>
         var docsifyBackTop = {
-            size: 32,           // 数值，组件大小，必填。
-            bottom: 15,         // 数值，组件底部偏移距离，必填。
-            right: 15,          // 数值，组件右侧偏移距离，必填。
+            size: 32,               // 数值，组件大小，必填。
+            bottom: 15,             // 数值，组件底部偏移距离，必填。
+            right: 15,              // 数值，组件右侧偏移距离，必填。
             // logo:字符串或svg矢量图代码，必填。
             logo: '<svg t="1662288563130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3633" width="200" height="200"><path d="M513 103.7c-226.1 0-409.4 183.3-409.4 409.4S286.9 922.6 513 922.6s409.4-183.3 409.4-409.4S739.1 103.7 513 103.7z m153.5 364.7c-5.2 5.3-12.1 7.9-19 7.9s-13.8-2.6-19-7.9L545.1 385c0 0.4 0.1 0.7 0.1 1.1V705c0 11.1-5.7 20.9-14.4 26.6-4.7 4.2-10.9 6.7-17.7 6.7-6.8 0-13-2.5-17.7-6.7-8.7-5.7-14.4-15.5-14.4-26.6V386.1c0-0.4 0-0.7 0.1-1.1l-83.4 83.4c-10.5 10.5-27.5 10.5-38 0s-10.5-27.5 0-38L494 295.9c10.5-10.5 27.5-10.5 38 0l134.5 134.5c10.5 10.4 10.5 27.5 0 38z" fill="#2096ff" p-id="3634"></path></svg>',
-            bgColor: ''    // 背景颜色，#fff、pink等，logo为svg图标时，不填。
-        };
+            bgColor: ''             // 背景颜色，#fff、pink等，logo为svg图标时，不填。
+        }
     </script>
 </body>
 
