diff --git a/docs/javascript_restructure.md b/docs/javascript_restructure.md new file mode 100644 index 0000000000..d3c1bb95b5 --- /dev/null +++ b/docs/javascript_restructure.md @@ -0,0 +1,52 @@ +## Javascript restructure + +### Motivation + +A style guide is provided for Javascript in Gov.UK sites at https://github.com/alphagov/govuk-frontend/blob/main/docs/contributing/coding-standards/js.md + +Currently the Javascript modules in CCCD do not follow this guide and instead modules are defined in two different ways; + +Executing a function expression to return an object; + +```javascript +// app/webpack/javascripts/modules/Helpers.API.Core.js + +(function (exports, $) { + const Module = exports.Helpers.API || {} + + ... + + Module._CORE = { + query + } + + exports.Helpers.API = Module +}(moj, jQuery)) +``` + +Adding to the `moj` module so that it is initialized together with all modules by `moj.init()` in `app/webpack/javascripts/application.js`; + +```javascript +// app/webpack/javascripts/modules/Helpers.DataTables.js + +moj.Helpers.DataTables = { + init: function (options, el) { + ... + }, + + ... +} +``` + +The Gov.UK style guide recommends using the class design pattern to structure the code; + +```javascript +class Example { + // Code goes here +} +``` + +The primary benefits of refactoring our Javascript is to have a single, consistent style so that future developers can better understand the codebase. +Specifically using the recommended Gov.UK style will further facilitate new developers who have worked on other Gov.UK projects. + +This is a *work in progress* so javascript modules may be written in any of the above formats but the ideal is the class design pattern. \ No newline at end of file