拼多多面試2

Q1:畫一個內圓半徑爲5px，外圓半徑爲10px

方法一：利用border畫外圓

<style type="text/css">
    #circle {
        width: 10px;height: 10px;border-radius: 50%;border: 5px solid black;
    }
</style>
<div id="circle"></div>

方法二：利用定位和transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #bigCircle {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius: 50%;
        }
        #smallCircle {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid green;
            border-radius: 50%;
            left: 50%;top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div id="bigCircle">
        <div id="smallCircle"></div>
    </div>
</body>
</html>

Q2:box-sizing

裏面有兩個值：border-box，以及content-box兩種值。說一下區別
這就得說道CSS的盒子模型
W3C標準中，我們設置的width是指content的width，而IE中，我們設置的width是指border-left+padding-left+content+padding-right+border-right。
而如果給元素設置border-box:border-box;那麼在設置width的時候就是相當於設置border-left+padding-left+content+padding-right+border-right的寬度。
如果給元素設置border-box:content-box;那麼在設置width的時候就只是設置content的寬度。

Q3:談一下閉包

首先說概念：閉包是指有權訪問另一個函數作用域中的變量的函數，創建閉包的最常見的方式是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量
再說它的作用：可以用來管理私有變量和私有方法，將對變量（狀態）的變化封裝在安全的環境中，使得這些變量不能被外部隨意修改，同事又可以通過指定的函數接口來操作。
其次，它的三個特性：

函數嵌套函數
函數內部可以引用函數外部的參數和變量
參數和變量不會被垃圾回收機制回收

最後談一談它的缺點：
常駐內存，會增大內存使用量，使用不當很容易造成內存泄漏。

Q4:既然說到內存泄漏，再說說內存泄漏吧

什麼是內存泄漏？
內存泄漏是指任何對象在您不擁有或需要之後仍然存在。
垃圾回收期進行回收對象，垃圾回收器會定期掃描隊形，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量爲0（沒有其他對象引用過該對象），或者該對象的唯一引用是循環的，那麼該對象的內存即可回收。
哪些操作可能會引發內存泄露呢？

剛纔說的那個閉包操作，可能引發
setTimeout的第一個參數使用字符串而非函數的話，會引發內存泄漏。
控制檯日誌
循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

Q5:談一下垃圾回收方法

標記清除：這是JavaScript最常見的垃圾回收方式，當變量進入執行環境的時候，比如函數中聲明一個變量，垃圾回收器將其標記爲“進入環境”，當變量離開環境的時候（函數執行結束）將其標記爲“離開環境”。
引用計數：引用計數策略是跟蹤記錄每一值被使用的次數，當聲明瞭變量並將一個引用類型賦值給該變量的時候這個值得引用次數就加1，如果該變量的值變成了另外一個，則這個值得引用次數就減1，當這個值的引用次數變爲0的時候，說明沒有變量在使用，這個值就沒法進行訪問了，因此可以將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。

Q6:繼承方式

簡單原型式繼承

        function Super(){
            this.name = 'liuliuliu_666';
        }
        function Sub(){

        }
        Sub.prototype = new Super();    //核心

缺點：修改sub1.name後sub2.name也會被修改，因爲來自原型對象的引用屬性是所有實例共享的。

構造函數式繼承

        function Super(val){
            this.val = val;
            this.fun = function() { //實例函數

            }
        }
        function Sub(val){
            Super.call(this,val);   //核心
        }

缺點：無法實現函數複用，每個子類實例都會擁有一個新的fun函數，太多了就會影響性能，內存爆照。。。

組合式繼承

        function Super(){
            this.val = 'liu';
        }
        //原型函數
        Super.prototype.fun1 = function() {
            // body...
        };
        Super.prototype.fun2 = function() {
            // body...
        };

        function Sub(){
            Super.call(this);
        }
        Sub.prototype = new Super();

缺點：子類原型上有一份多餘的父類實例屬性，因爲父類構造函數被調用了兩次，生成了兩份，而子類實例上的那一份屏蔽了子類原型上父類的。。。，又是內存浪費。

寄生組合式繼承

        function Super(){
            this.name = 'liu';
        }

        Super.prototype.fun1 = function() {
            // body...
        };
        Super.prototype.fun2 = function() {
            // body...
        };

        function Sub() {
            Super.call(this);   //核心
        }
        Sub.prototype = Object.create(Super.prototype); //核心
        Sub.constructor = Sub;  //核心

es6的class繼承

        class A {

        }
        class B extends A {

        }
        B.__proto__ === A;  //true
        B.prototype.__proto__ === A.prototype //true

Q7:BFC

定義：
BFC（block formatting context）直譯爲“塊級格式化上下文”。是web頁面中盒模型佈局的CSS渲染模式。它是一個獨立的渲染區域，只有block-level-box參與，它規定了內部的block-level-box如何佈局，並且與這個區域外部好不相干。
怎麼生成BFC
1.根元素HTML就是一個BFC
2.float不爲none的浮動框
3.position爲absolute或者fixed
4.display爲table-cell、table-caption、inline-block、flex\或者inline-flex中的其中一個
5.overflow的值不爲visible（這就是爲什麼我們常用overflow: hidden;去清除內部浮動的原因，出發IE的hasLayout的特性）
BFC作用
1.使用BFC來防止外邊距摺疊
2.解決清除浮動問題
3.多欄佈局問題

Q8:隨機生成長度爲4的字符串

        var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
        function getRandomString() {
            var myStr = '';
            for (var i = 0; i < 4; i++) {
                var index = Math.round(Math.random()*35);
                myStr += arr[index];
            }
            alert(myStr);
        }
        getRandomString();

那麼問題來了，怎麼保證四個隨機數至少有一個字母

        var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

        function getRandomString() {
            var randomIndex = Math.round(Math.random()*3);  //  隨機生成一個0~3之間的位置用來插入字母
            console.log(randomIndex);
            var myStr = '';
            for (var i = 0; i < 4; i++) {
                var index = -1;
                if(i == randomIndex) {
                    index = Math.round(Math.random()*25 + 10);
                    console.log(index);
                }else {
                    index = Math.round(Math.random()*35);
                }
                myStr += arr[index];
            }
            console.log(myStr);
        }
        var myTimer = setInterval(getRandomString,100);
        setTimeout(function(){
            clearInterval(myTimer);
        },10000);

注意，這個還需要進行改進，我並不知道怎麼改進，哈哈哈

Q1:畫一個內圓半徑爲5px，外圓半徑爲10px

Q2:box-sizing

Q3:談一下閉包

Q4:既然說到內存泄漏，再說說內存泄漏吧

Q5:談一下垃圾回收方法

Q6:繼承方式

Q7:BFC

Q8:隨機生成長度爲4的字符串

拼多多面試2

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結