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

这个前端平时绝对忽略

自定义标签 才是最重要的

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

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