和js前端有趣代碼相關的問題,前端程序員

本文目錄一覽：

• 1、js基礎面試題131-160道題目
• 2、一個前端 Javascript的問題，有點迷，好像沒有問這種問題了，但是問了好多人都模糊其詞？
• 3、web前端開發常遇到的問題有哪些？
• 4、如何使用Node.js處理前端代碼文件的編碼問題
• 5、前端開發，如何寫出優秀js代碼

js基礎面試題131-160道題目

131.用原生 JavaScript 的實現過什麼功能嗎？

參考答案：輪播圖、手風琴、放大鏡、3D動畫效果等，切記，所答的一定要知道實現原理！，不知道還不如不說！

參與互動

132.javascript 代碼中的”use strict”; 是什麼意思 ? 使用它區別是什麼？

參考答案：意思是使用嚴格模式，使用嚴格模式，一些不規範的語法將不再支持

參與互動

133.簡述創建函數的幾種方式

參考答案：

參與互動

134.window.location.search() 返回的是什麼？

參考答案：查詢(參數)部分。除了給動態語言賦值以外，我們同樣可以給靜態頁面, 並使用 javascript 來獲得相信應的參數值 返回值：?ver=1.0id=timlq 也就是問號後面的！

參與互動

135.window.location.hash 返回的是什麼？

參考答案：錨點 ， 返回值：#love ；

參與互動

136.window.location.reload() 作用？

參考答案：刷新當前頁面

參與互動

137.為什麼不能定義 1px 左右的 p 容器？

參考答案： IE6 下這個問題是因為默認的行高造成的，解決的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px

參與互動

138.BOM 對象有哪些，列舉 window 對象？

參考答案：

參與互動

139.簡述 readonly 與 disabled 的區別

參考答案：

參與互動

140.為什麼擴展 javascript 內置對象不是好的做法？

參考答案：

參與互動

141.什麼是三元表達式？“三元”表示什麼意思？

參考答案：三元如名字表示的三元運算符需要三個操作數。

語法是 條件 ? 結果1 : 結果2; .這裡你把條件寫在問號(?)的前面後面跟着用冒號(:)分隔的結果1和結果2。滿足條件時結果1否則結果2。

參與互動

142.我們給一個 dom 同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲

參考答案：所有事件的順序是：其他元素捕獲階段事件 – 本元素代碼順序事件 – 其他元素冒泡階段事件 。

參考

參與互動

144.簡述一下 Handlebars 的基本用法？

參考答案：沒有用過的話說出它是幹什麼的即可

參與互動

143.簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

參考答案：

參與互動

145.前端 templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?

參考答案：

參與互動

146.知道什麼是 webkit 么? 知道怎麼用瀏覽器的各種工具來調試和 debug 代碼么?

參考答案：Webkit 是瀏覽器引擎，包括 html 渲染和 js 解析功能，手機瀏覽器的主流內核，與之相對應的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也稱 MSHTML，IE 使用）。 對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，後台請求信息查看，js 調試工具使用，熟練使用這些工具可以快速提高解決問題的效率

參與互動

147.如何測試前端代碼? 知道 BDD, TDD, Unit Test 么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?

參考答案：了解 BDD 行為驅動開發與 TDD 測試驅動開發已經單元測試相關概念

參與互動

148.JavaScript 的循環語句有哪些？

參考答案：while for do while forEach

參與互動

149.作用域-編譯期執行期以及全局局部作用域問題

參考答案：js 執行主要的兩個階段：預解析和執行期

參與互動

150.如何添加 html 元素的事件，有幾種方法？請列舉

參考答案：直接在標籤里添加；在元素上添加、使用事件註冊函數添加

參與互動

151.列舉瀏覽器對象模型 BOM 里常用的至少 4 個對象，並列舉 window 對象的常用方法至少 5 個

參考答案：

對象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

參與互動

152.事件綁定的方式

參考答案：

參與互動

153.事件循環

參考答案：事件循環是一個單線程循環，用於監視調用堆棧並檢查是否有工作即將在任務隊列中完成。如果調用堆棧為空並且任務隊列中有回調函數，則將回調函數出隊並推送到調用堆棧中執行。

參與互動

154.事件模型

參考答案：

解析：參考

參與互動

155.如何自定義事件

參考答案：

1.原生提供了 3 個方法實現自定義事件 2.createEvent，設置事件類型，是 html 事件還是 鼠標事件 3.initEvent 初始化事件，事件名稱，是否允許冒泡，是否阻止自定義事件 4.dispatchEvent 觸發事件

MDN

參與互動

156.target 和 currentTarget 區別

參考答案：

參與互動

157.prototype 和__proto__的關係是什麼

參考答案：

所有的對象都擁有__proto__屬性，它指向對象構造函數的 prototype 屬性

所有的函數都同時擁有__proto__和 protytpe 屬性 函數的__proto__指向自己的函數實現 函數的 protytpe 是一個對象 所以函數的 prototype 也有__proto__屬性 指向 Object.prototype

Object.prototype.__proto__指向 null

參與互動

158.什麼是原型屬性？

參考答案：從構造函數的prototype屬性出發找到原型，這時候就把原型稱之為構造函數的原型屬性

參與互動

159.什麼是原型對象？

