最近在学习移动端组件化开发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(){ // 执行后的操作 })
