每日思考(2019/12/21)

玫瑰小妖 2019-12-22

题目概览

  • 为什么HTML5只需要写<!DOCTYPE HTML>就可以
  • position:fixed;在ios下无效该怎么办?
  • 什么是闭包?用途是什么?
  • 你最喜欢用哪些编辑器?喜欢它的理由是什么?

题目解答

为什么HTML5只需要写<!DOCTYPE HTML>就可以?

  • SGML 是通用标记语言的集合。其中有 HTML、XML,因此需要用 DTD 来指定使用那种规范

  • 因为 HTML5 与 HTML4 基于的基准不同。HTML4 基于 SGML,因此需要除了 DOCTYPE 外还需要引入 DTD 来告诉浏览器用什么标准进行渲染。DTD 还分为标准模式、严格模式。如果什么都不写,就完全让浏览器自我发挥,会变成怪异模式。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • HTML5 不基于 SGML,因此后面就不要跟 DTD,但是需要 DOCTYPE 来规范浏览器的渲染行为。

    <!DOCTYPE html>
    <html>
    <head>
    <title>文档的标题</title>
    </head>
    <body>
    文档的内容......
    </body>
    </html>

position:fixed;在ios下无效该怎么办?

  • iOS下的 Fixed + Input BUG现象:fixed 元素在软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了

    <body class="layout-fixed">
        <!-- fixed定位的头部 -->
        <header>
        </header>
        <!-- 可以滚动的区域 -->
        <main>
            <!-- 内容在这里... -->
        </main>
        <!-- fixed定位的底部 -->
        <footer>
            <input type="text" placeholder="Footer..."/>
            <button class="submit">提交</button>
        </footer>
    </body>
    header, footer, main {
        display: block;
    }
    header {
        position: fixed;
        height: 50px;
        left: 0;
        right: 0;
        top: 0;
    }
    footer {
        position: fixed;
        height: 34px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    main {
        margin-top: 50px;
        margin-bottom: 34px;
        height: 2000px
    }
  • 使 fixed 元素的父级不出现滚动,而将原 body 滚动的区域域移到 main 内部,而 header 和 footer 的样式不变

    header, footer, main {
        display: block;
    }
    
    header {
        position: fixed;
        height: 50px;
        left: 0;
        right: 0;
        top: 0;
    }
    
    footer {
        position: fixed;
        height: 34px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    main {
        /* main绝对定位,进行内部滚动 */
        position: absolute;
        top: 50px;
        bottom: 34px;
        /* 使之可以滚动 */
        overflow-y: scroll;
        /* 增加该属性,可以增加弹性 */
        -webkit-overflow-scrolling: touch;
    }
    
    main .content {
        height: 2000px;
    }
  • 在 Android2.3+ 中,因为不支持 overflow-scrolling ,因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的,因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。如果需要考虑 Android2.3 以下系统,因为不支持 fixed 元素,所以依然要需要考虑使用 isScroll.js 来实现内部滚动。基本思路就是: 由于 fixed 在软键盘唤起后会失效,导致在页面可以滚动时,会跟随页面一起滚动。因此如果页面无法滚动,那么 fixed 元素即使失效,也不会滚动

  • 其他的一些细节处理

    • 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。
    • 有些第三方浏览器底部的工具栏是浮在页面之上的,因此底部 fixed 定位会被工具栏遮挡。解决办法适配不同的浏览器,调整 fixed 元素距离底部的距离。
    • 最好将 header 和 footer 元素的 touchmove 事件禁止,以防止滚动在上面触发了部分浏览器全屏模式切换,而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。

什么是闭包?用途是什么?

  • 变量作用域:要理解闭包,首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种:全局变量和局部变量。javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。在函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明的是一个全局变量

  • 从外部读取函数内部的局部变量:出于种种原因,有时候需要获取到函数内部的局部变量。那就是在函数内部,再定义一个函数。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

    function f1(){
       var n=999;
       function f2(){
          alert(n); // 999
       }
    }
    //函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的
  • 闭包的概念:上面代码中的f2函数,就是闭包。 闭包就是能够读取其他函数内部变量的函数。由于在javascript中,只有函数内部的子函数才能读取局部变量,所以说,闭包可以简单理解成“定义在一个函数内部的函数。所以,在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

  • 闭包的用途:闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会在f1调用后被自动清除,原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

  • 使用闭包的注意点:

    • 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

    • 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值

你最喜欢用哪些编辑器?喜欢它的理由是什么?

  • notepad++:日常用语查看代码
  • vscode:开发项目前端使用,插件丰富,集git调试与一身
  • eclipce:开发项目后端使用,Java后台用

相关推荐