preface
Hello everyone, I come from Zhoukou, Henan Province, the hometown of Yuan Shikai, the 100-day Emperor. From a chance to contact programming at that time was very like, but they have their own work has their own things to do, did not think too much. A lot has happened in 19 years, and I'm not working well at my job. The latter half of the year as the outbreak of the epidemic situation, contradictions too much, their feelings also ended. In the career. Love double blow, his decadent half a month. At that time, I was like an invalid, lying in bed every day to sleep, right. That's right. Other people's way to relieve stress is to find friends to drink, smoke cigarettes. And I do not smoke, do not drink, the favorite way to decompress is to lie in bed like a disabled person, self-healing, self-repair, side escape, side of self encouragement. After half a month, oneself can't be in place rotten, oneself be to cheer up. I saw the home office on the news, the health code on Alipay, and the rolling epidemic data every day. An idea was born in my mind to do programming, and I chose my favorite front-end language, so I started my front-end journey.
learning
When I first started to touch HTML and output a Hello world on the browser, I fell in love with the front-end world. Then began to systematically plan their own learning route HTML CSS JS AJAX Git VUE bucket family. I was driven by myself every day, from seven in the morning to ten at night. And has kept this work and rest without stagnation, I can not believe that they can stick to it, and also insist on so long. Of course, this period of time was really uncomfortable, I bought a lot of Nescafe in PDD, and began to study after taking half an hour nap at noon every day. Start practicing. Type some examples. Even if it has been very skilled, but they will still have anxiety, in order not to let their anxiety, they began to repeat several times. I don’t stop until I get to the point where I think I know this piece, this point, very well.
<– below to give you a summary of my previous study notes, because it is the annual summary of the simple writing of the more basic not so detailed. Behind will slowly write some technical post to everyone, share their own learning experience. Ps: Don’t want to see the content of the direct skip to see the following bar ~ ha ha ha –>
HTML
1. Web page structure: Web page structure generally contains document declaration DOCTYPE, and meta in head should contain encoding format, keywords, and page description information. <img>, <input>, <link>, <meta>, <param>, <source>, < WBR > (2) SPAN: use of text blocks. 4. Block-level elements and row-level elements: Block-level elements: start on a new line and occupy the full width of the line. Div, for example, defaults to a block-level block element; Line-level elements: Only maintain the width of the content, such as the SPAN element for a text block; Use the display attribute of the CSS to declare the display level of elements, including inline row level, inline-block inline block element, block table block level table. 5. Text elements: (1) Bold elements :strong, B; (2) Slant elements: EM I <header>, <nav>, <article>, <section>, <aside>, <footer>Copy the codeCSS
1Box collapse: (1) caused by floating, floating will fall off the standard flow (2Margin-top: margin-top: margin-top: margin-top: margin-top: margin-top: margin-top: margin-top: margin-top: margin-top3Clear float add height to parent box add overflow: Hidden to parent element add border2/* Add position: relative */ div{position:absolute;top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* There is a wide height */
.son{
position: absolute;
width: 50px;
height: 50px;
margin: auto;
background-color: green;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Parent element */
{
display:flex;
justify-content:center;
align-items:center;
}
/* Parent element */
｛
display: grid context-items: centeralign-items: center}3Create a triangle div {width:0;
height: 0;
border: 20px solid transparent;
border-width: 40px 20px 0 0;
border-right-color: #f99;
}
4, CSS selector priority:! important> Inline Style > ID selector > Class/Property/pseudo-class selector > Pseudo-element/tag selector > Wildcard selector5Px is a fixed unit, em is a relative unit, and is the size of the current text. Rem is a relative unit, and is the size of the HTML fontsize6Flex -direction: sets the main axis of the container in flex-wrap: specifies whether the item is displayed in justify-content: Set the project on the main shaft of a container of alignment align - items: special projects on the side of the shaft arrangement align - content: more line items on the lateral axis alignment flex - flow: Flex is a combination of flex-direction and flex-wrap. The default value is row. Nowrap flex is a contraction of flex-grow flex-shrink flex-basis7, and set up,12pxFont-size: 16px;12px;
-webkit-transform:scale(0.8);
}
8New feature for C3: border-radius box model box-sizing shadow box-shadow text-shadow Text-shadow transition2D transformation transformtranslate(translation)scale(scaling)skew(oblique)rotate(rotation) transform-origin Controls the conversion center3D transformationperspective(Perspective distance)transform-style(3Flex media query @media screen and () {flex media screen and () {... } border imageborder-imageCustom animation@keyframesRGBA HSLA mode background-size background-origin background-clip9, cSS3 added pseudo class:p:first-of-type Selects the first element belonging to its parent elementp:last-of-type Selects the last element belonging to its parent elementp:only-of-type Selects the element that is unique to its parent elementp:only-child Selects the only child element belonging to its parent elementp:nth-child(n) Selects the NTH child of its parent :enabled :disabled The disabled state of the form control. : Checked checkboxes or checkboxes are checked:hover
:before
:after
Copy the codeJS
1, js data type, built-in object: simple data type: Number String Booleanundefined nullComplex data type: Objectfunction arrayBuilt-in objects:Math Date Object Array Function Number String. 2,this: function call mode,thisPoint to thewindowConstructor call pattern,thisPoint to the newly created instance object method call pattern,thisThe object context invocation pattern that points to the calling method,callandapplyMethod,thisPoints to the first parameter in the methodbindMethod,bindOf the new function createdthisThe binding ofbindIn the methodthisArgThe parameter is in the event handler,thisPointer to the current element timer that triggered the event,thisPoint to thewindowIt's not in the arrow functionthisPoint to the problem, itsthisAnd of the outer scopethisRemain consistent in anonymous functionsthisAlways points to thewindow3,newOperator: creates a new object inside the functionthisShallow copy: copies a layer of properties of an object. If there are still objects in the object, the address is copied. This applies to deep copies of properties in the object whose values are simple data types: Copy multiple attributes of the object, if there are objects in the object, it will continue to copy, using recursion to achieve 5. Prototype: functions haveprototypeProperty, the value of which is an object, called the stereotype chain: objects have it__proto__Property, which points to its prototype object, which is also an object, and has__proto__Attribute, the prototype object that points to the prototype object, such a layer by layer chain structure is called the prototype chain.call,applyandbindThe difference between:callandapplyMethods can call functions, and the first argument inside a method can be modifiedthisThe point tocallMethods can have multiple arguments that are passed to the function as arguments except for the first oneapplyA method takes at most two arguments. The second argument is an array or pseudo-array, each of which is passed to the function as an argumentbindMethod cannot call a function; it creates a copy of the function and binds the new functionthisPoint to thebindthethisArgSeven parameters,es5New array method:forEach() loop through the number group, the function is equivalent toforcyclesome() is used to iterate over groups of numbers, returning if at least one of them meets the conditiontrueOtherwise returnfalse.map(Returns a new array in which each element is the result of calling one of the provided functions.filter() is used to filter out elements that do not meet the criteria, and returns a new array of all elements that meet the criteria,every() is used to iterate over a number array only if all elements are returnedtrueAnd did not return totrueOtherwise returnfalse.reduce() executes a supply function on each element of the array, sums up the result, and returns it.es6Array destruct 2. Object destruct string method 1. Template string backquotes${} represents variables2.Includes () : Returns a Boolean value indicating whether the parameter string was found.3.StartsWith () : Returns a Boolean value indicating whether the argument string is at the head of the original string.4.EndsWith () : Returns a Boolean value indicating whether the argument string is at the end of the original string. Array methods:1.Find () returns the value of the first element in the array that satisfies the condition. Otherwise returnsundefined.2.FindexIndex () returns the index of the first element in the array that meets the criteria. Otherwise return -1. Arrow function:var fn = (x, y) = > {}
1.If there is only one argument, omit ()2.If you have more than one argument, use () to enclose the argument list. Extend operator (expand operator) Promise (Axios builds on promise)asyncandawaitFlat array dimension reductionimportThe introduction ofexportexportObjectAssign Merge objects9, variable scope chain: any function can form scope, function nested in another function, outer function also has its own scope, so the chain structure formed layer by layer is scope chain. The scope chain of a variable depends on where the variable is declared. The scope of a variable is: current function scope ==> outer function scope ==> global scope10Synchronous task The running mechanism of asynchronous task JS is as follows:1All synchronization tasks are executed on the main thread, forming an excution context stack.2In addition to the main thread, there is a Task queue. Whenever the "asynchronous task" has a run result, an event is placed in it.3Once all synchronization tasks in the Execution stack are completed, the system reads the Task queue to see what events are in it. Those corresponding asynchronous tasks then end the wait state and enter the execution stack to start execution.4, the main thread repeatedly repeats the first above3Step. From the main thread"Task queue"Read the Event in the Event Loop, the process is continuous, so the whole operation mechanism is also called the Event Loop.forThe loop hits one at a timesetTimeout() not right awaysetTimeout() to the asynchronous queue and wait a second before putting it in the task queue, once"Execution stack"All synchronization tasks in theforThe loop ends, and I is already zero4), the system will read it"Task queue"thesetTimeout(), there is4So the answer is output4a4
11Js garbage collection mechanism: generally speaking, objects that are not referenced are garbage and should be removed. The cleaning mechanism is called mark-clean algorithm and reference counting (older versions of IE use the Chinese method), and to deal with memory leaks, the garbage collection mechanism periodically (periodically) finds memory (variables) that are no longer needed and then frees it. Closure: a combination of a function and the lexical environment in which the function is declared (i.e., two nested functions, with in-memory functions having access to variables defined by the outer function).1To form a private space to avoid the pollution of global variables2Disadvantages of persistent memory and data closure:1, persistent memory, resulting in memory leaks.1, try to avoid function nesting, and variable references2, executed variables can be assignednullLet the garbage collector do the collection to free up memory (garbage collector will collect variables when they are not referenced).12Macro task: refers to the current call stack execution, such as the main thread code and timer microtask: refers to the current macro task execution, before the next macro task execution, such as promise. Microtasks are placed in a microtask queue, which is maintained by the JS engine thread.13Js design pattern: Principles of design pattern:"Identify changes in the program and encapsulate them."
1Singletons create objects as literal objects and then add properties and methods2Factory mode, typically writing a method and then creating an instance within the method3Constructor mode, which directly assigns properties and methods tothisThrough thenewCall the constructor4Archetypal pattern, which adds properties and methods to archetypal objects that instances can shareCopy the codework
After a series of studies, there has always been a word in my heart, a word to support me. The day will fall to the great man also… Finally to find a job of the time, he has opened the boss cast three bar. His luck is better, these three interviews have passed. 1. The first company was too far away, because I went to the first interview with the intention of trying, and then THE HR called me to say that I passed. I felt beautiful when I was recognized, but I turned it down because it was too far away. Then we each added the next wechat, back home to see the door of the fried cold noodles, I directly very tough added two eggs, comfortable hey hey. 2. The second one was an outsourcing company. At that time, I had no idea about outsourcing companies. On the past Zhang Jiang there to interview, the opposite is Ali, Baidu, the company is very good, salary can also have a bit enchanted. I asked my friends not to let me outsource, so I didn’t consider it. 3. The third company has a good salary and everything is very nice. Then I entered the company smoothly and started to type code. As you sow, so you reap. On my first day on the subway, I almost wanted to shout out “Wanghoujiangxiangning”. In fact, you are prepared to work overtime on the first day, but the company does not work overtime at all. Every day after work, he did not dare to relax his guard, but also made up for the weak part of his work and the technical system used by the company.
life
Usually I like to run, but now I’m lazy and I don’t run much. Weekend at home entertainment will play games, I play is king, QQ area, king section interested can contact practice together on the black points. I’m a bit of a homebody. I don’t socialize. I don’t go out in a flat car. I started cooking at home, watching some tutorials to learn by myself. I also found great pleasure in cooking. It is a great sense of achievement to do a good dish! Without further ado, just a few pictures. Material preparation
I’ve only been working out for a few days
2022
1. Now I am learning VUe3. I hope I can compare vue3 with 6 and learn React 2 next year. Start to write articles, and insist on writing articles 3. Hope to harvest their own love, the New Year I hope we are better and better, can enter the factory, higher and higher wages, girlfriend more and more! Go, go, go.