120前端小疑難雜症(補充中)

1、中劃線顯示成下劃線，是font-family:Arial;的問題，可把」Arial「換成」微軟雅黑, PingFangSC-Regular, sans-serif「中的一個或多個都可

2、var str="this is GuShi";根據str的長度，動態設置<div>str</div>的寬度，有可能使GuShi換到下一行，用這樣的代碼解決str.split(' ').join('<span style="visibility:hidden">,</span> ')

3、指針、地址、引用

4、點擊input，在它下面出現日期時間面板，點擊input和麪板之外的地方，面板消失。

方案1、在頁面上方添加一個透明蒙版，蒙版上方添加面板，點擊蒙版時，蒙版和麪板都消失
方案2、給input綁定onblur事件，該事件觸發時，面板消失。
5、Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。

6、若是在label元素內點擊文本，瀏覽器就會自動將焦點轉到和標籤關聯的表單控件上。

7、angular的directive執行流程：（1）自定義標籤屬性傳參，（2）相關js接受參數，（3）相關html接收參數。

8、當咱們在事件處理函數中改變和調整state的值時，React會自動調用render()方法實現視圖的刷新。

9、」函數執行「的代碼外面，再包裹一層函數，涉及」先觸發，後執行「與」先執行，後觸發「的問題。

10、debugger調試工具說明
來源https://www.cnblogs.com/xiaoqi2018/p/10832069.html
(1)F8:進入下個斷點
(2)F10:忽略代碼內部實現，進入下個方法
(3)F11:單步調試，逐行執行
(4)shift+F11:跳出當前函數內部，執行下一步

11、彈窗拉伸：{padding-bottom:20px;resize:horizontal;}

12、滾動條擠佔內容寬度、破壞佈局的解決方案
(1)問題:當內容增多，滾動條從無到有時，它的出現擠壓了內容寬度，致使原來設計好的佈局被破壞。
(2)緣由:滾動條的寬度是計算到內容 content 裏的。
(3)解決思路:增長一箇中間層，使得外部容器寬度保持設計寬度，內部元素排列保持不變。

13、myObject.getBoundingClientRect()返回(可視區內)盒子四邊與視口頂部或左側之間的距離，超出可視區的那部分盒子不算。
(1)myObject.getBoundingClientRect().top:盒子頂部與視口頂部之間的距離
(2)myObject.getBoundingClientRect().right:盒子右側與視口左側之間的距離
(3)myObject.getBoundingClientRect().bottom:盒子底部與視口頂部之間的距離
(4)myObject.getBoundingClientRect().left:盒子左側與視口左側之間的距離

14、實際運用
var this_bottom_top = $(this).get(0).getBoundingClientRect().bottom;
var footer_top_top = $('#footer').get(0).getBoundingClientRect().top;
var height = $('#ul' + id).height();
if (footer_top_top - this_bottom_top < height) {
$('#ul' + id).css({
'top': '',
'bottom': '24px'
});
}

14、在angular1中，運行$http().then().catch().finally()；then和catch兩個函數同時被觸發了，產生這一現象的緣由是什麼？
(1)若是$http()的返回值中有3XX、4XX、5XX等報錯狀態碼，那麼就直接執行catch，不然就執行then
(2)若是then中，有人爲拋錯，那麼也會執行catch，否者不會執行catch
(3)promise內部的錯誤，不會影響外面的代碼。

15、var ary=[1,2,3]
console.log(2 in ary)//true

16、return fn(Parma)與return 'fn(Parma)'的區別
（1）前者返回函數fn的執行結果，後者返回字符串，
（2）有時候函數的實參須要在這個地方傳入，在其它地方運行時，能夠按照後者方式處理
（3）當須要把這個字符串當函數語句運行的時候，只需把這個字符串放在eval()裏便可
（4）也能夠把字符串的形式寫成這種形式:111111

17、 new Object()和 Object.create()
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
// new Object() 方式建立
var a = { rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {}
console.log(b.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__.__proto__)
// Object.create() 方式建立
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b) // {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__.__proto__)

18、原型鏈
var obj = {}
function fn(){}
//一、對象與函數的原型
obj.__proto__ === Object.prototype;
fn.__proto__ === Function.prototype;
fn.prototype={};
fn.prototype.__proto__ === Object.prototype
//二、對象類與函數類的原型
Object.prototype={};
Object.prototype.__proto__ === null;
Function.prototype={};
Function.prototype.__proto__ === Object.prototype
//三、對象對象與函數對象的原型
Object.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
//https://www.jianshu.com/p/686b61c4a43d

19、使用小插件要注意兩點：1、參數，2、操做

20、前端開發邏輯：
（1）向後臺發送請求，獲取數據
（2）加工數據，可封裝成函數
（3）渲染數據，可封裝成函數
（4）交互，可封裝成函數

21、一個問題
問題描述：

1、問題
一、輸入用戶名和密碼。
二、點擊登陸，後臺返回登陸成功。
三、前端請求默認頁。用代理就會發出這個請求，不用代理就不會發出這個請求。
2、問題緣由
一、lodash.js在打包時，沒有打進去，致使一些方法調用失敗，
二、正常狀況下，這種狀況，控制檯會報錯，但不知道控制檯爲何不報錯
3、問題解決
一、在打包時，加入lodash.js