Good templates lead to good results, mediocre templates lead to bad results.

📚 Code specification pain

What does good code look like? The answer is clear modules and logical coherence. The good book Clean Code explains it, and a plethora of other concepts out there (Google’s HTML specification, CSS’S BEM, Vue’s style guide) all point to it explicitly. But these books, or documents, have one shortcoming in common — they are too long.

🛋 ️ lazy specification

To promote these specifications, I’ve documented numerous software engineering books and links to specification documentation and cheerfully promoted them to other programmers, often only getting “I’ll read them when I have time.” “They’re too lazy,” I thought. The only way to deal with lazy people is to use the “lazy way” — to generalize a simple, understandable, clear and executable concept.

Good 🔘 function

Functions are the thing we see and write about most in programming (the brick-remover’s brick). Let’s look at a normal function. Let’s say we want to process an ID and then use it to get a list and render all of its elements. The most common one I’ve seen looks like this:

function queryList(id){ let list = foo.get('/path/list', 'boo' + id) for (let i =0; i < list.length; i ++){ list[i].name = 'name:' + list[i].name list[i].desc = 'desc:' + list[i].desc } function render(list){ for (let i = 0; i < list.length; i ++){ $('.list').find('li').text(list[i].name + ',' + list[i].desc) } } render(list) }Copy the code

This is classic “write what you think”. Let’s take a look at the design of a scrolling render code written by LucasHC :(here is some simplified code)

(function() { var fetching = false; var page = 1; var slideCache = []; function isVisible (id) { // ... } function updateItemCache (node) {//.... Function handleScroll (e, force) {//... } window.setTimeout(handleScroll, 100); fetchContent(); } ());Copy the code

This is the standard “design before fill”. To analyze this, the method is to divide the function into three parts: variables, subfunctions, and execution, which is visually clear (picture is at the head of the article). Just like building a house, get the materials ready, plan the process, and start building. If you pull out the instructions for a Lego toy, this is how you build it. (D) Ok, let’s transform the example function in this way:

function queryList(id){ const mergedId = 'boo' + id const url = '/path/list' function getListFromServer(url, Function listItemHandle(list){} function render(list){} function listItemHandle(list){} function render(list){} List = listItemHandle(list) render(list)} let list = getListFromServer(url, mergedId) list = listItemHandle(list) render(list)}Copy the code

It’s the nice thing about code as logic. Using the “fold” feature of the code editor, you can wrap up the details of all the child functions. When it comes time to maintain & extend, we can quickly find and modify our code.

☕️ is lazy after all

I guarantee that lazy specifications will increase your coding speed by at least 20% and maintainability by 80%. What? You don’t believe? Take a look at Clean Code and various specification documentation :D.