New perception of front-end work

The code specification has been bothering me for a long time. For the previous front-end work to complete a considerable amount of business code, there are not too many requirements for its specification. There are a lot of weird things about div classes like conent-box, conent-left, conent-right, etc.; The naming of functions is also very arbitrary and can not be said to be semantic; There’s just no specification.

For our company’s front-end engineering, all variable functions should be semantic. It’s also a headache for me recently; After each function is completed, the supervisor will conduct code view for my code, I’m going to rename CreateMaterialType to MaterialTypeOfCreate CreateMaterialType itself is a typescript interface that I wrote but it’s named using the do verb type of the function;

The function name

Function names should always start with do + Something, such as function toggleTab(){} functions should always start with a verb

These are generic verbs, the usual ones are get to get list data and things like that, isShow things like that to do bol to name things;

The judgeEditOrAddSummary function is used to determine how to add and modify the summary library. I wrote an updateSummary to update the summary, and there is also a verb update to submit the push directly. The supervisor said that you used update or just pointed out the editor and did not specify the new; So use “judgment” instead of “judge” because it’s a word I can’t figure out. It happened when the supervisor conducted code view on my code after work on Friday; When told me to use XXXXX, I understand what is, is not spelling; Trying to find out what it means is not clear; Unfortunately, my explanation above makes it very clear exactly what this function means. Like me so rough a person alas indeed should do some articles diary to do some records;

This combination is really because primary school, middle school and college English is really poor;

Therefore, my supervisor also recommended me to try to translate the English documents dev.to, which is more intuitive for the meaning to be expressed in the English documents than the Chinese explanation. It will be of great help to my front-end work in the future.

There’s also a stupid Git problem that I actually die on sometimes,

Recently there was a real case on the Internet that was quite popular. It said that a new employee could not pull code with Git and was fired the next day. Therefore, it can be seen that The importance of Git to our work, whether front-end or back-end, is inseparable from Git.

For the present stage are visualization tools, the common use is Sourcetree

I believe that most of the front-end workers have used this visual Git tool. I have encountered many problems in my previous work, such as code pull ah and code push ah, forget to pull the dev branch of the code, resulting in a lot of unknown problems during the commit, etc

Code merge conflict problem, how to solve the conflict I believe we will use very good; And I’m very fallible

Git daily operations

Before the company was developed on dev, we would create a Git flow workflow whenever we did features. For new features, bug modification and style modification, we would create a new feature in Git Flow and merge it into the dev development branch.

Now the company has added a code View session, and I would like to create a branch like ZXX-dev to write my code. When I completed the commits and did not check for new code in the dev branch, there were many commits. I need to withdraw my Git commit operation

After git commit, want to undo commit

git reset --soft HEAD^

This successfully undoes your commit

Note that by simply withdrawing the COMMIT operation, the code you wrote remains.

A little personal interpretation: HEAD^ means the previous version, which can also be written as HEAD~1

If you commit two times and want to commit both times, use HEAD~2

— Soft does not delete workspace change code, commit, do not undo git add. Git commits to git without deleting the local code you wrote.

–hard Delete workspace change code, commit, and git add.

Note that when this is done, the last COMMIT state is restored. The rollback code is the same as the original code you developed

I had this problem at work, because I did not pull the code of the team partner, resulting in a COMMIT error; So I checked baidu to see how to withdraw my submission in Sourcetree; I used git reset –soft HEAD^ to reset my previous commit, because I committed git commit twice by module

Git reset –hard HEAD^ Meng forced me to call the supervisor to help me look at the problem found this problem asked me to know what is soft and what is hard no;

I can only do not speak silent, because I usually have not used a meal disorderly operation caused such a problem; It’s an awkward question

There is also a naming convention for our git submissions

Quite rigorous

Feat (XXXX function): Add XXX

Write a colon (:), space (:), and description of the module name in parentheses

It is commonly used to modify chore with new function style style after the fix test conducted by code View and the bug modification occurs

annotation

My previous interpretation of the notes has always been

Js The CSS comment is //

HTML comments are

I’ve always called notes notes notes what’s the correct way to call them notes

FIXME

There may be some requirements that you need to implement in a short period of time, but the code designed in this way may have problems, you can write some FIXME in the code, such as:

//FIXME: Coordinate interface data modification later

TODO

When developing code that is not readable or maintainable, you can write some TODO in your code, for example:

// TODO: First use iteration to implement, time complexity is not optimal, later consider whether it can be optimized

function createMenuList() {}

TODO: it’s my own problem. I just didn’t think of a better way or way TODO it

` / * *

• @description Material details
• @param id Id of the material

* / `

for

This way, in the API interface file, you can clearly show the interface passed, as well as the content of the comments

This is my standardized understanding of annotations in the new company;

Code optimization

Short for map:

  cloneTitleFields.belongGroup.value = data.map(item => {
    return { value: item.id, label: item.name };
  });
Copy the code

Arrow function => return

  cloneTitleFields.belongGroup.value = data.map(item => ({
    value: item.id,
    label: item.name
  }))
Copy the code