开发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/ 设置每个匹配元素的一个或多个属性。