前端开发 TIPs & PITs (持续更新)

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结果为undefined，
是因为response中的请求头信息中Context Type所指定的数据与真正返回的数据不一致。
浏览器层进行检查时发现与头信息中指定的不匹配，
拦截返回，
执行error方法且data，error，config等个字段均为 undefiend
解决方案：引入promise，用catch处理异常

2. 及时修改 download 项目的 .git 文件

从git上down一个项目，应及时修改.git文件，.git的文件夹不可视，很容易遗忘，造成代码外泄

3. 设置当<img src="">为空时, 不显示图片

img[src=""]{
    opacity: 0;
}

常用于解决 循环列表出来时,点击选中某个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('暂无可购买产品,请联系我们处理')
        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： 文档节点、document、window 或 XMLHttpRequest.
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
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 可以是数字、关键词或公式。

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
p:nth-child(odd) {
    background:#ff0000;
}
p:nth-child(even) {
    background:#0000ff;
}

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
p:nth-child(3n+0) {
    background:#ff0000;
}

 > 6-1. :nth-of-type() 选择器【特定类型】

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. 用法类似 :nth-child(n)

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-of-type(odd) {
    background:#ff0000;
}
p:nth-of-type(even)  {
    background:#0000ff;
}

7. css 的 initial 值

initial 关键字用于设置 CSS 属性为它的默认值。可用于任何 HTML 元素上的任何 CSS 属性。
常用于css样式发生覆盖时恢复默认值

在这里，设置div的颜色为红色，因为继承性，原本span文字也是红色，我们可以利用initial让颜色回归默认值
<div>
    <span> hello world </span>
</div>

div {
    color: red;
}
span {
    color: initial;
}

8. 用https访问的项目，不能调用http的接口

用https访问的网页，请求需要验证证书，
SSL证书对网页代码的安全性要求非常高，用http调用外部链接时将被拦截（block）
将http调用方式换成https调用即可解决该问题

9. 栏目或产品点击响应效果

例如实现 点击栏目时 呈现背景为黑色5%透明效果
.line:active {
    background-color: rgba(0,0,0,.05);
}

10. 移动端 REM布局问题

rem布局非常流行，优点也特别明显，能处理绝大部分的适配问题；
但 rem 也不是万能的，以下就是我在开发时遇到过的问题：

1. 用户修改字体大小，强行改变手机逻辑像素表现形式，rem布局不能感知这种状态，会出现元素偏移的现象
2. 当用户切换横竖屏需要展示不同效果时，rem无法实现。
解决办法：
问题1 可以配合css位置属性 或局部使用其他的的布局方式（如以下将要介绍的 flex布局）调整恢复；
问题2 可以使用媒体查询 或通过js动态修改样式。

11. javascript获取用户IP地址

1. 引入接口文件
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>

2. 在你要用的地方打印如下信息即可
{ 
    "ip": returnCitySN["cip"],
    "city": returnCitySN["cname"] 
}

12. CSS实现大小写转换

将第一个p元素的值转换换成大写显示，该转换不会改变原始变量值。
p:first-child {
    text-transform: uppercase;
}

再如：第二个p元素转成小写 和 最后一个p首字母大写
p:nth-child(2) { text-transform: lowercase; }
p:last-child { text-transform: capitalize; }

13. 验证用户手机时间防篡改

1. 获取用户本地时间
2. 给服务端发送一个http请求(ajax请求)，获取头信息

xhr.getAllResponseHeaders();//返回全部头信息,string
xhr.getResponseHeader('date');

根据返回的头信息和用户的本地时间对比，如果超出允许误差范围，则用户发生篡改行为。
注：目前只有ajax能查看头信息

13. 万能居中transfrom方案的不适用场景

transform方案的居中办法如下：
.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
因为要先偏移父容器的50%，当父容器的 width/2 不能足以存放son元素时，
会出现换行现象，即使用transform拉回来也没用，transform只是元素显示做了偏移，
实际所占用位置并未发生改变，还是parent所剩下的另外的50%空间。
-----------------------------------------------
【更新】
该问题为一个误区，其实只要设置 .son 的 width 为 100 即可。

14. border-radius 居然真的有8个值

// 来实现一个半圆
<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;
}
运行显示结果不理想，修改：
span {
    width: 100%;
    height: 50%;
    border-radius: 50% 50% 0 0;
}
运行显示结果还是不理想，修改：
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  是指 继承父元素的值，这个大家都懂，但我在开发时遇到这种情况：
将position 设置为 absolute，然后如果该元素放置在
具有不同背景颜色两个父元素之上，他居然呈现了两个颜色，
即跟随父元素变化。厉害了。

 

16. javascript向页面输出内容的几种办法

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() 对一个数做四舍五入
1. Math.floor(x)   // floor() 对一个数进行下舍入
2. Math.ceil(x)    // ceil() 对一个数进行上舍入
3. Math.random(x)    // random() 返回介于 0 ~ 1 之间的一个随机数
4. Math.abs(x)   // abs() 返回一个数的绝对值
5. Math.max(a, b)   // max() 返回两个数的较大者
6. Math.min(a, b)   // min() 返回两个数的较小者
7. Math.valueOf(x)   // valueOf() 返回一个数的原始值

 

18. JSON.stringify() 报错 cyclic object value

// 这是一个典型的循环引用的错误，一个对象里引用自己就会立刻得到这个错误，看一个实例
obj = { x:"a", y: "b" };
obj.child = obj;
try{
    json = JSON.stringify(obj);
    alert(json)
}catch(e){
    alert(e);
}
上例中，obj是一个对象，且obj有个属性child，指向的是obj自身，产生循环调用

解决办法：
除自身调用属性外，其他属性赋值到另一个对象上，
利用stringify的第二个参数，传一个处理器进去。代码如下

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`的区别是，
前者只选择下一级元素，后者则选择`div`下所有子元素中为`p`元素的标签。
2. **p + span**
  选择紧随`p`元素的`span`元素，`p`与`span`是同级关系。

 

20. JS 用户响应事件中的this

在javascript中，用户点击页面元素是触发的响应时间函数中的 this 其实等同于 e.target
回顾 e.target，其实指向的就是事件触发元素，与 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. 如何有效打印异常的内容

  当程序执行过程种发生异常，通常会在浏览器控制台打印红色错误信息，并且阻断逻辑的向下执行，致使页面显示异常。
  有时候我们并不想阻断程序执行，哪里出错了只是哪个部位显示异常或给用户友好提示即可，不影响其他地方的展示，这就要求我们在异常出现的地方捕获异常。捕获后，解析器跳过了错误位置继续执行，程序是表现正常了，但开发人员不知道问题出在那里了，要花大量时间去排查，因此，最好我们要在捕获异常的位置将其以信息方式打印出现在控制台，方便开发人员维护。打印办法如下：

try () {
  // TODO...
} catch(e) {
  // TODO...
  console.error(e.name +': \n\n' + e.message); 
  // console.log()也可以，error()方法能打印出红色信息并告知方法和路径
}

 

23. 判断内容是否为数字

  isNaN() 方法能判断内容是否为数字，如果不是返回 true， 否者返回false。 但有一个特殊情况，如果是boolean值，则返回 true

isNaN(5);  // false
isNaN('a');  // true
isNaN(undefined)  // true
// 特殊情况
isNaN(false);  // true
isNaN(true);  // true