開發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/ 設置每個匹配元素的一個或多個屬性。