Respond 的响应式代码阅读

判断浏览器是否支持响应式。

(function(w) {

"use strict";

w.matchMedia = w.matchMedia ||function(doc,undefined) {

varbool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div");

div.id ="mq-test-1";

div.style.cssText ="position:absolute;top:-100em";

fakeBody.style.background ="none";

fakeBody.appendChild(div);

returnfunction(q) {

//通过对元素加入media的样式，在判断元素是否因此而改变。

div.innerHTML = '<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';

docElem.insertBefore(fakeBody, refNode);

bool = div.offsetWidth === 42;

docElem.removeChild(fakeBody);

return{

matches: bool,

media: q

};

}(w.document);

})(this);

收集所有css link 的 href。

ripCSS =function() {

//links在之前已经完成整理。 head = doc.getElementsByTagName( "head" )[0] || docElem;links = head.getElementsByTagName( "link" );

for (var i = 0; i < links.length; i++) {

varsheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() ==="stylesheet";

if(!!href && isCSS && !parsedSheets[href]) {

if(sheet.styleSheet && sheet.styleSheet.rawCssText) {

translate(sheet.styleSheet.rawCssText, href, media);

parsedSheets[href] =true;

}else{

if(!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1,"").split("/")[0] === w.location.host) {

if(href.substring(0, 2) ==="//") {

href = w.location.protocol + href;

}

requestQueue.push({

href: href,

media: media

});

}

makeRequests();

};

整理相关 @media 媒体查询脚本的元数据。

translate =function(styles, href, media) {

//styles是.css文件的文本。通过ajax发起请求获取得到。
//对styles替换掉无效部分，匹配其中@media部分到变量qs。

var qs = styles.replace( respond.regex.comments, "").replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0;

href = href.substring(0, href.lastIndexOf("/"));

varrepUrls =function(css) {

returncss.replace( respond.regex.urls,"$1"+ href +"$2$3");

}, useMedia = !ql && media;

if(href.length) {

href +="/";

}

if(useMedia) {

ql = 1;

}

//分析qs，得出mediastyles的各项参数。整理出下图的数据结构。

for ( var i = 0; i < ql; i++) {

var fullq, thisq, eachq, eql;

if (useMedia) {

fullq = media;

rules.push(repUrls(styles));

} else {

fullq = qs[i].match( respond.regex.findStyles) && RegExp.$1;

rules.push(RegExp.$2 && repUrls(RegExp.$2));

}

eachq = fullq.split( ",");

eql = eachq.length;

for ( var j = 0; j < eql; j++) {

thisq = eachq[j];

if (isUnsupportedMediaQuery(thisq)) {

continue;

}

mediastyles.push({

media: thisq.split( "(")[0].match(respond.regex.only) && RegExp.$2 || "all",

rules: rules.length - 1,

hasquery: thisq.indexOf( "(") > -1,

minw: thisq.match( respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || "" ),

maxw: thisq.match( respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "" )

});

}

applyMedia();

}

实现 @media 的相关功能。

applyMedia =function(fromResize) {

varname ="clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode ==="CSS1Compat"&& docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now =newDate().getTime();

//之前已经定义resizeThrottle = 30;
//如果连续的resize在30ms内，延迟30ms后在触发一次resize job。

//formResize表示经过Respond初始化resize后，手工改变屏幕大小。

if (fromResize && lastCall && now - lastCall < resizeThrottle) {

w.clearTimeout( resizeDefer);

resizeDefer = w.setTimeout( applyMedia, resizeThrottle);

return;

} else {

lastCall = now;

}

//整理出不含@media的各种设备对应的样式。

for (var i in mediastyles) {

if (mediastyles.hasOwnProperty(i)) {

var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null , maxnull = max === null, em = "em";

if (!!min) {

min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1);

}

if (!!max) {

max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1);

}

//如果满足以下条件，将样式添加到该设备的样式集合styleBlocks中。
//1.如果不是媒体查询！thisstyle.hasquery。
//2.如果存在媒体查询的min-width或者max-width配置。
//3.如果当前设备宽度在媒体查询的min-width、max-width之间。

if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) {

if (!styleBlocks[thisstyle.media]) {

styleBlocks[thisstyle.media] = [];

}

styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);

}

//初始appendedEls = []，head = doc.getElementsByTagName( "head" )[0] || docElem，是html head元素。。由于本方法是在window.setTimeout中执行，appendedEls作为全局变量，有记忆功能。用于删除<head>中的<link>，因为.css中的@media由Respond resize代替。

for ( var j in appendedEls) {

if (appendedEls.hasOwnProperty(j)) {

if (appendedEls[j] && appendedEls[j].parentNode === head) {

head.removeChild(appendedEls[j]);

}

appendedEls.length = 0;

//将同一设备的样式组合到一个<STYLE>中，插入到html <head>中，如下：

//http://www.w3school.com.cn/tags/att_style_media.asp

//所有主流浏览器都支持 media 属性的 screen、print以及all值。

for(varkinstyleBlocks) {

if(styleBlocks.hasOwnProperty(k)) {

varss = doc.createElement("style"), css = styleBlocks[k].join("\n");

ss.type ="text/css";

ss.media = k;

head.insertBefore(ss, lastLink.nextSibling);

if(ss.styleSheet) {

ss.styleSheet.cssText = css;

}else{

ss.appendChild(doc.createTextNode(css));

}

appendedEls.push(ss);

}

对于手工改变屏幕尺寸的响应。

ripCSS();

respond.update = ripCSS;

respond.getEmValue = getEmValue;

functioncallMedia() {

applyMedia(true);

}

//对屏幕尺寸的响应，调用callMedia方法，实质是调用applyMedia(true);

//IE8不支持addEventListener。

if (w.addEventListener) {

w.addEventListener( "resize", callMedia, false);

} else if (w.attachEvent) {

w.attachEvent("onresize", callMedia);

}

Respond 的响应式代码阅读相关推荐

dw实现html实时更新,DW在HTML5 响应式代码实现完成
1.根据右侧提供素材,按老师的案例讲解,学习响应式实现多屏幕自适应的代码写法,同学们有各代码编写问题,可以截取代码内容截图到评论区. 2.打开软件DW,增加[footer]区,输入高[120像素]和颜 ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
深入浅出RxJava（三：响应式的好处）
在第一篇中,我介绍了RxJava的基础知识.第二篇中,我向你展示了操作符的强大.但是你可能仍然没被说服.这篇里面,我讲向你展示RxJava的其他的一些好处,相信这篇足够让你去使用Rxjava. 错误处 ...
Reactive(3)5分钟理解 SpringBoot 响应式的核心-Reactor
目录一.前言二. Mono 与 Flux 构造器三. 流计算 1. 缓冲 2. 过滤/提取 3. 转换 4. 合并 5. 合流 6. 累积四.异常处理五.线程调度小结参考阅读一.前言 ...
html响应式布局ipad,响应式布局（Responsive design）
意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式.通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验. 步骤 1.布局及设置meta标签当创建一个响应式网站,或者非响应式网站变成响应式 ...
一篇文章带你吃透VUE响应式原理
本篇响应式原理介绍比较长,全文大概1w+字.虽然内容繁杂,但阅读过后,绝对会让你对vue的响应式有更加深刻的理解. 分块阅读,效果更佳.(建议读者有一定vue使用经验和基础再食用) 首先上图,下面这张 ...
Concurrency in C# Cookbook中文翻译：1.3并发性概述：响应式编程入门(Rx)
Introduction to Reactive Programming (Rx) 响应式编程入门(Rx) Reactive programming has a higher learning cur ...
第一章 Thinking Reactively(响应式的思考)
第一章 Thinking Reactively(响应式的思考) 假定您相当熟悉Java并且知道如何使用类,接口,方法,属性,变量,静态/非静态作用域和集合. 如果您还没有完成并发或多线程,那就可以了. ...
彻底理解Vue数据响应式原理
彻底理解Vue数据响应式原理当创建了一个实例后,通过将数据传入实例的data属性中,会将数据进行劫持,实现响应式,也就是说当这些数据发生变化时,对应的视图也会发生改变. const data = { ...

Respond 的响应式代码阅读

Respond 的响应式代码阅读相关推荐

最新文章

热门文章