編寫大型web應用 終於有了一些體會

不少時間 我一直總是發現本身在作一些一樣的事情

千古難題
css
垂直居中
文字text-overflow

js
事件雙擊

甚至我愈來愈不知道本身 爲何頁面寫的一遍又一遍 速度卻一直沒有什麼改善

也許是要解決界面編寫的問題了

重構

多考慮一些人 作頁面通常受制於

1. ui

2. 項目經理

3. 時間

4. 本身的能力

5. 。。。

其實這些問題 就是到如今我都是迷糊的 對於html頁面編寫來講

其實就是能夠看作 只有string list map table chart imafe
這些常見類型

這個列表 你怎麼作

不少ui其實都是有毛病 對於前端

.list {
    &__item {
        margin-top: 10px
    }
}

每一個都去向上 纔是簡單的 這個你怎麼辦

這個只是舉例 辦法不少 用 nth-child 簡單些

list 是個什麼概念

就是 js 中的 array （最多見用法）

.list {
    &__item {
        margin-top: 10px
        &:nth-child(1) {
            margin-top: 0;
        }
    }
}

一個最大限制工做時間的就是 css 你們就算用了sass仍是會寫不少代碼

實際上這些均可以經過 sass 進行處理

首先 sass 自己api 不是不少

你們能夠嘗試個人收集庫 sassstd
還有就是 sassdash http://davidkpiano.github.io/sassdash/sassdoc/index.html#function-_set

@mixin com-zlui-nth-child($nums...) {
    $self: unquote("&");
    $selector: "";
    $len: length($nums);
    @for $i from 1 through $len {
        $num: nth($nums, $i);
        $selector: $selector + unquote("#{$self}:nth-child(#{$num})");
        @if $i < $len {
            $selector: $selector + ",";
        }
    }
    #{$selector} {
        @content;
    }
}

@mixin com-zlui-nth-of-type($nums...) {
    $self: unquote("&");
    $selector: "";
    $len: length($nums);
    @for $i from 1 through $len {
        $num: nth($nums, $i);
        $selector: $selector + unquote("#{$self}:nth-of-type(#{$num})");
        @if $i < $len {
            $selector: $selector + ",";
        }
    }
    #{$selector} {
        @content;
    }
}

@include com-zlui-nth-child(even, unquote("n+1"), 1, 2n) {

}
@include com-zlui-nth-of-type(odd) {

}

由於ide有提示 因此能夠很快寫好 並且能夠自定義語法 更快速 更友好

圖片問題

less 一個很厲害的地方就是能夠 讀取圖片的長度大小

這個 但願你們使用個人庫 sass-zhilizhili

對於這些問題 還有一個比較重要的問題

圖片路徑老是得不到

這個用postcss-assets能夠解決

https://github.com/assetsjs/postcss-assets

text-overflow

文字必定會有超過的問題

一般你們都會寫一個代碼

.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

可是這個是有條件的

要是block

這個前端平時絕對忽略

自定義標籤 纔是最重要的

一個自定義標籤 對應一個對象

有時候源碼的複雜度老是那麼大 大到沒法想象