Shulou(Shulou.com)06/01 Report--

This article shows you how the design and application of the JavaScript library is. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

In the Baidu technology salon on April 16, we invited Lei Zhixing, head of Baidu's front-end general group, and Hu Jinpu, head of Qunar's front-end group, to share with you in the salon the practical experience of Baidu and Qunar in the design and application of JavaScript.

In his sharing, Lei Zhixing introduced to us the reasons and objectives of Baidu's design of Tangram library, as well as the architecture and features of Tangram library.

In the sharing, Lei Zhixing mentioned that Baidu's products are mainly divided into three categories:

● search products: users' need is to get the response as quickly as possible and get the content they want as soon as possible.

● community products: these products change every day to meet the needs of different users in a variety of situations.

● commercial products: we know less, such as Baidu's advertising butler, is a customer-oriented application, the page interaction requirements are very high. Focus on user experience.

Since Baidu was founded in 1999, the front-end products have a lot of legacy code. On the one hand, it is to solve these legacy codes, on the other hand, to better design products, so that engineers can quickly develop good front-end products of sustainable maintenance. Baidu front-end general technology team designed their JS library-- Tangram.

Baidu's JS code can be divided into four layers:

The first layer of ●: the basic library of Base, the basic method with single function. Provide basic operational support for other layers.

The second layer of ●: Component, a common component across product lines.

The third layer of ●: Widget, which does not contain any business code, is a mechanism that makes all product lines easy to develop.

The fourth layer of ●: App, business logic, the first three layers are for this layer.

Next, Lei Zhixing began to introduce the design features of the Tangram library.

● provides static methods that are easy to encapsulate.

● loads on demand to ensure that the code pulled from it is minimal.

● increases compatibility and achieves zero conflict with existing systems.

● tries its best to split the functional features of the control to make all features pluggable.

● provides a variety of initialization methods, allowing users to choose according to their own needs.

Finally, Lei Zhixing made a brief introduction to their UI system structure. By establishing such a library suitable for all Baidu products, not only can the product line develop JavaScript efficiently, but also the front-end projects can be maintained continuously.

Qunar's road to JavaScript modularization (click to download audio and video, text materials)

Hu Jinpu is the front-end architect and head of the front-end group of Qunar. What he shares with you in this salon is the practical experience of Qunar in building a JavaScript library. At the beginning of sharing, Hu Jinpu first showed you a bad piece of code, which led to the topic of this sharing.

LabJs is used to achieve better loading, and Ant, Rake and Nginx are used to compress and merge files. If you do this, is it enough for front-end development? In that case, it's enough for a simple page, but it's probably enough for today's rich clients.

In the process of Qunar product development, they have also adopted many excellent JavaScript open source frameworks, but because of the lack of specific pertinence, the maintenance of some old code has become very onerous. In the practice of product development, Qunar has developed its own JavaScript libraries Module.js and Qtest. Hu Jinpu shared and demonstrated Module.js and Qtest at the salon, with a special introduction to Qtest.

Qtest is a native browser-based JavaScript testing tool with the following advantages:

● is based on Qunit

● real browser environment (multiple browsers can be tested)

● can easily add plug-ins (Jshint, Keywords)

● supports Rake (using Ruby syntax)

OpenSpace

The last part of the salon is still the exchange of lecturers, guests and attendees. This time our guest is Luo Kebiao, a front-end engineer from Taobao Beijing. The topic of this OpenSpace:

Qunar Network-- Lin Hao: the way to QTEST Code testing

When we do front-end testing, we find that testing is an important part of front-end development. Easy and fast implementation of testing is the design goal of Qtest. I just briefly introduced some of the basics of Qtest. At the same time, I hope you can check on the Internet after the activity, what are the front-end testing frameworks and means, and use testing means to control the quality of the code, make up for the deficiencies, and improve the quality of the code.

Baidu-Lei Zhixing: how to design a JS library suitable for your team

Most of the people in our group do general research and development within their own companies. In the discussion, it is found that there are still some questions about how to design. It is still unclear when to do what, and how to provide technical support. This is a problem worthy of long-term study. I would like to sum up my experience, in the design to consider two things, one is the product, the second is the team.

Taobao-Luo Kebiao: multi-person collaborative code organization

The problem we are discussing is what every company will encounter, that is, there is some code in some old products, which is often written in new products, resulting in duplication of work. How to avoid this repetition, and the discussion finally comes to management. It is to see if the big boss is willing to spend money and manpower to sort out the code.

China soft International-- Wang Lei: the security problem of the front end, too much business logic on the front end, whether there are security risks

I ask this question because I have made a website with only one page, which can be partially refreshed. I put all the page assemblies on the browser side. However, there is a problem, the set value is likely to be changed by the user, and there will be confusion after refreshing. How can this problem be avoided? The final conclusion is that there is no way, because the data can be modified when it reaches the browser side. The second question is whether a website can be completely implemented with Ajax local refresh. The result of the discussion is yes, but it is more troublesome. This is mainly because JS code is difficult to maintain.

The above is what the design and application of JavaScript library is like. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.