前端 css和 javascript 代码优化

代码开始

前端并不是只用html+css把页面画出来, 然后js调接口实现动效就OK了, 有一个经常容易被大家忽略的问题, 那就是后期维护, 从这方面一眼就能看出来大神和小白的区别。

没办法道路漫长, 写下此文章用以巩固和提升.

css创建变量

高端的页面都会有自己的风格, 或者蓝色或者红色, 那么定义几个css变量非常便于后期调试整体色调, 比如甲方突然说:“节假日临近, 页面要整体变成红色”, 如果用了css已经创建好了颜色变量, 那只改这一个变量就OK了.

		:root{
            --main-color:#54BBCE;
            --text-color:#ff0000;
        }
        html,body{width:100%;height:100%;background-color: var(--main-color, #999AAA);}
        p.red{color:var(--text-color, #999AAA);}

font简写规则

font-size: 1em; 
line-height: 1.5em; 
font-weight: bold; 
font-style: italic; 
font-variant: small-caps; 
font-family: verdana,serif;

font: 1em/1.5em bold italic small-caps verdana,serif;

background简写规则

CSS2.1
background-color 使用的背景颜色。
background-image 使用的背景图像。
background-repeat 如何重复背景图像。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 背景图像的位置。
CSS3
background-size 背景图片的尺寸。
background-origin 背景图片的定位区域。
background-clip 背景的绘制区域。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
eg:
background: aquamarine 
              url(img.png) 
              no-repeat 
              scroll 
              center center / 50% 
              content-box content-box;

margin, padding, border简写

  margin: 20px;/*上下左右均为20px*/
  maigin:10px 20px   /*上下为10px  左右为20px*/
  maigin:50px 80px 30px  /*上为50px  左右为80px  下为30px*/
  margin: 10px 20px 30px 40px;/*上为10px  右为20px  下为30px  左为40px*/

js开始

if else优化

// 1, if else 优化
if(a==1){console.log("a == 1")}
a==1?console.log("a == 1"):false;
a==1&&console.log("a == 1")
//  *********************************************
var a = 1;
if(a){
  a = 1;
}else{
  a = 0;
};
//可写成
var a = 1;
a = a || 0;
//  ********************************************* 过多 if else 
if(a==0){}
else if(a==1){}
else if(a==2){}
else if(a==3){}
else if(a==4){}
else if(a==5){}
else if(a==6){}
//可写成
switch (day) {
   case 0:
       break;
   case 1:
       break;
   case 2:
       break;
   case 3:
       break;
   case 4:
       break;
   case 5:
       break;
   case 6:
       break;
   default:
       break;
}

var data = {
   "0" : "日",
   "1" : "一",
   "2" : "二",
   "3" : "三",
   "4" : "四",
   "5" : "五",
   "6" : "六",
};
data["0"];

Array 添加元素

//  2, Array 添加元素
var arr = [1,2,3,4,5];
//old method
arr.push(6);
//new method 快43%
arr[arr.length] = 6;

var arr = [1,2,3,4,5];
//old method
arr.unshift(0);
//new method 快98%
[0].concat(arr);

Array 检查对象是否具有某属性

// 3, 检查对象是否具有某属性
	// 方法1
var myObject = {
  name: '@tips_js'
};
if (myObject.name) { }

	// 方法2
var myObject = {
  name: '@tips_js'
};

myObject.hasOwnProperty('name'); // true
'name' in myObject; // true

myObject.hasOwnProperty('valueOf'); // false, valueOf 继承自原型链
'valueOf' in myObject; // true

箭头函数

// 4, 箭头函数
	// 使用functions
var arr = [5,3,2,9,1];
var arrFunc = arr.map(function(x) {
  return x * x;
});
console.log(arrFunc )

	// 使用箭头函数
var arr = [5,3,2,9,1];
var arrFunc = arr.map((x) => x*x);
console.log(arrFunc )

字符串拼接不要用加号 " + "

// 4, 字符串拼接不要用加号 " + "
	//method 1
var one = 1;
var two = 2;
var three = '3';
var result = ''.concat(one, two, three); //"123"
	//method 2
var one = 1;
var two = 2;
var three = '3';
var result = one + two + three; //"33" instead of "123"

! !! !!!

单个!表示否认, 双叹号常用来表示 undefined 或者 null

// 4, 字符串拼接不要用加号 " + "
	//method 1
!!"" // false
!!0 // false
!!null // false
!!undefined // false
!!NaN // false

!!"hello" // true
!!1 // true
!!{} // true
!![] // true

补充

    还有什么没注意到的css和js优化小技巧欢迎留言, 我会尽量补充.
    ~~ 欢迎一键三连哦! ~~