current position:Home>The front end can't calm me down

The front end can't calm me down

2022-04-29 13:34:23Dada front end

What are the characteristics of inline tags and block tags

Block labels Each block attribute tag starts with a new line , And all subsequent elements will start on a new line Width can be set 、 Height , Row height , Distance from top , Distance from the bottom If the width of the block attribute label is not set , It defaults directly to the width of the parent element 100% Block attribute labels can be nested directly p You can't nest... In a tag div label

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<li>、<address>、<blockquote>、<form>

In line labels Row attribute tag, which is in the same row as other tags Cannot set width , Height Row height Distance from top Distance from the bottom The width is directly supported by the internal text or pictures Row attribute labels cannot be nested inside row attribute labels

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

img Use of labels

<img src="/i/eg_tulip.jpg"  alt=" Shanghai flower port  -  tulips " />

img Element embeds an image into a web page .

Please note that , Technically speaking ,<img> Tags don't insert images into web pages , It's about linking images from a web page .<img> The label creates the space occupied by the referenced image .

HTML And XHTML Differences between stay HTML in ,<img> The tag has no end tag .

stay XHTML in ,<img> The tag must be closed correctly .

Please describe cookies,sessionStorage and localStorage The difference between ?

The same thing : All stored on the client side Difference : 1. Storage size 2. Valid time

The interaction between data and server

 01

Set up Cookie

var name = "jack";  
var pwd = "123";  
var now = new Date();  
now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);// Turn millisecond   
var path = "/";// It can be a specific web page   
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;// full name   
document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; // password 

Highly content adaptive div How to achieve vertical center ?

div{
display:flex;
align-items:center;
}

Bom What is it? ? List what you know Bom object

BOM yes browser object model Abbreviation , Browser object model for short

Bom object window object document object location object navigator object screen object history object

hybrid The principle of communication

1.H5 towards Native signal communication 2.Native towards H5 signal communication 3.H5 Communication between pages

fetch and ajax The difference between

Ajax Use of is XMLHttpRequest Object to request data

fetch window One way The main features are 1、 The first parameter is URL 2、 The second parameter is optional Can control different init object 3、 Used js Medium promise object

data-xxx What is the function of attributes ?

data- by H5 The new provides custom properties for front-end developers , These attribute sets can be set through the object's dataset Property acquisition , Browsers that do not support this property can use getAttribute Method to get

What is the browser's standard mode and weird mode

The standard model : Browser press W3C Standard parsing execution code Quirks mode : Use the browser's own way to parse and execute code , Because different browsers parse in different ways , So it's called a weird pattern .

XSS What is it? Say ?

XSS refer to : Hackers pass “HTML Inject ” Tampering with the web , Insert malicious script , So when users browse the web , An attack to control a user's browser .

CSRF Understand? ?

CSRF(Cross-site request forgery) Cross-site request forgery , Also known as “One Click Attack” perhaps Session Riding, Commonly abbreviated as CSRF perhaps XSRF, Is a malicious use of the site .

How to understand cross domain

Cross domain is the security display imposed by the browser , That is, different websites cannot ask the content of other websites

Cross domain , The so-called domain means http(s)://host:port, As long as this string is inconsistent with the current website , The browser will think you have crossed domains .

cookie What is it? , How to store

Cookie It's a plain text file saved on the client side jquery.cookie.js Expansion pack,

$.cookie("test", "1", { expires: 7 }); 


// Read cookie
$.cookie("test");


// Delete cookie
$.cookie("test", "1", { expires: -1 }); 
// If the expiration time is set to negative, it will be invalid 

How to use CSS To achieve a triangle

Handwriting bind function

What is function throttling ? Simply put, a function cannot be called continuously in a short time , Only when the specified time interval has elapsed since the last function execution , To make the next call to the function .

Implement a responsive square

How to count down ?

React Component lifecycle

React The life cycle is divided into mount ( assembly ) 、 to update 、 uninstall as well as Catch the wrong Four state stages

react How to improve performance

react Component rendering is divided into initialization rendering and update rendering

vue Communication between pages

The first one is , Parent-child component communication

One . The parent component passes values to the child component

Two . The child component passes the value to the parent component or updates the parent component value

vuex

State management mode 、 Centralized storage management

Introduce to you CSS Box model of

The box model : Content (content)、 fill (padding)、 The border (margin)、 Frame (border)

