学习 | 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(){
// 执行后的操作
})