I have been working for some time, and I have no time to tidy up. The front-end knowledge is quite messy, which is undoubtedly cruel to the author whose memory is not very good. After being “cleaned up” for many times, it is a long memory, began to record some common knowledge in the work, as a reserve. The following is the author’s irregularly updated content, thank you for reading!!

HTML necessary

1. What are the frameworks that the front end touches?

Bootstrap, Vue, Jquery, Element UI, uView, etc.

2. What are the differences between inline elements, block elements, and inline block elements?

  • Inline elements: Setting width and height is invalid; Set margin, left and right effect, up and down invalid; Setting the padding up, down, left, and right takes effect; Display on one line. The main labels include A, B, SPAN, IMG, INPUT, SELECT, and strong.

  • Block element: set width and height to take effect; Margin /padding works both ways; Multi-label auto-wrap. The main labels are DIV, UL, LI, DL, DT, DD, H1-5, and P.

  • Inline block elements: setting width and height invalid; Set margin/padding to work; No line breaks, sorted from left to right.

Three conversion:

  • display:inline; Convert to inline elements
  • display:block; Convert to block elements
  • display:inline-block; Convert to inline block elements

3. What is the difference between SRC and href

  • SRC: Replaces the current element. Points to an external resource to embed content in the current tag location.
  • Href: Set up a link. Points to a network resource location and establishes a link between the current element (anchor) or the current document (link).

How to play the CSS/CSS 3

1. How many ways can THE CSS be loaded? Prioritizing?

  • A. Import (external styles) via @import
  • B. Introduce (external styles) by tag
  • C. Introduce (internal style) by tag
  • D. Write directly in the tag with the style attribute (inline style)

Priority: D > C > B > C

2. Implement text beyond ellipsis display

Implement a single line of text beyond display ellipsis

 .ellipsis {
    width: 100px;
    height: 200px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Copy the code

Implement ellipsis display beyond multiple lines of text

.ellipsis1 {
    width: 100px;

    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
Copy the code

– The value of webkit-line-clamp determines the number of lines of text to display. Such as: ebkit – line – clamp: 2; More than 2 lines show ellipsis.

javascript

1. What are the common methods of js arrays?

  • Returns a new array without changing the original array
    • jsonArray to string
    • concatMerges two (more) arrays
    • sliceIntercept ([)) partial array
    • mapTraversal number groups, andforEachCan implement traversal number set same, the difference isforEachChange the original array value
    • everyCheck that each element in the array meets the criteriatrue, there is one that does not satisfy the returnfalse
    • someCheck if there are any elements in the array that meet the criteria, and return one of themtrueNone of them satisfy the returnfalse
    • filterReturns the eligible elements of the array
    • reduceArray accumulator that ultimately evaluates to a value. receive(callbackfn, ? initialValue)Two parameters.
  • Returns a new array, the original array
    • popRemoves the last element of the array and returns that element
    • pushAdds one (or more) element to the end of the array, returns the added length of the array
    • shiftRemoves the first element of the array and returns that element
    • unshiftAdds one (or more) element to the beginning of an array, returning the added length of the array
    • reverseReverse order array
    • sortUnstable sort, according to Unicode encoding, as in:let arr = [1, 2, 12]; console.log(arr.sort) // [1, 12, 2]
    • spliceAdds/removes multiple elements to an array at the specified location

2. Function throttling

Functions are throttled, executing functions only once in a given period of time. Most commonly used example: real-time search.

/ * * * *@param {Function} Callback callback function *@param {Number}   Wait interval * *@return {Function} The throttle function */
function throttle(callback, wait = 3000) {
    let timer = null;
    let startTime;
    return function () {
        const ctx = this;
        const args = arguments;
        const now = +new Date(a);if (startTime && now < startTime + wait) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                startTime = now;
                callback.apply(ctx, args);
            }, wait);
        } else{ startTime = now; callback.apply(ctx, args); }}}/ / call
let throttling = throttle(() = > console.log('br'))
setInterval(() = > throttling(), 1000) // Execute every 1s, but print 'br' every 3s
Copy the code

3. Function anti-shake

The debounce function performs a callback n seconds after the function is triggered, and if the action is triggered again within n seconds, the previous action is cleared and the timing restarts.

