前端乱炖，总结一些细节点

时间 2019-11-22

标签前端总结一些细节繁體版

原文原文链接

总结一下前端方面，本身的一些体会，乱七八糟的整理了一下，暂时就想到了这些，之后会持续更新。css

构建工具必定要用，gulp等。使用requireJS、browserify等 js模块管理，bower管理三方库html

css：前端

　结构：ios

使用less，文件结构参考bootstrap less源文件
尽可能多分less文件，按照用途、分类等命名，尽可能让一个less文件的代码少一点，文件多一点，这样后期好维护和查询

　三方库：css3

使用bower下载三方库，若是有须要修改调整三方库的类，引入三方库的less源文件，覆盖一些三方库的类

　　（不要修改源文件，只是利用优先级方式本身修改一些类）web

　　以下，去boostrap入口文件本身添加一些less：gulp

@import "../../bower/bootstrap/less/mixins.less";
@import "../../bower/bootstrap/less/variables.less";
@import "variables.less";//my setting
@import "../../bower/bootstrap/less/normalize.less";
@import "../../bower/bootstrap/less/utilities.less";
@import "../../bower/bootstrap/less/type.less";
@import "../../bower/bootstrap/less/grid.less";
@import "../../bower/bootstrap/less/scaffolding.less";
@import "../../bower/bootstrap/less/buttons.less";
@import "../../bower/bootstrap/less/button-groups.less";
@import "../../bower/bootstrap/less/forms.less";



//my @import "buttons.less"; @import "form.less"; @import "scaffolding.less";

　命名：bootstrap

命名用中杠隔开，例如：.layout-text。
同时，我以为自定义class必须在前面加前缀，好比项目叫 sun light，那前缀就是.sl，实际就是.sl-layout-text。或者也能够是公司名的英文开头、也或者本身的，具体根据项目状况。

这样有个好处，由于通常都会用到三方的css库，当自定义的类和三方类混在html中的时候，一下就能看出哪一个是本身定义的，很是方便维护和理清页面。less

根据不一样状况，也能够不加上自定义前缀，好比（只须要在最上层加上一个前缀）：

<ul class="xx-user-comments">
　　<li>
　　　　<div class="con">
　　　　　　<img class="head">
　　　　　　<p></p>
　　　　</div>
　　</li>
</ul>
.xx-user-comments{//xx表明须要的前缀
    li{
        padding-top: 15px;
        .con{
            position: relative;
            padding-left: 45px;
            .head{
                position: absolute;
                left: 0;
                top: 0;
            }
            p{
                font-size: 14px;
            }
        }
    }
}

图片命名也建议用中杠隔开

　代码：dom

严谨，布局时尽可能写的完善，好比该写宽高的地方必定要写，不然会出现一些想不到的错乱。
充分理解行内元素和块级元素，尽可能少用并合理利用float。
ID class style !important等选择器，理解他们的优先级
能抽离为class的通用属性尽可能抽离
能写变量的地方尽可能写变量，能够帮助少写代码和后期维护，以下（若是路径变更，只须要改变量，用编辑器批量修改也能够，只是下面这样更优雅一点）：

//##IMG
@img-path:      '../img';

//img button
@weixin:        '@{img-path}/weixin@2x.png';
@weixin-hover:  '@{img-path}/weixin-hover@2x.png';
@qq:            '@{img-path}/qq@2x.png';
@qq-hover:      '@{img-path}/qq-hover@2x.png';
@weibo:         '@{img-path}/weibo@2x.png';
@weibo-hover:   '@{img-path}/weibo-hover@2x.png';

通常页面的色系是设计师肯定了的，把全部要用到的颜色写成变量，统一管理
采用如下盒子模式，元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

注意一些冷门的css3属性，能够解决一些麻烦的问题，好比以前遇到一个问题，用user-select就解决了。《移动端 ios 长按复制兼容方案》
推荐使用webfont
试试rem

js：

根据页面，模块划分目录结构
jq的变量用$符号开头
使用全局js变量加上window，好比: window.map,目的是后期维护，一眼就能知道这个是全局变量，节约一些看代码的时间
注意异步和同步对逻辑形成的影响
用变量来存储JQ或原生选择器选择的要屡次调用的dom，优化性能
学会封装一些工具类，减小开发成本
搞清做用域的变化状况
移动端也推荐用JQ，不用zepto
使用requireJS、browserify等模块管理工具来管理js
移动端记得使用fastclick

html：

抽离公用模块，footer、header、modal等
当心代码换行形成的文字空格问题
感叹号等符号尽可能用英文符号，中文符号间距较大，致使一些居中效果看起来没居中
使用模板继承，好处大大的
别再用超级长的document申明了，看到就受不了，直接<!doctype html>
dom的display：none的时候，去操做它，会容易有一些问题出现

思想：

不要太追求技术的流行程度，不要跟风，多作对比，使用适合项目的技术
页面中别用太多动效，动的多了反而头晕，不要为了技术而在项目中炫技
别敷衍了事，有问题别以为本身解决不了，敢于承担，一点点发掘，多注意细节，总会解决的
遇到需求先找网上有没有合适的三方插件，有就用，效率优先；没有就本身写，其实很是有趣味
思考清楚再下手，边试边写，效率低，bug多
多看文档，多补知识，不要依赖问人，费时间且没有成长
不推荐买一大堆书，而后都没看完
推荐写博客，比网上或者当面技术交流有效果
多了解非技术的知识，我的成长的瓶颈每每不是技术
融入团队，站在什么层面想问题，最后就在什么层面作事情
最后一点：遇到喜欢的妹纸不要怂

欢迎留言补充，关于一些细节的注意点、怪异状况等等

以上只是一些点，每一个点均可以延伸不少知识。