There are two kinds of , IE Box model 、 standard W3C Box model ;IE Of content Part contains border 、padding

Absolute positioning 、 Relative positioning knowledge

positon:relative; and position:absolute

Absolute positioning : This element is relative to its parent element Relative positioning : The element is relative to its original position , Offset by a certain distance . The opposite is yourself .

When do I need to clear the float ? Clear floating method summary

The parent element is highly collapsed Add a redundant element at the end of the parent element and set clear:both Using pseudo elements , Here we use :after Use overflow attribute , Add... To the parent element overflow:hidden ||auto

Keep the floating layer horizontally and vertically centered

Use positioning and margin:auto

How to keep text horizontally and vertically centered

text-align:center; /* Horizontal center */


div{
width:200px;height:200px; /* Set up div Size */
border:1px solid green; /* Frame */
text-align: center; /* Align text horizontally centered */
line-height: 200px; /* Set text line spacing equal to div Height */
overflow:hidden;
}

display and position The value of 、 Their respective meanings and usages

position Property value :static( Default )、relative、absolute、fixed、inherit

display Property value :none、inline、inline-block、block、flex、inherit

The kind of selector and its priority

1、 Type selector 2、 Simple property selector 3、 Combination selector type

Summarized as !important > inline > ID > class > pseudo-classes | Attribute selection > label | Pseudo object > wildcard > Inherit

canvas And svg The difference between

px、em、rem The difference between

PX px Pixels (Pixel). Relative length unit . Pixels px It's relative to the screen resolution of the monitor

EM em It's a unit of relative length . Relative to the font size of the text in the current object .

rem yes CSS3 A new relative unit (root em, root em), This unit has attracted a lot of attention .

JavaScript What are the basic data types of 、 Explain the original data types and reference data types

ECMAScript Includes two different types of values : Basic data types and reference data types .

JS There are six types of data : Number、String、Boolean、Null、Undefined、Object

In the pile : Reference data type (object、function)

In stack : Basic data type (number、string、boolean、null、unedfined)

Basic data type (5 individual ):Undefined,Null,Boolean,Number,String quote ( complex ) data type :Object (object,array,function,date etc. )

Different memory allocation when declaring variables Different memory allocation mechanisms also bring different access mechanisms The difference when copying variables Different parameter passing

Talk about null And undefined The difference between

stay JavaScript in , Assign a variable to undefined or null, honestly , Almost no difference .

null Express " There is no object ", That is, there should be no value . undefined Express " Lack of value ", This is where there should be a value , But there is no definition .

What are the methods of variable type detection

There are four ways to judge the data type :

1.typeof

2.instanceof

3.constructor

4.Object.prototype.toString.call

Talk about the understanding of prototype chain ,prototype What is it? , When to use

prototype Object is an important mechanism to realize object-oriented stay JavaScript There is no concept of a class in , It's all functions 1. Prototype and prototype chain are JS A model for implementing inheritance . 2. The formation of prototype chain really depends on proto  Instead of prototype

Function this What do you mean ,this Direction problem of

1. When a function is not used as a constructor ,this Point to window 2. When used as a constructor ,this Point to the newly generated object

apply And call The difference between , What are the applications

There is no such method in itself , Just choose to call call Method :call(obj,x,y,z,.....)

A method that calls an object , Replace the current object with another object

apply Method :apply(obj,[x,y,z])

A method of applying an object , Replace the current object with another object .

The parameter method is different

Kernel summary of major browsers

JavaScript in split() and join() The difference between

split() Used to split strings , Returns an array join() Used to connect multiple characters or strings

Array methods push()、pop()、unshift()、shift()

The difference is push()、pop() Add or subtract from the end of the array ,unshift()、shift() Add or subtract from the head of the array .

pop() Used to remove the last item at the end of the array , Then return the removed item

unshift: Add parameters to the beginning of the original array , And returns the length of the array shift(): Delete the first item of the original array , And returns the value of the deleted element

HTTP Understanding of the agreement 、TCP/IP Three handshakes

HTML5 New label 、 attribute

Improvement of semantic tags p article aside hgroup header footer nav figure figcaption mark progress time wbr datalist details

Forms newly added input Types of elements : search : Search input box tel : Telephone number input box url : Input url Address email : Mail input box number : Digital input box range : Value selector in a specific range ( Change the number in a certain range by dragging the scroll bar ) color : Color picker Only in Opera and Blackberry browser datetime : Show full date and time UTC Standard time datetime-local : Show full date and time time : Display time month : Show month week : Show week

