前端跳槽必备知识

一、页面布局

CSS盒模型

  • 标准模型和IE模型


    image.png

  • 标准模型和IE模型的区别
    标准模型计算宽高时，只包含content的宽高
    IE模型计算宽高时，包含content、padding和border

  • CSS如何设置这两种模型

box-sizing:content-box // 设置为标准模型（浏览器默认）
box-sizing:border-box // 设置为IE模型
  • JS如何设置及获取盒模型的宽和高
var dom = document.getElementById('dom')
dom.style.width/height // 普适
dom.currentStyle.width/height // 仅IE浏览器支持
window.getComputedStyle(dom).width/height // Chrome、Firefox
dom.getBoundingClientRect().width/height/left/top // 获取元素相对viewport（视窗）左上角的位置

  • 边距重叠问题
    两个兄弟盒子和包含关系的盒子，同时设置margin时，会以数值大的为主，数值小的会被忽略。解决办法是创建BFC。

  • 如何创建BFC（块级格式化上下文）
    float的值不为none时；
    position不为static或relative时，比如设置为absolute、fixed等
    display为table时
    overflow不为visible时，比如设置为hidden，scroll等

二、DOM事件

  • DOM事件的级别
    DOM0：element.onclick = function(){} 或 <div onclick="alert('Hi~')"></div>
    DOM1：没有涉及事件标准的制定
    DOM2：element.addEventLister('click',function(){},false) // false 表示冒泡阶段触发
    DOM3：element.addEventLister('keyup',function(){},false) // 新增了很多事件类型

  • DOM事件模型
    冒泡、捕获

  • DOM事件流

  • DOM事件捕获的具体流程
    window --->document--->html--->body
    js中获取html节点的方法document.documentElement

  • Event对象的常见应用

function(event){
  event.preventDefault() // 阻止事件默认行为
  event.stopPropagation() // 阻止冒泡，防止事件往上传递
  event.stopImmediatePropagation() // 同一个元素绑定了多个方法，这个方法可以阻止剩下未触发的事件
  event.currentTarget // 当前事件实际绑定的元素
  event.target // 事件代理时，实际触发事件的子元素，IE不支持
}
  • 自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>customEvent</title>
</head>
<style>
    .target {
        width: 200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: white;
        background: red;
    }
</style>
<body>
    <div class="target" id="target">目标元素</div>
</body>
<script>
    // 事件捕获演示
    var target = document.getElementById('target')
    window.addEventListener('click', function () {
        console.log('window 捕获')
    }, true)

    document.addEventListener('click', function () {
        console.log('document 捕获')
    }, true)

    document.documentElement.addEventListener('click', function () {
        console.log('html 捕获')
    }, true)

    document.body.addEventListener('click', function () {
        console.log('body 捕获')
    }, true)

    target.addEventListener('click', function () {
        console.log('target 捕获')
    }, true)

    // 事件捕获演示
    var target = document.getElementById('target')
    window.addEventListener('click', function () {
        console.log('window 冒泡')
    }, false)

    document.addEventListener('click', function () {
        console.log('document 冒泡')
    }, false)

    document.documentElement.addEventListener('click', function () {
        console.log('html 冒泡')
    }, false)

    document.body.addEventListener('click', function () {
        console.log('body 冒泡')
    }, false)

    target.addEventListener('click', function () {
        console.log('====  华丽的分割线  ======')
        console.log('target 冒泡')
    }, false)

    // 需要抛出事件的地方
    var eve = new Event('myEvent')
    target.addEventListener('myEvent', function () {
        console.log('dispatch自定义事件')
    })
    setTimeout(function () { // 3s后触发事件
        target.dispatchEvent(eve) // 注意这里dispatchEvent的是事件对象eve，而不是事件myEvent
    }, 3000)
</script>
</html>

三、 HTTP协议