/** * function anti-shake *@param {Function} Fn callback function *@param {Number}   Wait interval * *@return {Function} * /
function debounce(fn, wait = 1000) {
    var timer = null
    return function () {
        if(timer ! = =null) {
            clearTimeout(timer)
        }
        timer = setTimeout(fn, wait)
    }
}

/ / call
const handle = () = > console.log(The '-')
window.addEventListener("resize", debounce(handle, 1000));
// Change the browser size and stop the output for 1s after the push and drop
Copy the code

It can be seen that the above anti-shake can only be passively triggered (triggered when the time is up), but we do need to trigger some scenes first before controlling the time jam. So there is immediate execution and non-immediate execution.

/ * * *@desc Function stabilization *@param Func is the function that needs to be executed@param Wait Delay execution time (ms) *@param immediate--true the table is executed immediately (whether it was executed for the first time), false the table is not executed immediately **/
function debounce(func, wait, immediate) {
    let timer;

    return function () {
        let context = this;
        let args = arguments;

        if (timer) clearTimeout(timer);
        if (immediate) {
            varcallNow = ! timer; timer =setTimeout(() = > {
                timer = null;
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timer = setTimeout(function () { func.apply(context, args) }, wait); }}}Copy the code

Contrast:

  • Function throttling: perform the callback first, then control n seconds do not request
  • Function stabilization: First control no operation for n seconds (if there is an operation, clear and restart the timer), then execute the callback

4. Compare session and cookie

5. What is the difference between HTTP and HTTPS in terms of transport?

Vue

1. How is the principle of Vue response realized?

Reactive data falls into two categories:

  • Object, iterate over all properties of the object, set getter and setter for each property, to intercept access and setting purposes. If the property value is still an object, set getter and setter for each key of the property value recursively
    • Dependency collection is performed when data is accessed (obj.key) and the associated Watcher is stored in the DEP
    • When the data is set, deP notifies the relevant Watcher to update it
  • The seven prototype methods that enhance the array can change themselves, and then intercept operations on those methods. ○ DeP notifes Watcher to update data. ○ DeP notifes Watcher to update data

2. What is the difference between Methods, computed and Watch?

  • Methods and computed: In a single render, if the same methods or computed property is called in multiple places, methods will be executed multiple times and computed only once.
  • Methods and Watch: They are two completely different things. Some complex logic in Watch can be separated from methods.
  • Computed and Watch are essentially the same, both internally and through Watcher. The differences lie in: 1. 2.computed is lazy and unchangeable.

3. What does the Vue initialization process (new Vue(options)) do?

  • Process component configuration items
    • When initializing the root component, an option merge operation is performed to merge the global configuration onto the local configuration of the root component
    • Some performance optimizations were made when initializing each child component, placing some deep properties on the component configuration objectvm.$optionsOption to improve code execution efficiency
  • Initialize the relationship properties of the component instance, for example$parent,$children,$root,$refs 等
  • Handle custom events
  • callbeforeCreateHook function
  • Initializes the componentinjectConfiguration item, getret[key] = valThe configuration object is then processed responsively and proxyed for eachkey 到 vminstance
  • Data responsive, processingprops,methods,data,computed,watchOptions such as
  • Resolves on component configuration itemsprovideObject to mount tovm._providedOn the properties
  • callcreatedHook function
  • If any configuration item is foundelOption is automatically called$mountMethod, that is to say there iselOption, you do not need to call it manually$mountMethods, on the other hand, are not providedelOptions must be called$mount
  • Next comes the mount phase

4. What does the Vue data responsive entry initState method do?

As you can see, initialization handles props, methods, data, computed, and Watch, respectively.

  • Priority:props,methods,data,computed,watch, includingcomputedIn thekeyCan’t andprops,dataIn thekeyRepeat,methodsDoes not affect.

vue3

1. How to use Store (vuex) in Setup?

Method 1: Import useStore from VUex

// Part of the code implementation
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
    setup() {
        const store = useStore()
        console.log(store) // Return the vuex object}})Copy the code

Method 2: Read from the data returned by getCurrentInstance

import { defineComponent, getCurrentInstance } from "vue"
export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance();
        // proxy.$root.$route
        // proxy.$root.$router}})Copy the code