常見面試題解 @于志程

1.打包部署出現(xiàn)空白或404

/\*
@于志程
1.空白頁面多半是資源路徑請求不成功

  

解決辦法:vue.config.js下的assetsPublicPath默認的是 ‘/’ 也就是根目錄蛆楞。而我們的index.html和 static在同一級目錄下面。 所以要改為 ‘./ ’;

2\. 頁面刷新404問題

這是因為 使用的是history模式 所以vue用路由跳轉(zhuǎn)完之后 再次刷新 所以這個模式會默認的請求一次資源 請求不成功 就會返回404 所以要在服務(wù)器配置 原理是讓所有請求的路徑全部重定向到 根目錄/index.html 這樣就不會出現(xiàn)問題了

但是這么做的話 需要自己創(chuàng)造一個404頁面 給用戶觀看。桐款。

3\. 如果沒有部署在根目錄

解決辦法:vue.config.js下的assetsPublicPath默認的是 ‘/’ 在那個目錄就修改這個路徑就可以

\*/

2. 調(diào)用攝像頭

/*注   只能在移動端執(zhí)行   */
<input type='file' accept='image/*' capture='camera'     multiple >   /*調(diào)用相機*/
<input type='file' accept='video/\*' capture='camcorder'   > /*調(diào)用視頻*/
<input type='file' accept='audio/*' capture='microphone'   > /*調(diào)用錄音功能*/

3.封裝一個簡單的ajax绿饵,返回promise

        /**
         * @function {Promise}
         * @params {Object} params
         * @params {String} params.type 請求方式
         * @params {String} params.url 請求地址
         * @return {Promise}
         */
        function promise(params) {
            return new Promise((reslove, reject) => {
                console.log(params)
                xhr = null;
                if (window.XMLHttpRequest) {
                    var xhr = new XMLHttpRequest()
                } else {
                    xhr = new ActiveXObject('Microsoft.XMlHTTP')
                }
                xhr.open('get', params.url, true)
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.status === 200 && xhr.readyState === 4) {
                        reslove(xhr.responseText)
                    }
                }
            })
        }

        console.log(promise({
            url: 'js/defer.json'
        }).then(res => {
            console.log(res)
        }))

4.解決回調(diào)地獄

       // 1. 方法一 
       setTimeout(() => {
           console.log('1')
           setTimeout(() => {
               console.log('2')
               setTimeout(() => {
                   console.log('3')
                   setTimeout(() => {
                       console.log('4')
                       setTimeout(() => {
                           console.log('5')
                           setTimeout(() => {
                               console.log('6')
                               setTimeout(() => {
                                   console.log('7')
                                   setTimeout(() => {
                                       console.log('8')
                                   }, 2000);
                               }, 2000);
                           }, 2000);
                       }, 2000);
                   }, 2000);
               }, 2000);
           }, 2000);
       }, 2000);
  • 解決方法其一
        ///  promise 解決
        let prom = new Promise((reslove, reject) => {
            setTimeout(() => {
                console.log('1')
                reslove();
            }, 4000);
        })

        function p2() {
            return new Promise((reslove, reject) => {
                setTimeout(() => {
                    console.log('2')
                    reslove();
                }, 4000);
            })
        }

        function p3() {
            return new Promise((reslove, reject) => {
                setTimeout(() => {
                    console.log('3')
                    reslove();
                }, 4000);
            })
        }
        prom.then(() => {
            return p2()
        }).then(() => {
            return p3()
        })
  • 后續(xù)代碼待補充

5.如何把函數(shù)add(1,2,3,4)的調(diào)用方式改為add(1)(2)(3)(4)

  • 使用函數(shù)柯里化方法
        //普通方法
        function fun(a, b, c, d) {
            return a + b + c + d;
        }
        //運用函數(shù)柯里化方法實現(xiàn):
        // 把第一種函數(shù)的形式變成第二種的形式灿里,這個就叫做函數(shù)柯里化的過程
        function fn(a) {
            return function (b) {
                return function (c) {
                    return function (d) {
                        return a + b + c + d
                    }
                }
            }
        }
        console.log(fn(1)(2)(3)(6))

6.什么是Polyfill

