學習 | jQuery移動端頁面組件化開發(一)

標籤：組件   span   config   component   bsp   trigger   flex   思考   載入   

　　最近在學習移動端組件化開發web頁面，其中有好多小細節，值的去思考。

　　主要介紹JS的思路，具體的代碼就不貼了，主要是想表達出一種思路

　　總體來說　　1.入口檔案，在入口檔案中匯入外掛程式，外掛程式樣式，jquery

// 首先要有config參數    var config ={        // config    }// 進行執行個體化    var H5 = new H5Component(config)//  插入DOM中    $(".container").append(H5)// 觸發組件中的自訂事件    $("body").on("click",function(){       $(".component").trigger(event)})

　　2.組件.js

var H5ComponentBase = function(config){     // 初始化形參     var config = config || {} ;     // 設定class id等資訊     // ...     // 建立dom節點     var component = $("<div></div>");     // css樣式（行內樣式）    //  ...    // 觸發自訂事件時    // ...    // 返回這個dom節點     return component; }    

       引發的思考　　1.如何根據ui的圖片適應不同的裝置

　　 比如說完全顯示圖片而不是自己再給img或者背景設定寬高，或者設定背景的left和top

　　css

.h5_component_class_base{  backgroundImage:url("./bg.png");    background-size: 100%;  background-repeat: no-repeat;}

　　當然你也可以在js中手動添加backgroundImage或樣式

　　但是得注意一個問題， backgroundImage:url("./bg.png") 與 background:url("./bg.png")都能讓圖片載入出來，但是用background:url後設定background-size:100%無法完全顯示圖片，這個問題在之前碰到過

   css中background是背景設定的集合,而background-image只是設定背景的圖片樣式。

   background後可加背景顏色,背景圖片及圖片排列樣式,和結構對齊樣式,可以說控制了整個背景的屬性。
   不要替換這兩個，否則就會踩坑
2.置中的問題
　之前總結了很多置中的問題，但是多了反而不記得了，flex置中，float置中等
　水平置中，設定dom的position：absolute，left：50% margin-left 為負的真實寬度的一半，所謂真實寬度就是頁面上顯示的寬度，UI給的psd圖一般是以
   iPhone5寬度做的，需要把psd的寬高除2才是真實寬高，這就是水平置中的做法，同理垂直置中也是這樣。
css

.test{   position:absolute;   //水平置中   left :50%;   margin-left: 1/2*width*-1;   //垂直置中      top :50%;   margin-right:1/2*height*-1;    }

3.自訂事件的建立與引用
  建立自訂事件
  在入口檔案中當點擊body時建立自訂事件，也可以是其他事件觸發該自訂事件

var flag = true;$("body").on("click",function(){    flag ! =flag;    $(".dom").trigger(flag?"event1":"event2"); })

      觸發自訂事件

      在外掛程式中執行

DOM.on("event1",function(){// 執行後的操作})DOM.on("event2",function(){// 執行後的操作})

 

 

 

學習 | jQuery移動端頁面組件化開發(一)