Internship life 2

Deer deer 2022-01-15 01:38:00

Today is the weekend again , Let's record the internship life in front according to our own memory .

Componentization

Just a few days before arriving at the company , I'm learning the company's code . What impressed me most when I saw the code is : It's completely modular . There are three types of components :1. Global common self encapsulated components , Put in src Under the table of contents .2. Global general secondary encapsulated components , Put in src Under the table of contents .3. Common components of individual pages , Placed under the change page component in .

Why do I think componentization impressed me . Mainly because I only have component in school , But not much to use , In the project completed with classmates in curriculum design , Something that has the same effect , Namely prop The values passed in are different , If there was such a thorough idea of componentization at that time , Team members don't have to write a lot of repetitions . But at that time, we were completely equivalent to writing a lot of class pages ourselves .

In practice , our UI In the design drawing , Need the same presentation interface , The presentation data are the same , The difference is the width of the child element and the margin of the parent element . The width of this style needs to be margin on the home page , And in a specific page , This display is spread over the whole width . If it's still in school , I'm sure I'll write twice . But now learn enterprise code , I'll use components to solve , Write a common component ,prop Incoming width , Margins these different values can , here , There are two styles on the home page and the specific display page , However, due to their modular thinking of promoting relative to the school , Less repetitive code .

Global style

When I first looked at the code , There's a lot more .scss file , But I didn't pay much attention to these documents at first , I think this is the same style file , But later we also realized the importance of global style .

At the beginning, my task was to modify the styles that need to be changed in some version iterations , Then it comes to some color problems , Because I don't pay attention to , I'll go. figma Search for 16 Base color code , I just used this 16 Base code , When you submit the code later , The tutor came to check , He just told me , Do you know scss What do you do . I said I knew , It defines some global general styles. You can use variables to define styles , You can also iterate over selectors . Then the tutor said that your color, you write so dead , In case of change in the future, it doesn't have to be changed one by one , Look, we're .scss Is the color style defined in the file so that we can modify it later . Then the tutor guided some knowledge . Then I put .scss I read the document once , I found that I didn't know the color , These fonts , There are also some common layouts, such as flex It's horizontally and vertically centered , The arrangement direction is the cross axis, etc , Positioning has relative , absolute , Fixed, etc . So it's more convenient , Only need class Write the name of the defined layout in , You don't have to write various attributes every time , More conducive to the development of .

Under the guidance of the tutor , I did learn some knowledge in school , I've also practiced some demo, But I do know how to use , So internship is very important , Let people make better use of what they have learned .

The styling

When I first started the code , Just let me modify some samples bug, There are also some new iteration styles .
One of the most impressive is , On the computer side, it is normal for applet developer tools to run , But when they test , They found that the button on the mobile phone is not centered , Then my tutor gave me the task of revision . At first I didn't have a clue , Because I also feel strange , Applet developer tools run in the middle , The mobile phone test shows abnormal , After looking at the code , They used positioning to locate this button . However, the picture frame and the button are in the outermost layer view Relative positioning to positioning . I think it should be like this. The calculation of positioning is not accurate , Then I nested one inside the avatar frame view, This view It will also fill the whole avatar frame , I put this new view As the positioning point of the button, calculate , This ensures that the button is always in the middle of the avatar frame .
The other is , Button for settlement , There are three lines of amount , Second behavior 0 when , The clarity of settlement is not aligned , He put his eyesight and amount in one view Inside the . I'll just separate the eye and the amount , I also thought about it. If I had been in school before, I would have used a floating layout to show it on the right , But after my previous learning code , The development basically did not use the floating layout . Used flex Then set the direction of the cross axis so that he can show on the right . More and more flex The eternal God , No wonder most interviewers ask questions flex Knowledge points of layout .

Object settings

The test shows that , There is an interface with this information displayed outside , But when you click in , The specific information of some items is not displayed , I started checking , Find the corresponding component , find prop value , Development did not find the method to request background data in the method area , I didn't see vuex Use , But I saw mixin, I didn't expect that , He put his request on mixin Inside , then , I print the requested data , The object obtained is really not complete


thank
Similar articles

2022-01-15

***

2022-01-15

***

2022-01-15

***

2022-01-15

2022-01-15

2022-01-15

2022-01-15