Me and my ad front-end Code (II): Burst demand, advertising law, labeling, patching

Overview:

At the beginning of the refactoring ad ' old code ' occurred a burst of demand, below I briefly introduce, perhaps more of the text is thinking and structure of things. The specific business implementation will also be simple to say, but not much.

Just use the article to record, save my precious memory in the advertising project.

Unexpected events:

Previous article--Me and my ad front-end code (a): Breaking up, peers, mentioned I was in the business Line A of the ad code refactoring, but the process of development, there is a small episode-plus logo. As a result of our new advertising law, all advertisements must be marked with "advertisement". Ask for a week, even development belt test, beat this half-way to kill the ' Cheng Bite Gold '.

Contingency plan:

This is a very simple thing, if in my new refactoring ad code, as long as the common parent class to add a function can be added to the bulk of the identity. But the development of new ad code, it will take a long time, and the new ad code is only corresponding to the business Line A, plus the logo must be the whole site ads are added to the line.

If you drag to the new ad code on-line, then this period of time is very dangerous, and business Line B also can not take care of (two lines of business is a big difference between the historical reasons); If you identify in the old code, you will face low-reuse code, and the amount of work added individually (the "old code" mentioned in the is a patchwork of different ad fragments, and there is no shared part and controllable life cycle. At the same time, the company also hopes not to because of the ' plus logo ' to affect the progress of AD code refactoring, to minimize the ' plus logo ' cost.

Communicate with ad groups and two lines of business. Drawing on the idea of "patches" in application development, we finally negotiated a scheme-"Old code identification patches".

to a patch:

This should be a very small project, but he is also my ' child ' and very typical. So I took a "simple" code and shared it with you.

Since it is a patch to clear a few features: low cost, small size, less reliance, applicability, pollution, and easy to use. Here is a combination of these features:

1, low cost, easy to use:

Because it's fast online and doesn't affect the progress of your ad code refactoring. Therefore, we must avoid "excessive design", and strive to reduce the difficulty of implementation. When the new ad code comes online (2 months later), the patch will go offline with the old code. It seems unnecessary to do a complex project. The ' Plus ID ' function is individually pressed into a JS file, referenced at the bottom of the page and removed when not in use.

For styles we don't write a CSS file alone, and all styles are written in the DOM's own style property.

2, small size, less reliance:

Because of the jquery used in this part of the DOM, if you package jquery with the ' Plus ID ' feature, you will increase the file size several times (perhaps the business code is not larger than the JS Library volume). Fortunately, there is a global $ (jquery) on every page of our company. Then we refer to the page of jquery, it seems more appropriate.

To reduce the volume, do not pack too many libraries into JS. For example underscore, we can in its source code to pick out a few required functions encapsulated in our JS. For example, I'm only relying on jquery (page) and underscore (part) and the public method of my own encapsulation. After all, reducing dependency can reduce the volume to a large extent. I finally generated the JS (pre-compressed) file size is less than 5k, compressed 3k.

The advantage of writing styles to the DOM style is that you do not require a CSS file to be referenced in the page, and that CSS permissions are high.

3, the applicability is strong, the pollution is small:

In most cases, JS serves a small number of pages (or a single page), considering the need to add this JS to every page of the company, so we must ensure that our JS in any page and any browser stable operation, browser compatibility and IE hack, There are also in different browsers JS of those pits, are must be considered.

Small pollution is a two-way: on the other side of the home page JS do not pollute our tagged js; on the other hand, our JS does not affect the environment of the previous scope. A good closure is a must.

How the code structure is organized:

1. Plan One:

The internal and external environment is shielded by the closure of the Webpack itself. In addition Webpack can also organize my JS code in COMMONJS Way, multiple modules are packaged into one file. The problem was that the project was too small to be maintained, and I was not very familiar with Webpack.

2, program two:

From the beginning there was only one JS file, and all the code was encapsulated in an immediate execution function. Finally, use the Gulp tool to compress. The advantage is that the code structure is simple and there is no code mixed during the compilation process. The disadvantage is that there is no module management.

Finally I chose the seemingly more common scenario two, because scenario two is enough to handle our needs, and we do not intend to maintain the project for a long time. If the requirements are complicated, I'll consider the scenario one.

What the logical structure is:

1. Get the ad position

Since it is the identification, it is necessary to understand, which places need to be labeled. Because each ad has a placeholder ID, I just need to know which of today's page is the placeholder ID on the ads, this is a good thing to do. The question comes, actually I really do not know, today on the page which several advertisement place advertisement. Find the backend and business Line a backend to negotiate two scenarios, (1) provide a Get ID (today's current page and AD) interface, (2) the page of all the placeholder ID by spit on the page.

