Front knowledge

navigation

[react] Hooks

[Package 01- Design Pattern] Design Principles and Factory Pattern (Simple Abstract method) Adapter pattern Decorator pattern [Package 02- Design Pattern] Command pattern Share pattern Composition pattern Proxy pattern

[React from Zero practice 01- background] code split [React from zero practice 02- background] permission control [React from zero practice 03- background] custom hooks [React from zero practice 04- background] docker-compose React +egg+nginx+mysql [react from zero practice 05- background

AST Abstract syntax tree [source-webPack02-pre knowledge] Tapable [source-webpack03] Hand-written Webpack-compiler simple compilation process [source] Redux React-redux01 [source] axios [source] koa [source] vuex [source-vue01] data Responsive and initialized render [source-vue02] computed responsive – initialized, access, Update process [source-vue03] Watch listener – Initialize and update [source-vue04] vue. set and vm.$set [source-vue05] vue.extend

Vue.nextTick and vm.$nextTick

[source code -react01] ReactDOM. Render01 [source code -react02] handwritten hook scheduling -useState implementation

[Deployment 01] Nginx [Deployment 02] Docker Deployment Vue Project [Deployment 03] Gitlab-CI

Data Structures and Algorithms 01 binary lookup and sorting

[Delve 01] Execution context [Delve 02] Prototype chain [Delve 03] Inheritance [Delve 04] event loops [Delve 05] Currization partial functions Function memory [Delve 06] Implicit conversions and operators [Delve 07] Browser caching mechanism (HTTP caching mechanism) [Delve 08] front-end security [In Depth 09] Deep copy [in depth 10] Debounce Throttle [in depth 11] Front-end routing [in depth 12] Front-end modularization [in depth 13] Observer mode Publish subscribe mode Bidirectional data binding [in depth 14] Canvas [in depth 15] webSocket [in-Depth 16] Webpack [in-Depth 17] HTTP and HTTPS [in-Depth 18] CSS-Interview [in-Depth 19] Handwritten Promise [In-depth 20] Handwritten Functions [In-depth 21] Data Structures and Algorithms – Binary Lookup and Sorting [In-depth 22] Js and V8 garbage collection mechanisms js design patterns – Proxies, policies, singletons – Fiber – Typescript – Drag

[Front-End learning java02-SpringBoot actual] environment configuration and HelloWorld service [front-end learning java02-SpringBoot actual] mybatis + mysql implementation song add, delete, change to check [front-end learning java03-SpringBoot actual] Lombok, log, Deployment [front-end learning Java04 -SpringBoot actual practice] static resources + interceptor + front and back end file upload [front-end learning JAVa05 -SpringBoot actual practice] common notes + Redis to achieve statistical function [front-end learning Java06 -SpringBoot actual practice] injection + Swagger2 3.0 + Unit test JUnit5 [Front-End learning Java07 -SpringBoot practice] IOC scanner + transaction + Jackson [front-end learning Java08 -SpringBoot practice summary 1-7] stage summary [front-end learning Java09 -SpringBoot actual combat] multi-module configuration + Mybatis-plus + single multi-module package deployment [front-end learning Java10 -SpringBoot actual combat] Bean assignment conversion + parameter verification + global exception processing [front-end learning Java11-SpringSecurity] configuration + Memory + database = three ways to implement RBAC [front-end learning Java12-SpringSecurity] JWT [front-end learning Java13-SpringCloud] Eureka + RestTemplate + Zuul + Ribbon

Review Note-01 Review Note-02 Review Note-03

(1) Some words

Illegal Illegal notation Identifier Efficiency Notification notification // notify draggable Drag destination Drag destination Verification Verification code Verification code annotation AnnotationCopy the code

(2) Drag events

  • Trigger sequence
    • dragstart -> dragenter -> dragover -> dragleave -> drop -> dragend
    • Start drag -> drag into -> drag through -> Drag away -> Drag release -> Drag end
  • Two methods that need to be blocked (default behavior)
    • Dragover and drop
    • The dragover and drop events require e.preventDefault() to block the default method for subsequent code in the event to take effect

(3) Mouse click related events

  • Trigger sequence
    • mousedown -> mousemove -> mouseup
    • Mouse press down -> mouse move -> mouse release
  • When you double click the left mouse button, the sequence of events is as follows
    • mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick

(4) What is the difference between mouseEnter and mouseleave?

  • pairing
    • Mouserenter and mouserLeave are paired
    • Mouserover pairs with mouserout
  • Enter the
    • mouseenter
    • mouseover
  • leave
    • mouseleave
    • mouseout
  • Bubbling is two o events that bubble to the parent element after entering the child element
    • mouseover
    • mouseout
    • Mouserover fires when inside the child of the element to which the event is bound, mouseEnter does not
    • Mouserout fires when leaving inside a child of the element to which the event is bound, mouseleave does not fire

(5) the DataTransfer object

  • role
    • DataTransferObject is used to hold (Drag and drop ) ( drag and drop) in the processdata
    • It can hold (one or more data items), which can be (one or more data types)
  • To obtain
    • DataTransferObjects can be obtained from (All drag events(of)dataTransfer) property
  • The constructor
    • dataTransfer = new DataTransfer()
    • Generates and returns a new oneDataTransferobject
  • Five standard attributes
    • DataTransfer.dropEffect
      • Gets the type of the currently selected drag and drop operation, or sets the drag and drop operation to a new type
      • Value must benone.copy.linkormoveOne of the
      • DropEffect attribute name meaning drag effect, in the PC Web end mainly in (mouse hand shape)
    • DataTransfer.effectAllowed
      • Provides all possible types of operations
      • Enumeration types:none.copy.copyLink.copyMove.link.linkMove.move.alloruninitialized
        • None Does not allow drag and drop, and the mouse remains disabled
        • CopyLink allows copy and link operations
        • CopyMove allows both copy and move operations
        • LinkMove allows linking and movement operations
        • All What operations are allowed
    • DataTransfer.files
      • Drag list of local files
      • If the drag operation does not involve dragging a file, this property is an empty list
    • DataTransfer.items
      • For the DataTransferItemList object, which is a list of all dragged data
      • read-only
    • DataTransfer.types
      • indragstartEvent to set the data format and return an array of strings
      • read-only
  • Four standard methods
    • DataTransfer.getData(format)
      • GetData quickly gets the contents of the drag
      • Get plain text: text/plain
      • In real development, text is usually used directly
    • DataTransfer.setData(format, data)
      • Resets the dragged content
      • You can reset the native drag-and-drop content, or use it for parameter passing
      • The actual development drags and drops concrete module elementssetData()Mostly used to pass drag elementsid
    • DataTransfer.clearData([format])
      • ClearData () can only be used for dragstart events
      • GetData () can only live to an empty string after clearData() is executed
      • Note:
        • ClearData () can only be used for dragstart events
        • When we need to use setData() to custom drag data, to avoid native drag data interference, we can first execute a clearData() method
    • DataTransfer.setDragImage(img, offsetX, offsetY)
      • SetDragImage () can only be used for dragstart events
      • What it does: Set drag to have an image behind it
      • parameter
        • Img: represents the chart DOM element object
        • OffsetX: horizontal offset distance from the mouse
        • OffsetY: indicates the vertical offset distance from the mouse

(6) scrollTop, offsetTop, scrollHeight, clientHeight, offsetHeight

  • ScrollTop and offsetTop
    • scrollTop
      • Represents the scroll bar, scroll bar (scroll down vertical distance)
    • offsetTop
      • Distance from (top of current element) to (top of nearest parent element)
      • OffsetTop is a fixed value that doesn’t change when scrolling
      • When the element display: None, offsetTop = 0
  • ClientHeight and offsetHeight
    • clientHeight
      • Including :(padding)
      • Excluding :(border), (margin), (horizontal scrollbar)
    • offsetHeight
      • Includes :(padding), (border), (horizontal scrollbar)
      • Excluding :(margin)
      • So: offsetHeight = client Height + border
  • scrollHeight
    • scrollHeight = clientHeight + scrollTop

(7) JSON – review

(7.1) Basic Concepts

  • Type and format requirements
    • A value of the original type
      • Can only benumber string boolean null
      • Can’t be a (undefined )
    • A value of a compound type
      • Can only beObjects and Arrays
      • Can’t be a (Function, date object, re object )
    • The string must beDouble quotation marks, the object’s key must haveDouble quotation marks
    • Object and array cannot have the last property.
  • Empty arrays, empty objects, null, all valid JSON data
  • Static methods, there are two static methods
    • JSON.stringify()
    • JSON.parse()

(7.2) JSON. Stringify ()

  • JSON.stringify(value[, replacer [, space]])
  • role
    • Used to connect avaluetoJSON string
    • The string is in JSON format and can beJSON.parseThe method of reduction
  • For strings of primitive type, the conversion result is quoted
JSON.stringify('abc') === 'abc' // false JSON.stringify('abc') === "abc" // false JSON.stringify('abc') === "'abc'" // False, note the order of single and double quotes, Return false json.stringify (' ABC ') === '" ABC "' // true json.stringify (' ABC ') === "\" ABC \"" // true // This is because when restoring in the future, The inner double quotes let the JavaScript engine know that this is a string and not some other type of valueCopy the code
Json.stringify (false) // "false" json.stringify ('false') // "" "false"" // In the above code, if it is not the inner quotation mark, the engine will not know whether the original value is a Boolean or a string when restoring.Copy the code
  • Json.stringify () ignores (non-traversable properties of objects - that is, non-enumerable properties)
  • If (the object's attribute) is (undefined or function), it is filtered by json.stringify ()
  • If (array member) is (undefined or function), it is converted to NULL by json.stringify ()
  • Undefined or function -> object filter, array to null
Const obj = {a: undefined, b: function () {},}; Object. DefineProperties (obj, {c: {value: "CCC ", Enumerable: true, // enumerable}, d: {value:" DDD ", Enumerable: False, // not enumerable},}); JSON.stringify(obj); // '{"c":" CCC "}' // 1. If the object's attribute is (undefined or function), it will be filtered by json.stringify () // 2. Non-enumerable properties, non-traversal properties)Copy the code
Var arr = [undefined, function () {}]; Json.stringify (arr) // "[null,null]" // If the array member is (undefined or function), json.stringify () will be converted to nullCopy the code
  • parameter
    • Second parameter
      • If you accept an array, specify the attributes to be converted to a string.
      • If you accept a function, use it to changeJSON.stringifytheThe return value
    • The third parameter
      • JSON.stringifyYou can also accept a third argument to increase the readability of the RETURNED JSON string
      • If it isdigitalRepresents the number of Spaces added before each attribute (up to 10)
      • If it isstring, (no more than 10 characters), the string is appended to the head of each line.

(7.3) in JSON. The parse ()

  • role
    • JSON.parseThe JSON string () method is used to convert the JSON string to the corresponding value
    • If the string passed in is not a valid JSON format,JSON.parseMethod will report an error
  • parameter
    • Second parameter
      • To accept aThe processing function, which is used toChanging the return value

(a) implement drag – method one

  • Not all elements are draggable by default
    • Images are draggable by default - so generally draggable=false is set if the chart is not dragged
    • draggable=trueAfter this attribute is added to the element tag, the element can be dragged
  • case
    • Square: small green square, small blue square, big red square
    • Mobility: Green cubes can move, blue cubes cannot
    • demand
      • Small green blocks can be dragged, blue blocks cannot
      • move
        • When the green cube moves into the red cube, it becomes the last child of the red cube
        • Text hint: current block name
      • Remove:
        • When the small green block moves out of the big red block, the red block clears the green block and the green block restores bits
        • Text prompt restoration
Implementation code -- <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "/> <title>Document</title> <style>. } .destination-content { width: 100px; height: 100px; border: 1px solid red; } .origin1, .origin2 { width: 50px; height: 50px; border: 1px solid green; } .origin2 { border: 1px solid blue; } </style> </head> <body> <div class="wrap"> <p class="destination-title"> /> </div> <div class="origin2" data-name="blue_box"></div> <div class="origin1" data-name="green_box" draggable="true"></div> <script> let name = null; let dragDOM = null; const wrapDOM = document.querySelector("div.wrap"); const destinationContent = document.querySelector( "div.destination-content" ); const destinationTitle = document.querySelector("p.destination-title"); console.log(`destinationTitle`, destinationTitle); document.addEventListener( "dragstart", (e) => { name = e.target.getAttribute("data-name"); dragDOM = e.target; }, false ); document.addEventListener( "drag", (e) => { e.target.style.background = "green"; destinationContent.style.background = "red"; }, false ); document.addEventListener( "dragend", (e) => { e.target.style.background = "#fff"; destinationContent.style.background = "#fff"; }, false ); destinationContent.addEventListener( "dragenter", (e) => { e.target.style.background = "black"; DestinationTitle. InnerHTML = "current element - >" + "" + name; }, false ); destinationContent.addEventListener("dragover", (e) => { e.preventDefault(); // note: // 1. Here must add dragover event // 2. Also be sure to block the default behavior // otherwise, the drop method below will have no effect}); destinationContent.addEventListener( "dragleave", (e) => { e.target.removeChild(dragDOM); wrapDOM.appendChild(dragDOM); DestinationTitle. InnerHTML = current element "- >"; }, false ); DestinationContent. AddEventListener (" drop ", / / drop method is binding on destinationContent, Note that (e) => {console.log(' 555 ', 555); e.preventDefault(); Console. log(' 6666 ', dragDOM); e.target.appendChild(dragDOM); DestinationTitle. InnerHTML = "current element - >" + "" + name; }, false ); </script> </body> </html>Copy the code

(two) drag – verification code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, "/> <title>Document</title> <style>. } .small { position: absolute; left: 0; top: 90px; cursor: move; The transform: scale (0.9); } </style> </head> <body> <div class="verification"> <div class="title"> -- Draggable =false for both images <img SRC ="./images/big.jpg" Alt ="b" draggable="false" class="big" /> <img SRC ="./images/small.png" Alt ="s" draggable="false" class="small" /> </div> </div> <script> // verification code const title = document.querySelector("div.title"); const big = document.querySelector("img.big"); const small = document.querySelector("img.small"); const bigLeft = big.offsetLeft; / / from the parent element of the upper left corner of the left upper corner of the big picture (horizontal displacement) distance -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the value of fixed - whether it is a small square mobile or stationary, so you can use other terms at any time, Const bigTop = big.offsetTop; / / from the parent element of the upper left corner of the left upper corner of the big picture (vertical displacement) distance -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the value fixed - whether it is a small square of mobile or stationary, so you can use other terms at any time, // const smallLeft = small.offsetLeft; // small the distance between the top left corner of the image and the top left corner of the parent element ------------------ const smallTop = small.offsetTop; / / left upper corner of the small images from the parent element (big) in the upper left corner of the distance (vertical displacement) -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the fixed value when the mouse to click, Small. AddEventListener (" mouseDown ", (e) => {const mouseToSmallLeft = e.pagex - bigleft-small.offsetLeft; // Horizontal displacement of mouse click distance small ------------------- This value is fixed - whether the small block is moving or stationary, so it can be calculated using other values at any time, Const mouseToSmallTop = e.pagey-bigtop-small.offsetTop; // The vertical displacement of mouse click position distance small ---------------------- this value is fixed - whether the small block is moving or stationary, so it can be calculated using other values at any time, Const updateUi = (e) => {if (e.pagex < 492 &&e.pagey > 174 &&e.pagey < 218) {if (e.pagex > 492 &&e.pagey > 174 &&e.pagey < 218) { Title. InnerHTML = "Verification code verified successfully "; title.style.background = "green"; title.style.width = 568 + "px"; title.style.color = "white"; } else {title. InnerHTML = "captcode "; title.style.background = ""; }}; const moving = (e) => { const mouseLeft = e.pageX; Const mouseTop = e.pagey; // mouse distance (horizontal displacement) const mouseTop = e.pagey; Small.style. left = mouseleft-bigleft-mouseTosmallLeft + "px"; small.style.top = mouseTop - bigTop - mouseToSmallTop + "px"; updateUi(e); }; / / note: here is the document to monitor mousemove document. The addEventListener (" mousemove ", moving, false); document.addEventListener( "mouseup", (e) => { document.removeEventListener("mousemove", moving, false); }, false ); }, false ); </script> </body> </html>Copy the code

Distance of mouse click position from yellow block = distance of mouse from page pageX - distance of green block from page - distance of yellow block from green block -- the final calculation is - white offsetLeft -- white offsetLeft = mouse position - Black offsetLeft - Distance of mouse from yellow blockCopy the code

(three) drag – text drag

  • demand
    • Drag text, first modify the selected text to drag, then remove other characters except numbers
    • Drag to display a picture
  • The key point
    • e.dataTransfer.getData('text')
    • E.datatransfer. setData('text', 'replace with what text')
    • The drop event needs to prevent the default behavior in the listener, via e.preventDefault().
    • Drop and dragover are usually set to e.preventDefault()
  • process
    • 1.Select the textP tag so that it can be dragged
    • 2. Drag the P label into the input box and listeninputThe boxdropThe event
    • In 3.The drop eventGet to thee.dataTransfer.getData('text')
      • Get (selected part of text)
      • Note: the selected text is part of the text, not all of the text, in step 1 there are operations to select the text
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <title>Document</title> </head> <body> <p>138-8888-9999 </p> <input type="text" /> <script> // Text drag / / https://www.zhangxinxu.com/wordpress/2018/09/drag-drop-datatransfer-js/ const input = document.querySelector("input"); const img = new Image(); img.src = "./images/small.png"; // 1 // DataTransfer.setData() // DataTransfer.setDragImage(img, offsetX, OffsetY) document. The addEventListener (" dragstart ", (e) = > {e.d. AtaTransfer setData (" text ", "the 133-4444-5555 - word"); / / will (the 138-8888-9999 - word) replace (the 133-4444-5555 - word) e.d ataTransfer. SetDragImage (img, 10, 10); // drag to display a picture}); // 2 // datatransfer.getData () input.addEventListener("drop", function (e) {// // Drop and dragover require e.preventDefault() var selectedText = e.datatransfer.getData ("text"); Value = selectedText.replace(/\D/g, ""); // Clear all non-numeric characters and replace them with ''}); </script> </body> </html>Copy the code

data

JS drag objects those things juejin.cn/post/684490… 1 hour to handle card drag juejin.cn/post/684490… Zhang Xinxu www.zhangxinxu.com/wordpress/2…