/* Polyfill你可以理解為“ 膩子”凿叠, 就是裝修的時候, 可以把缺損的地方填充抹平昆淡。
舉個例子锰瘸, html5的storage(session, local),
不同瀏覽器, 不同版本昂灵, 有些支持获茬, 有些不支持。 我們又想使用這個特性倔既, 
怎么辦? 有些人就寫對應(yīng)的Polyfill( Polyfill有很多)鹏氧, 
幫你把這些差異化抹平渤涌, 不支持的變得支持了( 簡單來講
, 寫些代碼判斷當(dāng)前瀏覽器有沒有這個功能把还, 沒有的話实蓬,
就寫一些支持的補丁代碼)。
你只需要把需要的Polyfill引入到你的程序里吊履, 就可以了安皱。
*/
/*
自己的理解 就是說Polyfill 是一種解決兼容的一種規(guī)范 
他不是一個方法也不是一個屬性 知識一個解決兼容規(guī)范的 命名
*/

7.隨機選取10-50之間數(shù)字

        let arr = []
        //定義一個空數(shù)組
        for (var i = 0; i < 100; i++) {
            // 循環(huán)創(chuàng)建隨機數(shù)放進去
            let math = parseInt(Math.random() * (50 - 10 + 1) + 10);
            //數(shù)組最大數(shù)量 10個
            if (arr.length < 10) {
                if (arr.indexOf(math) === -1) {
                    //數(shù)組沒有相同的再添加進去
                    arr.push(math)
                    arr.sort(function (a, b) {
                        return a - b;
                    })
                }
            }
        }
        console.log(arr)

8.寫一個閉包的應(yīng)用例子

        //在javascript里,在函數(shù)里聲明的函數(shù)都是局部的艇炎,函數(shù)運行完后就釋放了
        function add() {
            //函數(shù)內(nèi)部定義函數(shù)酌伊,連接函數(shù)內(nèi)部和外部的橋梁
            // 閉包的作用有2個:
            //    一是讀取函數(shù)內(nèi)部的變量,
            //  二是讓這些變量的值保存在內(nèi)存中缀踪, 實現(xiàn)數(shù)據(jù)共享
            //閉包 執(zhí)行過的函數(shù) 不會被釋放 這樣就形成了閉包
            // 每一個函數(shù)經(jīng)過執(zhí)行形成閉包  都是一個全新的閉包
            // 每個閉包都是獨立的居砖。
            //好處: 1.緩存
            //      2. 面向?qū)ο笾械膶ο?            ///     3. 實現(xiàn)封裝虹脯, 防止變量跑到外層作用域中, 發(fā)生命名沖突
            //      4. 匿名自執(zhí)行函數(shù)奏候, 匿名自執(zhí)行函數(shù)可以減小內(nèi)存消耗
            //缺點: 
            //      1.無法及時釋放內(nèi)存
            //      2. 內(nèi)存泄漏
            //      3. 內(nèi)存泄漏

            let count = 0;

            function a() {
                count++;
                return count;
            }
            return a
        }
        var addcount = add()
        console.log(addcount())
        console.log(addcount())
        console.log(addcount())

9. 異步加載js方式有哪些

    <script>
        window.onload = function () {
            console.log('window.onload')
        }
    </script>
    <script src="js/defer.js" defer></script>
    <script>
        /*
       1.在html5中循集,script新增了async的屬性,script添加了該屬性之后蔗草,下載腳本時將可以與頁面其他內(nèi)容并行下載咒彤,但是該屬性必須在ie9以上的瀏覽器中才可以使用,并且只能用于加載外部js腳本咒精。
       2.同樣镶柱,在html4中也有一個defer屬性,該屬性的兼容性更好一點狠轻,但是與async一樣奸例,可以讓js腳本實現(xiàn)異步加載,同樣只能用于加載外部js腳本向楼。
       asyc與defer屬性的不同點是查吊,async會讓腳本在加載完可用時立即執(zhí)行,而defer腳本則會在dom加載完畢后執(zhí)行湖蜕,defer腳本的執(zhí)行會在window.onload之前逻卖,其他沒有添加defer屬性的script標簽之后。
       */
        console.log('normal')
    </script>
    <script>
        // /3.利用XHR異步加載js內(nèi)容并執(zhí)行昭抒,代碼如下
        // 就是利用ajax 實現(xiàn)異步加載數(shù)據(jù)
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'js/defer.json', true)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.status === 200 && xhr.readyState === 4) {
                console.log(xhr.responseText)
            }
        }
    </script>
    <script>
        //4.動態(tài)創(chuàng)建script標簽评也,主要代碼如下
        var script = document.createElement('script');
        script.src = "js/defer.js";
        document.head.appendChild(script)
    </script>
    <script>
        //5.iframe方式,利用iframe加載一個同源的子頁面灭返,讓子頁面內(nèi)的js影響當(dāng)前父頁面的一種方式盗迟。
    </script>