http协议是一种无连接、无状态的协议

  • http报文的组成部分
    请求报文：请求行（协议）、请求头、空行、请求体
    响应报文：状态行、响应头、空行、响应体

  • http方法
    GET：获取资源
    POST：传输资源
    PUT：更新资源
    DELETE：删除资源
    HEAD：获取报文首部

  • GET和POST的区别
    GET在浏览器回退时是无害的，而POST会再次发送请求；
    GET产生的URL可以被收藏，而POST不可以；
    GET请求会被浏览器主动缓存，而POST不会，除非手动设置；
    GET请求只能进行url编码，而POST支持多种编码方式；
    GET请求参数会被完整保留在浏览器历史记录中，而POST中的参数不会被保留；
    GET请求在URL中传送的参数是有长度限制的，而POST没有限制；
    GET只接受ASCII字符，而POST没有限制；
    GET比POST更不安全，因为参数直接暴露在URL中，不能用来传敏感信息；
    GET参数通过URL传递，POST参数放在Request body中传递；

  • HTTP状态码
    1xx：指示信息—表示请求已经接受，正在处理
    2xx：成功—表示请求已经被成功接收
    3xx：重定向—要完成请求必须进行更进一步的操作
    4xx：客户端错误—请求有语法错误或请求无法实现
    5xx：服务端错误—服务器未能实现合法的请求
    例如：
    200 OK ： 客户端请求成功；
    206 Partial Content：客户端发送了一个带有Range头的GET请求，服务器完成了它（请求音视频文件时）；
    301 Moved Permanently：所请求的页面已经转移到新的url；
    304 Not Modified：客户端有缓存的文档发出了一个条件性的请求，服务器告诉客户端，原来的缓存的文档还可以继续使用；
    400 Bad Request：客户端请求有语法错误，不能被服务器所理解；
    403 Forbidden：被请求的页面禁止访问；
    500 Internal Server Error：服务器发生不可预期的错误；
    503 Server Unavailable：请求未完成，服务器临时过载或宕机。

  • 持久链接
    普通模式：http采用“请求-->应答”模式，每次请求或者应答，客户端和服务器都要重新建立一个连接，完成后立即断开；
    Keep-Alive模式：又称持久链接，连接重用，该模式使客户端到服务端的连接持久有效，当出现后继请求时，Keep-Alive功能避免建立或重连，http1.1 版本开始支持Keep-Alive模式。

  • 管线化
    管线化通过持久连接完成，仅http1.1支持此技术
    持久连接：请求1-->响应1-->请求2-->响应2-->请求3-->响应3
    管线化：请求1-->请求2-->请求3-->响应1-->响应2-->响应3

四、原型链

  • 创建对象有几种方法
// 第一种方式：字面量
var o1 = {name:'o1'}
var o2 = new Object({name:'o2'})
// 第二种方式：构造函数
function M(name){name:'03'}
var o3 = new M()
// 第三种方式：
var M = function(name){this.name=name}
var o3 = new M('o3')
// 第四种方式
var p = {name:'o4'}
var o4 = Object.create(p)

  • 原型对象、构造函数、实例、原型链
    原型对象：构造函数的Prototype所指的对象,原型对象的contractor属性指向构造函数
    构造函数：使用new运算符操作的函数就是构造函数
    实例：构造函数new出来的


    图片发自简书App

  • instanceof的原理
    instanceof通过比较实例对象__proto__属性所指的原型和构造函数prototype属性所指的原型，是否指向同一个原型，如果是则成立。

var M = function(name){this.name=name}
var o3 = new M('o3')
o3 instanceof M // true
o3 instanceof Object // false
// 因此，instanceof无法准确判断实例的直接构造函数
// 要准确判断，可以借助__proto__和constructor，例如：
o3.__proto__.constructor===M // true
图片发自简书App
  • 使用new运算符，发生了什么？
    1.创建一个新对象，它继承自foo.prototype；
    2.执行构造函数，传入相应参数，上下文（this）被指定为新实例；没有参数时，则省略传参这一步，因此，没有参数时new foo 等价于 new foo()；
    3.如果构造函数返回了一个“对象”，则这个对象会取代new出来的结果。否则，new出来的结果为步骤1所创建的对象。

五、面向对象

