предисловие
Вы когда-нибудь ругали код «экс»? На ваш код жаловались? Никаких комментариев, случайное название, отсутствие инкапсуляции, хаотичная структура, тысячи строк на странице. . . .
Как писать элегантный код, чтобы вам не плевать и не завидовать.Далее поговорим о том, как написать элегантный код.Если у вас есть лучшие методы и опыт написания, пожалуйста, оставьте сообщение в области комментариев и учитесь вместе
Какой код является элегантным кодом
Давайте поговорим о том, какой код является элегантным кодом. На мой взгляд, элегантный код включает в себя следующие аспекты. Во-первых, это простота кода. Если это можно решить одной строкой кода, не пишите две или более строк , Во-вторых, удобство Читая, код не только используется для запуска машины (сервера, браузера), но и должен быть написан и поддерживаться людьми, которые могут быть вами, нынешними коллегами или будущими коллегами. еще одна вещь, которая нас очень беспокоит, это производительность, например циклы, которые мы часто пишем, когда выполняются условия бизнес-функции, можно сохранить на один цикл меньше, и есть справочные данные, которые больше не используются. своевременно освобождать память вручную (хотя есть механизм сборки мусора), но лучше ли освобождать память раньше?
Примечания
Комментарии.Комментарии необходимы для написания кода, особенно для элегантного кода, а комментарии необходимы;комментарии предназначены для того, чтобы их могли видеть другие, возможно, они сами, или коллеги и будущие коллеги.(Эти слова были сказаны много раз), Так почему же мы пишем комментарии, и как мы должны их писать? , давайте сначала поговорим об аннотациях
Как использовать аннотации? (куда добавлять комментарии)
Общее правило таковоНужно добавить комментарии, когда код не ясен, который я лично считаю включает в себя следующие аспекты:
- Добавляйте комментарии к коду, который трудно понять (сложная логика, больше уровней вложенности, нечеткие параметры для передачи и т. д.).
2. Коды, которые могут быть ошибочно приняты за ошибки (коды, которые не играют в карты в соответствии с обычными процедурами) 3. Статус данных (в качестве примера возьмем статус заказа, заказ может иметь несколько статусов. В настоящее время при написании логики листопада в этом разделе напишите значение различных статусов для будущего обслуживания или Когда новые люди получают этот проект, они могут начать работу быстрее) 4. Прочие комментарии (комментарии к документации, комментарии к переменным, комментарии к функциям)
1. Примечания к документации:
Кратко опишите роль текущего js-файла, будь то обработка логики страницы js, публичный метод и т. д.
Если это проект vue, он описывает роль текущего файла vue,
2. Аннотация переменной:
Укажите, для чего используется переменная, для семантического именования и добавьте комментарий, если вам нужен комментарий.
// difference
let uName = 'Symbol卢'; // 虽然用了驼峰，但是简写严重。无法直观看出变量的含义
// grace
let userName = 'Symbol卢'; // 语义化命名，不能过于缩写
3. Аннотация функции
Аннотация параметра включает тип данных параметра, семантику именования параметра, аннотация возвращаемого параметра включает значение по умолчанию и тип данных возвращаемого параметра.
Например:
/**
* @description: 数据类型的检测的第二种方式
* @param {any} data 要检测数据类型的变量
* @return {string} type 返回具体的类型名称【小写】
*/
export const $typeOf = (data) => {
return Object.prototype.toString.call(data).replace(/\[object (\w+)\]/, '$1').toLowerCase()
}
Вы можете скачать его на рынке плагинов vscode.koroFileHeaderДля установки вы можете сгенерировать формат комментария одним щелчком мыши
Переменная
Рекомендации по определению переменных:Используйте нижний регистр для переменных (используйте let для объявления переменных), используйте верхний регистр для констант (используйте const для объявления констант), семантику именования переменных, указывайте тип данных переменных, избегайте использования слишком большого количества глобальных переменных, сначала объявите, а затем используйте
1. let и const заменяют var
определить константы
// difference
var myLove = 'My love is Code';//没有使用const进行命名，且常量名称没有全部大写
// grace
const MY_LOVE = 'My love is Code';
использовать varключевое слово определено常量Его можно изменить, то есть после того, как мы определим константу, мы можем также присвоить ей значение, чтобы изменить константу, и тогда согласно нашим спецификациям в программе, после объявления константы, константа является глобальной во всей программе , можно снова изменить, поэтому объявите константу, чтобыиспользовать ключевые словаconstОбъявлять константы, и обычно имена констант пишутся с заглавной буквы и имеют семантическое значение, чтобы, когда люди видят константу, они знали, для чего она нужна.
Я только что рассказал о строке в объявлении константы, тогда давайте посмотрим, на какие спецификации стоит обратить внимание при использовании строковых констант, и код выше
//要注意。静态字符串一律使用单引号或反引号（模板字符串），不使用双引号，动态字符串使用反引号，拒绝使用 + 进行字符串的拼接
// difference
const name = "Symbol卢";
const say = 'My name is' + name + 'and I love FE';
// grace
const NAME = 'Symbol卢';
const b = `My name is ${ NAME } and I love FE`;
определить переменную
Используйте let при определении локальных переменных и var при определении глобальных переменных., принцип, который следует помнить, заключается в том, чтоОбъявления переменных допустимы только в пределах блока кода, в котором они объявлены.
if (true) {
let x = 'hello';
}
let name = () => {
// ...
}
// difference
one.js
window.name = 'Symbol卢';
two.js
window.name = 'Jack李';
three.js
window.name = 'Leo';
Определение глобальных переменных в объекте окна может легко загрязнить глобальную среду.В обычной работе, когда сотрудничает несколько человек, вероятны небольшие сюрпризы.Все должны быть осторожны и осторожны.
присвоить значение константе
let lastName = fullName[1]; //如果fullName=[],那么fullName[1]=undefined 很容易就出问题了
let propertyValue = Object.attr; //如果Object={},那么Object.attr=undefined
Для эталонных типов данных (включая данные, возвращаемые в интерфейсе) убедитесь, что вы знаете итоговую строку (если данных нет, укажите значение по умолчанию).Как вы можете быть уверены, что в этом должна быть ценность? ?
let lastName = fullName[1] || ''
let propertyValue=Object.attr || 0
(1) Пишите код в строго типизированном стилеПри определении переменной укажите тип, а после объявления переменной не меняйте произвольно тип данных переменной, если вы измените его, если он не работает, это вызовет проблемы
// 假设声明三个变量a,b,c
let a,b,c; // difference，定义变量时没有指明类型
let a = "", b = [], c = {}; // good
// difference
let a = "";
...
a = 100; // 改变了定义变量时的类型(容易出错问题哦！)
let b = 5;
...
b = 200; // grace 定义了数据类型之后，就不要去随便的更改它
2. Избегайте использования==Делайте логические выводы (не копайте свой собственный код)
Как мы все знаем, js — язык со слабой типизацией, и такие операции, как операции присваивания выражений, также приведут к преобразованию типов данных.
==означает, что пока значения равны, это правда,=== требует, чтобы не только значения были равны, но и типы были одинаковыми, я думаю это все знают
Но каковы были правила эксплуатации до них? О типах данных в js поговорим в следующей статье;
использовать==иногдаОжидаемые результаты не будут достигнуты, а скрытые опасности будут похоронены., Давайте рассмотрим следующие ситуации (вы пробуете, вы пробуете внимательно)
0 == '' // true
0 == '0' // true
'' == 0 // true
'' == '0' // false
false == '0' // true
false == 'false' // false
false == undefined // false
false == null // false
null == undefined // true
true == 1 // true
Если тип данных этой переменной определен, то нет необходимости использовать==Какое совпадение, знак равенства, больше защиты программы, а денег нет, чего вы боитесь? ? законченный;Используйте при оценке отладки===, Что мне делать, если тип данных неопределенный, (шепотом, тип данных неопределенный, то разбогатеть и преобразовать тип данных)
Если тип данных переменной неясен, то давайте конвертируем его вручную и пусть определяется.
let total = "6";
if(total == 6) {} // difference
if(parseInt(total) === 6){} // grace 手动转换一下数据类型
множество
При работе с массивами рекомендуется сначала использовать новый синтаксис ES6+.Поговорим о массивах в js.
// 数组拷贝
// difference
let items=['1','2','3'];
let items2=['4','5','6'];
for (i = 0; i < items.lenght; i++){
items.push(items2[i]);
}
// grace
const itemsCopy = [...items];
// 扩展运算符简写
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
- При присвоении переменной с использованием члена массиваПредпочитаю присваивание деструктуризации.
const Arr = [1, 2, 3, 4];
// difference
const first = Arr[0];
const second = Arr[1];
// grace
const [first, second] = Arr; // 有简单的方法。肯定要用简单的方法啦
функция
В нашей работе часто используются функции, но как написать элегантные функции? ? Далее поговорим о том, как сделать функции, которые вы пишете, более элегантными, используя имена функций, входные параметры функций, проверку параметров и выходные параметры функций. !
имя функции
Имя функции нам сначала нужноСемантический(Функциональное наименование, то есть то, для чего рождается эта функция), например: функция возврата логического значения должна начинаться со слов типа is/can/has, чтобы люди могли более интуитивно понять функцию этой функции; данные в полученном интерфейсе именуется с началом get.
let isEmpty = () => {...}
let canCreateDocuments = () => {...}
let hasLicense = () => {...}
// 不用「否定」语法命名函数
//difference
let isNotSupport = () => {};
let canNotUpdate = () => {};
// grace
let isSupport = () => {};
let canUpdate = () => {};
Начнем с функции глаголов действия
let sendEmailToUser = (user) => {
....
}
let geUserInfo = (user) => {
....
}
let setUserInfo = (user) => {
....
}
Сначала используйте стрелочные функции
По сравнению с традиционными функциями (функциями), стрелочные функции более лаконичны, и они также привязаны к этому (стрелочные функции не изменят указатель this).
let arr [18, 19, 20, 21, 22,23,24,25]
// commonly
function findAge (arr, age) {
return arr.filter(function (num) {
return num === age
})
}
// grace 是不是看着更简介优雅了
let findAge = (arr, age)=> arr.filter(num => num === age)
ввод функции
Входные параметры функции позволяют пользователю более четко передавать параметры, требуемые функцией, в функцию при вызове функции.Низкоуровневый и трудно найти проблемы,
// difference
function getImages(api, true, false); // true和false啥意思，没有个注释的话，看上去就是一脸懵逼
// grace
function getImages({
imageApi: api,
includePageBackground: true, // 一目了然，知道这些true和false是啥意思
compress: false,
})
получить параметры
Если параметром функции является объект, сначала следует использовать присваивание деструктуризации.
// 假设现在的场景是获取用户的信息上的现用名，和曾用名
// difference
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
// commonly
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// grace
function getFullName({ firstName, lastName }) {
}
// grace 给它个默认值
function getFullName({firstName, lastName = '无'}) {
}
// 觉得参数的名称太长，咱再来个重命名 解构时重命名简化命名
// grace
function getFullName ({firstName: first, lastName: last}) {
}
Проверка параметра
Меньше вложенности, возвращайтесь как можно быстрее, если условия не выполняются, максимально уменьшайте вложенность, чем меньше уровней вложенности, тем лаконичнее и элегантнее выглядит функция,
function test(name, sex = 1) {
if (!name){ // 不满足条件尽早抛出错误
throw new Error('没有传递name参数');
}
// ...
}
выход функции
После разговора о входных параметрах функции, давайте поговорим о выходных параметрах функции.В выходных параметрах функции первым делом нужно убедиться, чтоТип данных параметра функции фиксированный, если функция возвращает несколько значений, предпочтительноПредпочитать объекты в качестве возвращаемых значений, а не массив. Зачем? ? ? потому чтоВ качестве возвращаемых значений используются объекты, что удобнее добавлять возвращаемые значения позже и менять порядок возвращаемых значений.По сравнению с массивами он более гибкий и его легче расширять.
// 注意，返回参数的数据类型要是固定的，
// difference返回了不同的数据类型
function getResult(cont) {
if(count < 0) {
return "";
} else {
return count * 10;
}
}
// grace
function getResult(cont) {
if(count < 0) {
return -1;
} else {
return count * 10;
}
}
// 函数返回多个值，推荐使用对象作为函数的返回值
// commonly
function processInput(input) {
return [left, right, top, bottom];
}
// grace
function processInput(input) {
return { left, right, top, bottom };
}
const { left, right } = processInput(input);
выполнить функцию немедленно
Непосредственно исполняемые функции также рекомендуется записывать в виде стрелочных функций. Во-первых, потому что он более лаконичен, и он также связывает this (функция стрелки не изменит указатель this).
(() => {
console.log('感觉这篇文章还可以的话，欢迎点赞+关注+转发');
})();
Предпочитаю функциональное программирование.
// difference
for(i = 1; i <= 10; i++) {
a[i] = a[i] +1;
}
// grace
let b = a.map(item => ++item) //是不是更简洁了
Слишком много, если еще..
Примечание. Чтобы всем было проще увидеть оптимизированный формат, я использую небрежно для демонстрации грамматической структуры (у меня нет слов)
// commonly
if (a === 1) {
//...
} else if (a ===2) {
// ...
} else if (a === 3) {
//...
} else {
//...
}
// 一般
switch(a) {
case 1:
//....
case 2:
//....
case 3:
//....
default:
//....
}
// grace ===》》》 Object
const fruit = {
1: ['1', '11'],
2: ['2', '22'],
3: ['3', '33']
};
let test = (a) => {
return fruit[a] || [];
}
// grace ===》》》 Map
const fruit = newMap()
.set('张三', ['张三丰', '张三力'])
.set('李四', ['李思维', '李素丽'])
let test = (a) => {
return fruit.get(a) || [];
}
// grace ===》》》filter
const fruits = [
{ name: '张三', work: 'js' },
{ name: '李四', work: 'php' },
{ name: '王五', work: 'java' },
];
let test = (a) => {
return fruits.filter(item => item.name === a);
}
// grace===》》》策略模式
let handler = {
1: () => {
//....
},
2: () => {
//....
},
3: () => {
//....
},
default: () => {
//....
}
}
handler[a]() || handler['default']()
Теплые советы
Функция дополняет независимую функцию, не смешивайте несколько функций с одной функцией., есть очень важный принцип в разработке проекта [единый принцип] Так называемый единый принцип,Функция (файл), которая делает только одну вещь, Во время разработки ни один проект не заканчивается после завершения разработки. Он нуждается в постоянном обновлении и обслуживании, поэтому единственный принцип - удобство разработки и обслуживания. Не позволяйте функции «снова быть отцом и матерью», поэтому связанность кода слишком высока, и ее трудно поддерживать.
разное
Оценка длины массива в if
// difference
if (arr.length !== 0) {
//...
}
// grace
if (arr.length) {
//...
}
// difference
if (arr.length === 0) {
//...
}
// grace
if (!arr.length) {
//...
}
Логические операторы
if (a === 1) {
b()
}
//可以写成
a === 1 && b()
const arr = [1,2,3];
if(!arr.length){
b()
}
//可以写出
arr.length || b()
// &&判断依赖的键是否存在，防止报错'xxx of undfined'
let user = {
name: 'Symbol卢',
age: 18,
children: {
name: '小Symbol卢'
}
}
let childrenName = user.children && user.childre.name
Если вы можете использовать тернарный оператор (тернарный оператор), используйте его и сохраните до Нового года.
// difference
const a = '';
let b;
if( a === '' ){
b = 'no'
} else {
b = 'ok'
}
const a = ''
let b = a ? 'no' : 'ok'; // 'ok'
Определите, существует ли элемент, когда тип не определен, нулевой или пустой строки (' ') или 0, вы можете использовать его напрямуюif(a)/if(!a)форма. Когда тип является массивом или объектом, вы можете использовать форму if (экземпляр массива) или if (экземпляр строки) для оценки, и вот функция для оценки типа данных, написанная автором ранее.
/**
* @description: 数据类型的检测的第二种方式
* @param {any} data 要检测数据类型的变量
* @return {string} type 返回具体的类型名称【小写】
*/
export const isTypeOf = (data) => {
return Object.prototype.toString.call(data).replace(/\[object (\w+)\]/, '$1').toLowerCase()
}
Предпочитаю императивное программирование для циклов for
// difference
let result=[]
let numberArr=[1,2,3,4,5,6]
for(i = 1; i <= 10; i++) {
if(numberArr[i]>4){
result.push(numberArr[i])
}
}
Расставьте приоритеты в использовании императивного программирования, такого как: найти, некоторые, каждый, карта, фильтр, различные варианты использования могут относиться к: ранее опубликованнымПоговорим о массивах в js.
Использование Array.includes для обработки нескольких условий ||
// difference
if (a === 1 || a === 2 || a === 3 || a === 4) {
//...
}
// grace
let arr = [1, 2, 3, 4]
if (arr.includes(a)) {
//...
}
Используйте Array.every и Array.some для обработки полного/частичного выполнения условий.
// grace
const users = [
{ name: '张三', sex:1 },
{ name: '李四', sex:2 },
{ name: '王五', sex:1 }
];
function test() {
// 条件：（简短形式）所有的用户都必须是女
const isAllGirl = users.every(item => item.sex === 1);
// 条件：至少一个用户是男的
const isAnyMan = users.some(item => item.sex === 2);
}
Используйте регулярные выражения
const imgType ='jpg'
if(imgType === 'jpg' || imgType === 'png' || imgType === 'gif'){
console.log('is image')
}
// 使用match匹配正则表达式
const imgType='jpg'
if(imgType.match(/.*?(gif|png|jpg)/gi)){
console.log('is image')
}
строка подключения
let name = 'Symbol'
let message = 'Hello,I\'m' + name + 'take care '// 采用传统加号，看着很冗余,且容易出错
// 艾玛，模板字符香，真想
let message = `Hello,I'm ${name} take care `
Суммировать
Выполнив задание самостоятельно, спросите себя, помимо вашего текущего метода письма, есть ли какой-нибудь другой, более лаконичный метод письма? ? ?
Рекомендация проекта vue-pure-admin
Введение: vue-pure-admin — это бесплатный средний и фоновый шаблон с открытым исходным кодом, в котором используются последниеvue3 , vite2 , TypeScript ,Element-PlusГотовые решения для среднего и внутреннего интерфейса для разработки основных технологий Адрес предварительного просмотра проектаvue-pure-admin
Адрес гитхаба:vue-pure-admin
хорошая история
- Поговорим о массивах в js.
- Использование родного языка для простого получения обычных правил (Часть 1)
- Использование просторечия, чтобы легко получить регулярность (ниже)
- Научитесь перерисовывать и перекомпоновывать вместе
- Принцип механизма сборки мусора js вам понятно объяснил
- Приближается ES11, почему бы вам не зайти и не посмотреть?
- Поймите область действия js и цепочку областей видимости за считанные секунды
заключительные замечания
Выше приведено все содержание данной статьи.Надеюсь она будет всем полезна.Здесь нет необходимости вознаграждать.Вы можете датьотличный👍 (вроде бы без денег), тоже всем радыВперед