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

　　最近在學習移動端組件化開發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(){
// 執行后的操作
})