Обращайте внимание на то, что возвращают методы JS!
Что навело меня на эту мысль, так это то, что штатный разработчик клиента сказал, что «невозможно» сделать неизменяемый константный массив или объект. Полная чушь, если вы завернете объявление в Object.freeze с константным присваиванием.
Я был немного шокирован этим парнем, который писал JavaScript пятнадцать лет и никогда даже не слышал об Object.freeze.
JavaScript const immutableArray = Object.freeze([ 1, 3, 5, 7 ]);/* The following reports No error, but doesn’t change the array because Array.length is immutable thanks to the freeze. */ immutableArray[5] = “test”;/* Both of thes throw an Error halting execution with the following message: Uncaught TypeError: Can’t define array index property past the end of an array with non-writable length */ immutableArray[0] = “test”; immutableArray.push(“test”);
| 123456789101112131415 | const immutableArray = Object.freeze([ 1, 3, 5, 7 ]);/* The following reports No error, but doesn’t change the array because Array.length is immutable thanks to the freeze.*/immutableArray[5] = “test”;/* Both of thes throw an Error halting execution with the following message: Uncaught TypeError: Can’t define array index property past the end of an array with non-writable length*/immutableArray[0] = “test”; immutableArray.push(“test”); |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вам нужен массив, значения которого ничто не может изменить, вот и все! То же самое можно сделать, применяя Object.freeze для всего, что вы объявляете. Применяя Object.freeze при объявлении массива или объекта вместе с const, вы получаете неудаляемый результат с неизменной областью действия! Волшебная часть заключается в том, что Object.freeze возвращает объект, который вы ему передаете!
То же самое можно сказать о Node.appendChild и о том, чем он может быть лучше Element.append. Первый возвращает добавленный вами узел, что может быть весьма полезно, поскольку означает, что вам не нужно тратить лишнее объявление/строку при создании нового узла, присоединяемого к чему-либо.
Например, допустим, у вас есть переменная «mySection», указывающая на тег раздела, и вы хотите создать H2 с текстом «My Title» внутри него непосредственно в DOM.
JavaScript mySection.appendChild( document.createElement(“H2”) ).textContent = “MyTitle”;
| 123 | mySection.appendChild( document.createElement(“H2”)).textContent = “MyTitle”; |
Выглядит прикольно, но поскольку Node.appendChild возвращает только что созданный объект элемента H2, мы можем присвоить заголовок. Если использовать это с чем-то вроде Object.assign, все может быть еще более интересным. Но это не значит, что у Element.append нет своих преимуществ:
JavaScript myFieldset.appendChild( document.createElement(“label”) ).append( “E-Mail Address”, Object.assign( document.createElement(“input”), { name : “contact”, type : “email”, placeholder : “jimbo@nowhere.net” } ) );/* The above is roughly equal to: <label> E-Mail Address <input name=”contact” type=”email” placeholder=”jimbo@nowhere.net”> </label> */
| 123456789101112131415161718 | myFieldset.appendChild( document.createElement(“label”)).append( “E-Mail Address”, Object.assign( document.createElement(“input”), { name : “contact”, type : “email”, placeholder : “jimbo@nowhere.net” } ));/* The above is roughly equal to: <label> E-Mail Address <input name=”contact” type=”email” placeholder=”jimbo@nowhere.net”> </label>*/ |
Самое забавное заключается во всех сумасшедших расточительных методах, которые React и другие системы, подобные ему, имеют под капотом, чтобы воспроизвести это, потому что они не могут использовать возвращаемые значения многих свойств. Когда я говорю, что подобные фреймворки копируют существующую функциональность, я имею в виду именно именно это! Взгляните на «createElement», который превращает JSX в клиентскую часть, или на различные процедуры «make».
Моя текущая версия намного проще, чем раньше:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript if (data.attr) { for (var attr in data.attr) element[attr] = data.attr[attr]; return element; }
| 1234 | if (data.attr) { for (var attr in data.attr) element[attr] = data.attr[attr]; return element;} |
Когда я мог бы просто написать:
JavaScript if (data.attr) return Object.assign(element, data.attr);
| 1 | if (data.attr) return Object.assign(element, data.attr); |
Все потому, что возвращается Object.assign. Кстати, вы, ребята, думаете, что я суров к фреймворкам, вы должны услышать, как я критикую свою собственную работу. Вы должны регулярно все сносить, иначе никогда не научитесь! В любом случае, не все, что вы делаете, должно включать дополнительные переменные! Я подозреваю, что то, что я всегда писал JavaScript таким образом, является причиной того, почему у меня никогда не было проблем с областью действия, которые сводят с ума многих программистов. Кроме того, я начал напрямую писать DOM вместо того, чтобы копаться в медленном и, возможно, небезопасном innerHTML намного раньше, чем другие разработчики.
На самом деле немного раздражает, что Element.append не возвращает того что мы добавляем. Это было бы (могло бы быть) действительно полезным, если бы возвращался массив элементов. Что-то типа:
JavaScript const append(target, …sources) => { let result = [ target ]; for (let source of sources) { result.push(target.appendChild( source instanceof Node ? source : document.createTextNode(source) )); } return result; } // appendlet [labelElement, labelTextNode, inputElement] = append( myFieldset.appendChild(document.createElement(“label”)), “E-Mail Address”, Object.assign( document.createElement(“input”), { name : “contact”, type : “email”, placeholder : “jimbo@nowhere.net” } ) );
| 123456789101112131415161718192021 | const append(target, …sources) => { let result = [ target ]; for (let source of sources) { result.push(target.appendChild( source instanceof Node ? source : document.createTextNode(source) )); } return result;} // appendlet [labelElement, labelTextNode, inputElement] = append( myFieldset.appendChild(document.createElement(“label”)), “E-Mail Address”, Object.assign( document.createElement(“input”), { name : “contact”, type : “email”, placeholder : “jimbo@nowhere.net” } )); |
Как видите, это было бы немного полезнее, чем версия Element.append.
Заключение
Когда подпрограммы JavaScript возвращают значение, над которым вы работаете, используйте это, если можете, чтобы избежать создания «напрасных переменных» или сохраните его, чтобы потом не тратить время на попытки извлечь это значение из DOM. Я вижу, что это очень простая техника, которую используют очень редко.
Да, и для нытиков, которые твердят что «if и switch — это зло» и жалуются, как много «лишнего» в коде, вы знаете, что разработчики Python смеются над вами, верно?
Автор: Jason Knight
Источник: webformyself.com