<!-- 面向对象 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OOP</title>
</head>
<body>
    <div>面向对象，请打开控制台</div>
    <script type="text/javascript">
        // ==== 类的声明 ==== 
        function Animal() {
            this.name = 'name'
        }
        // ==== ES6中的class声明类 ==== 
        class Animal2 {
            constructor() {
                this.name = 'name'
            }
        }
        console.log('==== 类的声明与实例化 ====')
        console.log('Animal', new Animal())
        console.log('Animal2', new Animal2())

        // ==== 借助构造函数实现继承(无法继承父类原型链上的属性和方法) ==== 
        function Parent1() {
            this.name = 'Parent1'
        }
        Parent1.prototype.p1 = 'p1'
        Parent1.prototype.say = function () { console.log('Say Hi~') }
        function Child1() {
            Parent1.call(this) // 用apply也可以，只是传参的方式不一样
            this.type = 'Child1'
        }
        console.log('==== 借助构造函数实现继承 ====')
        console.log('Child1', new Child1)
        console.log('Parent1', new Parent1)

        // ==== 借助原型链实现继承 ==== 
        function Parent2() {
            this.name = 'Parent2'
            this.arr = [1, 2, 3]
        }
        function Child2() {
            this.type = 'Child2'
        }
        Child2.prototype = new Parent2() // Parent2的实例赋值给Child2的prototype属性
        console.log('==== 借助原型链实现继承 ====')
        console.log('Child2的原型链上有了Parent2的属性和方法', new Child2()) // Child2的原型链上有了Parent2的属性和方法
        // 这种方法的缺点，实例共享父类的属性
        var s1 = new Child2()
        var s2 = new Child2()
        console.log('s1.arr', s1.arr)
        console.log('s2.arr', s2.arr)
        s1.arr.push('4') // 改变实例1的arr值
        // 改变实例1的arr值
        console.log('借助原型链实现继承缺点：实例共享父类的属性')
        console.log('s1.arr', s1.arr)
        console.log('s2.arr', s2.arr) // s2的值也被改变了

        // ==== 组合方式实现继承 ==== 
        function Parent3() {
            this.name = 'Parent3'
            this.arr = [1, 2, 3]
            console.log('Parent3被调用了')
        }
        console.log('==== 借助原型链实现继承,解决了构造函数和原型链的缺点。但是这个方法中，父类被调用了2次 ====')
        function Child3() {
            Parent3.call(this)
            this.type = 'Child3'
        }
        Child3.prototype = new Parent3()
        console.log('Child3', new Child3())

        // ==== 组合方式实现继承优化1，解决父类被调用两次问题 ==== 
        function Parent4() {
            this.name = 'Parent4'
            this.arr = [1, 2, 3]
            console.log('Parent4被调用了')
        }
        function Child4() {
            Parent4.call(this)
            this.type = 'Child4'
        }
        Child4.prototype = Parent4.prototype
        console.log('==== 组合方式实现继承优化1，解决父类被调用两次问题，但无法确定实例的直接构造函数了 =====')
        console.log('Child4', new Child4())

        // ==== 组合方式实现继承优化2，解决父类被调用两次问题 ==== 
        function Parent5() {
            this.name = 'Parent5'
            this.arr = [1, 2, 3]
            console.log('Parent5被调用了')
        }
        function Child5() {
            Parent5.call(this)
            this.type = 'Child5'
        }
        Child5.prototype = Object.create(Parent5.prototype) // Object.create只拷贝了原型链的部分，不包含新
        Child5.prototype.constructor = Child5
        console.log('==== 组合方式实现继承优化2，Object.create方法 =====')
        var s7 = new Child5()
        console.log('s7 instanceof Child5', s7 instanceof Child5)
        console.log('s7 instanceof Parent5', s7 instanceof Parent5)
        console.log('s7.__proto__.constructor === Child5', s7.__proto__.constructor === Child5)

    </script>
</body>
</html>

六、通信

  • 什么是同源策略
    协议、域名、端口任何一个不一致就是跨域，同源策略是用于隔离潜在的恶意文件的关键的安全机制。

  • 同源策略有哪些限制
    1.Cookie、localStorage 和 indexDB无法获取
    2.DOM无法获取
    3.Ajax请求不能发送

  • 前后端如何通信
    1.Ajax：不支持跨域
    2.WebSocket：允许跨域
    3.CORS：新的通信标准，支持跨域通信和同源通信

  • 如何创建一个Ajax请求
    1.XMLHttpRequest对象的工作流程
    2.兼容性处理
    3.事件的触发条件
    4.事件的触发顺序

  • 跨域通信的集中方式
    1.JSONP

window.hhh = function () {  // 定义全局函数名
   console.log('window.hhh')
}
var script = document.createElement('script') // 创建script标签
script.src = 'https://www.baidu.com?callback=hhh'  // 向服务端传递callback名
script.onload = script.onreadystatechange = function () { // 监听onload事件
  console.log('hahah')
  window.hhh() // 运行服务端返回的hhh函数,格式类似：hhh({data:xxx})
}
document.body.append(script) // append到body中，发起请求

// 运行结果：
// hahah
// window.hhh

2.Hash(地址中，"#"号后面的内容，hash值改变浏览器不刷新)
3.postMessage
4.WebSocket
5.CORS（参考资料 http://www.ruanyifeng.com/blog/2016/04/cors.html）

七、安全

1.CSRF（Cross-site request forgery）跨站请求伪造
攻击原理：用户登录A网站，访问网站B，网站B伪造了一个指向A网站的GET请求并携带相关参数，此时浏览器会自动携带Cookie，A网站验证Cookie通过，并执行B网站伪造的GET请求。
防御措施：Token验证、Referer验证、隐藏令牌

