Articles19
Tags0
Categories0

Js或css一些写法规范

js或css一些写法规范

1.字符串:

<Link

​          to={`${item.link}?id=${item.id}`}

​          className={com.aboutListItem_link_foot}

​        \>

2.函数简写

handleSelectBan = (id) => {

​    const { handleSelectHead } = this.props;

​    this.setState({

​      sele: false

​    })

​    handleSelectHead(id)

  }

3.connect的简写

@connect(({ sidelist_news }) => ({

  selectednav: sidelist_news.selectednav,

}))

sidelist_news:models的名字

4。引用本地图片:

<img src={require(‘../assets/picture.png’)} />

5.数组的操作:

arr.reduce()===》reduce方法是对累计者和函数中的每一个元素(从左到右)去应用一个函数,最终将返回一个值

https://www.jianshu.com/p/fa146e5cbf8d

6.css、html、js规范

文件资源命名:小写字母,含多个单词用(-)分隔

变量命名:小驼峰(类型+对象描述)

函数:小驼峰(构造函数使用大驼峰命名法)

常量:大写+下划线

类:私有属性和方法:_name

HTML:

.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

避免全局污染:使用IIFE写法

css:使用子选择器:

 .content > .title{
      font-size:2rem;
    }

属性格式:

结构型属性:

  1. display
  2. position,left,top,right,etc
  3. overflow,float,clear,etc
  4. margin,padding

表现型属性:

  1. background,border,etc
  2. font,text

7.对象的写法:

const atom={

  value:1,

  addValue(value){

  return atom.value+value

  }

}

8。单引号只用在无效标识的属性

const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};
// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
console.log(has.call(object, key));
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));
// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

9.数组

(1)赋值:

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

(2)复制:

const itemslist=[…items]

(3)重构对象为数组:

const nodes = Array.from(foo);

// best
const nodes = [...foo];

(4)迭代映射:

// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

声明规范:

/ bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];
const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

对多个返回值使用对象解构,而不是数组解构。

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// the caller selects only the data they need
const { left, top } = processInput(input);

字符串用单引号。

10.函数

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}
// bad
const f = function(){};
const g = function (){};
const h = function() {};

// good
const x = function () {};
const y = function a() {};
Author:shuo
Link:http://yoursite.com/2019/08/28/一些写法规范:/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可