最近項目中的一些總結

時間 2019-11-12

標籤最近項目一些總結简体版

原文原文鏈接

頁面佈局

在頁面的設計中，常常會碰到要求footer內容固定在底部。這時候的難點在於body的高度有時候超過了100%有時候低於100%，致使定位上的困難。我的採用的方法以下：
頁面結構爲:javascript

<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代碼爲：css

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
.wrap{
    width: 100%;
    min-height: 100%;
    margin-bottom: -100px;
}
.main{
    padding-bottom: 100px;
}
.footer{
    width: 100%;
    height: 100px;
    background-color: #abcdef;
}

顯示效果以下:
html

二、scss的使用

第一次正式使用scss，感受scss的語法仍是相對比較簡單的，使用方法也不難。同時，可以極大地改善css書寫的效率。scss的使用須要安裝ruby，而後使用gem安裝scss,gem install sass,也可使用淘寶的鏡像，具體安裝方法詳見:sass的安裝.
scss的編譯工具我的通常使用國人開發的一款軟件koala.我的感受挺好用的，也多是沒試過其餘編譯工具的緣由。java

@charset "UTF-8";
// 設置charset以保證不會出現註釋字符錯誤
/*設置變量*/
$var:12px;
$com:common-class;
body{
    font-size: $var;
}
// 應用於class和屬性
#{$com}-1{

}
// 嵌套
body{
    .wrap{
        .test{
            width: 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}{
        width: $i*200px;
    }
}
@each $i in $list{
    .each-#{$i}{
        width: $i*200px;
    }
}

編譯結果以下:jquery

@charset "UTF-8";
/*設置變量*/
body { font-size: 12px; }

body .wrap .test { width: 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 { width: 200px; }

.item-2 { width: 400px; }

.item-3 { width: 600px; }

.each-1 { width: 200px; }

.each-2 { width: 400px; }

.each-3 { width: 600px; }

.each-4 { width: 800px; }

以上是本身最近使用scss的一點心得，出錯之處還望不吝指出。ios

JavaScript

一、數組的運算

項目中愈來愈多用到數組的運算，總結一下本身用到的內容:編程

數組相加，使用concat便可，或者使用slice
數組相減:

function arr_dive(aArr,bArr){   //第一個數組減去第二個數組
    if(bArr.length===0){return aArr;}
    var diff=[];
    var str=bArr.join("&quot;&quot;");
    for(var e in aArr){
        if(str.indexOf(aArr[e])==-1){
            diff.push(aArr[e]);
        }
    }
    return diff;
}

數組添加使用push，刪除最後一個元素使用pop
數組排序使用sort或者reverse
數組轉化爲字符串str=arr.join("");

二、avalon的使用

這是一個相似於angular的js框架，也是使用的MVVM架構，不過學習曲線相對於ng來講簡單了不止一點半點，能夠說是看下教程基本上就能夠入門了。我在項目中使用的是avalon1，在功能上還有不少不完善的地方，不過就數據的雙向綁定以及減小DOM操做上來講，收益良多。
使用了avalon以後，在進行復雜交互操做的時候能夠進行函數式編程，以免使用jquery時，在進行dom操做的時候較容易出現bug的狀況（我本身的感覺是這樣的）。具體的avalon教程請參閱迷你MVVM框架 avalonjs 入門教程數組

其餘

一、不要讓框架限制本身的思路。框架自己並非完美的，不能實現全部的定製功能。並且，框架自己可能也不具備實現特定功能的能力。因此，脫離框架進行操做反而能提升本身的工做效率。

二、頁面全部的圖標使用iconfont以減小資源的請求，能夠提升頁面的響應速度，減小帶寬的消耗。

三、對於兼容性要求較高的頁面，避免使用較新的css屬性和佈局方法（例如：ios微信6.2不支持flexbox佈局）

四、在javascript中，添加到頁面上的事件處理越多，性能越差。因此，在存在列表中添加事件時，儘可能使用事件代理以提升頁面性能。

相關標籤/搜索