学习 | 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(){

// 执行后的操作

})