• Front end interview 3 + 1 Daily – 159th day


    Today’s knowledge (September 22, 2019) – day 159 [HTML] for example, how to use pure HTML to realize the function of drop-down prompt? How to use CSS to achieve alignment? [JS] what is the difference between attribute and property in JS? [soft skills] did your last company write a daily, weekly or monthly newspaper? Talk […]

  • [collection] summary of the latest Vue related boutique open source project library in 2019


    Preface The predecessor of this article is from the project awesome GitHub Vue on GitHub. However, since the last update time of this project was June 12, 2017, many content has expired or many recent excellent components have not been included, so Xiaosi today (January 19, 2019) updated the content and created a new project […]

  • HTTP compact tutorial 2: simple HTTP protocol


    HTTP protocol The HTTP protocol is the same as many other protocols in the TCP / IP protocol family and is used for communication between clients and servers.One end of the request access resource is the client, and the other end of the response resource is the server. The request must be sent from the […]

  • Front end interview 3 + 1 per day (weekly total on September 22, 2019)


    In the Analects of Confucius, Zeng Zi said:“Three times a day, three times a day”I reflect on myself many times a day.Front end interview questions 3 + 1 a day, with interview questions to drive learning, make progress every day!Let effort become a habit, let struggle become a enjoyment!believeInsistPower of!!! Learning is not closed, charging […]

  • The problem of keeping alive cache in Vue Mobile


    When the Vue mobile terminal exits the current a user and switches to the new B user, the data of B user or that of a user is the cache of the last account. How do you solve this problem? I’m very anxious

  • H5 feature’s formdata does not refresh file upload


    miscellany The previous friend said not to refresh the uploaded file. The most violent solution is to search all kinds of JS libraries on the Internet, with multiple pictures uploaded, previewed, even image processing and other special effects. So if you don’t touch third-party libraries, can you use ajax to do it. As for this […]

  • On element UI cascading menu (city three level linkage menu) and echo problem


    Code bottom Parameter screenshot of each item The code is as follows < El form item label = “domicile” prop = “census land” style = “padding left: 57px” > <el-cascader v-model=”ruleForm.censusLand” style=”width:180px;padding-left:7px;width:270px” Placeholder = “please select province or city” :options=”cascaderData1″ @expand-change=”censusLandChange” :props=”{ value: ‘id’, label: ‘name’, children: ‘cities’ }” ></el-cascader> </el-form-item> data (){ retutn { […]

  • Step by step to teach you to use HTML5 SVG to achieve animation effect


    Crazy technology houseOriginal: https://www.smashingmagazine The first WeChat public address is jingchengyideng.Welcome to pay attention and push you fresh front-end technical articles every day abstractIn this article, you will learn how the awwwards net implements animation. This article introduces the circle element in HTML5 SVG, its stroke attribute, and how to use CSS variables and animate […]

  • Animation.css super CSS3 animation library, three lines of code to do H5 page animation effects!


    1、 Basic usage Introduce CSS dependency <link rel=”stylesheet” href=”https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css”> Add the following to the class of the element animated (Mandatory) Infinite (optional) infinite repetition bounce (Mandatory)Animation styleRefer to the table below Delay-2s (optional) delay appears <div class=”animated infinite bounce delay-2s”><h1>Example</h1></div> Class Name bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft […]

  • React integrates native Redux (2)


    React integrates native Redux (2) Preface A basic application framework has been completed to integrate native Redux (1) in react, but when distributing action, logic cannot be written in action. In other words, action is always just a JSON object, not a function. Although logic methods can be written in view life cycle to change […]

  • (Part 3) copy “Vue ecology” series “enumeration” and “bidirectional binding”


    (Part 3) copy “Vue ecology” series “enumeration” and “bidirectional binding” This task Give the noun “ergodic” a knock Analyze defineproperty Realize data bidirectional binding of CC uue Warm up for the next proxy instead of defineproperty 1、 ‘foreach’ vs’ map ‘ Many articles have written about the difference between them Foreach does not return a […]

  • Cross-platform stock chart library based on the canvas – clchart


     What is ClChart ClChart is a simple, high-performance and cross-platform open source project for stock data visualization created based on the canvas. Support PC, webApp and React Native and Weex platforms. Fully adapting the open source project GCanvas on React Native and Weex makes it easy to use GCanvas to enable your developed applications to have native drawing capabilities on android and ios.  Why do you need ClChart In the existing open source libraries, there are no shortage of very good open source chart libraries. The general chart libraries include chartjs,echart,highchart, etc. These chart libraries have very complete chart types and powerful drawing capabilities and speeds, but due to the need of these items There is generality, and we need to expand when we draw the trading document. The specific chart libraries for stocks such as stocks are: techanjs and highcharts/highstock . These charting libraries have done some very professional processing and optimization of the stock drawing, but they are all based on svgdrawing. We have performance issues when drawing large numbers of data graphs and dealing with cross-platforms. The following is a comparison of the K-charts drawn by the stocks of each gallery in the use process.The following comparisons are based on the use of these charting libraries to draw comparisons of the mapping capabilities of the securities of the securities type, and the data subjective experience determination. |   | chartjs | echart | techanjs | highchart | clchart || — | — | — | — | — | — || Drawing element |canvas| canvas & svg| svg | svg | canvas || Easy to use | ☆☆☆☆☆ | ☆☆☆ | ☆☆☆☆  | ☆☆☆☆ | ☆☆☆☆☆ || Drawing speed | ☆☆☆☆☆ | ☆☆☆ | ☆☆ | ☆☆ | ☆☆☆☆☆ || Expanding ability | ☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆☆ || Cross-platform | ☆☆☆ | ☆☆☆ | ☆☆ | ☆ | ☆☆☆☆☆ | Therefore, we urgently need an icon library with high-performance, cross-platform, and easy-to-use stock types. In the existing icon library React Native, you can load html files via webview, use window.document.addEventListener(‘message’, function(e) {})and window.postMessageto complete the html and React Natve communication drawing, but use the actual use process, in some poor performance android devices, especially android Android systems with versions lower than 4.4 perform particularly badly when plotting large data volume graphs and user interactions. Caton often occurs, and there may be issues such as slow loading.  ClChart design goals The use of canvasdevelopment has a highly efficient , cross-platform of professional stock charting library  Having compatible GCanvas provided canvasinterface, in React Native and Weex reach native drawing on, and able to live horizontally extended for more stock market equation system in the form of plug-ins, for users with special needs, it is possible to provide custom Plug-in and data structure capabilities.  ClChart development and implementation  Build development environment * [x] Using eslint to implement code specification* [x] Using webpack for code packaging* [x] Write an example demo* [ ] Use karma and mocha to write code tests (in progress…)  Double-layer canvas, separation of primary and secondary layers, efficient drawing When studying the drawing program of tradingview , we found that in order to quickly redraw the auxiliary lines such as crosshairs, the use of double-layered canvasseparation crosshairs (such as auxiliary lines) and the drawing of the main layer greatly reduces the time needed to quickly move the crosshairs. The extra drawing calculations come. Enables androida smooth user experience on low-end mobile devices and web apps  Scalable data layer ClChartImplementation of an independent data layer, which can preprocess the data, cache functions, data FIELDdefinition and read through the field , the user can easily customize the data field to quickly integrate with the existing data.  Custom formula system ClChartSupports custom formula systems. Both developers and users can customize formulas for drawing during use.  Plugin ClChartSupports custom drawing plug-ins, now has plug-in data tag types  Screenshot  ClChart project address, documentation, and test cases github Chinese document English docs HTML5 Demo Can open experience on mobile phone and PC separately React Native Demo