从无到有的描述制作手机地图控件的过程

本文链接：https://blog.csdn.net/m0_37479946/article/details/80534397

手机上的地区控件，树控件

github下载地址：
https://github.com/mrxu0/Mobile-Tree-Area/tree/master

效果图（我相信一部分人是无图不往下读的）

这里写图片描述

所谓无需求不功能，公司的地区控件采用的网上的一个LArea的手机控件，但是效果并不理想，在手机里死卡死卡的，本想优化一下，但是我从渲染入手发现人家处理的还不错，剩下的就是算法了，不过我发现让现在我整算法有点头大而且样式跟原生样式不一样，于是我就萌生了重新写一个地区控件的想法。
给你们看一下LArea插件的效果图，需要这种效果的可以用这个插件:

这里写图片描述

1.先有骨架后有样式
在这里给京东做个广告，我的骨架，样式参考的京东的。平时我用的购物软件是京东的，所以对京东了解比较多，做这个插件我就在想样式怎么写，就稀里糊涂的想到了京东的地区插件样式好像跟我这个差不多。找到京东的手机网页，使用谷歌浏览器控制台打开选中手机模式，选则元素查看结构，查看样式。里面的样式写的都很简单，相信你也能够看懂。看懂了就直接复制，一下都是我自己的样式，结构图
这里写图片描述

结构是不是很清晰

1.先有样式后有功能

写这个样式没什么麻烦的，不复制自己写也用不了多少个功夫。重点是写的时候要注意哪些东西：

1.使苹果手机丝般顺滑

    -webkit-overflow-scrolling: touch;

如果你使用了overflow样式，一定要紧接着加上上面的代码，否则测试，产品都会找上门（要是公司没有测试和产品，估计老板就有可能找上门了）

2.有趣的样式

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;

效果等同于:

position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;

3.你最期待的功能，（我知道自己写的并不是很好，所以希望大家少喷多指点）

功能就不能抄袭了，感觉自己肯定没有人家京东的大拿写的好，我是很想膜拜一下，感觉这样有比较的写代码成长肯定超快。

先给大家补充一波知识点，确保小白别看的云里雾里的，大拿直接进入下一环节。

1.addEventListener：事件监听
包含俩个参数，参数1:什么事件，可填写click,change,mousemove等等;参数2:函数，当监听到对应的操作的时候就会触发。如：

document.getElementById("local-panel-body-list").addEventListener("click",function (e){}

括号里面的e不懂得可以参考这篇文章，不过需要跨域：看文戳我

2.this,prototype.这里不会讲的太细，只大概让不懂的人能够了解作用即可
整个插件都是基于构造函数的，而构造函数都会有自己的作用域，在自己的作用域中都有一个this对象，这个this对象是指向构造函数原型的。
prototype是这个构造函数的原型，可以往这上面添加函数。函数这里面能够引用this，在其他的ptototype定义的函数下可以通过this引用这个函数
但是要注意,如果潜逃了不属于构造函数原型的函数就会改变this的指向。例如代码中clickElement中的一个个监听事件，我都先初始化了var that=this;想深入了解的可以看这篇文章：戳我看好文

3.||和&&的妙用
你可能知道||和&&的含义和用法，但你可能没有这么用过

true||console.log("hello world");//不打印
false||console.log("hello world");//打印

true&&console.log("hello world");//打印
false&&console.log("hello world");//不打印

//代码中有很多地方用到了这个特性
this.tree=params.tree||3;//初始默认值

//如果你将&&俩边的表达式位置替换将会报错
if(this.event&&this.event.target.parentNode.getAttribute("value")==this.data[i].id)

4.三元运算符
作用等同于if else，但是比他要简洁的多。如：

//先判断that.name存不存在，如果存在就赋值，不存在就不用赋值，这里好像使用||更合适一些。哈哈哈
that.name?document.getElementById(that.name).value=arrName.join(","):"";

//换成if else 就这样写，是不是特别麻烦。
if(that.name){
    return document.getElementById(that.name).value=arrName.join(",")
}else{
    return "";
}

我写这个插件的过程完全就是莽夫进村一般，没有先设身处地的规划好。何为莽夫进村呢，就是看着想到哪个功能实现哪个功能（（，仅为第一个版本，没有必要本文后期应该不会在更新））。如今让我讲如果我还按照我做的思路讲估计能写好几万字。希望你们别跟我一样，最好先规划好了，再下手

这里写图片描述

主要方法有4个,

InitAndChangeData:初始化数据和改变数据方法
createFragment:创建数据列表DOM片段
clickElement:监听单机操作
createLi:创建tabs方法

其中最麻烦的方法是clickElement，因为他掌管的一切用户的交互

整个插件的使用简单概括就是:
我需要使用地区控件所以我要拿一个控件过来（new 一个Location），发现用户动作触发createFragment上挂在的监听。用户选择了数据列表，我需要修改数据此时就调用InitAndChangeData方法和createLi。

使用步骤：

1.引入文件

<link rel="stylesheet" href="plugin/Mobile-Tree-Area.css">
<script src="plugin/Mobile-Tree-Area.js"></script>

2.创建容器：

<input type="text" id="name" readonly>
<input type="hidden" id="id" readonly>

上面的用来展示你选中的内容，下面的用来承载选中内容的ID

3.生成实例

new Location({
    id:"id",//存放选中内容的ID的容器的id，可不填
    name:"name",//展示选中内容的id
    tree:3,//你想让用户选到几层，可不填，不填默认为3
    data:LAreaData//初始化数据格式为：[{id:1,name:2,child[{id:1,name:2}]},....]
});