2.XSS（Cross-site scripting）跨域脚本攻击
攻击原理：不需要登录，利用漏洞，执行恶意脚本。
防御措施：参考 http://www.imooc.com/learn/812

3.两者区别
XSS向页面注入脚本，在脚本中做想做的事情；CSRF利用接口漏洞，自动执行接口（一般要求用户已登录）

算法

  • 排序
  • 堆栈、队列、链表
  • 递归
  • 波兰式和逆波兰式

参考资料：https://coding.imooc.com/class/315.html

八、一道经典的题目，考考大家对布局的掌握程度

三栏布局：


image.png
  • 答案：浮动、绝对定位、flex布局、表格布局、网格布局。
  • 拔高点：高度未知的情况下，哪种还能用？哪种不能用了？为什么？
  • 总结：语义化、代码书写规范、页面布局理解深刻、CSS基础要扎实、思维灵活且积极上进（掌握新的grid布局）

参考答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout</title>
</head>
<style>
    html * {
        padding: 0;
        margin: 0;
    }
    .layout {
        margin-top: 20px;
    }
    .layout article>div {
        min-height: 100px;
    }
</style>
<body>
    <section class="layout float">
        <style>
            .left {
                float: left;
                width: 300px;
                background: red;
            }

            .right {
                float: right;
                width: 300px;
                background: blue;
            }

            .center {
                background: green;
            }
        </style>
        <article class="left-right-center">
            <div class="left">300px</div>
            <div class="right">300px</div>
            <div class="center">
                <h1>浮动解决方案</h1>
                <p>这是内容</p>
                <p>这是内容</p>
                <p>这是内容</p>
            </div>
        </article>
    </section>
    <section class="layout absolute">
        <style>
            .layout.absolute .left-right-center>div {
                position: absolute;
            }

            .layout.absolute .left {
                left: 0;
                width: 300px;
                background: red;
            }

            .layout.absolute .center {
                left: 300px;
                right: 300px;
                background: green;
            }

            .layout.absolute .right {
                right: 0;
                width: 300px;
                background: blue;
            }
        </style>
        <article class="left-right-center">
            <div class="left">300px</div>
            <div class="right">300px</div>
            <div class="center">
                <h1>绝对定位解决方案</h1>
                <p>这是内容</p>
                <p>这是内容</p>
                <p>这是内容</p>
            </div>
        </article>
    </section>

    <section class="layout flexbox">
        <style>
            .layout.flexbox {
                margin-top: 140px;
            }

            .layout.flexbox .left-right-center {
                display: flex;
            }

            .layout.flexbox .left {
                width: 300px;
                background: red;
            }

            .layout.flexbox .center {
                flex: 1;
                right: 300px;
                background: green;
            }

            .layout.flexbox .right {
                width: 300px;
                background: blue;
            }
        </style>
        <article class="left-right-center">
            <div class="left">300px</div>
            <div class="center">
                <h1>flexBox解决方案</h1>
                <p>这是内容</p>
                <p>这是内容</p>
                <p>这是内容</p>
            </div>
            <div class="right">300px</div>
        </article>
    </section>

    <section class="layout table">
        <style>
            .layout.table .left-right-center {
                width: 100%;
                height: 100px;
                display: table;
                padding: 0;
                margin: 0;
            }

            .layout.table .left-right-center>div {
                display: table-cell;
            }

            .layout.table .left {
                width: 300px;
                background: red;
            }

            .layout.table .center {
                width: 100%;
                background: green;
            }

            .layout.table .right {
                width: 300px;
                background: blue;
            }
        </style>
        <article class="left-right-center">
            <div class="left">300px</div>
            <div class="center">
                <h1>表格布局解决方案</h1>
                <p>这是内容</p>
                <p>这是内容</p>
                <p>这是内容</p>
            </div>
            <div class="right">300px</div>
        </article>
    </section>


    <section class="layout grid">
        <style>
            .layout.grid .left-right-center {
                width: 100%;
                height: 100px;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }

            .layout.grid .left {
                background: red;
            }

            .layout.grid .center {
                background: green;
            }

            .layout.grid .right {
                background: blue;
            }
        </style>
        <article class="left-right-center">
            <div class="left">300px</div>
            <div class="center">
                <h1>网格布局解决方案</h1>
                <p>这是内容</p>
                <p>这是内容</p>
                <p>这是内容</p>
            </div>
            <div class="right">300px</div>
        </article>
    </section>

</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,258评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,335评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,225评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,126评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,140评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,098评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,018评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,857评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,298评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,400评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,993评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2赞 352