在这段时间中，主要做的项目是重构前一个月做的项目，WebAPP,由于之前是用vue写的，当时也不是很了解移动端的相关事件，所以在功能大概实现完之后发现交互特别差，由于，直接使用touch的几个事件，了解没有很透彻，未曾用过封装的插件，因此做的好烂，做的好烂，的好烂，好烂，烂，烂，烂。。。这大概就是我们主管的心声
一开始的编辑器是webstorm，后来打包APP，用的hBuilder，也开始对ta有一些了解，加上后来觉得用webstorm写完之后，打包，真机调试太麻烦，非常浪费时间，像我这样的二哈，基本上写几行代码就要看效果，那样更是让我的效率直线下降。所以在重构时编辑器就选择了hBuilder，还能用他们一伙的mui以及5+规范等等，接着，我就走上了一条不归路。
选择hBuilder，我就选择用原生js写了，写的我头皮发麻。我是个话痨，先说说我之前吧，进公司前只会js，还用的很少，进公司后学习vue，使用vue，因为没有很明显的比较，所以从没有觉得框架这么便利，不过这段时间也相当于是让我补了有关js基础的知识，心里还是开心的。
不废话了
1、input类型，以前用的只是常用的，最近用到一个滑块（type=“range”）,样式不好改的，那就把所有的都写在这里：
常用：button、checkbox、file/hidden、image、password、radio、reset（重置按钮）、submit、text；
html5新增：email、url（在提交表单时，会自动验证 url 域的值）、number（可设定对所接受的数字的限定）、range、Date pickers、search、color
2、html5上传图片；
3、input的change事件以及input事件
change是在input失去焦点时会触发；
input在用户输入时就会触发，在做项目时做的功能有关键字联想提示,所以在这里还有用到拼音输入事件compositionstart和compositionend，代码实现如下：
var oKeyWordInput = document.querySelector('.key_word_search');
var engFlag = true;
oKeyWordInput.addEventListener('compositionstart', function() {
engFlag = false;
})
oKeyWordInput.addEventListener('compositionend', function() {
setTimeout(() => {
var searchKey = oKeyWordInput.value;
}, 30);
engFlag = true;
})
oKeyWordInput.addEventListener('input', function() {
if(engFlag) {
}
})如上，会先设置一个flag区分是拼音输入还是其他，还有值得注意的一点：在触发compositionend事件后，立即获取到的输入框值不是新鲜的，所以这里设置了延时获取，没有在网上找到相关知识哎。
4、querySelector和querySelectorAll：我的js基础实在是太差了，获取DOM的这俩方法这次才用到，querySelector用于获取指定CSS选择器的第一个元素。瞬间觉得querySelector太方便了吧，终于不用让我在获取不知道取啥名的标签元素和很不特殊的类元素时再加【0】了，注：一定要注明是哪种选择器，不能只写名字的。
5、在我做选项卡之类的功能时，就非常怀念v-if和v-show了。在这里踩了雷，如果开始某个元素是显示的，js可以使它隐藏，但是css设置了“display：none；”后，js就不能再让他显示了，所以在这里需要使用行内样式或者用js控制元素初始化隐藏。
6、获取select的选中值：
var index = selectObj.selectedIndex; //选中索引
var text = selectObj.options[index].text; //选中文本
var value = selectObj.options[index].value; //选中值7、DOM节点的相关所有操作
//查找节点
var idElem = document.getElementById('id属性值');
var classElemArr = document/element.getElementsByClassName('class属性值');
var tagElemArr = document/element.getElementsByTagName('标签名');
var nameElemArr = document.getElementsByName('name属性值');
var selectorElem = document/element.querySelector('CSS选择器');
var selectorAllElem = document/element.querySelectorAll('CSS选择器');
var htmlElem = document.documentElement;//获取页面中的HTML标签
var bodyElem = document.body;//获取页面中的body标签
var allElemArr = document.all;//获取所有元素集合，兼容性不是很好
var parentElem = document.createElement('div'); //创建新节点
var sonElem = document.createElement('span'); //
parentElem.appendChild(sonElem); //向节点的子节点列表末尾添加新的子节点
parentElem.removeChild(sonElem); //需知道要删除的节点和父节点
8、radio单选框选中值，遍历radio元素，判断是否为checked，获取value
9、元素添加类，给className赋值，或classList.add（）；
10、echarts选项卡切换，在切换后原本隐藏的图表不能绘制，查看了元素，发现图表的宽为0，针对这个问题的解决方法是，提前设置以显示的元素的宽为依据设置图表所在的容器的width属性
11、echarts饼图重叠：avoidLabelOverLap：true