我的前端开辟原则

2019年8月30日 185次阅读 来源: rand

转眼入行一年半，在前端这条路上摸爬滚打，学海无涯，性命不息，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会有严峻的锯齿(假如有同砚有实践过的处理锯齿的计划，我愿恭听)

    原文作者：rand
    原文地址: https://segmentfault.com/a/1190000004139275
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