Неизменные данные и функциональный JavaScript с Mori

Эта статья была рецензирована Крейгом Билнером и Адрианом Санду . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Функциональное программирование и неизменяемые данные находятся в центре внимания многих разработчиков JavaScript, поскольку они пытаются найти способы сделать свой код проще и легче рассуждать.

Хотя JavaScript всегда поддерживал некоторые методы функционального программирования, они действительно стали популярными только в последние несколько лет, и традиционно не было встроенной поддержки неизменяемых данных. JavaScript все еще много изучает, и лучшие идеи приходят от языков, которые уже опробовали и опробовали эти методы.

В другом уголке мира программирования Clojure — это функциональный язык программирования, предназначенный для подлинной простоты , особенно в том, что касается структур данных. Mori — это библиотека, которая позволяет нам использовать постоянные структуры данных Clojure непосредственно из JavaScript.

В этой статье будет рассмотрено обоснование дизайна этих структур данных и рассмотрены некоторые шаблоны их использования для улучшения наших приложений. Мы могли бы также подумать об этом как о первом шаге для разработчиков JavaScript, заинтересованных в программировании на Clojure или ClojureScript.

Что такое постоянные данные?

Clojure проводит различие между постоянными значениями, которые нельзя изменить, и временными значениями, которые имеют временные времена жизни между мутациями. Попытки изменить постоянные структуры данных позволяют избежать изменения базовых данных, возвращая новую структуру с примененными изменениями .

Это может помочь увидеть, как будет выглядеть это различие в теоретическом языке программирования.

// transient list a = [1, 2, 3]; b = a.push(4); // a = [1, 2, 3, 4] // b = [1, 2, 3, 4] // persistent list c = #[1, 2, 3] d = c.push(4); // c = #[1, 2, 3] // d = #[1, 2, 3, 4] 

Мы можем видеть, что временный список был видоизменен, когда мы поместили в него значение. И a и b указывают на одно и то же изменяемое значение. Напротив, вызов push в постоянном списке вернул новое значение, и мы видим, что c и d указывают на отличия от дискретных списков.

Эти постоянные структуры данных не могут быть изменены, а это означает, что, как только у нас будет ссылка на значение, у нас также будет гарантия, что оно никогда не будет изменено. Эти гарантии обычно помогают нам писать более безопасный и простой код. Например, функция, которая принимает постоянные структуры данных в качестве аргументов, не может изменять их, и поэтому, если функция хочет сообщить о значимых изменениях, она должна исходить из возвращаемого значения. Это приводит к написанию ссылочно прозрачных, чистых функций , которые легче тестировать и оптимизировать .

Проще говоря, неизменяемые данные заставляют нас писать более функциональный код.

Что такое Мори?

Мори использует компилятор ClojureScript для компиляции реализаций структур данных в стандартной библиотеке Clojure в JavaScript. Компилятор испускает оптимизированный код, а это означает, что без дополнительного рассмотрения не легко общаться с скомпилированным Clojure из JavaScript. Мори это слой дополнительного рассмотрения.

Как и Clojure, функции Мори отделены от структур данных, с которыми они работают, что контрастирует с объектно-ориентированными тенденциями JavaScript. Мы обнаружим, что эта разница меняет направление написания кода.

 // standard library Array(1, 2, 3).map(x => x * 2); // => [2, 4, 6] // mori map(x => x * 2, vector(1, 2, 3)) // => [2, 4, 6] 

Мори также использует структурное совместное использование для внесения эффективных изменений в данные путем совместного использования как можно большей части исходной структуры. Это позволяет постоянным структурам данных быть почти такими же эффективными, как обычные переходные. Реализации этих концепций более подробно рассматриваются в этом видео .

Почему это полезно?

Для начала давайте представим, что мы пытаемся отследить ошибку в кодовой базе JavaScript, которую мы унаследовали. Мы перечитываем код, пытаясь выяснить, почему мы выбрали неправильное значение для fellowship .

 const fellowship = [ { title: 'Mori', race: 'Hobbit' }, { title: 'Poppin', race: 'Hobbit' } ]; deletePerson(fellowship, 1); console.log(fellowship); 

 import { vector, hashMap } from 'mori'; const fellowship = vector( hashMap( "name", "Mori", "race", "Hobbit" ), hashMap( "name", "Poppin", "race", "Hobbit" ) ) const newFellowship = deletePerson(fellowship, 1); console.log(fellowship); 

 <div> <h3>Mori Painter</h3> </div> <div id="container"> <canvas id='canvas'></canvas> </div> <div> <button id='undo'>↶</button> </div> 

 const { list, vector, peek, pop, conj, map, assoc, zipmap, range, repeat, each, count, intoArray, toJs } = mori; 

 const log = (...args) => { console.log(...args.map(toJs)) }; 

 // the dimensions of the canvas const [height, width] = [20, 20]; // the size of each canvas pixel const pixelSize = 10; // converts an integer to a 2d coordinate vector const to2D = (i) => vector( i % width, Math.floor(i / width) ); 

 const coords = map(to2D, range(height * width)); 

 [ [0, 0], [0, 1], [0, 2], [0, 3], [0, 4], [0, 5], [0, 6], [0, 7], [0, 8], [0, 9], [1, 0], [1, 1], [1, 2], [1, 3], [1, 4], [1, 5], [1, 6], [1, 7], [1, 8], [1, 9], [2, 0], [2, 1], [2, 2], [2, 3], [2, 4], [2, 5], [2, 6], [2, 7], [2, 8], [2, 9], ... [8, 0], [8, 1], [8, 2], [8, 3], [8, 4], [8, 5], [8, 6], [8, 7], [8, 8], [8, 9] [9, 0], [9, 1], [9, 2], [9, 3], [9, 4], [9, 5], [9, 6], [9, 7], [9, 8], [9, 9] ] 

 const colors = repeat('#fff'); 

 const pixels = zipmap(coords, colors); 

 { [0, 0]: '#fff', [1, 0]: '#fff', [2, 0]: '#fff', [3, 0]: '#fff', [4, 0]: '#fff', [5, 0]: '#fff', ... [8, 9]: '#fff', [9, 9]: '#fff' } 

 const draw = (x, y, pixels, color='#000') => { const coord = vector(x, y); return assoc(pixels, coord, color); }; 

 const paint = (ctx, pixels) => { const px = pixelSize; each(pixels, p => { const [coord, color] = intoArray(p); const [x, y] = intoArray(coord); ctx.fillStyle = color; ctx.fillRect(x * px, y * px, px, px); }); }; 

 const [coord, color] = intoArray(p); const [x, y] = intoArray(coord); 

 ctx.fillStyle = color; ctx.fillRect(x * px, y * px, px, px); 

 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = width * pixelSize; canvas.height = height * pixelSize; paint(context, pixels); 

 let frame = list(pixels); canvas.addEventListener('click', e => { const x = Math.floor(e.layerX / pixelSize); const y = Math.floor(e.layerY / pixelSize); const pixels = draw(x, y, frame); paint(context, pixels); frame = pixels; }); 

 let frames = list(pixels); 

 canvas.addEventListener('click', e => { const x = Math.floor(e.layerX / pixelSize); const y = Math.floor(e.layerY / pixelSize); const currentFrame = peek(frames); const newFrame = draw(x, y, currentFrame); frames = conj(frames, newFrame); paint(context, newFrame); }); 

 const undo = document.getElementById('undo'); undo.addEventListener('click', e => { if(count(frames) > 1) { frames = pop(frames); paint(context, peek(frames)); } });