Takeaway: Recently hired a Internet company, mainly do the Internet of things and the direction of Internet solutions, I just took over this project, is a visual management map, it is mainly used for the safety early warning function, a state-owned property is bad to say, just come to this company, the company to do the project of the front-end and back-end are run, and then let me give him a month after rectification, Refactoring, no, no refactoring, I reconfigured the page, made it more technical, cool, and improved some performance. Equivalent to page rewrite, the back end basically does not change anything, mainly provides the data, the new interface can be added to display data.

preface

To the company because I think the company belongs to the partial startups, has the certain scale, has the certain challenge, than some companies work more busy, I used to work in a domestic Internet giant outsourcing industry, feels more idle, that way is 965, is likely to leave early, late to that state, working place is not stable, If not the project. Basically, they are sent to insurance companies (PICC, Life insurance, China Life Finance, Taikang and other on-site development), and it is good to update some small functions once or two months. Can be remote, can be resident development, noon rest for two and a half hours is also more comfortable. Welfare is average, salary is average. Later, I went to this new company and tried to do something challenging. During this period, I worked overtime all the time. I had meals at 8 o ‘clock in the evening and got reimbursed by taxi after 10 o ‘clock. You can take time off without overtime pay. Then one guy took over the project, and then another guy (a Java engineer) came along and added some interfaces and data.

Some of the technical points used in the front end

For this project, we mainly use Vue + Echarts + Baidu Map + Autonavi map + PDF-js +elementUI+ VUE-Seamless Scroll, etc.

Why Vue and not React or Angular?

React and Vue have many similarities. They both have:

Reactive and Composable view components are provided using the Virtual DOM. Keep the focus on the core library and leave other functions such as routing and global state management to the relevant libraries.Copy the code

Because there are so many similarities, we will spend more time comparing this area. Here we not only guarantee the accuracy of the technical content, but also consider the balance. We need to acknowledge the things React does better than Vue, such as a richer ecosystem.

React and Vue are both very fast, so speed isn’t the deciding factor in choosing between them.

In React, when the state of a component changes, it rerenders the entire component subtree with that component as the root.

To avoid unnecessary rerendering of child components, you need to use PureComponent wherever possible or implement the shouldComponentUpdate method manually. You may also need to use immutable data structures to make your components easier to optimize.

However, when using PureComponent and shouldComponentUpdate, you need to ensure that the render output of the entire subtree of the component is determined by the props of the component. If this is not the case, such optimizations can result in imperceptible inconsistencies in rendering results. This makes component optimization in React a considerable mental burden.

In Vue applications, component dependencies are automatically tracked during rendering, so the system knows exactly which components really need to be rerendered. You can assume that each component already has a shouldComponentUpdate automatically, and there is no subtree problem limitation mentioned above.

This feature of Vue eliminates the need for such optimizations and allows developers to focus on the application itself.

In React, everything is JavaScript. Not only can HTML be expressed in JSX, but the trend is to incorporate CSS into JavaScript as well. These types of solutions have their advantages, but there are trade-offs that not every developer can accept.

The whole idea of Vue is to embrace and extend classic Web technologies.

In React, all components rely on JSX for rendering. JSX is a syntactic sugar for writing JavaScript using XML syntax.

Rendering functions using JSX have the following advantages:

You can use the full programming language JavaScript functionality to build your view pages. For example, you can use temporary variables, JS flow control, and reference values directly from the current JS scope. The development tools support for JSX is relatively advanced compared to other Vue templates currently available (e.g., Linting, type checking, editor auto-completion).Copy the code

In fact, Vue also provides rendering functions and even supports JSX. However, we recommend templates by default. Any compliant HTML is a legitimate Vue template, which brings some unique advantages:

