每日思考（2020/02/12）

题目概览

• 页面中怎么嵌入Flash？
• 说说你对媒体查询的理解
• 写一个使两个整数进行交换的方法

题目解答

页面中怎么嵌入Flash？

• 使用 object 和 embed 标签来嵌入：object 的很多参数和 embed 里面的很多属性是重复的，最大限度的保证了 Flash 的功能，没有兼容性问题。缺点是无法通过验证，由于为了兼容性而嵌入的 embed 标签是不符合 W3C 的规范的；微软由于种种原因，在 sp2 后限制了 IE 的 ActiveX 的使用模式，就是在页面中的 ActiveX 有一个虚框，需要用户点击一次才能正常交互。Flash是作为一个 ActiveX 嵌入到网页中的，所以它也会受牵连，只有通过 JS 嵌入 Flash 才能解决这个问题；没有 Flash 版本检测，如果版本浏览器的flash插件版本不够，或者不能正常显示你的 swf 文件，或者会弹出一个 ActiveX 的确认安装的框——这个框对很多用户来说是很恐怖的。

• 单object：这种方法的名字叫做 Flash satay。浏览器兼容性也不错，缺点是需要一个 holder swf 来加载你的目标 swf以保证 IE 中的 stream能力，如果你需要通过 flashvars来传参，或者和页面的 JS 交互，会很麻烦。ActiveX的虚框问题。没有版本检测。还是有少数用户代理（比如一些版本的 safari 和一些屏幕阅读器）不认这种方式，有 bug

• 用JS嵌入的方法：

  • SWFObject

    
         
    Alternative content
         
    
                
             
        
    

  • Macomedia（现在是Adobe了..）提供的脚本

  • UFO - Unobtrusive Flash Objects

• 总结：现阶段用 JS 嵌入 Flash 是最完美的方法，虽然这法子这也是由于浏览器的种种问题而作出的妥协。 但它在保证 Flash 功能的前提下还利用 JS 提供了额外的好处，再者又已经有人写了很完善的嵌入脚本可以方面地下载使用（推荐 SWFObject）

说说你对媒体查询的理解

• 媒体属性：媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符

  • 颜色（color）：指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0

  • 颜色索引（color-index）：颜色索引指定了输出设备中颜色查询表中的条目数量，如果没有使用颜色查询表，则值等于0

  • 宽高比（aspect-ratio）：宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例

  • 设备宽高比（device-aspect-ratio）：设备宽高比描述了输出设备的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例

  • 设备高度（device-height）：设备高度描述了输出设备的高度

  • 设备宽度（device-width）：设备宽度描述了输出设备的宽度

  • 网格（grid）：网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0

  • 高度（height）：高度描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度

  • 宽度（width）：宽度描述了输出设备渲染区域的宽度

  • 黑白（monochrome）：黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0

  • 方向（orientation）：方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式，值landscape(横屏) | portrait(竖屏)

  • 分辨率（resolution）：分辨率指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示（关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此）

  • 扫描（scan）：扫描描述了电视输出设备的扫描过程，值有 progressive | interlace

• 语法：媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假

  • 当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）

  • 逻辑操作符：操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

    @media all and (min-width: 700px) and (orientation: landscape) { ... }
    @media (min-width: 700px) and (orientation: landscape) { ... }
    @media (min-width: 700px), handheld and (orientation: landscape) { ... }
    @media not all and (monochrome) { ... }

  • 方法：window.matchMedia()方法用来检查CSS的mediaQuery语句

    • 属性：window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有media和matches两个属性，其中media返回所查询的mediaQuery语句字符串，matches返回一个布尔值，表示当前环境是否匹配查询语句

      var result = window.matchMedia('(min-width: 600px)');
      console.log(result.media); //'(min-width: 600px)'
      console.log(result.matches); // true
      
      var result = window.matchMedia('123');
      console.log(result.matches);//false   无法解析mediaQuery参数，返回的总是false，而不是报错

    • 事件：window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法

      // 指定回调函数
      mql.addListener(mqCallback);
      // 撤销回调函数
      mql.removeListener(mqCallback);

  • 打印样式：媒体查询的一个常用功能是打印样式的设置，主要是背景清除、字体颜色变黑等

    @media print{
        *,*:before,*:after{
            background:transparent!important;
            color:#000 !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        a,a:visited{
            text-decoration: underline;
        }
        a[href]:after{
            content:"(" attr(href) ")";
        }
        abbr[title]:after{
            content:"(" attr(title) ")";
        }
        a[href^="#"]:after,a[href^="javascript:;"]:after{
            content:"";
        }
        pre,blockquote{
            border: 1px solid #999;
            /*只有opera浏览器起作用，避免在元素内部插入分页符*/
            page-break-inside:avoid;
        }
        thead{
            display:table-header-group;
        }
        tr,img{
            page-break-inside:avoid;
        }
        img{
            max-width:100%!important;
        }
        p,h2,h3{
            /*元素内部发生分页时，最少保留3行*/
            orphans:3;
            /*元素内部发生分页时，元素顶部最少保留3行*/
            windows:3;
        }
        h2,h3{
            /*避免在元素后面插入一个分页符*/
            page-break-after:avoid;
        }
    }

  • 相对单位：一般而言，rem是相对于HTML的字体大小的。但是，由于媒体查询的级别非常高，它并不是HTML的子元素，不是相对于HTML，而是相对于浏览器的，而浏览器的默认字体大小是16px，如果HTML设置字体大小为12px，设置media="only screen and (max-width:1rem)"，实际上，max-width等于16px，而不是12px，而正是由于媒体查询是相对于浏览器的， 所以使用rem就没有必要，完全可以使用em来替代

写一个使两个整数进行交换的方法

• 临时变量：设置临时变量进行数据交换过程中的缓存。这样的做法直观，易懂。但是，会增加内存的使用

  var a = 1, b = 2,tmp;
  tmp = a;
  a = b;
  b = tmp;

• 算术运算：通过算术运算过程中的技巧，可以巧妙地将两个值进行互换。但是，有个缺点就是变量数据溢出。因为JavaScript能存储数字的精度范围是 -253 到 253。所以，加法运算，会存在溢出的问题。

  var a = 1,b = 2;
  a = a + b; // a = 3, b = 2
  b = a - b; // a = 3, b = 1
  a = a - b; // a = 2, b = 1

• 异或运算：巧用位运算的技巧，利用 a ^ b ^ b == a 的特点，进行数值交换，避免了使用算术运算带来的弊端，不会发生溢出问题。

  var a = 1, // 二进制：0001
      b = 2;  // 二进制：0010
  
  a = a ^ b; // 计算结果：a = 0011, b = 0010
  b = a ^ b; // 计算结果：a = 0011, b = 0001
  a = a ^ b; // 计算结果：a = 0010, b = 0001

• ES6的解构：用解构的语法特性，解构语法还适用于其他类型的变量进行互换。

  let a = 1,b = 2;
  [a, b] = [b, a];

• 利用数组特性进行交换

  var a = 1,b = 2;
  a = [a, b];
  b = a[0];
  a = a[1];