JS - 閉包
function outer(greet) {
var str = greet || 'Hello';
return function (person) { // 閉包
str = str + (person ? ' ' + person : ' World');
return str;
}
}
var greeting = outer('Hi');
alert(greeting('Lucy')); // Hi Lucy
1. HTTP code undefined
http請求返回的status結(jié)果為undefined，
是因為response中的請求頭信息中Context Type所指定的數(shù)據(jù)與真正返回的數(shù)據(jù)不一致。
瀏覽器層進行檢查時發(fā)現(xiàn)與頭信息中指定的不匹配，
攔截返回，
執(zhí)行error方法且data，error，config等個字段均為 undefiend
解決方案：引入promise，用catch處理異常
2. 及時修改 download 項目的 .git 文件
從git上down一個項目，應及時修改.git文件，.git的文件夾不可視，很容易遺忘，造成代碼外泄
3. 設置當<img src="">為空時, 不顯示圖片
img[src=""]{
opacity: 0;
}
常用于解決 循環(huán)列表出來時,點擊選中某個item顯示選中圖標,而其他的圖標如果src為空,h5會默認有一個小方格子,那是因為我們設置了width和height. 為了去除這個默認樣式,我們可以采取以下代碼
html代碼
<div class="line" each="{p in prods}" onclick="{ccards}">
<div class="line middle">
<div class="ct">{p.productName}</div>
<div class="cp">{p.price}</div>
<img class="l-m" id="{p.flag}"></img>
</div>
<div class="split-2"></div>
</div>
javascript代碼
var on = 'img/chose.jpg'
var off = ''
getProducts(gSuc)
function gSuc() {
if (PRD_CACHE.length == 0) {
tip('暫無可購買產(chǎn)品,請聯(lián)系我們處理')
return
}
self.update({
prods: PRD_CACHE
})
for(var i=0; i<PRD_CACHE.length; i++) {
document.getElementById(PRD_CACHE[i].flag).src = PRD_CACHE[i].flag == 1 ? on : off
}
}
// 思路源于事件委托, 但點擊事件e.target會隨著點擊到不同目標而變化, 而e.item則不會.
function switch(e) {
for(var i=0; i<PRD_CACHE.length; i++) {
document.getElementById(PRD_CACHE[i].flag).src = e.item.p.flag == PRD_CACHE[i].flag ? on : off
}
}
css代碼
img[src=""] {
opacity: 0;
}
4. addEventListener的使用方式
target.addEventListener(type,listener,useCapture);
target： 文檔節(jié)點、document、window 或 XMLHttpRequest.
type： 字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture ：是否使用捕捉，一般用 false 。
例如：
document.getElementById("testText").addEventListener("keydown", function (event) {
alert(event.keyCode);
}, false);
5. color 的 transparent 值
color、background-color、border-color等帶有color的屬性均有 transparent 值
表示的是： 全黑色透明，即 rgba(0,0,0,0)
6. CSS3 :nth-child() 選擇器
:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型。
n 可以是數(shù)字、關鍵詞或公式。
Odd 和 even 是可用于匹配下標是奇數(shù)或偶數(shù)的子元素的關鍵詞（第一個子元素的下標是 1）。
p:nth-child(odd) {
background:#ff0000;
}
p:nth-child(even) {
background:#0000ff;
}
使用公式 (an + b)。描述：表示周期的長度，n 是計數(shù)器（從 0 開始），b 是偏移值。
在這里，我們指定了下標是 3 的倍數(shù)的所有 p 元素的背景色：
p:nth-child(3n+0) {
background:#ff0000;
}
?> 6-1. :nth-of-type() 選擇器【特定類型】
:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素. 用法類似 :nth-child(n)
在這里，我們?yōu)槠鏀?shù)和偶數(shù) p 元素指定兩種不同的背景色：
p:nth-of-type(odd) {
background:#ff0000;
}
p:nth-of-type(even) {
background:#0000ff;
}
7. css 的 initial 值
initial 關鍵字用于設置 CSS 屬性為它的默認值?？捎糜谌魏?HTML 元素上的任何 CSS 屬性。
常用于css樣式發(fā)生覆蓋時恢復默認值
在這里，設置div的顏色為紅色，因為繼承性，原本span文字也是紅色，我們可以利用initial讓顏色回歸默認值
<div>
<span> hello world </span>
</div>
div {
color: red;
}
span {
color: initial;
}
8. 用https訪問的項目，不能調(diào)用http的接口
用https訪問的網(wǎng)頁，請求需要驗證證書，
SSL證書對網(wǎng)頁代碼的安全性要求非常高，用http調(diào)用外部鏈接時將被攔截（block）
將http調(diào)用方式換成https調(diào)用即可解決該問題
9. 欄目或產(chǎn)品點擊響應效果
例如實現(xiàn) 點擊欄目時 呈現(xiàn)背景為黑色5%透明效果
.line:active {
background-color: rgba(0,0,0,.05);
}
10. 移動端 REM布局問題
rem布局非常流行，優(yōu)點也特別明顯，能處理絕大部分的適配問題；
但 rem 也不是萬能的，以下就是我在開發(fā)時遇到過的問題：
1. 用戶修改字體大小，強行改變手機邏輯像素表現(xiàn)形式，rem布局不能感知這種狀態(tài)，會出現(xiàn)元素偏移的現(xiàn)象
2. 當用戶切換橫豎屏需要展示不同效果時，rem無法實現(xiàn)。
解決辦法：
問題1 可以配合css位置屬性 或局部使用其他的的布局方式（如以下將要介紹的 flex布局）調(diào)整恢復；
問題2 可以使用媒體查詢 或通過js動態(tài)修改樣式。
11. javascript獲取用戶IP地址
1. 引入接口文件
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
2. 在你要用的地方打印如下信息即可
{
"ip": returnCitySN["cip"],
"city": returnCitySN["cname"]
}
12. CSS實現(xiàn)大小寫轉(zhuǎn)換
將第一個p元素的值轉(zhuǎn)換換成大寫顯示，該轉(zhuǎn)換不會改變原始變量值。
p:first-child {
text-transform: uppercase;
}
再如：第二個p元素轉(zhuǎn)成小寫 和 最后一個p首字母大寫
p:nth-child(2) { text-transform: lowercase; }
p:last-child { text-transform: capitalize; }
13. 驗證用戶手機時間防篡改
1. 獲取用戶本地時間
2. 給服務端發(fā)送一個http請求(ajax請求)，獲取頭信息
xhr.getAllResponseHeaders();//返回全部頭信息,string
xhr.getResponseHeader('date');
根據(jù)返回的頭信息和用戶的本地時間對比，如果超出允許誤差范圍，則用戶發(fā)生篡改行為。
注：目前只有ajax能查看頭信息
13. 萬能居中transfrom方案的不適用場景
transform方案的居中辦法如下：
.parent {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
因為要先偏移父容器的50%，當父容器的 width/2 不能足以存放son元素時，
會出現(xiàn)換行現(xiàn)象，即使用transform拉回來也沒用，transform只是元素顯示做了偏移，
實際所占用位置并未發(fā)生改變，還是parent所剩下的另外的50%空間。
-----------------------------------------------
【更新】
該問題為一個誤區(qū)，其實只要設置 .son 的 width 為 100 即可。
14. border-radius 居然真的有8個值
// 來實現(xiàn)一個半圓
<div>
<span></span>
</div>
// 簡單辦法，但因為寫死了大小，不好復用，我們希望span能自適應。
div {
width: 100px;
height: 100px;
}
span {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
// 用百分比設置
span {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
}
運行顯示結(jié)果不理想，修改：
span {
width: 100%;
height: 50%;
border-radius: 50% 50% 0 0;
}
運行顯示結(jié)果還是不理想，修改：
50%也不行，100%也不行，那么我可不可以設置兩個值，分別對應一條邊呢？
答案是可以的，如下：
span {
width: 100%;
height: 50%;
border-top-left-radius: 50% 100%; // 注意先top再left
border-top-left-radius: 50% 100%;
}
bingo，正確
?
15. CSS 顏色屬性值 transparent的特殊案例
color: transparent 是指 繼承父元素的值，這個大家都懂，但我在開發(fā)時遇到這種情況：
將position 設置為 absolute，然后如果該元素放置在
具有不同背景顏色兩個父元素之上，他居然呈現(xiàn)了兩個顏色，
即跟隨父元素變化。厲害了。
?
16. javascript向頁面輸出內(nèi)容的幾種辦法
1. alert('output_msg_1')
2. console.log('output_msg_2')
3. document.getElementById('myId').innerHTML='output_msg_3'
4. document.write('output_msg_4')
?
17. Math的幾個常用方法
0. Math.round(x) // round() 對一個數(shù)做四舍五入
1. Math.floor(x) // floor() 對一個數(shù)進行下舍入
2. Math.ceil(x) // ceil() 對一個數(shù)進行上舍入
3. Math.random(x) // random() 返回介于 0 ~ 1 之間的一個隨機數(shù)
4. Math.abs(x) // abs() 返回一個數(shù)的絕對值
5. Math.max(a, b) // max() 返回兩個數(shù)的較大者
6. Math.min(a, b) // min() 返回兩個數(shù)的較小者
7. Math.valueOf(x) // valueOf() 返回一個數(shù)的原始值
?
18. JSON.stringify() 報錯 cyclic object value
// 這是一個典型的循環(huán)引用的錯誤，一個對象里引用自己就會立刻得到這個錯誤，看一個實例
obj = { x:"a", y: "b" };
obj.child = obj;
try{
json = JSON.stringify(obj);
alert(json)
}catch(e){
alert(e);
}
上例中，obj是一個對象，且obj有個屬性child，指向的是obj自身，產(chǎn)生循環(huán)調(diào)用
解決辦法：
除自身調(diào)用屬性外，其他屬性賦值到另一個對象上，
利用stringify的第二個參數(shù)，傳一個處理器進去。代碼如下
obj = { x:555, y: "hi" };
obj.myself = obj;
obj.myself={a:'hello'};
var d = print(obj)
alert(d);
function print(obj){
try{
seen = [];
json = JSON.stringify(obj, function(key, val) {
if (typeof val == "object") {
if (seen.indexOf(val) >= 0) return;
seen.push(val)
}
return val;
});
return json;
}catch(e){
return e;
}
}
?
19. CSS3 選擇器新特性 > 和 +
1. **div > p**
  選擇`div`下一級的所有`p`元素。他與 `div p`的區(qū)別是，
前者只選擇下一級元素，后者則選擇`div`下所有子元素中為`p`元素的標簽。
2. **p + span**
  選擇緊隨`p`元素的`span`元素，`p`與`span`是同級關系。
?
20. JS 用戶響應事件中的this
在javascript中，用戶點擊頁面元素是觸發(fā)的響應時間函數(shù)中的 this 其實等同于 e.target
回顧 e.target，其實指向的就是事件觸發(fā)元素，與 this 所意相同。
?
21. IOS/Safari 適配 - 對日期初始化設置的限制
ios 初始化日期時必須把年月日全部寫上, 否則初始化不成功并顯示NaN
例子: var date = new Date('2018/03');
在ios下返回date是個NaN, 在chrome和ff上則正常;
ios下必須設置 var date = newDate('2018/03/01') 這樣,
并且,必須用'/'分割, 不能用',' 或者'-'分隔
?
22. IOS 橡皮筋效果問題
? IOS 橡皮筋效果問題可以給最外層fixed定位，這種方式并沒有阻止拖動效果，而是隱藏了橡皮筋效果，同時也帶來了不易拖動的問題
?
23. 如何有效打印異常的內(nèi)容
? 當程序執(zhí)行過程種發(fā)生異常，通常會在瀏覽器控制臺打印紅色錯誤信息，并且阻斷邏輯的向下執(zhí)行，致使頁面顯示異常。
? 有時候我們并不想阻斷程序執(zhí)行，哪里出錯了只是哪個部位顯示異?；蚪o用戶友好提示即可，不影響其他地方的展示，這就要求我們在異常出現(xiàn)的地方捕獲異常。捕獲后，解析器跳過了錯誤位置繼續(xù)執(zhí)行，程序是表現(xiàn)正常了，但開發(fā)人員不知道問題出在那里了，要花大量時間去排查，因此，最好我們要在捕獲異常的位置將其以信息方式打印出現(xiàn)在控制臺，方便開發(fā)人員維護。打印辦法如下：
try () {
// TODO...
} catch(e) {
// TODO...
console.error(e.name +': \n\n' + e.message);
// console.log()也可以，error()方法能打印出紅色信息并告知方法和路徑
}
?
23. 判斷內(nèi)容是否為數(shù)字
? isNaN() 方法能判斷內(nèi)容是否為數(shù)字，如果不是返回 true， 否者返回false。 但有一個特殊情況，如果是boolean值，則返回 true
isNaN(5); // false
isNaN('a'); // true
isNaN(undefined) // true
// 特殊情況
isNaN(false); // true
isNaN(true); // true
