遇到的问题

  • H5项目使用Canvas, 适配采用保持宽高比例, 上下或者左右留白方式
  • 在项目中有些Dom元素, 例如用来放Gif的<Img>, 还有<Video>, 和输入框<Input>
  • 这些元素的适配方式, 和画布无法保持同步, 造成开发上的时间浪费.
  • 两个难点
    1. 直接传入设计图上的宽高,无需计算, 即可达到想要的效果
    2. 宽高等属性可直接计算, 但上下左右, 可能留白, 造成位置偏差

实现方式

思路

  1. 传入Dom元素, 直接设置不需要计算的属性
  2. 保存需要不断计算的属性
  3. 设计监听, 即当选中屏幕的时候, 可自动改变
  4. 并主动进行一次计算
  5. 计算过程分为两种情况

计算情况

  • 注意: 位置元素只能使用top和lfet!!!
  • 非top或者left, 不受位置影响的计算属性, 可以直接进行计算
  • top, 和lfet, 位置元素
    • 判断当前是否为上下留白, 如果是正好的话, 直接计算即可
    • 宽变多了, 过于宽了, 左右留白, 计算按照原始比例, 宽的长度, 再计算出需要移动的宽的一半
    • 上下留白同理

使用方式

正常使用

  • 注意: 位置元素只能使用top和lfet!!!
  • 正常使用过程, 直接设置属性和值即可, Number类型的属性, 是需要计算的
  new NewDom(document.getElementById('videoQ1'), {
top: 386,
left: 50,
width: 660,
height: 380
}).listenChange()

设置居中

  • 居中不能进行数值的设置
  • 设置居中的过程, 也就是让宽高是50%即可
  new NewDom(document.getElement('img')), {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)', width: 750,
height: 1464
}).listenChange()

具体实现代码


const width = Symbol('w')
const height = Symbol('y')
const dom = Symbol('dom')
const storeStyle = Symbol('storeStyle') export default class NewDom {
constructor (domInstance, style) {
this.setWidthAndHeight(750, 1464)
if (!this.judgeDom(domInstance)) throw new Error('参数类型错误')
this[dom] = domInstance // dom实例
this[storeStyle] = {} // 存储所有变换的值 Object.keys(style).forEach(key => {
if (typeof style[key] === 'number') {
this[storeStyle][key] = style[key] // 收集所有变化的值
} else {
this[dom].style[key] = style[key]
}
})
}
setWidthAndHeight (w, h) {
if (typeof w === 'number' && typeof h === 'number') {
this[width] = w
this[height] = h
} else {
throw new Error('需要传入数字类型的宽高')
}
return this
}
judgeDom (obj) { // 判断是否为dom
if (typeof HTMLElement === 'object') {
return obj instanceof HTMLElement
} else {
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'
}
}
listenChange () {
let timer
this.autoChange()
window.addEventListener('orientationchange', () => {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
this.autoChange()
}, 1500)
})
return this
}
fouceSetStyle (key, value) { // 强行更改属性
this[dom].style[key] = value
}
autoChange () {
const style = this[storeStyle]
const shouldScaleWidth = innerWidth / this[width]
const shouldScaleHeight = innerHeight / this[height]
const scale = Math.min(shouldScaleWidth, shouldScaleHeight)
Object.keys(style).forEach(key => {
if (shouldScaleWidth > shouldScaleHeight && key === 'left') { // 宽变化多, 左右留白
const vacancy = innerWidth - this[width] * scale
this[dom].style.left = `${style[key] * scale + vacancy / 2}px`
} else if (shouldScaleWidth < shouldScaleHeight && key === 'top') { // 上下留白
const vacancy = innerHeight - this[height] * scale
this[dom].style.top = `${style[key] * scale + vacancy / 2}px`
} else {
this[dom].style[key] = `${style[key] * scale}px`
}
})
return this
}
}

平衡Dom总结的更多相关文章

  1. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  2. 虚拟DOM

    传统的 DOM 操作是直接在 DOM 上操作,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作.如果需要操作的DOM元素过多,则成本太高,而采用 Virtual DOM 则会对需要修改的 D ...

  3. HTMLElement.hidden; CSS Attr Selectors的用处; DOM的className方法; ::before和::after伪元素

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden https://codepen.io/pen/ <elem ...

  4. 2018.7.22 Jdom与dom的区别

    SAX 优点:①无需将整个文档加载到内存,因而内存消耗少 ②推模型允许注册多个ContentHandler 缺点:①没有内置的文档导航支持 ②不能够随机访问XML文档 ③不支持在原地修改XML ④不支 ...

  5. 浅谈DOM事件的优化

    在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚 ...

  6. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  7. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  8. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  9. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

随机推荐

  1. How does a browser know which response belongs to which request?

    Today I knows that the server never send a request to a client! It just make response~ So,if the bro ...

  2. Typeof() 和 GetType()区别

    1.typeof(x)中的x,必须是具体的类名.类型名称等,不可以是变量名称. 2.GetType()方法继承自Object,所以C#中任何对象都具有GetType()方法,它的作用和typeof() ...

  3. Java通过JDBC连接SQL Server

    下载Microsoft JDBC Driver 4.0 for SQL Server 在这里下载:http://www.microsoft.com/zh-cn/download/details.asp ...

  4. ESP8266开发环境、编译、烧录

    官方地址 中:http://www.espressif.com/zh-hans/support/download/overview?keys=&field_type_tid[]=14 英:ht ...

  5. axios替换jquery的ajax

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...

  6. 虚拟机不能桥接联网 vmnet0上的网桥当前未运行

    win10家庭版更新到内测版后,原来可以正常桥接工作的虚拟机ubuntu不能在桥接模式下联网和ssh连接了,因为获取不到IP地址了. 上网搜索一下,发现直接粗暴的方法--修复VMware Workst ...

  7. Django—model系统:ORM之其他骚操作

    Django ORM执行原生SQL # extra # 在QuerySet的基础上继续执行子语句 # extra(self, select=None, where=None, params=None, ...

  8. Ubuntu安装Python 3.6之编译安装+使用PPA源安装

    下面分别详细介绍一下Ubuntu 14.04/16.04安装Python 3.6的两种方法: 方法一 自己编译安装: # 安装编译必需的软件包 sudo apt install build-essen ...

  9. 09_Redis_消息订阅与发布

    一:Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 c ...

  10. 学习Shell编程

    目录 1 什么是Shell 2 Linux的启动过程 3 怎样编写一个Shell脚本 4 Shell脚本的执行方式 5 内建命令和外部命令的区别 6 管道和重定向 7 变量赋值 8 环境变量配置文件 ...