开发H5页面遇到的问题以及解决

1.第一个问题就是规范问题，现在边注释边编程以及语义化命名的问题已经基本的改善，页面的层级结构设计也条理了许多，现在的问题就是我对于页面的更深的应用还不够，比如我知道文档流自上而下从左至右，写在下面的层级一定是在写在上面的层级上面的，所以我很多时候为了方便就直接都绝对定位把他们一层一层的“往上摞”，这样是很不规范的，正确的是看好元素之间的关系，把能包在一起的放在一块写，然后通过设置父元素relative 子元素absolute 来实现 他们的上下层级的关系，这个才是规范的。

2.之前自己在私下做的项目其实不够实用，前端有些功能的实现方式是多种多样的，而且技术一直在推新，总会有效率更高的方法：

在公司这边做的一个公众号游戏充值H5页面中 ，遇到一个很实际的问题，我首先在主页面实现了一个列表，上面是商品信息加上充值的信息以及一些样式，这个时候我需要实现一个让用户确认他充钱充到的所在的服务器的弹窗，弹窗问题很基本，就是在需要被点击的dom上面绑定一个onclick事件，在JS中采用模态弹窗这个样式的显示与隐藏即可：

function dialogCloseBtn(){

document.getElementById('topUpWindows').style.visibility="hidden";

}

这里我这么写首先第一个问题就是我对于隐藏的两种方式：visibility=“hidden”以及display：“none”这两种方式的区别并没有区分开，使用visibility的隐藏只是我们看不见这些元素而已，但是实际上他们仍然存在，而display的隐藏式确确实实的让元素不存在，像我上面的使用visibility的方法，弹窗在隐藏也就是hidden的时候那些确认取消的按钮仍然生效，点一处我们根本看不见的地方会有逻辑反应实在是太荒谬了。

而且如果我们使用jQuery的写法，(当然前提是你要记住引入jQuery)长长的代码就可以简略很多，而且看起来语义更加清晰：

function dialogCloseBtn(){

$("#topUpWindows").hide();

}

3.简单的JS功能实现并不是最终目的，最终目的是要实现符合逻辑的业务功能

在游戏H5充值的首页，我们要把从后台获取到的相应的游戏道具（商品信息）展示在我们前台页面（一张列表）的同时，我们需要在前台确保我们知道用户具体点击了列表中的哪一条商品信息，把这个信息再和我们后台数据去对接，才能正确的拉取出来支付的接口，首先我要实现点击每一个按钮，按钮的样式就要做出相应的改变，也要通过这个来定位我们具体点击的是哪个。但是这里我也只是采用简单的JS来实现功能的展现，想着想着逻辑就混乱了，后来请教导师，利用JQuery里面的.addClass()和.removeClass()就容易很多:https://www.jquery123.com/addClass/

它是专门为每个匹配元素所要增加的一个或多个样式名的方法，把要添加的样式用类样式写在CSS中，再使用JQuery在需要样式出现的时候加上：

$("#square3").on("click","li",function(){

var index = $(this).index();

$("#square3 li").removeClass("serverNewStyle").eq(index).addClass("serverNewStyle");

})

这里我需要的只是在我的列表中单选改变我的样式，也就是样式随点随消失，所以这里的addClass()和removeClass()是成对出现的：

“方法通常和.removeClass()一起使用，用来切换元素的样式”

$(".products").on("click","li",function(){

var prod_id = $(this).attr("goodId");

$("#topUpWindows .confirm").attr("onclick","payFor('"+prod_id+"')");

$("#topUpWindows").show();

})

这里把列表的父元素命名为products类，对他进行点击事件的操作，这里应用到了.attr()：https://www.jquery123.com/attr/ 设置每一个匹配元素的一个或多个属性。