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

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

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

 

css：

　结构：

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

　三方库：

  • 使用bower下载三方库，如果有需要修改调整三方库的类，引入三方库的less源文件，覆盖一些三方库的类

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

　　如下，去boostrap入口文件自己添加一些less：

　　　　

@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";

 

　命名：

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

这样有个好处，因为一般都会用到三方的css库，当自定义的类和三方类混在html中的时候，一下就能看出哪个是自己定义的，非常方便维护和理清页面。

  • 根据不同情况，也可以不加上自定义前缀，比如（只需要在最上层加上一个前缀）：

　　

<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;
            }
        }
    }
}

 

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

　代码：

  • 严谨，布局时尽量写的完善，比如该写宽高的地方一定要写，否则会出现一些想不到的错乱。
  • 充分理解行内元素和块级元素，尽量少用并合理利用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;
}

 

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多
  • 多看文档，多补知识，不要依赖问人，费时间且没有成长
  • 不推荐买一大堆书，然后都没看完
  • 推荐写博客，比网上或者当面技术交流有效果
  • 多了解非技术的知识，个人成长的瓶颈往往不是技术
  • 融入团队，站在什么层面想问题，最后就在什么层面做事情
  • 最后一点：遇到喜欢的妹纸不要怂

 

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

以上只是一些点，每个点都可以延伸很多知识。

posted @ 2015-08-28 16:53  子慕大诗人  阅读(1918)  评论(3)  编辑  收藏  举报