页面布局
1、如何让Footer固定在页面底部
在页面的设计中，经常会碰到要求footer内容固定在底部。这时候的难点在于body的高度有时候超过了100%有时候低于100%，导致定位上的困难。个人采用的方法如下：
页面结构为:
<body>
<div class="wrap">
<div class="main">
<h1> this is main content.</h1>
</div>
</div>
<div class="footer">
<h1>this is footer.</h1>
</div>
</body>
css代码为：
*{
margin: 0;
padding: 0;
}
html,body{
100%;
height: 100%;
}
.wrap{
100%;
min-height: 100%;
margin-bottom: -100px;
}
.main{
padding-bottom: 100px;
}
.footer{
100%;
height: 100px;
background-color: #abcdef;
}
显示效果如下:
2、scss的使用
第一次正式使用scss，感觉scss的语法还是相对比较简单的，使用方法也不难。同时，能够极大地改善css书写的效率。scss的使用需要安装ruby，然后使用gem安装scss,gem install sass,也可以使用淘宝的镜像，具体安装方法详见:sass的安装.
scss的编译工具个人一般使用国人开发的一款软件koala.个人感觉挺好用的，也可能是没试过其他编译工具的原因。
@charset "UTF-8";
// 设置charset以保证不会出现注释字符错误
/*设置变量*/
$var:12px;
$com:common-class;
body{
font-size: $var;
}
// 应用于class和属性
#{$com}-1{
}
// 嵌套
body{
.wrap{
.test{
100%;
}
//同级使用符号&
&:hover{
color:red;
}
}
}
// 一维数组
$arr1:10px 9px 8px 11px;
// 二维数组
$arr2:(10px 9px) (8px 11px);
//map
$map:(p:20px,h2:30px);
@each $header,$size in $map{
#{$header}{
font-size: $size;
}
}
//mixin
//个人感觉有点像变量的扩展，公用代码块，便于批量修改
@mixin common-block {
margin: 0 auto;
padding: 0;
}
body{
@include common-block;
}
//继承
h3{
@extend .func;
line-height: 30px;
}
// 函数
@function func1($px) {
@return $px+20px;
}
.func{
font-size: func1(20px);
}
// 条件判断
$lt1:20;
$lt2:33;
.if{
@if $lt1>$lt2{
font-size:#{$lt1}px;
}@else{
font-size: #{$lt2}px;
}
}
$list:1 2 3 4;
// for循环
@for $i from 1 through 3{
.item-#{$i}{
$i*200px;
}
}
@each $i in $list{
.each-#{$i}{
$i*200px;
}
}
编译结果如下:
@charset "UTF-8";
/*设置变量*/
body { font-size: 12px; }
body .wrap .test { 100%; }
body .wrap:hover { color: red; }
p { font-size: 20px; }
h2 { font-size: 30px; }
body { margin: 0 auto; padding: 0; }
h3 { line-height: 30px; }
.func, h3 { font-size: 40px; }
.if { font-size: 33px; }
.item-1 { 200px; }
.item-2 { 400px; }
.item-3 { 600px; }
.each-1 { 200px; }
.each-2 { 400px; }
.each-3 { 600px; }
.each-4 { 800px; }
以上是自己最近使用scss的一点心得，出错之处还望不吝指出。
JavaScript
1、数组的运算
项目中越来越多用到数组的运算，总结一下自己用到的内容:
- 数组相加，使用
concat即可，或者使用slice - 数组相减:
function arr_dive(aArr,bArr){ //第一个数组减去第二个数组
if(bArr.length===0){return aArr;}
var diff=[];
var str=bArr.join("""");
for(var e in aArr){
if(str.indexOf(aArr[e])==-1){
diff.push(aArr[e]);
}
}
return diff;
}
- 数组添加使用
push，删除最后一个元素使用pop - 数组排序使用
sort或者reverse - 数组转化为字符串
str=arr.join("");
2、avalon的使用
这是一个类似于angular的js框架，也是使用的MVVM架构，不过学习曲线相对于ng来说简单了不止一点半点，可以说是看下教程基本上就可以入门了。我在项目中使用的是avalon1，在功能上还有很多不完善的地方，不过就数据的双向绑定以及减少DOM操作上来说，收益良多。
使用了avalon之后，在进行复杂交互操作的时候可以进行函数式编程，以避免使用jquery时，在进行dom操作的时候较容易出现bug的情况（我自己的感受是这样的）。具体的avalon教程请参阅迷你MVVM框架 avalonjs 入门教程
其他
1、不要让框架限制自己的思路。框架本身并不是完美的，不能实现所有的定制功能。而且，框架本身可能也不具有实现特定功能的能力。所以，脱离框架进行操作反而能提高自己的工作效率。
2、页面所有的图标使用iconfont以减少资源的请求，可以提高页面的响应速度，减少带宽的消耗。
3、对于兼容性要求较高的页面，避免使用较新的css属性和布局方法（例如：ios微信6.2不支持flexbox布局）
4、在javascript中，添加到页面上的事件处理越多，性能越差。所以，在存在列表中添加事件时，尽量使用事件代理以提高页面性能。