For many developers who are used to HTML, templates are more natural to read and write than JSX. There is an element of subjective preference here, of course, but if the distinction leads to improved development efficiency, then it has objective value. Html-based templates make it easier to gradually migrate existing applications to Vue. This also makes it easier for designers and new developers to understand and engage with the project. You can even use other template preprocessors, such as Pug, to write Vue templates.Copy the code

Some developers think templates mean learning additional Domain-specific Language (DSL) to develop — we think this distinction is superficial. First, JSX isn’t cost-free — it’s an extra set of syntax on top of JS. At the same time, just as it’s easy for someone familiar with JS to learn JSX, it’s easy for someone familiar with HTML to learn Vue’s template syntax. Finally, DSLS allow developers to do more with less code, such as v-ON modifiers, which require much more code to implement in JSX.

More abstractly, we can distinguish components into two categories: presentational and logical. We recommend using templates in the former and JSX or rendering functions in the latter. The ratio of the two types of components varies depending on the type of application, but overall we find that there are far more presentation components than logical components.

Angular actually has to develop in TypeScript because its documentation and learning resources are almost entirely TS-oriented. TS has many benefits — static type checking is very useful in large-scale applications, and is very productive for developers with a Java and C# background.

However, not everyone wants to use TS — in small to medium scale projects, introducing TS may not offer many obvious advantages. In these cases, Vue is a better choice because Angular can be challenging to use without TS.

Finally, while the integration of Vue and TS may not be as deep as Angular’s, Vue also provides official type declarations and component decorators, and knows that a large number of users use a combination of Vue + TS in production environments. VUE is also actively working with Microsoft’s TS/VSCode team with the goal of providing VUE + TS users with a better type checking and IDE development experience.

Vue scaffolding is a quick way to develop and get started. Although I am exposed to a lot of technology stacks, it is difficult to reach the level of mastery. Undoubtedly, this is a good choice.

Purpose of using Echarts

Using Echarts is mainly to make some bar charts and pie charts on the big screen, presenting data in the form of charts. The Echars is relatively simple to use, and generally a simple template can be used.

Echarts website: echarts.apache.org/zh/index.ht…

This is a product of Baidu, recently the project was incubated, sometimes often can not be opened, you can change the network or browser, it is not possible to use the W3C echarts tutorial, attributes are more complete. Much better than the rookie tutorial.

This I can not say how to use, want to know can consult website tutorial: echarts.apache.org/zh/tutorial…

The purpose of using Baidu Map

The project originally used Baidu’s satellite map, which looked fuzzy but functioned well.

<! DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="viewport" content="Initial - scale = 1.0, the user - the scalable = no" />  <style type="text/css">  body, html,#allmap {width: 100%; height:100%; overflow: hidden; margin:0; font-family:Microsoft Yahei; }</style> <scripttype="text/javascript" src="/ / api.map.baidu.com/api?type=webgl&v=1.0&ak= your key"> < / script > < title > earth model < / title > < / head > < body > < div id ="allmap"></div></body></html><script type="text/javascript">    Var map = new bmapgl. map ("allmap"); CenterAndZoom (new bmapgl. Point(118.5, 27.5), 5); / / initialization maps, set the center coordinates and level map. The map enableScrollWheelZoom (true); // Zoom map.setmapType (BMAP_EARTH_MAP); // Set the map type to Earth mode.
Copy the code

Later, a soul map was added to the Data kanban, using Amap.

Some may ask, why not just use a map? With two that don’t cause performance problems? To be honest, it does degrade performance, but customers want to look good, so they can’t have it both ways.

Baidu map API:lbsyun.baidu.com/index.php?t…

If you use the drill-down function, for geographical positioning, dot on the Map of China, determine the longitude and latitude, use other maps can be evaluated, longitude and latitude need to pay attention to, do not get the wrong.

The purpose of using vue-Seamless -scroll plugin

This will make the table scroll automatically, look cool, scroll automatically if you have a lot of data, scroll automatically if you have a lot of data, don’t scroll if you have a lot of data, hover and pause the data.

