编写大型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

这个前端平时绝对忽略

自定义标签 才是最重要的

一个自定义标签 对应一个对象

有时候源码的复杂度总是那么大 大到无法想象