js 设计模式学习

Posted 2020-08-30 咖啡漩涡

最近一个人外出旅行 顺便在那座城市买了一本关于JS设计模式的书 供无聊的时候阅读

却发现小有收获 旅游回来以后立马写下心得 做了一个地图 并以此总结此次旅行的经过的地方

尝试1：

尝试写JS类

 1 var TianDiTu = function (lat, lng, zoom) {
 2             if (this instanceof TianDiTu) {
 3                 var zoomSize = { maxZoom: 18, minZoom: 5 },
 4                 normalm = L.tileLayer.chinaProvider(‘TianDiTu.Normal.Map‘, zoomSize),
 5                 normala = L.tileLayer.chinaProvider(‘TianDiTu.Normal.Annotion‘, zoomSize),
 6                 imgm = L.tileLayer.chinaProvider(‘TianDiTu.Satellite.Map‘, zoomSize),
 7                 imga = L.tileLayer.chinaProvider(‘TianDiTu.Satellite.Annotion‘, zoomSize);
 8 
 9                 this.normal = L.layerGroup([normalm, normala]);
10                 this.image = L.layerGroup([imgm, imga]);
11                 this.center = [lat, lng];
12                 this.zoom = zoom;
13             } else {
14                 return new TianDiTu(lat, lng, zoom);
15             }
16         };
17 
18         var tdt = TianDiTu(34.618129, 112.454059, 12);

 

尝试2：

尝试将调用地图的方式放入工厂模式：

 1 var CreateMap = function () {
 2             if (!(this instanceof CreateMap))
 3                 return new CreateMap();
 4         }
 5         CreateMap.prototype = {
 6             init: function () {
 7                     map = L.map("map", {
 8                     center: tdt.center,
 9                     zoom: tdt.zoom,
10                     layers: [tdt.normal]
11                 });
12 
13                 return this;
14             },
15             createControl: function () {
16                 var baseLayers = {
17                     "地图": tdt.normal,
18                     "影像": tdt.image,
19                 }
20 
21                 var overlayLayers = {
22                 }
23 
24                 L.control.layers(baseLayers, overlayLayers).addTo(map);
25             }
26         }
27         
28         var createMap = new CreateMap();
29         createMap.init().createControl();