Official gitHub: github.com/chenxuan000…

Documents: chenxuan0000. Making. IO/vue – seamles…

Main configuration items:

computed: {    classOption() {      return {        step: 0.5.LimitMoveNum: 1, this.datalist. Length hoverStop: true, // enable mouse hoverStop direction: 1, // 0 down 1 up 2 left 3 Right openWatch: true, SingleWidth: 0, // singleWidth: 0, // singleWidth: 0, // waitTime: > 2/3waitTime: // isSingleRemUnit:true, //singleHeight and singleWidth enable rem measure false/true limitMoveNum:5,// enable seamless scroll height, source set to table data less than 5 do not let her scroll }; }}
Copy the code
Use vuE-Seamless -scroll to automatically scroll the copied data out of the click event is invalid

Problem analysis:

When the data in the first UL has been scrolled (real data), the click event in the second UL part does not work (copied data), and cannot implement some of the click-line, popup details required by the business.

I need this data to add some click events, pop up secondary pages and region switching effects.

Solutions:

Using event delegation:

Event delegate, also known as event broker, is to manage all events of a certain type by specifying only one event handler using event bubbling. Normally, the DOM needs to have event handlers, so we would just assign event handlers to it, but if there are many DOM handlers that need to be added, for example, if there are many Li's in one UL, and we need to add the same click event to each li, we usually use this methodforLooping through all the elements and then adding click events to them, while it may seem like a perfectly reasonable way to do this, actually has a huge performance drawback. In JS, the number of event handlers added to the page will be directly related to the overall running performance of the page. Because it needs to interact with DOM nodes constantly, the more times the DOM is accessed, the more times the browser will have to redraw and rearrange, which will prolong the interaction ready time of the whole page. This is why the main idea of performance tuning is to reduce DOM manipulation. In this case, if the time delegate is used, all the operations will be put into the JS program, and the operation with DOM will only need to interact once, which can greatly reduce the number of interactions with DOM; And each function is an object that is an object will use memory, object, the more the greater the memory usage rate, the performance will naturally, if you use event delegation, we can only on one of its parent object, value so that we will need a memory space is enough, a lot of save the memory space, improve the overall performance of the page.Copy the code
 
Copy the code

Add a click event to the outer div and retrieve the dom element from the click via event.target

Bind attributes to the elements of the clicked column. Here I bind the id and the custom attribute data-obj object, and directly add the item of the changed column instead of binding each one individually.

Click method, cancel the original click method, and call it directly at the bottom.

Write a more general method for the other several pages to follow this method is also very useful, do not bind one by one, the class row is purely made a flag bit, easy to determine after the loop, if not clear, direct console.log, easy to locate each variable.

Browser online PDF preview undownload button

The function of online PDF download is required. At the beginning, WE used the pdF.js of a third party. We operated according to the online method, checked and found that it did not work.

Browser PDF cancellation method: add code after the required URL address

'#toolbar=0'
Copy the code

Added code:

 

or

After modification, look at the effect:

The entire row of black bars is gone

By the way

Pdf.js undownload:

Viewer.html adds hidden styles.

Viewer. Js annotates the following code. The number of lines varies according to the version, and it is recommended to use the compiler CTRL + F to retrieve the download.

One other thing, this version is different, the code is different, and the comment out method is the same

conclusion

It was my first contact with many things I did in this project, and I learned a lot. I worked overtime and went home late every day. The main reason was that THERE was a shortage of staff and I had to do it myself. Moreover, the demand arranged by Party A is changeable, and the demand is constantly added. No one here writes demand documents, and the front end does a lot of circulation and writes a lot of fake data to display. As a result, the performance of the whole system is slightly lower, and the following optimizations have been taken:

Using the online server for demonstration, found that party A test server and formal server configuration are not the same grade. Good thing I can do it front and back. Today’s content is shared here, a brief share part of the content, thank you.