10.在js中什么是偽數(shù)組和轉(zhuǎn)真實數(shù)組

<body>
    <div class="li">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div>
    <script>
        /**偽數(shù)組(類數(shù)組):無法直接調(diào)用數(shù)組方法或期望 length
         * 屬性有什么特殊的行為,
         * 但仍可以對真正數(shù)組遍歷方法來遍歷它們熙含。
         * 典型的是函數(shù)的 argument 參數(shù)罚缕,還有像調(diào)用
         *
         */
        var li = document.getElementsByTagName('li');
        console.log('偽數(shù)組 // 不能執(zhí)行 push pop 等方法  ')
        console.log(li)
        //方法1
        var li2 = Array.prototype.slice.call(li)
        console.log(li2.push('asd'))
        console.log(li2)
        //方法2
        var li3 = Array.from(li)
        console.log(li3.push('方法3'))
        console.log(li3)
    </script>
</body>

11.promise封裝axios

        //  import Axios from 'axios';
        function axios(params) {
            return new Promise((reslove, reject) => {
                Axios({
                    method: params.type || 'get',
                    url: params.url || '',
                    data: params.data,
                    baseURL: params.base,
                    headers: params.headers || {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    }
                }).then(res => {
                    switch (expression) {
                        case expression:
                            reslove(res)
                            break;
                        default:

                    }
                }).catch(err => {
                    reject(err)
                })
            })
        }

12.axios

        // 1. axios 是什么
        // 是一個基于用于操作請求發(fā)送數(shù)據(jù)的模塊
        // 是一個基于promise 把 ajax 封裝 的一個模塊

        // 2. 如何使用
        //  yarn add axios|| npm install  -save axios 
        // import Axios from 'axios'

        // 3. 描述用其實現(xiàn)注冊功能
        //    -  先下載axios
        //    -  引入axios
        //    -  實現(xiàn)布局
        //    -  請求后臺接口  把需要的參數(shù)傳遞上去
        //    -  注冊成功

結(jié)言

這只是本人解決的方法芜繁,還有待補充苇倡,也許會有更好的方法,虛心受教廷雅,學(xué)無止境蚓聘,謝謝
感謝您的查閱腌乡,本文由@于志程整理并總結(jié),代碼冗余或者有錯誤的地方望不吝賜教夜牡;菜鳥一枚与纽,請多關(guān)照
點個關(guān)注把 咻咻咻
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子渣锦,更是在濱河造成了極大的恐慌硝岗,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袋毙,死亡現(xiàn)場離奇詭異型檀,居然都是意外死亡,警方通過查閱死者的電腦和手機听盖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門胀溺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人皆看,你說我怎么就攤上這事仓坞。” “怎么了腰吟?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵无埃,是天一觀的道長。 經(jīng)常有香客問我毛雇,道長嫉称,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任灵疮,我火速辦了婚禮织阅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘震捣。我一直安慰自己荔棉,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布蒿赢。 她就那樣靜靜地躺著润樱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪羡棵。 梳的紋絲不亂的頭發(fā)上壹若,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音晾腔,去河邊找鬼。 笑死啊犬,一個胖子當(dāng)著我的面吹牛灼擂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播觉至,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼剔应,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起峻贮,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤席怪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后纤控,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挂捻,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年船万,在試婚紗的時候發(fā)現(xiàn)自己被綠了刻撒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡耿导,死狀恐怖声怔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情舱呻,我是刑警寧澤醋火,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站箱吕,受9級特大地震影響芥驳,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜殖氏,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一晚树、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧雅采,春花似錦爵憎、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至巴刻,卻和暖如春愚铡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背胡陪。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工沥寥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人柠座。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓邑雅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親妈经。 傳聞我的和親對象是個殘疾皇子淮野,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容