├── Images
    ├── index.md
    └── socialCode.png
├── Samples
    ├── images
    │   └── district-circle.png
    ├── Readme.md
    ├── svg-loaders
    │   └── bars.svg
    ├── 百度地图仿链家地图找房.html
    └── SKU.html
├── .github
    └── workflows
    │   └── jekyll.yml
├── MindMaps
    └── ReadMe.md
├── README.md
└── 工作用Js方法总结.md


/Images/index.md:
--------------------------------------------------------------------------------
1 | 公共图片资源目录
2 | 


--------------------------------------------------------------------------------
/Images/socialCode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lengxing/MyBlog/HEAD/Images/socialCode.png


--------------------------------------------------------------------------------
/Samples/images/district-circle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lengxing/MyBlog/HEAD/Samples/images/district-circle.png


--------------------------------------------------------------------------------
/Samples/Readme.md:
--------------------------------------------------------------------------------
1 | ### [百度地图仿链家地图找房](http://htmlpreview.github.io/?https://github.com/lengxing/MyBlog/blob/master/Samples/%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E4%BB%BF%E9%93%BE%E5%AE%B6%E5%9C%B0%E5%9B%BE%E6%89%BE%E6%88%BF.html)
2 | 
3 | ### [仿淘宝SKU](http://htmlpreview.github.io/?https://github.com/lengxing/MyBlog/blob/master/Samples/SKU.html)
4 | 


--------------------------------------------------------------------------------
/.github/workflows/jekyll.yml:
--------------------------------------------------------------------------------
 1 | name: Jekyll site CI
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     steps:
11 |     - uses: actions/checkout@v1
12 |     - name: Build the site in the jekyll/builder container
13 |       run: |
14 |         docker run \
15 |         -v ${{ github.workspace }}:/srv/jekyll -v ${{ github.workspace }}/_site:/srv/jekyll/_site \
16 |         jekyll/builder:latest /bin/bash -c "chmod 777 /srv/jekyll && jekyll build --future"
17 | 


