Section 2020 front-end learning the basics

　　There are n = {1};

　　var b = a;

　　a.x = a = { n: 2 };

　　console.log(a);

　　console.log (b);
　　Answer: {n: 2}, { n: 1, x: {n: 2}}

　　Analysis: where this is the core operation priority than = ax, as ax = precedence over, so in a still {n: 1} is added when the x: {n: 2} This attribute,

　　　　　Because the front b = a; b and make a point to the same address, so that b {n: 1, x: {n: 2}}. Here are a more professional and more detailed answers to study together,

　　　　　1) .var a = {n: 1}; executed, generating the reference address addr_1 assumed, then the time of a point to the address addr_1.

　　　　　2) .var b = a; b defined point a, i.e. address addr_1. At this time, with or without modification or an bn will cause a change in the value of another, should refer to the same address.

　　　　　3) .ax = a = {n: 2}; is the key phrase, the assignment order from right to left. Member attribute access takes precedence over assignment operator =. So, what steps dismantling

　　　　　　3.1 a hold of the address addr_1, waiting to be assigned to .x

　　　　　　3.2 in accordance with the assignment order, performs {n: 2}, at this time becomes a reference address addr_2

　　　　　　3.3 left continues, ax the reference address {n: 2}

　　　　4) According to the above implementation can be drawn. b at the address addr_1, addr_1 the pointing addr_2 .x

　　　　5) .a point addr_2

　　console.log(1);
　　setTimeout(() => {
　　　　console.log(2);
　　});

　　process.nextTick(() => {
　　　　console.log(3);
　　});

　　setImmediate(() => {
　　　　console.log(4);
　　});

　　new Promise((resolve, reject) => {
　　　　console.log(5);
　　　　resolve();
　　　　console.log(6);
　　}).then(() => {
　　　　console.log(7);
　 });
　　Promise.resolve().then(() => {
　　　　console.log(8);
　　　　process.nextTick(() => {
　　　　　　console.log(9);
　　　　});
　　});

　　Answer: 156,378,924

　　Analysis: The whole process is performed in three steps,
　　　　　the first step in the overall script code is executed, the process is executed

　　　　　　　Print 1

　　　　　　　Creating setTimeout macro-task

　　　　　　　process.nextTick create micro-task

　　　　　　　Creating setImmediate macro-task　　　　　　　

　　　　　　　Creating micro-task Promise.then callback, and perform console.log (5); resolve (); console.log (6); this time to print 56, although the call resolve,

　　　　　　　But the overall code is not executed, the process can not enter Promise.then

　　　　　　　Creating micro-task Promise.then callback

　　　　　　　156 to print out a process after the first

　　　　　A second step since the micro-task a higher priority than macro-task, in this case three micro-task according to the task priority is higher than Promise process.nextTick

　　　　　The output 378, which is a new micro-task have been added directly executed print out 9

　　　　　Third micro-task list of tasks have been implemented, the next macro-task, due to the setTimeout higher priority than setImmediate, so print 24

　　　　　Summary: synchronization code execution order priority than asynchronous code execution priority order, the new Promise (fn) fn is synchronous

　　　　　process.nextTick() > Promise.then > setTimeout > setImmediate

　　['1', '2', '3', '4', '5'].map(parseInt)

　　　　Answer: 1 NaN NaN NaN NaN

　　　　Analysis:
　　　　　　See the detailed analysis of this blog https://www.cnblogs.com/typeof/p/12168571.html

　　Squares with CSS layout, there are several ways to implement the layout of squares, to the following commonly used methods listed,

　　1). Flex schemes, such as the following structural layout of html

　　　　</div>

　　The method call returns the results achieved to complete the function

　　function add() {}
　　function one() {}
　　function two() {}
　　one(add(two())); // 3

　　two(add(one())); // 3

　　答案：function add(val) {
　　　　　　　return function(val2) {
　　　　　　　　　return val + val2;
　　　　　　　}
　　　　　}

　　　　　function one(fn) {
　　　　　　　let a = 1;
　　　　　　　return typeof fn == 'function' ? fn(a) : a;
　　　　　}

　　　　　function two(fn) {
　　　　　　　let b = 2;

　　　　　　　return typeof fn == 'function' ? fn(b) : b;
　　　　　}

　　A11Y

　　As a developer, you might often see the "Accessibility" is the word. In the early development of the Web, people are habitual to translate it into a "barrier-free"

　　Because it's designed mainly to consider how to make it easier for people with disabilities to access Web content. For example, people with mobility impairments him more dependent on the keyboard do interact with the Web;

　　Visually impaired people are more dependent on the enlarged screen and Web interaction; hearing-impaired people rely more on reading methods. But with the development of the Internet,