es6 And es5 The difference between

JavaScript A dynamic type 、 Weak type 、 Prototype based client scripting language What is? ES5 As ECMAScript The fifth version What is? ES6 ECMAScript6 On the premise of ensuring downward compatibility , Provide a lot of new features

CSS in clear The role of

 Floating elements are not allowed on the left and right sides of the image :


img
  {
  float:left;
  clear:both;
  }

Understanding of closures

How to judge whether a variable is an array

1、instanceof
function isArray (obj) {
  return obj instanceof Array;
}
2、Array Object's  isArray Method 
function isArray (obj) {
  return Array.isArray(obj);
}
3、Object.prototype.toString
function isArray (obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}

There are two kinds of events when the page is loaded 1.load When all resources on the page are loaded 2.ready() When DOM Execute a function after the document tree is loaded

Talk to you about es6 Understanding of arrow function

After the function is passed , If you use the arrow function , this It will eventually point to the context where it is defined this object .

One big difference between arrow functions and ordinary functions is that arrow functions do not rebind the scope .

Talk about your understanding of modularity

modularization —— Divide the program into modules that run independently and can be accessed independently , Each module completes a subfunction , Integrate these modules to form a whole , Can complete the specified functions to meet the needs of users .

Write an array de duplication method , Use hash The way to watch

border-radius:3px 4px 5px 6px Represents the upper left corner of the setting object 3px Round corners 、 Upper right corner 4px Round corners 、 The lower right corner 5px Round corners 、 The lower left corner 6px Round corners .

Yes vuex The understanding of the

The core concept Vuex Is applicable to Vue.js Application state management library

Yes JavaScript Object oriented understanding , Have you ever applied ?

Talk to you about MVVM Understanding of development patterns

MVVM It is divided into Model、View、ViewModel The three . Model Representative data model , Data and business logic are in Model Defined in layer ; View representative UI View , Responsible for data presentation ; ViewModel Responsible for monitoring Model Change of data and control of view update , Dealing with user interaction ;

Vue What are the instructions ?

v-html、v-show、v-if、v-for wait

v-if and v-show What's the difference? ?

Vue How to monitor the change of a property value in ?

watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }
  }

delete and Vue.delete Remove the difference between arrays

How does the front end optimize website performance ?

Reduce HTTP Number of requests Control resource file loading priority Using browser caching Reduce rearrangement Reduce DOM operation Icon use IconFont Replace

 Native DOM Object turn jQuery object :
var box = document.getElementById('box');
var $box = $(box);
jQuery Object to native DOM object :
var $box = $('#box');
var box = $box[0];

jQuery How to extend custom methods

(jQuery.fn.myMethod=function () {
       alert('myMethod');
})
//  perhaps :
(function ($) {
        $.fn.extend({
             myMethod : function () {
                  alert('myMethod');
             }
        })
})(jQuery)


(function($){
 $.fn.extend({
  myMethod: function() {
   alert('myMethod');
  }
 })
})(jquery)

ES5 Basic data types for ,Undefined,Null,Number,String,Boolean. Reference type ,Object

JavaScript data type

A string value , The number , Boolean value , Array , object .

Value type ( Basic types ): character string (String)、 Numbers (Number)、 Boolean (Boolean)、 In the air (Null)、 Undefined (Undefined)、Symbol.

Reference data type : object (Object)、 Array (Array)、 function (Function).

JavaScript Objects are data that have properties and methods .

JavaScript data type stay JavaScript There is 5 There are two different types of data :

string number boolean object function 3 Object types :

Object Date Array 2 Data types that do not contain any values :

null undefined

ES2015(ES6) Two important ones have been added JavaScript keyword : let and const.

let Declared variables are only in let The command is valid in the code block .

const Declare a read-only constant , Once declared , You can't change the value of a constant .

JSON Rule of grammar The data is key / value Yes . Data is separated by commas . Braces hold objects Square brackets hold arrays

javascript:void(0) This code

javascript:void(0) The most important thing is void keyword , void yes JavaScript The most important keyword in , This operator specifies to evaluate an expression but not return a value .

#  Contains a location information , The default anchor is #top  It's the top of the page .

and javascript:void(0), Just a dead link .

copyright notice
author[Dada front end],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291041433130.html

Random recommended