手淘flexible.js框架使用和源代码讲解小结


Posted in Javascript onOctober 15, 2018

手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架。

基本概念

1、视窗viewport

可能写过移动端的朋友就知道viewport是什么意思。

如果你不知道的话,可以简单理解成:浏览器的可视区窗口。可能在PC端,viewport就是浏览器窗口的宽度高度。但在移动端设备上却就有点复杂,具体的详细介绍我就不介绍啦!可以自行百度...

2、物理像素

物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

3、设备独立像素

设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。

4、CSS像素

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。

5、屏幕密度

屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。

6、设备像素比

设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

设备像素比 = 物理像素 / 设备独立像素

众所周知,iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt。

其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了,首先我们来说一下常用的移动设备。

iphone6:    375px*667px  实际像素:750px*1334px

iphone5:   320px*568px   实际像素:640px*1136px

iphone4:   320px*480px   实际像素:640px*960px

nexus5X(安卓): 411px *731px 实际像素:411px*731px

以上数据都来自于chrome浏览器- -!!!

其实我们的iphone手机都是视网膜屏幕,所以我们的实际像素因该是无力像素*视网膜屏的倍数。

然而我们在实际的开发中ui给出的图一般都是750X1334的,其实iphone6的像素和ui设计的像素是一样大小的,但是我们的开发如果都是按照6的px来设计,那么我们的其它比6小尺寸屏幕的所有设备都会面临width不够的问题。flexible就完美的解决了这个问题。

应用中我们只要设置好他的公共比的像素就ok了,比如说如果ui图的像素是750,那我们需要的就是750/10,我们需要的就是75,我们所有的width的固定px就都可以变换成用rem像素代替实现样式统一例如我们width需要200px那么我们就可以这样写:

width=200rem/75;从而实现样式的兼容(特别注意:因为css不支持样式的计算,我们需要用less活着sass类似的css编译执行就可以得到最终的rem的值了)

另外,我们根据不同dpr可以设置一些不同的样式来实现视网膜屏幕的高清屏幕!

[data-dpr="1"] .selector {
 width: 10px;
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 width: 20px;
 height: 64px;
 font-size: 28px;
}

我们根据不同的自定义属性data-dpr来设置不同的width和height 从而达到不同dpr屏幕具有不同的属性!(这个位置一般用来处理图片。。)

下面我们来讲解一下flexible的源代码:

;(function(win, lib) {

})(window, window['lib'] || (window['lib'] = {}));

首先这个最外层结构是最基本的封装类库的方法:函数立即调用,这样可以防止封装方法污染全局变量,jquery的源码也是一样的道理!

var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});

doc取文档的document对象

docEl取到了我们html为根的整个dom树,后期我们需要向html插入dpr和font-size就是用这个属性

metaEl取meta标签里面name=viewport的元素,没有返回空,为了判断是否有自己设置的meta值来做一些逻辑

flexibleEl取meta标签里面name=flexible的元素,没有返回空,为了判断用户是否自己手动的设置了一些meta值

dpr表示的是取你手机屏幕的dpr值

scale表示取你meta里面的scale,会根据不同的scale设置dpr

我们需要了解的大概就是上面的这些需要用到的属性!

if (metaEl) {
    console.warn('将根据已有的meta标签来设置缩放比例');
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content');
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
    }
  }

这段代码是判断你的meta标签里面是不是设置了name=viewport属性,如果你设置了viewport并且设置了initial-scale(初始屏幕的大小)我们将取到这个值作为dpr(做了逻辑运算,如果你的页面初始的放大为二,那么我们的dpr会设置成0)

同理我们如果动态设置了meta我们直接就取出来然后设置dpr和scale

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {        
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下,仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }

  docEl.setAttribute('data-dpr', dpr);

之后如果我们动态设置了scale或者设置了meta标签里面的name=flexible的inital-scale,那么我们就根据自己设置的dpr在判断iphone手机的retina屏幕的dpr比值判断不同型号的倍数,最后我们在html上设置了data-dpr自定义属性。

if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

之后当我们之前没有设置metaEl标签的话,那么需要我们手动的去创建meta标签,实现移动端的适配

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }

  win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
  }, false);
  win.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);

这段代码的目的就是监听window里面的resize和pageshow方法来实现css样式的重绘。

函数里面就是实现取到当前设备的width之后根据width计算出rem的具体值,rem代表html的font-size,这里的rem代表的是一个自定义的rem,而不是rem属性!

if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px';
  } else {
    doc.addEventListener('DOMContentLoaded', function(e) {
      doc.body.style.fontSize = 12 * dpr + 'px';
    }, false);
  }

之后我们判断document对象是否处于complete状态,如果完成状态我们给body一个font-size=12*dpr的值,否则我们判断dom加载方法来实现body中的font-size的设置。这个设置是为了页面中字体的大小,而html中的font-size是为了设置页面的height,width等属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
js实现上传图片到服务器
Apr 11 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 #Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 #Javascript
Vue-Router基础学习笔记(小结)
Oct 15 #Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 #Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 #Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 #Javascript
vue+axios+promise实际开发用法详解
Oct 15 #Javascript
You might like
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
工作需要写的一个js拖拽组件
2011/07/28 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python正则表达式面试题解答
2020/04/28 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
学校经典推荐信
2013/10/30 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
商场中秋节活动方案
2014/02/07 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python