　　Access the Web scenes, settings, and people are more complex and diversified. "Accessibility" is no longer limited to meet the needs of people with disabilities,

　　It also covers the availability of the site in a particular scene, such as a mobile terminal, weak network environment, forgot mouse, touch pad is broken, visit the elderly and so on.　　

　　In the face of this new scenario, under the new group, "Accessibility" is more often translated as accessibility. Also often abbreviated as A11Y (11 letters means 11 between a and y).

　　Therefore, throughout the community you'll see a lot of website or application to a11y name, usually these sites are around the "Accessibility" related content,

　　For example A11y.meThe A11Y Project and A11yWeeky and so on.　　

　　Explain BFC, IFC, FFC

　　BFC (Block Formatting Contexts) literally translated as "block-level formatting context", the trigger element is a BFC rendering isolation region, the sub-element within the container is not in the layout,

　　The impact to the outside elements, outside elements will not affect the internal. Which of the following elements will have a look BFC

　　1) root element

　　2) float property is not none

　　3) position of absolute or fixed

　　4) display为inline-block, table-cell, table-caption, flex

　　5) overflow is not visible

　　After the layout rules generating element as BFC

　　The interior of the box will be in the vertical direction, placed one

　　Vertical distance is determined by the margin box, it belongs to two adjacent Box BFC a vertically overlapping margin occurs

　　Each element is left in contact with the left side of the box that contains it, even if there is floating so

　　BFC region does not overlap with float

　　BFC is a separate container isolated on the page, inside the container does not affect child elements to the outside elements, and vice versa is also true

　　Calculating the height of the BFC, the floating elements are also involved in the calculation

　　IFC (Inline Formatting Contexts) literally translated as "inline formatting context"

　　FFC (Flex Formatting Contexts) literally translated as "adaptive formatting context"

8. DOCTYPE standard mode with a compatible models have what is the difference?

　　Standard mode for rendering web pages follow the latest standards, compatibility mode for presenting traditional web browser designed

　　Standard mode is typesetting and js operating modes are run to the highest standards of the browser support

　　Compatibility mode, the page displayed in a loose way backward compatible, old-fashioned analog behavior of the browser in order to prevent the site does not work

　　Specific differences:

　　Box Model

　　　　In strict mode: width is the width of the content, the true width equal to the width of elements

　　　　Compatibility Mode: width equal to the width + padding + border

　　The percentage may be provided within the height of the row elements and compatibility mode Aspect

　　　　In standard mode, to inline elements span and height settings such wdith will not take effect, while in compatibility mode, it will enter into force

　　　　In standard mode, the height of one element is contained to determine its contents, and if the parent element is not set height, a set percentage of the sub-element height is invalid

　　With margin: 0 auto disposed horizontally centered in IE fail

　　　　Use margin: 0 auto mode can be made in standard elements horizontally centered, but it will fail in compatibility mode (text-align property with solution)

　　　　body{text-align:center};#content{text-align:left}

　　Compatibility Mode Table of font attributes can not inherit the upper set, white-space: pre fail, set the picture padding fail

　　Why just write HTML5 DOCTYPE html

　　HTML5 is not based on SGML (Standard Generalized Markup Language), so do not be a reference to DTD, but DOCTYPE need to regulate the behavior of the browser (let the browser to run their way)

　　The HTML4.0.1 based on SGML, DTD is required to be a reference to a document informing the type of browser used by the document

　　SGML (Standard Generalized Markup Language) is the ratio of HTML, XML older standard, both of which are evolved from the SGML, HTML5 is not

10.

　　Write an algorithm to determine if a number is not "happy number"

　　A "happy number" is defined as: For a positive integer, each of the number of replacements on its numbers and squares each position, and repeat the process until the number becomes 1,

　　It could be an infinite loop but has become less than 1. If you can become one, then this number is the happy number

　　answer:　　

　　　　// var list = [];
　　　　var isHappy = function(num) {
　　　　　　num = ('' + num).split('');

　　　　　　Surely = num.map (reason => Math.pow (why, 2)). reduce ((Reason) => {
　　　　　　　　return why I +;
　　　　　　}); // 1 ^ 2 + 9 ^ 2 = 82

　　　　　　if (num == 1) {// is happy number
　　　　　　　　return to true;
　　　　　　}

　　　　　　if (num == 4) {// not a happy number, out of a recursive @ ink dust from the god of inspiration

　　　　　　// if (list.includes (num)) {// not a happy number, out of the recursive
　　　　　　　　return to false;
　　　　　　}

　　　　　　// list.push(num);

　　　　　　return isHappy(num);
　　　　}

Section 2020 front-end learning the basics

Guess you like