JS 部分
基本类型
对于类型的进一步判断, 可以参考js类型判断
# typeof
undefined – 未定义
object – 对象或null
# null类型
如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为 null 而不是其他值。这样一来,只要直接检查 null 值就可以知道相应的变了是否已经保存一个对象的引用。
# with使用
延长作用域链
例子1:
function buildUrl(){var qs = "?debug=true";with(location){var url = href + qs;}return url;
}
例子2:(对对象的访问提供便利,但是不能增加属性)
function Lakers() { this.name = "kobe bryant"; this.age = "28"; this.gender = "boy";
}
var people=new Lakers();
with(people)
{ var str = "姓名: " + name + "<br>"; str += "年龄:" + age + "<br>"; str += "性别:" + gender;
}
执行结果如下
姓名: kobe bryant
年龄:28
性别:boy
注意: 使用with / eval,引擎会无法优化,从而导致性能下降,慎用 (参考:你不知道的Javascript上卷)。
# 数组降维
将数组**[** [1, 2, 3], [4, 5], 6 **]**降为一维数组 [ 1, 2, 3, 4, 5, 6 ], 有一个很巧妙的方法
var newArr = [].concat.apply([], arr);
这里仅对 concat方法做一个简单的解释,concat适用于数组拼接, 不改变原数组,返回新的数组,参数接受普通值或者数组:
var arr = [1, 2, 3];console.log(arr.concat(4)); // [1, 2, 3, 4]
console.log(arr.concat(4, 5)); // [1, 2, 3, 4, 5]
console.log(arr.concat([4])); // [1, 2, 3, 4]
console.log(arr.concat([4, 5])); // [1, 2, 3, 4, 5]console.log(arr.concat([[4]])); //[1, 2, 3, [4]]
值得注意的一点是超二维数组需要递归降维。
而重点是apply的用法,apply通常用于和call的对比*(见高级程序设计的5.5.5 函数属性与方法)*,其中描述有:apply()接受两个参数:一个是在其中运行函数的作用域,另一个是参数数组。书中给出的例子:
function sum (num1, num2) {return num1 + num2;
}function callSum(num1, num2) {console.log(sum.apply(this, [num1, num2])); //传入数组
}callSum(10, 20); //30
从这个例子可以看出apply将传入的数组拆开分别传给前面的函数,所以
[].concat.apply([], [ [1, 2, 3], [4, 5], 6])//可以理解为:
[].concat([1,2,3], [4,5], 6)
# 移动端和PC端判断
有时候我们为了更好的适配移动端和PC端,采用两套架构开发,这时候就需要针对不同的平台加载不同的网站。
可以通过如下方式判断:
var isMobile = /Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent) ? true : false;
CSS 部分
# table元素内部强制不换行,并滚动
//强制不换行white-space: nowrap;// display: table会导致内部不滚动display: block;overflow-x: auto;
# display: inline-block 莫名其妙出现的样式差
有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-block的元素之间会存在“4px”的空白间距。
原文: https://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements © w3cplus.com
可以通过设置父元素font-size为0来解决,但是safri浏览器问题仍然存在。
可以用 float 替换 Inline-block,但是记得清除浮动
# 清除浮动
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0;
}
.clearfix{ zoom:1 }
# 其他
user-select: none; // 文本不被选中
outline: none; //去掉输入框
项目中遇到的问题
-
jquery animate动画执行中,修改样式失效
修改样式的时候,应该先将该元素动画停止,用stop()方法,然后修改样式。