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
