2007 Taobao ued Recruitment puzzle (front-end development part)

The coolest hiring in history has ended and the results are good. We have found a lot of potential talent. Some of their employment problems to solve the solution also opened up our vision, let us reap a lot. Thank you for all the recruitment and all the attention Taobao ued blog friends.

The following is the recruitment of the front-end development engineer to answer:

Xiao Yin is a cute puppy (Dog), its sound is very good (WOW), every time you see the owner will be obediently called (Yelp).

From this description you can get the following objects:

function Dog () {
This.wow = function () {
Alert (' Wow ');
}
This.yelp = function () {
This.wow ();
}
}
small mans and Xiao Yin, the original is also a lovely puppy, but suddenly one day crazy (Maddog), a see people will every half a second call (WOW) to keep barking (Yelp).

According to the description, use code as an example (hint keyword: inheritance, prototype, setinterval).

Exercises

function Maddog () {
    this.yelp = function () {
        var self = this;
        SetInterval (function () {
            self.wow ();
        }
Maddog.prototype = new Dog ();
For test
var dog = new Dog ();
Dog.yelp ();
var maddog = new Maddog ();
Maddog.yelp ();

The above is a more standardized solution, we hope that through this problem, check the candidate for JS language base and the understanding of object-oriented development. The difficulty lies in the application of closure.

Use a pure CSS to implement an unknown size picture (but width is less than 200px) centered horizontally and vertically in a 200px square container.

Exercises

<style type= "text/css" >
box {
    Display:table-cell;
    Vertical-align:middle;
    width:200px;
    height:200px;
    Text-align:center;
    /* Hack for IE * *
    *display:block;
    *font-size:175px;
    /* End *
    /border:1px solid #eee;
Box img {
    vertical-align:middle;
}
</style>
<div class= "box" >
    
</div>

Unfortunately, this solution is used in CSS hack. We also don't understand why setting font-size can let ie show the effect of vertically centered. According to our calculations, the ratio of height/font size is about 1.14 when IE can be centered vertically.

There are, of course, many other implementations, but additional tags need to be introduced. For the traffic is very large Taobao, we have to weigh, tend to the issue of reasonable use of hack.

Without using the border style, draw a PX-high horizontal line that retains the same effect in the Quirksmode and Csscompat modes of different browsers.

Exercises

<div style= "Height:1px;overflow:hidden;background: #000" ></div>

The main point of this topic is that the browser's Quirksmode and Csscompat mode of the effect is consistent. There are many solutions, the above is what we think is the most reasonable one.

Add a prototype method to the array local object, which is used to delete the duplicate entries in the array entry (there may be multiple), and the return value is a new array that contains the duplicate entries that were deleted.

Exercises

Array.prototype.distinct = function () {
 var ret = [];
 for (var i = 0; i < this.length. i++) {for
 	(var j = i+1; J < This.length;) {
 		if (this[i] = = This[j]) {
 			Ret.push (This.splice (J, 1) [0]);
 		} else {
 			J + +
 }}} return ret;
}
For test
alert (["A", "B", "C", "D", "B", "A", "E"].distinct ());

This is the most common solution. Its performance is acceptable in the case of a low number of array elements.

I believe there must be a lot of friends have a better solution, please tell us.