preface
Hello. First of all, I’m honored that you opened this article. The purpose of setting up this column is nothing but to record weekly knowledge arrangement in the front-end field and review of old projects, as well as to urge myself. If the content of this article can give you a little inspiration, you can give a recognition of the approval or collection, that is my bonus. At the same time, you are also welcome to correct the possible mistakes in the article or provide better materials or personal opinions on the relevant knowledge in the article, we can discuss and learn together.
Keywords: browser events, data visualization, Echarts
The body of the
The TAB key implements the collation of browser events behind the focus shift
Sorting reason
When I was browsing zhihu Web terminal, I accidentally triggered the TAB key on the keyboard and found that the focus could be switched, which triggered my idea of organizing browser events.
The resources
“JavaScript Advanced Programming (4th edition)” chapter 17, Winter Geek time “Relearn the front end” column “Browser events: Why there are capture process and bubble process”, CSDN users organized browser events summary.
Sorting result
Definition of events and event flows
Before we look at browser events, JavaScript interacts with HTML through events, which represent a meaningful moment in a document or browser window. You can subscribe to events using listeners (also called handlers) that execute only when the event occurs.
The following HTML page is available: <! DOCTYPE HTML > < HTML > <head> <title> Browser events </title> </head> <body> <div ID ="myDiv"> Click on me </div> </body> </ HTML >Copy the codeThe event flow describes the order in which the page receives Events. The DOM2 Events specification specifies that the event flow is divided into three stages: event capture, destination and event bubbling. Event capture occurs first, making it possible to intercept events ahead of time. The actual target element then receives the event. The last stage is bubbling, and events must be responded to at the latest. Using the simple HTML example above, clicking on the div element triggers events in the order shown below.
Event handler
The assignment and removal of event handlers define two methods: addEventListener() and remove-EventListener (). These two methods are exposed on all DOM nodes, and they receive three parameters: the event name, the event handler, and a Boolean value, true for calling the event handler during the capture phase and false (the default) for calling the event handler during the bubble phase. , you can write:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <button>button</button> </body> <script> document.body.addEventListener("click", () => { console.log("at catch status1") }, true); document.addEventListener("click", () => { console.log("at catch status11") }, true); document.body.addEventListener("click", () => { console.log("at bubble status2") }, false) document.addEventListener("click", () => { console.log("at bubble status22") }, False) </script> </ HTML > // console output at catch status1 at catch status11 at bubble Status22 at bubble Status2 // The execution sequence is clearCopy the code
Note: before using VUE to achieve shopping small program need to achieve the long press the commodity shadow effect similar to the picture below, then the component structure is the parent component: commodity list, inside the cover of apologies sub-component: commodity card. When I set the listening event for the long press commodity card all the cards are shaded. This little chestnut embodies the bubbling of events.
Browser events
Events are usually generated from input devices such as mouse and keyboard. The Tab key, the minor protagonist of this article, is used to switch to the next focusable element. The focus system uses the Tab key, but JavaScript can prevent this behavior. The browser API also provides apis to manipulate focus, such as document.body.focus(); document.body.blur(); Post a summary of browser events organized by CSDN users
Echarts Epidemic Visualization Project review
Analyse the reason
Find the front-end summer internship at a certain enterprise service company is a clause in the technology stack requirements: front-end modeling ability (corresponding to the business needs of the front-end data visualization), so in preparation for the interview process at the beginning of 2020 in the aspect of data visualization tries to analyse: imitation tencent news echarts implementing epidemic data visualization, China – the address of the project: Github.com/lifan2000/e… (Welcome STAR, please read the readme instructions or the unpacking method in the recheck result below before unpacking);
The resources
Echarts website, chapter 18 of advanced JavaScript Programming (4th edition), how to choose data visualization frameworks and platforms — the front end.
Analyse the results
Project introduction
The technical stack of the project is jquery+HTML5+ SASS, the data visualization library is Echarts, and the packaging tool is Webpack. The page lists the current situation of the epidemic in China and the visual map of the epidemic in each province in China. The map can be switched between the two modes of “existing epidemic” and “cumulative confirmed cases”, and the specific data can be displayed by moving the mouse to each province. NPM start updates the code after normal startup, and the page can achieve synchronous update.
The implementation code of epidemic map is located at/SRC /js/echarts.js; The code for implementing other front-end interaction effects such as page scaling with browser width and button style when switching map is located in/SRC /js/front.js with more detailed Chinese annotations for reference. The detailed configuration of webpack is located in /webpack.config.js.
Note: After startup, the interface takes a long time to respond, so you need to wait about 20s-30s to get the data
Project address: github.com/lifan2000/e…
Project Reference Framework Address: github.com/xxhomey19/b…
Using interface address: lab. Isaaclin. Cn/nCoV/API/ar…
Those interested in taste can go to lab.isaaclin.cn/nCoV/zh to learn about the interface project and the original author
Out of the way
Under the new folder use:
$$CD epidemicIntimeSituation git clone https://github.com/lifan2000/epidemicIntimeSituation $yarn install (or NPM Install $NPM startCopy the codeAfter the completion of the three commands, the browser will automatically start local port 8080.
Extend knowledge related to the project
Data visualization
Data visualization can be divided into two main categories. One is visualization library for developers, such as D3 and Echarts. The first is Grafana, Superset and other visualization platforms for analysts and general users. This article introduces the advantages and disadvantages of various visualization libraries for developers in detail. How to choose data visualization framework and platform — front-end
Echarts
The HTML element of canvas
Echarts allows you to draw on a canvas element with a specified id based on the specified parameters. Creating a native canvas requires setting its width and height properties to tell the browser what large area to draw on. The content that appears between the start and end tags is backup data that will be displayed when the browser does not support the Canvas element. Such as:
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
Like other elements, the width and height attributes can be set on the DOM node, so they can be changed at any time. The entire element can also be styled via CSS, and the element is not visible until the style is added or the content is actually drawn. To draw a graph on a canvas, first get the drawing context. Use the getContext() method to get a reference to the drawing context. For flat graphics, we need to pass the argument “2d” to this method to get a 2D context object:
let drawing = document.getElementById("drawing"); // Make sure your browser supports <canvas> if (draw.getContext) {let Context = draw.getContext ("2d"); // Other code}Copy the codeWhen using canvas elements, it’s a good idea to test the existence of the getContext() method. Some browsers create default HTML element objects for elements that are not in the HTML specification. This means that even if drawing contains a valid element reference, the getContext() method does not necessarily exist. You can use the toDataURL() method to export the image on the Canvas element. This method takes one parameter: the MIME type to generate the image (independent of the context used to create the image). For example, to export a PNG image from a canvas, do this:
let drawing = document.getElementById("drawing"); // Make sure your browser supports Canvas if (Drawing.getContext) {// Get the image data URI let imgURI = Draw.todataURL ("image/ PNG "); // let image = document.createElement("img"); image.src = imgURI; document.body.appendChild(image); }Copy the codeThe browser defaults to encoding the image as PNG unless otherwise specified. Firefox and Opera also support passing in “image/ JPEG “for JPEG encoding. Because this method was added later in the specification, supported browsers were implemented in later versions, including IE9, Firefox 3.5, and Opera 10… Canvas element is often used to generate posters, draw images and other functions, the rest of the visible rookie tutorial or “JS Advanced Programming” chapter 18.
I recommend some interesting projects related to Canvas: how to generate poster sharing circle of friends by HTML5canvas drawing board and small program
subsequent
This week, I will pick out an old project I did before and review it. I am also willing to record and share with you any new findings. Have a great week and I’ll see you next Monday 🙂