參考答案：從實例的__proto__出發，找到原型，這時候就把原型稱之為實例的原型對象。

參與互動

160.使用 let、var 和 const 創建變量有什麼區別

參考答案：

let 和 const 的區別在於：let 允許多次賦值，而 const 只允許一次。

一個前端 Javascript的問題，有點迷，好像沒有問這種問題了，但是問了好多人都模糊其詞？

1、在{}里的funcion也會提升，提升到全局和代碼塊頂部。並新建局部作用域。

2、當執行到function的聲明語句，會把聲明語句之前的值複製給全局。

3、之後的賦值全是在局部作用域中進行。

web前端開發常遇到的問題有哪些？

前端和後端沒有可比性

前端的開發，如果沒有總體的設計思路，會成為一種碎片似地程序，一個效果一坨代碼，一個功能一灘腳本，一個需求片邏輯，我曾經遇到過，因為ue調整，把整個前端的代碼除了核心數據處理函數保留，其餘的全部修改的情況。

基本上前端的開發，處於dom操作，數據處理，數據交互三部分，如果合理的分配這三部分的功能，那麼前端的代碼就很容易擴展和調整。可惜現在優秀的前端開發者很少，因為前端門檻很低。

那麼接下來我回答挑戰所在：真正的前端開發的挑戰，還在於開發者的思路，兼容性，布局，css js都不是問題，問題在於如何合理的組織語言邏輯，如果正確抽象出需求中的模塊，在如何用代碼處理。清楚的用代碼表達出思路，清楚的寫好注釋，給後續維護者一個可閱讀的思路。

前端的改動量，是後端的數倍，前端沒有絕對，只有跟隨需求不停的修改。

如何使用Node.js處理前端代碼文件的編碼問題

使用 NodeJS 編寫前端工具時，操作得最多的是文本文件，因此也就涉及到了文件編碼的處理問題。我們常用的文本編碼有 UTF8 和 GBK 兩種，並且 UTF8 文件還可能帶有 BOM。在讀取不同編碼的文本文件時，需要將文件內容轉換為 JS 使用的 UTF8 編碼字符串後才能正常處理。

1、BOM 的移除

BOM 用於標記一個文本文件使用 Unicode 編碼，其本身是一個 Unicode 字符（”uFEFF”），位於文本文件頭部。在不同的 Unicode 編碼下，BOM 字符對應的二進制字節如下：

因此，我們可以根據文本文件頭幾個字節等於啥來判斷文件是否包含 BOM，以及使用哪種 Unicode 編碼。但是，BOM 字符雖然起到了標記文件編碼的作用，其本身卻不屬於文件內容的一部分，如果讀取文本文件時不去掉 BOM，在某些使用場景下就會有問題。例如我們把幾個 JS 文件合併成一個文件後，如果文件中間含有 BOM 字符，就會導致瀏覽器 JS 語法錯誤。因此，使用 NodeJS 讀取文本文件時，一般需要去掉 BOM。例如，以下代碼實現了識別和去除 UTF8 BOM 的功能.

2、GBK 轉 UTF8

NodeJS 支持在讀取文本文件時，或者在 Buffer 轉換為字符串時指定文本編碼，但遺憾的是，GBK 編碼不在NodeJS自身支持範圍內。因此，一般我們藉助 iconv-lite 這個三方包來轉換編碼。使用 NPM 下載該包後，我們可以按下邊方式編寫一個讀取 GBK 文本文件的函數。

3、單字節編碼

有時候，我們無法預知需要讀取的文件採用哪種編碼，因此也就無法指定正確的編碼。比如我們要處理的某些 CSS 文件中，有的用 GBK 編碼，有的用 UTF8 編碼。雖然可以一定程度可以根據文件的字節內容猜測出文本編碼，但這裡要介紹的是有些局限，但是要簡單得多的一種技術。

首先我們知道，如果一個文本文件只包含英文字符，比如 Hello World，那無論用 GBK 編碼或是 UTF8 編碼讀取這個文件都是沒問題的。這是因為在這些編碼下，ASCII0~128 範圍內字符都使用相同的單字節編碼。

反過來講，即使一個文本文件中有中文等字符，如果我們需要處理的字符僅在 ASCII0~128 範圍內，比如除了注釋和字符串以外的JS代碼，我們就可以統一使用單字節編碼來讀取文件，不用關心文件的實際編碼是 GBK 還是 UTF8。

前端開發，如何寫出優秀js代碼

每位前端工程師都喜歡易理解、可擴展、易維護的代碼，如何寫出優秀的JavaScript代碼，也是每位前端工程師的功課。如何才能寫出優秀的JavaScript代碼呢？

1.寫代碼前一定要搞清楚你要解決的問題是什麼，你的方案是否能夠解決問題。

2.擁有良好的命名規範，注意變量名區分大小寫，允許包含字母、數字、美元符號（$）和下劃線，但第一個字符不允許是數字，不允許包含空格和其他標點符號。

3.多寫代碼注釋。編寫代碼時的注釋應當盡量全面一些，這便於自己再次瀏覽代碼時好理解。

4.能不使用with語句的時候盡量不要使用with語句，盡量少使用eval ,每次使用eval需要消耗大量時間。

擁有一手好代碼的前端開發者，更具有大神風範，所以好代碼不僅要精鍊，更要易讀。