我的前端开发准则

Andrman 发布于2019-08-28 18:27 / 1182人阅读

摘要：转眼入行一年半，在前端这条路上摸爬滚打，学海无涯，生命不息，不止。再次说明，这是我的准则，里面有精华也有糟粕，如果有热心人能指点一二，感激之情，不胜言表。站点内部的，每次发布上线之前必须使用压缩合并。

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

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

关于图片

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

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

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

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

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

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

关于js

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

移动端使用zepto库，不允许使用jquery

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

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

关于css

提炼项目的公共样式，按钮、表单。

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

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

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

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

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

关于html

精简dom结构，减少冗余html

语义化标签，要学会用

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

私有云超融合服务器准则前端开发用什么前端开发前端开发前端前端前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111242.html

我的前端开发准则

摘要：转眼入行一年半，在前端这条路上摸爬滚打，学海无涯，生命不息，不止。再次说明，这是我的准则，里面有精华也有糟粕，如果有热心人能指点一二，感激之情，不胜言表。站点内部的，每次发布上线之前必须使用压缩合并。转眼入行一年半，在前端这条路上摸爬滚打，学海无涯，生命不息，code不止。回头看自己今年写的代码，依然惨不忍睹，留坑无数。很多道理都是在不停的写之中才想明白的。只是工作不会给我们时间回头...

khs1994 2019-08-19 17:12 评论0 收藏0
我的前端开发准则

摘要：转眼入行一年半，在前端这条路上摸爬滚打，学海无涯，生命不息，不止。再次说明，这是我的准则，里面有精华也有糟粕，如果有热心人能指点一二，感激之情，不胜言表。站点内部的，每次发布上线之前必须使用压缩合并。转眼入行一年半，在前端这条路上摸爬滚打，学海无涯，生命不息，code不止。回头看自己今年写的代码，依然惨不忍睹，留坑无数。很多道理都是在不停的写之中才想明白的。只是工作不会给我们时间回头...

AlphaWallet 2019-08-01 14:58 评论0 收藏0
我的前端编码习惯 —— html篇

摘要：标签属性属性名全部写，属性值双引号引起来，每个双标签务必加对应的结束标签单标签不遵循此标准，仍按原标准，即不需要以结束。视情况为链接添加，图要添加及。明确指定图的和。前言作为一个前端工程师，我们可能每天都要写html、css、javascript，每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则，下面和大家分享一下我的习惯和准则。 html 首先我们要对文...

darkbug 2019-08-20 13:42 评论0 收藏0
我的前端编码习惯 —— html篇

摘要：标签属性属性名全部写，属性值双引号引起来，每个双标签务必加对应的结束标签单标签不遵循此标准，仍按原标准，即不需要以结束。视情况为链接添加，图要添加及。明确指定图的和。前言作为一个前端工程师，我们可能每天都要写html、css、javascript，每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则，下面和大家分享一下我的习惯和准则。 html 首先我们要对文...

dreamtecher 2019-08-05 17:52 评论0 收藏0
我的前端编码习惯 —— html篇

摘要：标签属性属性名全部写，属性值双引号引起来，每个双标签务必加对应的结束标签单标签不遵循此标准，仍按原标准，即不需要以结束。视情况为链接添加，图要添加及。明确指定图的和。前言作为一个前端工程师，我们可能每天都要写html、css、javascript，每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则，下面和大家分享一下我的习惯和准则。 html 首先我们要对文...

ernest.wang 2019-08-30 15:52 评论0 收藏0