阅读 193

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

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

github下载地址:
github.com/mrxu0/Mobil…

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

这里写图片描述

所谓无需求不功能,公司的地区控件采用的网上的一个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个,

  1. InitAndChangeData:初始化数据和改变数据方法
  2. createFragment:创建数据列表DOM片段
  3. clickElement:监听单机操作
  4. 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}]},....]
});复制代码


文章分类
前端
文章标签