我的前端开发准则

转眼入行一年半,在前端这条路上摸爬滚打,学海无涯,生命不息,code不止。回头看自己今年写的代码,依然惨不忍睹,留坑无数。很多道理都是在不停的写之中才想明白的。只是工作不会给我们时间回头去改翔一般的代码,我能做的,就是在接下来的过程中不再去犯同样的错误。希望我写的这点笔墨能让刚入行的同学少走一个弯路。

再次说明,这是我的准则,里面有精华也有糟粕,如果有热心人能指点一二,感激之情,不胜言表。

关于图片

  1. 页面内的大图,特别是banner图,登录页背景图等,使用第三方的cdn加速。同时做一遍压缩,如果压缩之后还超过200kb,则和设计师沟通是否取消或者更换图片。

  2. 精灵图必备,各种小图标,小icon,做到一张图片里面去。

  3. 尽量使用icon font代替小图标,icon font的优点可以甩普通的icon图标几条街,随意调整大小,改变颜色,太cool!!

  4. 如果项目很大,公司不差钱,最佳方案是把图片资源放在单独的服务器上,配置独立的域名,图片资源的加载由图片域名加载,很多大公司的静态资源都是由独立的服务器来存放和分发的

我一般和设计师讨价还价的底线就是图片必须加载流畅,如果用户打开网页图片加载半天出不来,就算我们的图片做的再漂亮,又有什么卵用!!

良心资源:阿里巴巴字体图标库

关于js

  1. 第三方的js库,必须使用min版。站点内部的lib,每次发布上线之前必须使用gulp压缩合并。

  2. 移动端使用zepto库,不允许使用jquery

  3. 给js代码一个全局命名空间,举个例子,我们的项目是某个自行车官网,全局命名空间就叫bike,和本项目有关的所有js方法,函数,变量,全部挂在bike的下面

var bike={};
bike.name='cookee';
bike.getOrderDetail=functtion(id){.....}

关于css

  1. 提炼项目的公共样式,按钮、表单。

  2. 命名。面向属性命名,通用模块可以面向模块命名,比如头部header,尾部footer等,其他请尽量使用面向属性的命名方式,这样可以给css最大程度的复用自由,关于什么是面向属性的命名方式,请参考推荐

  3. 样式分离再分离,在css里面不要使用id属性,留着id给js使用

  4. 减少css的层级嵌套,由于css的渲染是从右向左的,关于网页的渲染,这个细说起来又可以写一篇文章了。如果你的层级标签嵌套多层,想想要浪费多少渲染时间,对于移动端毫秒必争的加载时间,你还有什么理由不改进你的代码

  5. 优雅的名字可以让人一目了然,放一张前人总结的图,没事的时候多看看,潜移默化的记住这些名字
    图片描述

精简高效的CSS命名准则/方法

关于html

  1. 精简dom结构,减少冗余html

  2. 语义化标签,要学会用

  3. 移动端,使用svg绘图代替canvas绘图,canvas会有严重的锯齿(如果有同学有实践过的解决锯齿的方案,我愿恭听)

本文转载于:猿2048我的前端开发准则

posted @ 2020-04-08 19:36  热爱前端知识  阅读(...)  评论(...编辑  收藏