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