It would be reasonable to look at the scheme (1). But we are using the scheme (2), considering the cost, in order to such a temporary demand, the destruction of the advertising system and the system operation of the respective structure, will increase the page corresponding time and coupling scheme in the placeholder ID is fixed, does not affect the corresponding time of the page, and two back-end groups do not need to change their system structure. Note, however, that the scenario (2) only gets the ad bits in the current page, but doesn't "what ads are on today?" ”。

There is actually an alternative way to judge whether there is an ad in the ad bit-the DOM in the placeholder ID has a specific structure. In general, the DOM corresponding to the placeholder ID is generally default (0 height) and the content is empty. A placeholder ID that has ads typically contains pictures or flash. I can tell if this ad bit is advertised today by judging whether there is a specific structure in the placeholder ID. At this time a new problem, the old code in the ad rendering is the same as the JS fragment assembled JS file processing, I must be in the advertising of old code after the end of the rendering to determine whether the ad and add logo. But simply rely on the DOM ready or simple delay, is not accurate to find that point in time, the ad load time for each page is not the same, not to mention the old code in the various ads loaded and there is no fixed unified life cycle (today's ad bit, even if part of the load well, the other part may be temporarily empty).

2, packet delay, counting stop

Since Dom ready or simple delay can not be accurately judged, we have changed from the original event-based and time-based data structure.

We first define a data structure that specifically records whether the placeholder ID has been inserted into the ad.

Open a timer after Dom ready (note to wait until the last callback is finished to open the next one). The DOM of the ad is not inserted in the data structure every time it is checked, and if the status changes "add Ad id".

The inspection range of this dirty check is getting smaller. Note Because there are ad positions that are not advertised, if you do not add a limit, the dirty check will go forever, so I will specify the number of groups to delay the packet. I set up here 5 groups from Dom ready to start with 3000ms, 7000ms, 11000ms, 15000ms,25000ms to check. They were eventually checked out, and the rest was considered not advertised today.

3, how to add logo

In principle, you can load the lower left corner of the original AD. But there is a pit--the old page and the old code page structure is unreasonable. Causing the lower-left corner relative to the parent element is not necessarily the bottom-left corner of the ad. For example, some ads are centered, but the logo is added to the left side of the page, even beyond 1200px (the page does not have a large main-wrap).

For this situation, we need to maintain the front-end correction of the layout of the page, on the one hand, as far as possible through JS to determine the effective location of ads. and consider identifying the location of the inserted node, not necessarily the parent identified by the position ID bit. Consider that the ad format in the old code is only IMG and Flash, and that both IMG and Flash have a fixed constituent structure. So the structure matching is feasible.

4, the logo with CSS or pictures

To the advertising logo, we are unified in the bottom left corner of the ads. But how do you do that with a small logo? The general first reaction must be to use a property plus a span

1 <DivID= "Stance ID">2     <Div><!--Advertising Content -</Div>3     <spanstyle= "position:absolut;bottom:0;left:0, ...">Advertising<span>4 </Div>

I did it at first, and later found that the text size in our logo was too small. The minimum text size limit for some browsers is exceeded. In addition to writing too many styles in style, on the one hand to control the style, on the other hand to cover inheritable properties, poor readability. (The main reason, of course, is the browser's limit on the minimum text size)

This is where I have to use the image to add the logo. At this point I found that the main station and other sites are also using the image of the way, it seems to have been the pit. The picture is as follows:

1  <DivID= "Stance ID">2      <Div><!--Advertising Content -</Div>3      <spanstyle= "position:absolut;bottom:0;left:0; Background-image:url (..); .......">Advertising<span>4  </Div>

Another problem is the design of students feedback to me, is in the design of the small picture, to pay attention to the line font and non-liner font differences, when the picture is small to a certain extent. "Advertising" Two words can not display full.

Summarize:

Compared to the huge advertising system and advertising display system, this ' plus logo ' project small can no longer small. But as a "patch", this JS but five Zang full, and yet simple and lightweight. This "patch", not only to adapt to different services to complete the quality of the page environment. Also in the ' Old code ' does not provide any interface in the case of ' dark ' combat. Guarantee the function of the premise, but also as far as possible to achieve engineering and avoid excessive design.

Strictly speaking, this small project is very typical. Also took the opportunity to the company all the pages of the situation to touch the times. The biggest gain is to summarize the pits of existing pages before refactoring the ad presentation code. Let my reconstruction of the road less a lot of detours.

I and ad front-end code of the story, still continue!

　　

Me and my ad front-end Code (II): Burst demand, advertising law, labeling, patching