1. Box model
Box-sizing :content-box width = set width +border+padding Box-sizing :border-box width = set width, border and padding need to be subtractedCopy the code2. Center the elements horizontally and vertically
The first position: position: Absolute; top:50%; left:50%; The second position: position: Absolute; margin:auto; left:0; top:0; bottom:0; right:0; Third flex layout: display:flex; justfy-content:center; align-items:center;Copy the code3. Speak some ES6 grammar
Let = '<div><span>hello world</span></div> arrow functions: Const {name,age} = {name:'zs',age:16} const {name,age} = {name:'zs',age:16}... Syntax, extended operators: Fullcolor =[a,b],fullcolor =[...color,c,d] => [a,b,c,d] import and export syntax npm i bable-preset-es2015Copy the code4. Briefly talk about promises and some of their methods
Var promise=new promise (function(resolve,reject){try {throw new Error('test'); } Catch (e){reject(e)}} This method can be used to send several requests together, and then return the data from the array, and then get the data you want. This method can also be used for asynchronous requests. Const makeRequest = async () => {try {// This parse may fail const data = JSON. Parse (await getJSON()) console.log(data) } catch (err) { console.log(err) } }Copy the code5. Redraw and rearrange, anti-shake and throttle
For example, some font color background changes will lead to redraw the dim light of night, as some font size or element size change can lead to a rearrangement, redrawn will not necessarily cause rearrangement but rearrangement will lead to redraw the customer in a short time continuous trigger the same event can use image stabilization, which in a certain time period to specify the function of the only once, Throttling means that if the same event is triggered in a large number of times within a short period of time, after the function is executed once, it will not be executed for a specified period of time until the specified period has passed, that is, the event is executed at an interval of one time.Copy the code6. Enter the flow after the URL
The user enters the URL, the browser initiates a DNS query request, establishes a TPC connection, and the browser sends an HTTP request to the Web server. The browser sends the data to the client to parse the HTTP response and render the pageCopy the code7. Please briefly explain the difference between MVC and MVVM
M is model, used for data processing, and V is view, used for view processing, but the two do not interfere with each other, that is, data processing will not write operations related to view update, and view update will not write operations related to data processing. At this point, the MVC provides a c controller, which can directly refer to M and V. However, M and V cannot directly reference C, and C's responsibility is to timely assign m's latest data to V to complete the view update. But with the development and application of logic is more and more complex, and define the definition of m and v early death, the data parsing all of this are done by c, but can lead to more and more bloated c, the design of c at the beginning there is no data parsing this function, so we created an additional dedicated to a new class of data parsing, namely the vm, the viewModel. It is not that C is absent in MVVM, but that the presence of C is greatly reduced by the VM module. Everything that needed to be handled by C before is now basically handed over to the VM module to complete, so the presence of C is reduced. It is not that there is no C module. Vue is an MVVM framework, and its two-way data binding principle is implemented by using object.defineProperty() to redefine the operation of the object to get and set property values, namely the get and set methodsCopy the code8. What are the front-end attacks, their principles and solutions
(1). XSS cross-site scripting attack principle: basic types of executable scripting attacks are included in the page rendered data: reflection type (DIRECT injection of URL parameters) and storage type (injection after storage into DB) CSRF cross-site request forgeries principle: In request third party sites to this web site by (1) the user in a standing front page request a login (authentication) (2) a station back-end identified, login is successful, in the user's authentication cookie information (3) b standing front page to a station back-end request, with a standing cookie information (authentication information), To sum up, it can be clearly known that as long as the user accesses the front page of station B, station B can initiate a request to A with the user login information of Station A without the user knowing it at all ③. Click hijacking principle: Third party websites embed a website through iframe, and set the IFrame to be transparent and invisible, and overlay it on other disguised DOM. The illegal clickable DOM is the same as the clickable DOM of the actual embedded website. When the user clicks on the disguised DOM, Actually click on the DOM of the page embedded in the iframe to trigger the request action characteristics: X-xss-protection is automatically added to the HTTP response header. The value of x-xss-protection is 0, 1, and default. X-xss-protection is enabled by default. Content injection replaces Angle brackets and property injection replaces single or double quotation marks. CSRF attack defense CSRF has several features: the request sent by SITE B carries the cookie of Site A, the request sent by site B does not go through the front end of site A, and the referer in the HTTP request header is site B. (1) Third-party websites are prohibited to carry the cookie information of this website. Set the strict value to: all third-party requests cannot carry cookies of this website, and lax value to: links can, but form submission and Ajax requests cannot. When a token request is initiated, the front end needs to input the verification information of the website, and the back end verifies the verification code. Only when the verification code is correct, related operations (such as storing data) are performed: The front end of station A stores the token in the current page and cookie. When the request is made to the back end of station A, the token field is included in the parameter. The back end of station A compares the token in the parameter with the token in the cookie. When a third-party website requests the backend of A, it can carry the cookie of A in time, but cannot get the authentication message because it has not gone through the front-end page of A, which will also lead to the request failure. (3) Referer verification: Prohibit requests from third parties ③. Click Hijack Attack Defense (1) JS forbid embedding: <script> if (top.location!) <script> if (top.location! } </script> This is not a universal option, because the sandbox attribute in the iframe tag can disable scripts embedded in web pages: <iframe sandbox='allow-forms' src='... '></iframe> (2) Set the HTTP response header x-frame-options: It would be ideal to allow sameOrigin to set the x-frame-options field values on all web servers. Improve user awareness of preventionCopy the code9. Two routing modes in VUE, and briefly explained
The hash mode can take advantage of the onHashChange event, which can be listened for on a Windows object, because any URL that changes to the hash is recorded by the browser. In the Vue project we use hash mode, using the hash of a full URL to simulate a full URL, so that when the URL changes, the page does not reload. When the page is in history mode, everything may be fine during the development phase, but after the project goes live, the page will be returned 404 because the back end does not configure the corresponding URL request resource, and the same index.html page will be returned.Copy the code10. Deep copy and shallow copy
The difference between shallow copy and deep copy can be simply described as follows: B is copied to A. If B changes, A is changed. If B changes, it is A shallow copy. Object.assign() var obj = {a: 1, b: 2} var obj1 = object.assign(obj); obj1.a = 3; Console. log(obj.a) // 3 (3) Direct = sign assignment deep copy implementation method: Function deepClone(obj){let objClone = array.isarray (obj)? [] : {}; If (obj && typeof obj==="object"){for(key in obj){if(obj. HasOwnProperty (key)){// Determine if ojb child is an object, if so, If (obj[key]&&typeof obj[key] ==="object"){objClone[key] = deepClone(obj[key]); }else{// If not, simply clone objClone[key] = obj[key]; } } } } return objClone; } let a = [1, 2, 3, 4], b = deepClone (a); a[0]=2; console.log(a,b); Function deepClone2(obj) {var _obj = json.stringify (obj), objClone = json.parse (_obj); return objClone; } extend() var array = [1,2,3,4]; var newArray = $.extend(true,[],array); CloneDeep (test) let result = _. CloneDeep (test) let obj1 = {a: 1, b: {a: 1, b: 2 } let obj2 = { a: obj1.a, b: obj1.b } obj2.a = 3; alert(obj1.a); // 1 alert(obj2.a); Var obj = {a: 1, b: {a: 1, b: {a: 1, b: 2 } var obj1 = Object.assign({}, obj); // obj assigns a null {} obj1.a = 3; The console. The log (obj. A); // When the values in the Array are basic data types such as String, Number, or Boolean, the Array is a deep copy. // When the values in the Array are reference data types such as Object, Array, the Array is a deep copy. Var arr1 = ["1","2","3"]; var arr2 = arr1.slice(0); arr2[1] = "9"; Console. log(" Array original value: "+ arr1); Console. log(" Array new value: "+ arr2); Var arr1 = ["1","2","3"]; var arr1 = ["1","2","3"]; var arr2 = arr1.concat(); arr2[1] = "9"; Console. log(" Array original value: "+ arr1); Console. log(" Array new value: "+ arr2); Var arr1 = [{a:1},{b:2},{c:3}]; var arr2 = arr1.concat(); arr2[0].a = "9"; Console. log(" array original value: "+ arr1[0].a); // Original value of array: 9 console.log(" new value of array: "+ arr2[0].a); // Array new value: Var newObj = object.create (oldObj) Can achieve the result of deep copy function deepClone (initalObj finalObj) {var obj = finalObj | | {}; for (var i in initalObj) { var prop = initalObj[i]; A = initalObj if(prop === obj) {continue; } if (typeof prop === 'object') { obj[i] = (prop.constructor === Array) ? [] : Object.create(prop); } else { obj[i] = prop; } } return obj; // When value is a basic data type, such as String, Number, or Boolean, the extended operator can be used for deep copy. Var car = {brand: "BMW", price: "380000", length: "5 meters "} var car1 = {brand: "BMW", price: "380000", length: "5 meters "} var car1 = {... car, price: "500000" } console.log(car1); // {brand: "BMW", price: "500000", length: "5 m "} console.log(car); / / {brand: "BMW", price: "380000", length: "5 m"}Copy the code11. The role of /deep/ in vue
CSS styles in Vue don't work, use! /deep/ : /deep/ : /deep/ : /deep/ Adding the scoped attribute to the style tag in the VUE component prevents the styling from contaminating the outside world. Scoped makes the styling within the component programmable locally and only applies to the current component. If we use scoped within the current component, However, I think when CHANGING the style of the component in the current component, I will find that it does not work. The reason is that the parent component resolves the hash value of the parent component, while the tag in the child component adds the hash value of the child component, so it does not work. The scoped attribute adds a data-V-hash attribute to the tag. If both parent and child components have scoped, the outermost layer of the child component has both the parent component's hash value and the child component's hash value. Father-div /deep/. Child-div {color:red; }Copy the code12. The difference between HTTP and HTTPS
HTTP: Hypertext transfer protocol, is a based on the request and response, stateless, application layer protocol, long based on TCP/IP protocol to transmit data, one of the most widely used Internet networks protocol, all WWW file must abide by this standard, the HTTP design goal is to provide a way to publish and receive HTML page. HTTPS :HTTPS is a transport protocol for secure communication over a computer network. It uses HTTP to establish a full channel and encrypts data packets using SSL or TLS. The primary purpose of HTTPS is to provide identity authentication to web servers and protect the privacy and integrity of the data exchanged. TLS is a transport layer encryption protocol. It is the predecessor of SSL and was released by Netscape in 1995. Secure Sockets Layer (SSL) and its successor Transport Layer Security (TLS) are a Security protocol that provides Security and data integrity for network communications. TLS and SSL encrypt network connections between the transport layer and the application layer.Copy the code