--------------------------------------------------------------------------------
/MindMaps/ReadMe.md:
--------------------------------------------------------------------------------
 1 | 本目录下将会存放日常整理的相关思维导图
 2 | 
 3 | ## Javascript
 4 | 
 5 | [Javascript基础](http://htmlpreview.github.io/?https://github.com/lengxing/MyBlog/blob/master/MindMaps/Javascript%E5%9F%BA%E7%A1%80.html)
 6 | 
 7 | 
 8 | ## HTTP
 9 | 
10 | [HTTP缓存机制](http://htmlpreview.github.io/?https://github.com/lengxing/MyBlog/blob/master/MindMaps/HTTP%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6.html)
11 | 
12 | ## React
13 | 
14 | [React知识体系(未完待续)](http://htmlpreview.github.io/?https://github.com/lengxing/MyBlog/blob/master/MindMaps/ReactMaterials.html)
15 | 


--------------------------------------------------------------------------------
/Samples/svg-loaders/bars.svg:
--------------------------------------------------------------------------------
 1 | <svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
 2 |     <rect y="10" width="15" height="120" rx="6">
 3 |         <animate attributeName="height"
 4 |              begin="0.5s" dur="1s"
 5 |              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
 6 |              repeatCount="indefinite" />
 7 |         <animate attributeName="y"
 8 |              begin="0.5s" dur="1s"
 9 |              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
10 |              repeatCount="indefinite" />
11 |     </rect>
12 |     <rect x="30" y="10" width="15" height="120" rx="6">
13 |         <animate attributeName="height"
14 |              begin="0.25s" dur="1s"
15 |              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
16 |              repeatCount="indefinite" />
17 |         <animate attributeName="y"
18 |              begin="0.25s" dur="1s"
19 |              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
20 |              repeatCount="indefinite" />
21 |     </rect>
22 |     <rect x="60" width="15" height="140" rx="6">
23 |         <animate attributeName="height"
24 |              begin="0s" dur="1s"
25 |              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
26 |              repeatCount="indefinite" />
27 |         <animate attributeName="y"
28 |              begin="0s" dur="1s"
29 |              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
30 |              repeatCount="indefinite" />
31 |     </rect>
32 |     <rect x="90" y="10" width="15" height="120" rx="6">
33 |         <animate attributeName="height"
34 |              begin="0.25s" dur="1s"
35 |              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
36 |              repeatCount="indefinite" />
37 |         <animate attributeName="y"
38 |              begin="0.25s" dur="1s"
39 |              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
40 |              repeatCount="indefinite" />
41 |     </rect>
42 |     <rect x="120" y="10" width="15" height="120" rx="6">
43 |         <animate attributeName="height"
44 |              begin="0.5s" dur="1s"
45 |              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
46 |              repeatCount="indefinite" />
47 |         <animate attributeName="y"
48 |              begin="0.5s" dur="1s"
49 |              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
50 |              repeatCount="indefinite" />
51 |     </rect>
52 | </svg>
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 个人博客记录
 2 | 
 3 | > 知识在于积累
 4 | 
 5 | 关注公众号，可以及时接收更新哦
 6 | 
 7 | 
 8 | ![公众号](https://segmentfault.com/img/bVbrzrM?w=258&h=258)
 9 | 
10 | 欢迎大家Star🌟🌟
11 | 
12 | ## React系列
13 | - [状态（State）和生命周期](https://github.com/lengxing/MyBlog/issues/17)
14 | - [列表（Lists）和键（Keys）](https://github.com/lengxing/MyBlog/issues/15)
15 | - [元素、组件与属性](https://github.com/lengxing/MyBlog/issues/13)
16 | - [Props 验证](https://github.com/lengxing/MyBlog/issues/16)
17 | - [受控组件(Controlled Components)和不受控组件](https://github.com/lengxing/MyBlog/issues/12)
18 | - [如何构建React应用程序](https://github.com/lengxing/MyBlog/issues/14)
19 | - [React之PureComponent](https://github.com/lengxing/MyBlog/issues/18)
20 | - [React组件的生命周期](https://github.com/lengxing/MyBlog/issues/20)
21 | - [React事件处理浅谈](https://github.com/lengxing/MyBlog/issues/21)
22 | - [React组件的State](https://github.com/lengxing/MyBlog/issues/22)
23 | - [React高阶组件以及应用场景](https://github.com/lengxing/MyBlog/issues/33)
24 | 
25 | 
26 | ## ES6系列
27 | 
28 | - [变量与块级作用域](https://github.com/lengxing/MyBlog/issues/10)
29 | - [函数部分](https://github.com/lengxing/MyBlog/issues/3)
30 | - [变量的解构赋值](https://github.com/lengxing/MyBlog/issues/9)
31 | - [字符串扩展](https://github.com/lengxing/MyBlog/issues/7)
32 | - [数值的扩展](https://github.com/lengxing/MyBlog/issues/4)
33 | - [Symbol](https://github.com/lengxing/MyBlog/issues/8)
34 | - [Set和Map](https://github.com/lengxing/MyBlog/issues/6)
35 | - [Proxy和Reflect](https://github.com/lengxing/MyBlog/issues/5)
36 | - [Promise](https://github.com/lengxing/MyBlog/issues/1)
37 | 
38 | ## Vue.js系列
39 | 
40 | - [Vue.js基础拾遗](https://github.com/lengxing/MyBlog/issues/25)
41 | - [浅尝Vue.js组件(一)](https://github.com/lengxing/MyBlog/issues/26)
42 | - [浅尝Vue.js组件(二)](https://github.com/lengxing/MyBlog/issues/27)
43 | - [Vue3组合式函数最佳实践(一)](https://github.com/lengxing/MyBlog/issues/41)
44 | - [Vue3组合式函数最佳实践(二)](https://github.com/lengxing/MyBlog/issues/48)
45 | - [Vue3组合式函数最佳实践(三)](https://github.com/lengxing/MyBlog/issues/50)
46 | - 🆕[🍍(Pinia)不酸，保甜 ](https://github.com/lengxing/MyBlog/issues/42)
47 | - 🆕[Vue 3中依赖注入与组件定义相关的那点事儿](https://github.com/lengxing/MyBlog/issues/44)
48 | 
49 | ## 微信小程序系列
50 | 
51 | - [登录功能](https://github.com/lengxing/MyBlog/issues/28)
52 | - [微信小程序的实现原理](https://github.com/lengxing/MyBlog/issues/49)
53 | 
54 | ## Javascript
55 | - [11个教程中不常被提及的JavaScript小技巧](https://github.com/lengxing/MyBlog/issues/29)
56 | - [JavaScript中十种一步拷贝数组的方法](https://github.com/lengxing/MyBlog/issues/30)
57 | - [工作用Js方法总结](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md)
58 | - [11个常用JS小小技巧](https://github.com/lengxing/MyBlog/issues/39)
59 | - [2023我还不知道的JSON Schema-基础篇](https://github.com/lengxing/MyBlog/issues/43)
60 | - [浅谈Intl.NumberFormat](https://github.com/lengxing/MyBlog/issues/46)
61 | - [浅谈Intl对象（DateTimeFormat、ListFormat、RelativeTimeFormat）](https://github.com/lengxing/MyBlog/issues/47)
62 | 
63 | ## 工作识记
64 | - [地图小区景点边界轮廓实现](https://github.com/lengxing/MyBlog/issues/19)
65 | - [Web Worker使用初体验](https://github.com/lengxing/MyBlog/issues/23)
66 | - [序列帧&一镜到底H5开发实现分析](https://github.com/lengxing/MyBlog/issues/24)
67 | - [URLSearchParams初体验](https://github.com/lengxing/MyBlog/issues/31)
68 | - [关于history的一点心得](https://github.com/lengxing/MyBlog/issues/32)
69 | - [前端H5 Video常见场景浅析](https://github.com/lengxing/MyBlog/issues/35)
70 | - [5个不常提及的HTML技巧](https://github.com/lengxing/MyBlog/issues/36)
71 | - [记一次老项目的交接经历](https://github.com/lengxing/MyBlog/issues/37)
72 | - [一次基于Taro的曝光逻辑踩坑记录](https://github.com/lengxing/MyBlog/issues/40)
73 | 
74 | ## 面试相关
75 |  - [8月血泪史，助力金九银十](https://github.com/lengxing/MyBlog/issues/51)
76 | 
77 | ## 前端基础系列
78 |  - [前端基础回归-URI和URL](https://github.com/lengxing/MyBlog/issues/38)
79 |  
80 | ## 工程构建相关
81 |  - 🆕[前端依赖管理那点事儿](https://github.com/lengxing/MyBlog/issues/45)
82 | 


--------------------------------------------------------------------------------
/Samples/百度地图仿链家地图找房.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  8 |     <title>仿链家地图找房</title>
  9 |     <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
 10 |     <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ez1LpvMNlQYeEkNvDwsReSHeGRhbGXhg"></script>
 11 |     <style>
 12 |     #share {
 13 |         display: none;
 14 |         float: right;
 15 |         font-size: 14px;
 16 |         line-height: 170%
 17 |     }
 18 | 
 19 |     .mapDemo {
 20 |         position: relative;
 21 |         width: 100%;
 22 |         height: 100%;
 23 |     }
 24 | 
 25 |     .demo-wrapper {
 26 |         position: relative;
 27 |         height: 100%;
 28 |         background: rgba(0, 0, 0, .03);
 29 |         border: 3px solid black;
 30 |     }
 31 | 
 32 |     .timeline-wrapper {
 33 |         position: absolute;
 34 |         top: 10px;
 35 |         left: 10px;
 36 |         right: 10px;
 37 |         height: 30px;
 38 |         background: #fff;
 39 |         transition: 1s ease all;
 40 |         border-radius: 4px;
 41 |         box-shadow: 0 1px 5px rgba(0, 0, 0, .65)
 42 |     }
 43 | 
 44 |     #loading {
 45 |         position: absolute;
 46 |         height: 100%;
 47 |         display: table;
 48 |         background: #2980B9;
 49 |         width: 100%;
 50 |         z-index: 9999;
 51 |     }
 52 | 
 53 |     .table-cell {
 54 |         display: table-cell;
 55 |         vertical-align: middle;
 56 |     }
 57 | 
 58 |     .py4 {
 59 |         padding-top: 4rem;
 60 |         padding-bottom: 4rem;
 61 |     }
 62 | 
 63 |     .mt2 {
 64 |         margin-top: 2rem;
 65 |     }
 66 | 
 67 |     .mb0 {
 68 |         margin-bottom: 0;
 69 |     }
 70 | 
 71 |     .mb2 {
 72 |         margin-bottom: 2rem;
 73 |     }
 74 | 
 75 |     .center {
 76 |         text-align: center;
 77 |     }
 78 | 
 79 |     .bubble {
 80 |         -webkit-user-select: none;
 81 |         -moz-user-select: none;
 82 |         -ms-user-select: none;
 83 |         user-select: none;
 84 |         transition: background-color .15s ease-in-out;
 85 |         cursor: pointer
 86 |     }
 87 | 
 88 |     .bubble p {
 89 |         white-space: nowrap;
 90 |         overflow: hidden;
 91 |         text-overflow: ellipsis
 92 |     }
 93 | 
 94 |     .bubble-1 {
 95 |         background: url(images/district-circle.png) no-repeat 0 0;
 96 |         box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
 97 |         border-radius: 50%;
 98 |         overflow: hidden;
 99 |         width: 92px;
100 |         height: 92px;
101 |         line-height: 1.6
102 |     }
103 | 
104 |     .bubble-1 .name {
105 |         font-size: 14px;
106 |         font-weight: 800;
107 |         margin-top: 24px
108 |     }
109 |     </style>
110 | </head>
111 | 
112 | <body>
113 |     <div class="demo-wrapper">
114 |         <div id="loading">
115 |             <div class="table-cell py4 center">
116 |                 <img src="svg-loaders/bars.svg" width="40" alt="">
117 |                 <h1 class="h1 mt2 mb0">Loading...</h1>
118 |                 <p class="small mb2">数据加载中...</p>
119 |             </div>
120 |         </div>
121 |         <div class="mapDemo" style="position: relative;">
122 |             <div id="container" width="100%" height="100%" style="position: absolute; left: 0px; top: 0px;"></div>
123 |         </div>
124 |     </div>
125 |     </div>
126 |     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
127 |     <script>
128 |     var o = void 0,
129 |         u = void 0,
130 |         f = {},
131 |         d = {
132 |             color: "#fff",
133 |             borderWidth: "0",
134 |             padding: "0",
135 |             zIndex: "2",
136 |             backgroundColor: "transparent",
137 |             textAlign: "center",
138 |             fontFamily: '"Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "微软雅黑", "Segoe UI", Tahoma, "宋体\\5b8b\\4f53", SimSun, sans-serif'
139 |         },
140 |         m = function(e) {
141 |             clearTimeout(u),
142 |                 u = setTimeout(function() {
143 |                     /*List.default.trigger("update", {
144 |                         channel: e
145 |                     })*/
146 |                 }, "zoom" === e || "drag" === e ? 100 / 3 : 100)
147 |         };
148 |     var g_conf = {
149 |         city: 'bj',
150 |         cityId: '100000',
151 |         cityName: '北京',
152 |         mapWrapper: 'container'
153 |     };
154 | 
155 |     var area = ["海淀", "朝阳区", "昌平", "门头沟", "石景山", "东城", "西城", "大兴", "房山", "通州", "怀柔", "延庆", "顺义", "丰台", "密云"]
156 | 
157 |     var MokaData = [];
158 | 
159 |     /**
160 |      * 工具函数集合
161 |      * @type {Object}
162 |      */
163 |     var Utils = {
164 |         init: function() {
165 |             this.addNewMethods();
166 |         },
167 |         rnd: function(n, m) {
168 |             var random = Math.floor(Math.random() * (m - n + 1) + n);
169 |             return random;
170 |         },
171 |         addNewMethods: function() {
172 |             String.trim || (String.prototype.trim = function() {
173 |                 for (var e = this.replace(/^\s\s*/, ""), t = /\s/, a = e.length; t.test(e.charAt(--a));)
174 |                 ;
175 |                 return e.slice(0, a + 1)
176 |             });
177 |             String.replaceTpl || (String.prototype.replaceTpl = function(e) {
178 |                 return this.replace(/#\{([^}]*)\}/gm, function(t, a) {
179 |                     return e[a.trim()]
180 |                 })
181 |             });
182 |             String.htmlEncode || (String.prototype.htmlEncode = function() {
183 |                 return String(this).replace(/\x26/g, "&amp;").replace(/\x3c/g, "&lt;").replace(/\x3E/g, "&gt;").replace(/\x22/g, "&quot;").replace(/\x27/g, "&#39;").replace(/\xA9/g, "&copy;")
184 |             });
185 |         },
186 |         replaceTpl: function(e, t, a) {
187 |             var n = String(e),
188 |                 i = a || /#\{([^}]*)\}/gm,
189 |                 l = String.trim || function(e) {
190 |                     return e.replace(/^\s+|\s+$/g, "")
191 |                 };
192 |             return n.replace(i, function(e, a) {
193 |                 return t[l(a)]
194 |             })
195 |         }
196 |     };
197 | 
198 |     Utils.init();
199 | 
200 |     /**
201 |      * 地图组件
202 |      * @type {Object}
203 |      */
204 |     var Maps = {
205 |         tpl: '<div class="bubble bubble-1" style="background: url(images/district-circle.png) no-repeat 0 0;box-shadow: 0 2px 2px rgba(0, 0, 0, .2);border-radius: 50%;overflow: hidden;width: 92px;height: 92px;line-height: 1.6" data-xftrack="10144" data-longitude="#{longitude}" data-latitude="#{latitude}" data-id="#{id}"><p class="name" title="#{name}" style="font-size: 14px;font-weight: 800;margin-top: 24px">#{name}</p><p><span class="count">#{count}</span>个楼盘</p></div>',
206 |         init: function() {
207 |             (o = new BMap.Map(g_conf.mapWrapper, {
208 |                 enableMapClick: !1,
209 |                 minZoom: 12
210 |             })).enableScrollWheelZoom(),
211 |                 o.disableInertialDragging();
212 |             o.addEventListener("tilesloaded", function e() {
213 |                     var t = $(".progress-bar");
214 |                     t.addClass("progress-bar-done"),
215 |                         setTimeout(function() {
216 |                             t.addClass("progress-bar-over"),
217 |                                 setTimeout(function() {
218 |                                     t.hide(200)
219 |                                 }, 150)
220 |                             $('#loading').hide();
221 |                         }, 20),
222 |                         o.addControl(new BMap.ScaleControl({
223 |                             anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
224 |                             offset: new BMap.Size(20, 20)
225 |                         })),
226 |                         setTimeout(function() {
227 |                             o.removeEventListener("tilesloaded", e)
228 |                         }, 0);
229 |                     Maps.getBundury();
230 |                 }),
231 |                 o.centerAndZoom(g_conf.cityName, 11),
232 |                 setTimeout(function() {
233 |                     o.addEventListener("zoomend", function() {
234 |                         console.log("zoom")
235 |                         m("zoom")
236 |                     });
237 |                     o.addEventListener("dragend", function() {
238 |                         console.log("drag")
239 |                         m("drag")
240 |                     });
241 |                 }, 100)
242 |         },
243 |         boundary: {
244 |             add: function(e, t) {
245 |                 if (!f[e]) {
246 |                     var a = new BMap.Polygon(t, {
247 |                         strokeWeight: 2,
248 |                         strokeColor: "#4285f4",
249 |                         strokeOpacity: 1,
250 |                         fillOpacity: .1,
251 |                         fillColor: "#4285f4",
252 |                         enableMassClear: !1
253 |                     });
254 |                     f[e] = a, f[e].hide(),
255 |                         o.addOverlay(a)
256 |                 }
257 |             },
258 |             show: function(e) {
259 |                 f[e] && f[e].show()
260 |             },
261 |             hide: function(e) {
262 |                 f[e] && f[e].hide()
263 |             },
264 |         },
265 |         bubble: {
266 |             clear: function() {
267 |                 o.clearOverlays()
268 |             },
269 |             render: function(data, tpl, a, n) {
270 |                 $.each(data, function(e, i) {
271 |                     var r = void 0,
272 |                         s = [];
273 | 
274 |                     r = new BMap.Label(Utils.replaceTpl(tpl, i), {
275 |                         position: new BMap.Point(i.longitude, i.latitude),
276 |                         offset: new BMap.Size(-46, -46)
277 |                     });
278 |                     if (void 0 !== i.border && i.border.length > 0) {
279 |                         var e = i.id;
280 |                         Maps.boundary.add(e, i.border);
281 |                     }
282 |                     r.addEventListener("mouseover", function() {
283 |                             this.setStyle({
284 |                                 zIndex: "4"
285 |                             })
286 |                             Maps.boundary.show($(this.V).children(".bubble-1").data("id"))
287 |                         }),
288 |                         r.addEventListener("mouseout", function() {
289 |                             this.setStyle({
290 |                                 zIndex: "2"
291 |                             })
292 |                             Maps.boundary.hide($(this.V).children(".bubble-1").data("id"))
293 |                         }),
294 |                         r.setStyle(d),
295 |                         o.addOverlay(r),
296 |                         function(e) {
297 |                             setTimeout(function() {
298 |                                 e.setStyle({
299 |                                     zIndex: "2"
300 |                                 })
301 |                             }, 1)
302 |                         }(r);
303 |                 })
304 |             }
305 |         },
306 | 
307 |         getBundury: function() {
308 |             var bdary = new BMap.Boundary();
309 |             $.each(area, function(index, item) {
310 |                 (function(item) {
311 |                     bdary.get(item, function(rs) { //获取行政区域
312 |                         var a = {};
313 |                         a.id = item;
314 |                         a.name = item;
315 |                         a.border = rs.boundaries[0];
316 |                         a.count = Utils.rnd(333, 999);
317 |                         MokaData.push(a);
318 |                         if (MokaData.length == area.length) {
319 |                             Maps.getBunduryCenter();
320 |                         }
321 |                     });
322 |                 })(item)
323 |             })
324 |         },
325 | 
326 |         getBunduryCenter: function(param) {
327 |             var myGeo = new BMap.Geocoder();
328 |             // 将地址解析结果显示在地图上,并调整地图视野
329 |             var count = 0;
330 |             $.each(MokaData, function(index, item) {
331 |                 (function(i, t) {
332 |                     myGeo.getPoint("北京市" + t.name, function(point) { //获取行政区域
333 |                         if (point) {
334 |                             MokaData[i].longitude = point.lng;
335 |                             MokaData[i].latitude = point.lat;
336 |                         }
337 |                         count++;
338 |                         if (count == MokaData.length) {
339 |                             console.info(MokaData);
340 |                             Maps.bubble.clear();
341 |                             Maps.bubble.render(MokaData, Maps.tpl, 1)
342 |                         }
343 |                     }, "北京市");
344 |                 })(index, item)
345 |             })
346 |         },
347 |     }
348 | 
349 |     Maps.init();
350 |     </script>
351 | </body>
352 | 
353 | </html>
354 | 


--------------------------------------------------------------------------------
/Samples/SKU.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>生成表格</title>
  7 |     <link rel="stylesheet" type="text/css" href="css/table.css">
  8 |     <style type="text/css">
  9 |     .hide {
 10 |         display: none;
 11 |     }
 12 | 
 13 |     .mt10 {
 14 |         margin-top: 10px;
 15 |     }
 16 | 
 17 |     .control-group {
 18 |         overflow: hidden;
 19 |     }
 20 | 
 21 |     .control-group a {
 22 |         color: #666;
 23 |         text-decoration: none;
 24 |     }
 25 | 
 26 |     .control-group a:hover {
 27 |         text-decoration: underline;
 28 |     }
 29 | 
 30 |     .control-label {
 31 |         float: left;
 32 |         width: 100px;
 33 |         line-height: 24px;
 34 |     }
 35 | 
 36 |     .controls {
 37 |         overflow: hidden;
 38 |     }
 39 | 
 40 |     .controls input[type="text"] {
 41 |         border: 1px solid #ddd;
 42 |         height: 20px;
 43 |         width: 120px;
 44 |     }
 45 | 
 46 |     .controls input[type="button"] {
 47 |         margin-top: 10px;
 48 |         height: 32px;
 49 |         cursor: pointer;
 50 |     }
 51 | 
 52 |     .config_item {
 53 |         margin-top: 10px;
 54 |         border: 1px dashed #ddd;
 55 |         padding: 10px;
 56 |     }
 57 | 
 58 |     .config_item section {
 59 |         margin-top: 10px;
 60 |     }
 61 | 
 62 |     .config_item section span {
 63 |         margin-right: 16px;
 64 |     }
 65 | 
 66 |     .config_item input[type="text"] {
 67 |         width: 80px;
 68 |         text-align: center;
 69 |     }
 70 | 
 71 |     .choose_config .Father_Title {
 72 |         margin: 0;
 73 |         margin-bottom: 10px;
 74 |         padding: 0;
 75 |         font-size: 16px;
 76 |         font-weight: normal;
 77 |         display: inline-block;
 78 |         vertical-align: middle;
 79 |     }
 80 | 
 81 |     .choose_config .Father_Item {
 82 |         padding: 0;
 83 |         margin: 0;
 84 |         margin-bottom: 10px;
 85 |         list-style: none;
 86 |         display: inline-block;
 87 |         vertical-align: middle;
 88 |     }
 89 | 
 90 |     .choose_config .Father_Item li {
 91 |         display: inline-block;
 92 |         margin-right: 10px;
 93 |     }
 94 | 
 95 |     .columnList {
 96 |         border-collapse: collapse;
 97 |     }
 98 | 
 99 |     .columnList th {
100 |         background-color: #eee;
101 |     }
102 | 
103 |     .columnList th,
104 |     .columnList td {
105 |         padding: 5px 10px;
106 |         border: 1px solid #ddd;
107 |         line-height: 24px;
108 |         text-align: center;
109 |     }
110 |     </style>
111 | </head>
112 | 
113 | <body>
114 |     <!-- 选择信息 -->
115 |     <div class="control-group choose_config">
116 |         <div class="control-label">选择信息：</div>
117 |         <div class="controls">
118 |             <h3 class="Father_Title">颜色：</h3>
119 |             <ul class="Father_Item Father_Item0">
120 |                 <li>
121 |                     <label>
122 |                         <input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label>
123 |                 </li>
124 |                 <li>
125 |                     <label>
126 |                         <input id="Checkbox0" type="checkbox" class="checkbox check_item" value="红色">红色</label>
127 |                 </li>
128 |                 <li>
129 |                     <label>
130 |                         <input id="Checkbox0" type="checkbox" class="checkbox check_item" value="白色">白色</label>
131 |                 </li>
132 |                 <li>
133 |                     <label>
134 |                         <input id="Checkbox0" type="checkbox" class="checkbox check_item" value="土豪金">土豪金</label>
135 |                 </li>
136 |             </ul>
137 |             <br>
138 |             <h3 class="Father_Title">内存：</h3>
139 |             <ul class="Father_Item Father_Item1">
140 |                 <li>
141 |                     <label>
142 |                         <input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label>
143 |                 </li>
144 |                 <li>
145 |                     <label>
146 |                         <input id="Checkbox1" type="checkbox" class="checkbox check_item" value="32G">32G</label>
147 |                 </li>
148 |                 <li>
149 |                     <label>
150 |                         <input id="Checkbox1" type="checkbox" class="checkbox check_item" value="16G">16G</label>
151 |                 </li>
152 |             </ul>
153 |             <br>
154 |             <h3 class="Father_Title">尺寸：</h3>
155 |             <ul class="Father_Item Father_Item2">
156 |                 <li>
157 |                     <label>
158 |                         <input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label>
159 |                 </li>
160 |                 <li>
161 |                     <label>
162 |                         <input id="Checkbox2" type="checkbox" class="checkbox check_item" value="5.5">5.5</label>
163 |                 </li>
164 |                 <li>
165 |                     <label>
166 |                         <input id="Checkbox2" type="checkbox" class="checkbox check_item" value="4.5">4.5</label>
167 |                 </li>
168 |                 <li>
169 |                     <label>
170 |                         <input id="Checkbox2" type="checkbox" class="checkbox check_item" value="3.5">3.5</label>
171 |                 </li>
172 |             </ul>
173 |             <br>
174 |         </div>
175 |     </div>
176 |     <!-- 生成表格 -->
177 |     <div class="control-group mt10">
178 |         <div class="control-label">生成表格：</div>
179 |         <div class="controls" id="createTable">
180 |         </div>
181 |     </div>
182 |     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
183 |     <script type="text/javascript">
184 |     /**
185 |      * Created by Administrator on 14-12-01.
186 |      * 模拟淘宝SKU添加组合
187 |      * 页面注意事项：
188 |      *      1、 .Father_Title      这个类作用是取到所有标题的值，赋给表格，如有改变JS也应相应改动
189 |      *      2、 .Father_Item       这个类作用是取类型组数，有多少类型就添加相应的类名：如: Father_Item1、Father_Item2、Father_Item3 ...
190 |      */
191 |     $(function() {
192 |         $(document).on('change', '.choose_config label', function() {
193 |             var parent = $(this).parents('.Father_Item');
194 |             var _this = $('.checkbox', this);
195 |             // 是否全选
196 |             $('.checkbox', parent).each(function() {
197 |                 var bCheck2 = true;
198 |                 if (_this.hasClass('check_all')) {
199 |                     if (_this.get(0).checked) {
200 |                         bCheck2 = true;
201 |                         $('.check_item', parent).prop('checked', bCheck2);
202 |                     } else {
203 |                         bCheck2 = false;
204 |                         $('.check_item', parent).prop('checked', bCheck2);
205 |                     }
206 |                     return false;
207 |                 } else {
208 |                     if ((!this.checked) && (!$(this).hasClass('check_all'))) {
209 |                         bCheck2 = false;
210 |                         $('.check_all', parent).prop('checked', bCheck2);
211 |                         return false;
212 |                     }
213 |                 }
214 |                 $('.check_all', parent).prop('checked', bCheck2);
215 |             });
216 | 
217 |             step.Creat_Table();
218 |         });
219 |         var step = {
220 |             // 信息组合
221 |             Creat_Table: function() {
222 |                 step.hebingFunction();
223 |                 var SKUObj = $('.Father_Title');
224 |                 var arrayTile = new Array(); // 表格标题数组
225 |                 var arrayInfor = new Array(); // 盛放每组选中的CheckBox值的对象
226 |                 var arrayColumn = new Array(); // 指定列，用来合并哪些列
227 |                 var bCheck = true; // 是否全选，只有全选，表格才会生成
228 |                 var columnIndex = 0;
229 | 
230 |                 $.each(SKUObj, function(i, item) {
231 |                     arrayColumn.push(columnIndex++);
232 |                     arrayTile.push(SKUObj.eq(i).text().replace('：', ''));
233 |                     var itemName = '.Father_Item' + i;
234 |                     var bCheck2 = true; // 是否全选
235 | 
236 |                     // 获取选中的checkbox的值
237 |                     var order = new Array();
238 |                     $(itemName + ' .check_item:checked').each(function() {
239 |                         order.push($(this).val());
240 |                     });
241 | 
242 |                     arrayInfor.push(order);
243 |                     if (order.join() == '') {
244 |                         bCheck = false;
245 |                     }
246 |                 })
247 | 
248 |                 // 开始生成表格
249 |                 if (bCheck) {
250 |                     $('#createTable').html('');
251 |                     var table = $('<table id="process" class="columnList"></table>');
252 |                     table.appendTo($('#createTable'));
253 |                     var thead = $('<thead></thead>');
254 |                     thead.appendTo(table);
255 |                     var trHead = $('<tr></tr>');
256 |                     trHead.appendTo(thead);
257 |                     // 创建表头
258 |                     var str = '';
259 |                     $.each(arrayTile, function(index, item) {
260 |                         str += '<th width="100">' + item + '</th>';
261 |                     })
262 |                     str += '<th  width="200">价格</th><th width="100">操作</th>';
263 |                     trHead.append(str);
264 |                     var tbody = $('<tbody></tbody>');
265 |                     tbody.appendTo(table);
266 | 
267 |                     var zuheDate = step.doExchange(arrayInfor);
268 |                     if (zuheDate.length > 0) {
269 |                         //创建行
270 |                         $.each(zuheDate, function(index, item) {
271 |                             var td_array = item.split(',');
272 |                             var tr = $('<tr></tr>');
273 |                             tr.appendTo(tbody);
274 |                             var str = '';
275 |                             $.each(td_array, function(i, values) {
276 |                                 str += '<td>' + values + '</td>';
277 |                             });
278 |                             str += '<td ><input name="Txt_PriceSon" class="inpbox inpbox-mini" type="text"></td>';
279 |                             str += '<td ><a href="#">删除</a></td>';
280 |                             tr.append(str);
281 |                         });
282 |                     }
283 | 
284 |                     //结束创建Table表
285 |                     arrayColumn.pop(); //删除数组中最后一项
286 |                     //合并单元格
287 |                     $(table).mergeCell({
288 |                         // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
289 |                         cols: arrayColumn
290 |                     });
291 |                 } else {
292 |                     //未全选中,清除表格
293 |                     document.getElementById('createTable').innerHTML = "";
294 |                 }
295 |             },
296 |             hebingFunction: function() {
297 |                 $.fn.mergeCell = function(options) {
298 |                     return this.each(function() {
299 |                         var cols = options.cols;
300 |                         for (var i = cols.length - 1; cols[i] != undefined; i--) {
301 |                             mergeCell($(this), cols[i]);
302 |                         }
303 |                         dispose($(this));
304 |                     })
305 |                 };
306 | 
307 |                 function mergeCell($table, colIndex) {
308 |                     $table.data('col-content', ''); // 存放单元格内容
309 |                     $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
310 |                     $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
311 |                     $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
312 |                     // 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
313 |                     $('tbody tr', $table).each(function(index) {
314 |                         // td:eq中的colIndex即列索引
315 |                         var $td = $('td:eq(' + colIndex + ')', this);
316 |                         // 获取单元格的当前内容
317 |                         var currentContent = $td.html();
318 |                         // 第一次时走次分支
319 |                         if ($table.data('col-content') == '') {
320 |                             $table.data('col-content', currentContent);
321 |                             $table.data('col-td', $td);
322 |                         } else {
323 |                             // 上一行与当前行内容相同
324 |                             if ($table.data('col-content') == currentContent) {
325 |                                 // 上一行与当前行内容相同则col-rowspan累加, 保存新值
326 |                                 var rowspan = $table.data('col-rowspan') + 1;
327 |                                 $table.data('col-rowspan', rowspan);
328 |                                 // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
329 |                                 $td.hide();
330 |                                 // 最后一行的情况比较特殊一点
331 |                                 // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
332 |                                 // 最后一行不会向下判断是否有不同的内容
333 |                                 if (++index == $table.data('trNum'))
334 |                                     $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
335 |                             }
336 |                             // 上一行与当前行内容不同
337 |                             else {
338 |                                 // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
339 |                                 if ($table.data('col-rowspan') != 1) {
340 |                                     $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
341 |                                 }
342 |                                 // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
343 |                                 $table.data('col-td', $td);
344 |                                 $table.data('col-content', $td.html());
345 |                                 $table.data('col-rowspan', 1);
346 |                             }
347 |                         }
348 |                     })
349 |                 }
350 |                 // 同样是个private函数 清理内存之用
351 |                 function dispose($table) {
352 |                     $table.removeData();
353 |                 }
354 |             },
355 |             doExchange: function(doubleArrays) {
356 |                 // 二维数组，最先两个数组组合成一个数组，与后边的数组组成新的数组，依次类推，知道二维数组变成一维数组，所有数据两两组合
357 |                 var len = doubleArrays.length;
358 |                 if (len >= 2) {
359 |                     var arr1 = doubleArrays[0];
360 |                     var arr2 = doubleArrays[1];
361 |                     var len1 = arr1.length;
362 |                     var len2 = arr2.length;
363 |                     var newLen = len1 * len2;
364 |                     var temp = new Array(newLen);
365 |                     var index = 0;
366 |                     for (var i = 0; i < len1; i++) {
367 |                         for (var j = 0; j < len2; j++) {
368 |                             temp[index++] = arr1[i] + ',' + arr2[j];
369 |                         }
370 |                     }
371 |                     var newArray = new Array(len - 1);
372 |                     newArray[0] = temp;
373 |                     if (len > 2) {
374 |                         var _count = 1;
375 |                         for (var i = 2; i < len; i++) {
376 |                             newArray[_count++] = doubleArrays[i];
377 |                         }
378 |                     }
379 |                     return step.doExchange(newArray);
380 |                 } else {
381 |                     return doubleArrays[0];
382 |                 }
383 |             }
384 |         }
385 |     })
386 |     </script>
387 | </body>
388 | 
389 | </html>


--------------------------------------------------------------------------------
/工作用Js方法总结.md:
--------------------------------------------------------------------------------
  1 | 主要整理日常工作中常用的一些通用Js代码，以方便能够记录与使用。
  2 | 
  3 | - [1.截取指定字节数的字符串](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#1%E6%88%AA%E5%8F%96%E6%8C%87%E5%AE%9A%E5%AD%97%E8%8A%82%E6%95%B0%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2)
  4 | - [2.判断是否微信](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#2%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E5%BE%AE%E4%BF%A1)
  5 | - [3.获取时间格式的几个举例](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#3%E8%8E%B7%E5%8F%96%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F%E7%9A%84%E5%87%A0%E4%B8%AA%E4%B8%BE%E4%BE%8B)
  6 | - [4.获取字符串字节长度](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#4%E8%8E%B7%E5%8F%96%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AD%97%E8%8A%82%E9%95%BF%E5%BA%A6)
  7 | - [5.对象克隆、深拷贝](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#5%E5%AF%B9%E8%B1%A1%E5%85%8B%E9%9A%86%E6%B7%B1%E6%8B%B7%E8%B4%9D)
  8 | - [6.组织结构代码证验证](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#6%E7%BB%84%E7%BB%87%E7%BB%93%E6%9E%84%E4%BB%A3%E7%A0%81%E8%AF%81%E9%AA%8C%E8%AF%81)
  9 | - [7.身份证号验证](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#7%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%B7%E9%AA%8C%E8%AF%81)
 10 | - [8.js正则为url添加http标识](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#8js%E6%AD%A3%E5%88%99%E4%B8%BAurl%E6%B7%BB%E5%8A%A0http%E6%A0%87%E8%AF%86)
 11 | - [9.URL有效性校验方法](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#9url%E6%9C%89%E6%95%88%E6%80%A7%E6%A0%A1%E9%AA%8C%E6%96%B9%E6%B3%95)
 12 | - [10.自定义jsonp方法](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#10%E8%87%AA%E5%AE%9A%E4%B9%89jsonp%E6%96%B9%E6%B3%95)
 13 | - [11.cookie操作](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#11cookie%E6%93%8D%E4%BD%9C)
 14 | - [12.生成随机字符串(可指定长度)](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#12%E7%94%9F%E6%88%90%E9%9A%8F%E6%9C%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8F%AF%E6%8C%87%E5%AE%9A%E9%95%BF%E5%BA%A6)
 15 | - [13.浏览器判断](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#13%E6%B5%8F%E8%A7%88%E5%99%A8%E5%88%A4%E6%96%AD)
 16 | - [14.Rem移动端适配](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#14rem%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D)
 17 | - [15.获取url后参数](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#15%E8%8E%B7%E5%8F%96url%E5%90%8E%E5%8F%82%E6%95%B0)
 18 | - [16.动态加载JS](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#16%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BDjs)
 19 | - [17.生成随机颜色值](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#17%E7%94%9F%E6%88%90%E9%9A%8F%E6%9C%BA%E9%A2%9C%E8%89%B2%E5%80%B)
 20 | - [18.事件绑定与解绑](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#18%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E4%B8%8E%E8%A7%A3%E7%BB%91)
 21 | - [19.移动端音频播放](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#19%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%9F%B3%E9%A2%91%E6%92%AD%E6%94%BE)
 22 | - [20.移动端视频适配](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%A7%86%E9%A2%91%E9%80%82%E9%85%8D)
 23 | - [21.Webpack+Vue-CLI实现自动全局注册组件](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#21webpackvue-cli%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6)
 24 | - [22.精度计算](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#22%E7%B2%BE%E5%BA%A6%E8%AE%A1%E7%AE%97)
 25 | - [23.统一社会信用代码](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#23%E7%BB%9F%E4%B8%80%E7%A4%BE%E4%BC%9A%E4%BF%A1%E7%94%A8%E4%BB%A3%E7%A0%81%E9%AA%8C%E8%AF%81)
 26 | - [24.版本号对比](https://github.com/lengxing/MyBlog/blob/master/%E5%B7%A5%E4%BD%9C%E7%94%A8Js%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md#24%E7%89%88%E6%9C%AC%E5%8F%B7%E6%AF%94%E8%BE%83)
 27 | 
 28 | ### 1.截取指定字节数的字符串
 29 | 
 30 | ```javascript
 31 | /**
 32 |  * 截取指定字节的字符串
 33 |  * @param str 要截取的字符穿
 34 |  * @param len 要截取的长度，根据字节计算
 35 |  * @param suffix 截取前len个后，其余的字符的替换字符，一般用“…”
 36 |  * @returns {*}
 37 |  */
 38 | function cutString(str,len,suffix){
 39 |    if(!str) return "";
 40 |    if(len <= 0) return "";
 41 |    if(!suffix) suffix = "";
 42 |    var templen = 0;
 43 |    for(var i = 0;i < str.length;i++){
 44 |       if(str.charCodeAt(i) > 255){
 45 |          templen += 2;
 46 |       }else{
 47 |          templen++
 48 |       }
 49 |       if(templen == len){
 50 |          return str.substring(0, i+1) + suffix;
 51 |       }else if(templen > len){
 52 |          return str.substring(0, i) + suffix;
 53 |       }
 54 |    }
 55 |    return str;
 56 | }
 57 | ``` 
 58 | ### 2.判断是否微信
 59 | ```javascript 
 60 | /**
 61 |  * 判断微信浏览器
 62 |  * @returns {Boolean}
 63 |  */
 64 | function isWeiXin() {
 65 |     var ua = window.navigator.userAgent.toLowerCase();
 66 |     if (ua.match(/MicroMessenger/i) == 'micromessenger') {
 67 |         return true;
 68 |     } else {
 69 |         return false;
 70 |     }
 71 | }
 72 | ```  
 73 | ### 3.获取时间格式的几个举例
 74 | ```javascript
 75 | function getTimeFormat(time){
 76 |    var date = new Date(parseInt(time) * 1000);
 77 |    var month,day,hour,min;
 78 |    parseInt(date.getMonth())+1<10?month = '0'+(parseInt(date.getMonth())+1):month = parseInt(date.getMonth())+1;
 79 |    date.getDate()<10?day = '0'+date.getDate():day = date.getDate();
 80 |    date.getHours()<10?hour = '0'+date.getHours():hour = date.getHours();
 81 |    date.getMinutes()<10?min = '0'+date.getMinutes():min = date.getMinutes();
 82 |    return [month, day].join('-')+'  '+hour+':'+min
 83 | }
 84 | 
 85 | function getTimeFormatYMD(time) {
 86 |     var date = new Date(parseInt(time) * 1000);
 87 |     var year, month,day;
 88 |     year = date.getFullYear();
 89 |     parseInt(date.getMonth())+1<10?month = '0'+(parseInt(date.getMonth())+1):month = parseInt(date.getMonth())+1;
 90 |     date.getDate()<10?day = '0'+date.getDate():day = date.getDate();
 91 |     return [year, month, day].join('-')
 92 | }
 93 | 
 94 | function getTimeFormatAll(time) {
 95 |    var date = new Date(parseInt(time) * 1000);
 96 |    var year, month,day,hour,min, second;
 97 |    year = date.getFullYear();
 98 |    parseInt(date.getMonth())+1<10?month = '0'+(parseInt(date.getMonth())+1):month = parseInt(date.getMonth())+1;
 99 |    date.getDate()<10?day = '0'+date.getDate():day = date.getDate();
100 |    date.getHours()<10?hour = '0'+date.getHours():hour = date.getHours();
101 |    date.getMinutes()<10?min = '0'+date.getMinutes():min = date.getMinutes();
102 |    date.getSeconds()<10?second = '0'+date.getSeconds():second = date.getSeconds();
103 | 
104 |    return [year, month, day].join('-')+'  '+hour+':'+min+':'+second
105 | }
106 | ```
107 | ### 4.获取字符串字节长度
108 | ```javascript
109 | /**
110 |  * 获取字符串字节长度
111 |  * @param {String}
112 |  * @returns {Boolean}
113 |  */
114 | function checkLength(v){         
115 |     var realLength = 0;
116 |     var len = v.length;
117 |     for (var i = 0; i < len; i++) {
118 |        var charCode = v.charCodeAt(i);
119 |        if (charCode >= 0 && charCode <= 128)
120 |            realLength += 1;
121 |        else
122 |            realLength += 2;
123 |    }
124 |    return realLength;
125 | }
126 | ```  
127 | ### 5.对象克隆、深拷贝
128 | ```javascript
129 | /**
130 |  * 对象克隆&深拷贝
131 |  * @param obj
132 |  * @returns {{}}
133 |  */
134 | function cloneObj(obj) {
135 |     var newO = {};
136 | 
137 |     if (obj instanceof Array) {
138 |         newO = [];
139 |     }
140 |     for (var key in obj) {
141 |         var val = obj[key];
142 |         newO[key] = typeof val === 'object' ? arguments.callee(val) : val;
143 |     }
144 |     return newO;
145 | };
146 | ```
147 |     克隆拷贝增强版
148 | ```javascript
149 | /**
150 |  * 对象克隆&深拷贝
151 |  * @param obj
152 |  * @returns {{}}
153 |  */
154 | function clone(obj) {
155 |     // Handle the 3 simple types, and null or undefined
156 |     if (null == obj || "object" != typeof obj) return obj;
157 | 
158 |     // Handle Date
159 |     if (obj instanceof Date) {
160 |         var copy = new Date();
161 |         copy.setTime(obj.getTime());
162 |         return copy;
163 |     }
164 | 
165 |     // Handle Array
166 |     if (obj instanceof Array) {
167 |         var copy = [];
168 |         for (var i = 0, len = obj.length; i < len; ++i) {
169 |             copy[i] = clone(obj[i]);
170 |         }
171 |         return copy;
172 |     }
173 | 
174 |     // Handle Object
175 |     if (obj instanceof Object) {
176 |         var copy = {};
177 |         for (attr in obj) {
178 |             if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
179 |         }
180 |         return copy;
181 |     }
182 | 
183 |     throw new Error("Unable to copy obj! Its type isn't supported.");
184 | }
185 | ```
186 |     测试用例：
187 | ```javascript
188 | var origin = {
189 |     a: "text",
190 |     b: null,
191 |     c: undefined,
192 |     e: {
193 |         f: [1, 2]
194 |     }
195 | }
196 | ```
197 | ### 6.组织结构代码证验证
198 | 
199 |     验证规则：
200 | 
201 | 		组织机构代码是每一个机关、社会团体、企事业单位在全国范围内唯一的、始终不变的法定代码
202 | 		标识。最新使用的组织机构代码在1997年颁布实施，由8位数字（或大写拉丁字母）本体代码和
203 | 		1位数字（或大写拉丁字母）校验码组成。本体代码采用系列（即分区段）顺序编码方法。
204 | 		校验码按下列公式计算： 
205 | 		8 
206 | 		C9 = 11 - MOD ( ∑Ci * Wi ，11) … (2) 
207 | 		i=1 
208 | 		其中：MOD —— 表示求余函数； 
209 | 		i —— 表示代码字符从左到右位置序号； 
210 | 		Ci —— 表示第i位置上的代码字符的值，采用附录A“代码字符集”所列字符； 
211 | 		C9 —— 表示校验码； 
212 | 		Wi —— 表示第i位置上的加权因子，其数值如下表： 
213 | 		i 1 2 3 4 5 6 7 8 
214 | 		Wi 3 7 9 10 5 8 4 2 
215 | 		当MOD函数值为1（即 C9 = 10）时，校验码用字母X表示。
216 | 
217 |     验证方法：
218 | ```javascript
219 | checkOrgCodeValid: function(el){
220 |     var txtval = el.value;
221 |     var values=txtval.split("-");
222 |     var ws = [3, 7, 9, 10, 5, 8, 4, 2];
223 |     var str = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
224 |     var reg = /^([0-9A-Z]){8}$/;
225 |     if (!reg.test(values[0])) {
226 |         return false
227 |     }
228 |     var sum = 0;
229 |     for (var i = 0; i < 8; i++) {
230 |         sum += str.indexOf(values[0].charAt(i)) * ws[i];
231 |     }
232 |     var C9 = 11 - (sum % 11);
233 |     var YC9 = values[1]+'';
234 |     if (C9 == 11) {
235 |         C9 = '0';
236 |     } else if (C9 == 10) {
237 |         C9 = 'X'  ;
238 |     } else {
239 |         C9 = C9+'';
240 |     }
241 |     return YC9 == C9;
242 | }
243 | ```  
244 | ### 7.身份证号验证
245 | ```javascript
246 | /**
247 |  * 验证身份证号
248 |  * @param el 号码输入input
249 |  * @returns {boolean}
250 |  */
251 | function checkCardNo(el){
252 |     var txtval = el.value;
253 |     var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
254 |     return reg.test(txtval)
255 | }
256 | ```
257 | ### 8.js正则为url添加http标识
258 | ```javascript
259 | <!DOCTYPE html>
260 | <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
261 | 
262 | <head>
263 |     <meta charset="utf-8" />
264 |     <title></title>
265 |     <script>
266 |         var html = 'http://www.google.com';
267 |         html += '\rwww.google.com';
268 |         html += '\rcode.google.com';
269 |         html += '\rhttp://code.google.com/hosting/search?q=label%3aPython';
270 |         var regex = /(https?:\/\/)?(\w+\.?)+(\/[a-zA-Z0-9\?%=_\-\+\/]+)?/gi;
271 |         alert('before replace:');
272 |         alert(html);
273 |         html = html.replace(regex, function(match, capture) {
274 |             if (capture) {
275 |                 return match
276 |             } else {
277 |                 return 'http://' + match;
278 |             }
279 |         });
280 |         alert('after replace:');
281 |         alert(html);
282 |     </script>
283 | </head>
284 | 
285 | <body>
286 | </body>
287 | 
288 | </html>
289 | ```   
290 | ### 9.URL有效性校验方法
291 | ```javascript
292 | /**
293 |  * URL有效性校验
294 |  * @param str_url
295 |  * @returns {boolean}
296 |  */
297 | function isURL(str_url) {// 验证url
298 |     var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
299 |         + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //           
300 |     ftp的user@
301 |           + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
302 |             + "|" // 允许IP和DOMAIN（域名）
303 |             + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
304 |             + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
305 |             + "[a-z]{2,6})" // first level domain- .com or .museum
306 |             + "(:[0-9]{1,4})?" // 端口- :80
307 |             + "((/?)|" // a slash isn't required if there is no file name
308 |             + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
309 |     var re = new RegExp(strRegex);
310 |     return re.test(str_url);
311 | }
312 | 
313 | // 建议的正则
314 |   functionisURL(str){
315 |       return!!str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);
316 |   }
317 | ```  
318 | ### 10.自定义jsonp方法
319 | ```javascript
320 | /**
321 |  * 自定义封装jsonp方法
322 |  * @param options
323 |  */
324 | jsonp = function(options) {
325 |     options = options || {};
326 |     if (!options.url || !options.callback) {
327 |         throw new Error("参数不合法");
328 |     }
329 | 
330 |     //创建 script 标签并加入到页面中
331 |     var callbackName = ('jsonp_' + Math.random()).replace(".", "");
332 |     var oHead = document.getElementsByTagName('head')[0];
333 |     options.data[options.callback] = callbackName;
334 |     var params = formatParams(options.data);
335 |     var oS = document.createElement('script');
336 |     oHead.appendChild(oS);
337 | 
338 |     //创建jsonp回调函数
339 |     window[callbackName] = function (json) {
340 |         oHead.removeChild(oS);
341 |         clearTimeout(oS.timer);
342 |         window[callbackName] = null;
343 |         options.success && options.success(json);
344 |     };
345 | 
346 |     //发送请求
347 |     oS.src = options.url + '?' + params;
348 | 
349 |     //超时处理
350 |     if (options.time) {
351 |         oS.timer = setTimeout(function () {
352 |             window[callbackName] = null;
353 |             oHead.removeChild(oS);
354 |             options.fail && options.fail({ message: "超时" });
355 |         }, time);
356 |     }
357 | };
358 | /**
359 |  * 格式化参数
360 |  * @param data
361 |  * @returns {string}
362 |  */
363 | formatParams = function(data) {
364 |     var arr = [];
365 |     for (var name in data) {
366 |         arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
367 |     }
368 |     return arr.join('&');
369 | }
370 | ```  
371 | ### 11.cookie操作
372 | ```javascript
373 | //写cookies
374 | setCookie = function(name,value,time) {
375 |     var strsec = getsec(time);
376 |     var exp = new Date();
377 |     exp.setTime(exp.getTime() + strsec*1);
378 |     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
379 | }
380 | //cookie操作辅助函数
381 | getsec = function(str){
382 |     var str1=str.substring(1,str.length)*1;
383 |     var str2=str.substring(0,1);
384 |     if (str2=="s"){
385 |         return str1*1000;
386 |     }else if (str2=="h"){
387 |         return str1*60*60*1000;
388 |     }else if (str2=="d"){
389 |         return str1*24*60*60*1000;
390 |     }
391 | }
392 | //读取cookies
393 | getCookie = function(name) {
394 |     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
395 |     if(arr=document.cookie.match(reg))
396 |         return (arr[2]);
397 |     else
398 |         return null;
399 | }
400 | 
401 | //删除cookies
402 | delCookie = function(name) {
403 |     var exp = new Date();
404 |     exp.setTime(exp.getTime() - 1);
405 |     var cval = getCookie(name);
406 |     if(cval != null)
407 |         document.cookie= name + "="+cval+";expires="+exp.toGMTString();
408 | }
409 | ```  
410 | ### 12.生成随机字符串(可指定长度)
411 | ```javascript
412 | /**
413 |  * 生成随机字符串(可指定长度)
414 |  * @param len
415 |  * @returns {string}
416 |  */
417 | randomString = function(len) {
418 |     len = len || 8;
419 |     var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
420 |     var maxPos = $chars.length;
421 |     var pwd = '';
422 |     for (var i = 0; i < len; i++) {
423 |         pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
424 |     }
425 |     return pwd;
426 | }
427 | ```  
428 | 
429 | ### 13.浏览器判断
430 | 
431 | ```javascript
432 | function parseUA() {
433 |     var u = navigator.userAgent;
434 |     var u2 = navigator.userAgent.toLowerCase();
435 |     return { //移动终端浏览器版本信息
436 |         trident: u.indexOf('Trident') > -1, //IE内核
437 |         presto: u.indexOf('Presto') > -1, //opera内核
438 |         webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
439 |         gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
440 |         mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
441 |         ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
442 |         android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
443 |         iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
444 |         iPad: u.indexOf('iPad') > -1, //是否iPad
445 |         webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
446 |         iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
447 |         weixin: u2.match(/MicroMessenger/i) == "micromessenger",
448 |         ali: u.indexOf('AliApp') > -1,
449 |     };
450 | }
451 | var ua = parseUA();
452 | 
453 | if (!ua.mobile) {
454 |     location.href = './pc.html';
455 | }
456 | 
457 | ```
458 | 
459 | 
460 | ### 14.Rem移动端适配
461 | ```javascript
462 | var rem = {
463 | 	baseRem: 40, // 基准字号，按照iphone6应该为20，此处扩大2倍，便于计算
464 | 	baseWidth: 750, // 基准尺寸宽，此处是按照ihpone6的尺寸
465 | 	rootEle: document.getElementsByTagName("html")[0],
466 | 	initHandle: function () {
467 | 		this.setRemHandle();
468 | 		this.resizeHandle();
469 | 	},
470 | 	setRemHandle: function () {
471 | 		var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
472 | 		this.rootEle.style.fontSize = clientWidth * this.baseRem / this.baseWidth + "px";
473 | 	},
474 | 	resizeHandle: function () {
475 | 		var that = this;
476 | 		window.addEventListener("resize", function () {
477 | 			setTimeout(function () {
478 | 				that.setRemHandle();
479 | 			}, 300);
480 | 		});
481 | 	}
482 | };
483 | rem.initHandle();
484 | ```
485 | 
486 | ### 15.获取url后参数
487 | 
488 | ```javascript
489 | function GetRequest() {            
490 |     var url = location.search; //获取url中"?"符后的字串
491 |     var theRequest = new Object();
492 |     if(url.indexOf("?") != -1) {
493 |             var str = url.substr(1);
494 |             strs = str.split("&");
495 |             for(var i = 0; i < strs.length; i++) {
496 |                     theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
497 |             }
498 |     }
499 |     return theRequest;
500 | }
501 | ```
502 | 
503 | ### 16.动态加载JS
504 | 
505 | ```javascript
506 | function loadScript(url, callback) {
507 |   var script = document.createElement("script");
508 |   script.type = "text/javascript";
509 |   if(typeof(callback) != "undefined"){
510 |     if (script.readyState) {
511 |       script.onreadystatechange = function () {
512 |         if (script.readyState == "loaded" || script.readyState == "complete") {
513 |           script.onreadystatechange = null;
514 |           callback();
515 |         }
516 |       };
517 |     } else {
518 |       script.onload = function () {
519 |         callback();
520 |       };
521 |     }
522 |   }
523 |   script.src = url;
524 |   document.body.appendChild(script);
525 | }
526 | ```
527 | 
528 | ### 17.生成随机颜色值
529 | 
530 | ```javascript
531 | function getRandomColor () {
532 |   const rgb = []
533 |   for (let i = 0 ; i < 3; ++i){
534 |     let color = Math.floor(Math.random() * 256).toString(16);
535 |     color = color.length == 1 ? '0' + color : color;
536 |     rgb.push(color);
537 |   }
538 |   return '#' + rgb.join('');
539 | }
540 | ```
541 | 
542 | ### 18.事件绑定与解绑
543 | 
544 | ```javascript
545 | ElementClass.prototype.on = function (name, callback) {
546 |     this.callbacks[name] = this.callbacks[name] || []
547 |     this.callbacks[name].push(callback)
548 | }
549 | 
550 | ElementClass.prototype.off = function (name, callback) {
551 |     var callbacks = this.callbacks[name]
552 |     if (callbacks && callbacks instanceof Array) {
553 |         var index = callbacks.indexOf(callback)
554 |         if (index !== -1) callbacks.splice(index, 1)
555 |     }
556 | }
557 | 
558 | ElementClass.prototype.trigger = function (name, params) {
559 |     var callbacks = this.callbacks[name]
560 |     if (callbacks && callbacks instanceof Array) {
561 |         callbacks.forEach((cb) => {
562 |             cb(params)
563 |         })
564 |     }
565 | }
566 | ```
567 | 
568 | ### 19.移动端音频播放
569 | 
570 | ```javascript
571 | /**
572 |   * 移动端H5播放音乐处理，兼容微信端
573 |   * @param el 音乐Audio元素
574 |   */
575 | function playMusic(el) {
576 |     var b = document.getElementById(el);
577 | 
578 |     var c = function c() {
579 |         b.play();
580 |         document.removeEventListener("touchstart", c, true);
581 |     };
582 | 
583 |     b.play();
584 |     document.addEventListener("WeixinJSBridgeReady", function () {
585 |         c();
586 |     }, false);
587 |     document.addEventListener("YixinJSBridgeReady", function () {
588 |         c();
589 |     }, false);
590 |     document.addEventListener("touchstart", c, true);
591 | }
592 | ```
593 | 
594 | ### 20.移动端视频适配
595 | 
596 | ```html
597 | <video class="video1" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"  preload="auto" poster="poster图片地址" src="视频地址"></video>
598 | ```
599 | 
600 | ### 21.Webpack+Vue-CLI实现自动全局注册组件
601 | 
602 | ```javascript
603 | // 需要 npm import --save lodash
604 | import upperFirst from 'lodash/upperFirst'
605 | import camelCase from 'lodash/camelCase'
606 | 
607 | const requireComponent = require.context(
608 |   // 其组件目录的相对路径
609 |   './components',
610 |   // 是否查询其子目录
611 |   false,
612 |   // 匹配基础组件文件名的正则表达式，获取.vue结尾的文件
613 |   /.vue$/
614 | )
615 | 
616 | 
617 | requireComponent.keys().forEach(fileName => {
618 |   // 获取组件配置
619 |   const componentConfig = requireComponent(fileName)
620 | 
621 |   // 获取组件的 PascalCase 命名
622 |   const componentName = upperFirst(
623 |     camelCase(
624 |       // 剥去文件名开头的 `./` 和结尾的扩展名
625 |       fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
626 |     )
627 |   )
628 | 
629 |   // 全局注册组件
630 |   Vue.component(
631 |     componentName,
632 |     // 如果这个组件选项是通过 `export default` 导出的，
633 |     // 那么就会优先使用 `.default`，
634 |     // 否则回退到使用模块的根。
635 |     componentConfig.default || componentConfig
636 |   )
637 | ```
638 | 
639 | ### 22.精度计算
640 | 
641 | ```javascript
642 | /**
643 | * 加法运算，避免数据相加小数点后产生多位数和计算精度损失。
644 | *
645 | * @param num1加数1 | num2加数2
646 | */
647 | function numAdd (num1, num2) {
648 |     var baseNum, baseNum1, baseNum2;
649 |     try {
650 |         baseNum1 = num1.toString().split('.')[1].length;
651 |     } catch (e) {
652 |         baseNum1 = 0;
653 |     }
654 |     try {
655 |         baseNum2 = num2.toString().split('.')[1].length;
656 |     } catch (e) {
657 |         baseNum2 = 0;
658 |     }
659 |     baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
660 |     return (num1 * baseNum + num2 * baseNum) / baseNum;
661 | }
662 | 
663 | /**
664 | * 加法运算，避免数据相减小数点后产生多位数和计算精度损失。
665 | *
666 | * @param num1被减数 | num2减数
667 | */
668 | function numSub (num1, num2) {
669 |     var baseNum, baseNum1, baseNum2;
670 |     var precision; // 精度
671 |     try {
672 |         baseNum1 = num1.toString().split('.')[1].length;
673 |     } catch (e) {
674 |         baseNum1 = 0;
675 |     }
676 |     try {
677 |         baseNum2 = num2.toString().split('.')[1].length;
678 |     } catch (e) {
679 |         baseNum2 = 0;
680 |     }
681 |     baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
682 |     precision = (baseNum1 >= baseNum2) ? baseNum1 : baseNum2;
683 |     return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
684 | }
685 | 
686 | /**
687 | * 乘法运算，避免数据相乘小数点后产生多位数和计算精度损失。
688 | *
689 | * @param num1被乘数 | num2乘数
690 | */
691 | function numMulti (num1, num2) {
692 |     var baseNum = 0;
693 |     try {
694 |         baseNum += num1.toString().split('.')[1].length;
695 |     } catch (e) {
696 |         console.error('numMulti error')
697 |     }
698 |     try {
699 |         baseNum += num2.toString().split('.')[1].length;
700 |     } catch (e) {
701 |         console.error('numMulti error')
702 |     }
703 |     return Number(num1.toString().replace('.', '')) * Number(num2.toString().replace('.', '')) / Math.pow(10, baseNum);
704 | }
705 | 
706 | /**
707 | * 除法运算，避免数据相除小数点后产生多位数和计算精度损失。
708 | *
709 | * @param num1被除数 | num2除数
710 | */
711 | function numDiv (num1, num2) {
712 |     var baseNum1 = 0,
713 |         baseNum2 = 0;
714 |     var baseNum3, baseNum4;
715 |     try {
716 |         baseNum1 = num1.toString().split('.')[1].length;
717 |     } catch (e) {
718 |         baseNum1 = 0;
719 |     }
720 |     try {
721 |         baseNum2 = num2.toString().split('.')[1].length;
722 |     } catch (e) {
723 |         baseNum2 = 0;
724 |     }
725 |     baseNum3 = Number(num1.toString().replace('.', ''));
726 |     baseNum4 = Number(num2.toString().replace('.', ''));
727 |     return (baseNum3 / baseNum4) * Math.pow(10, baseNum2 - baseNum1);
728 | }
729 | ```
730 | 
731 | ### 23.统一社会信用代码验证
732 | 
733 | 规则：
734 | 
735 | > 根据《法人和其他组织统一社会信用代码编码规则》第四项第一条的规定：规定统一社会信用代码由十八位的阿拉伯数字或大写英文字母（不使用I、O、Z、S、V）组成，包括第1位登记管理部门代码、第2位机构类别代码、第3位—第8位登记管理机关行政区划码、第9位—第17位主体标识码（组织机构代码）、第18位校验码五个部分。
736 | > 第一部分（第1位）：登记管理部门代码，使用阿拉伯数字或英文字母表示。例如，机构编制、民政、工商三个登记管理部门分别使用1、2、3表示，其他登记管理部门可使用相应阿拉伯数字或英文字母表示。
737 | 
738 | > 第二部分（第2位）：机构类别代码，使用阿拉伯数字或英文字母表示。登记管理部门根据管理职能，确定在本部门登记的机构类别编码。例如，机构编制部门可用1表示机关单位，2表示事业单位，3表示由中央编办直接管理机构编制的群众团体；民政部门可用1表示社会团体，2表示民办非企业单位，3表示基金会；工商部门可用1表示企业，2表示个体工商户，3表示农民专业合作社。
739 | 
740 | > 第三部分（第3—8位）：登记管理机关行政区划码，使用阿拉伯数字表示。例如，国家用100000，北京用110000，注册登记时由系统自动生成，体现法人和其他组织注册登记及其登记管理机关所在地，既满足登记管理部门按地区管理需求，也便于社会对注册登记主体所在区域进行识别。（参照《中华人民共和国行政区划代码》〔GB/T2260—2007〕）
741 | 
742 | > 第四部分（第9—17位）：主体标识码（组织机构代码），使用阿拉伯数字或英文字母表示。（参照《全国组织机构代码编制规则》〔GB 11714—1997〕）
743 | 
744 | >第五部分（第18位）：校验码，使用阿拉伯数字或英文字母表示。
745 | 
746 | ![统一社会信用代码规则](https://github.com/lengxing/MyBlog/blob/master/Images/socialCode.png)
747 | 
748 | ```javascript
749 | /**
750 | * @description 验证统一社会信用代码
751 | * @param socialCode 被验证代码
752 | * @return Boolean
753 | */
754 | function isSocialCode(socialCode) {
755 |   const reg = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/;
756 |   return reg.test(socialCode);
757 | }
758 | 
759 | ```
760 | 
761 | ### 24.版本号比较
762 | 
763 | ```javascript
764 | /**
765 | * @description 版本号比较
766 | * @param v1 被比较版本号
767 | * @param v2 比较版本号
768 | * @return -1：旧版本 0:相同版本 1:新版本
769 | */
770 | function compareVersion(v1, v2) {
771 |   v1 = v1.split('.')
772 |   v2 = v2.split('.')
773 |   var len = Math.max(v1.length, v2.length)
774 | 
775 |   while (v1.length < len) {
776 |     v1.push('0')
777 |   }
778 |   while (v2.length < len) {
779 |     v2.push('0')
780 |   }
781 | 
782 |   for (var i = 0; i < len; i++) {
783 |     var num1 = parseInt(v1[i])
784 |     var num2 = parseInt(v2[i])
785 | 
786 |     if (num1 > num2) {
787 |       return 1
788 |     } else if (num1 < num2) {
789 |       return -1
790 |     }
791 |   }
792 |   return 0
793 | }
794 | ```
795 | 


--------------------------------------------------------------------------------