淘宝Web前端开发面试题

1、根据下图编写一段XHTML

考点：语义化标签知识以及模块化HTML代码知识；

<div class="dialogPractise">
<h2>对话练习</h2>
<ul class="dialogPractise-bd">
<li>
<strong>小明</strong>
<span>我的淘宝店成立5周年啦欢迎光临哦！</span>
</li>
<li>
<strong>傅玉</strong>
<span>昨天销售300件米奇心情真爽！</span>
</li>
</ul>
<span class="dialogPractise-fo"></span>
</div>

二、请简化下面的CSS代码：
a)margin:0px;
b)padding:10px 0 10px 0;
c)border-width:1px;border-style:solid;border-color:#ff5500;

考点：CSS的优化

margin:0;
padding:10px 0;
border:1px solid #ff5500;

三、请看以下代码，按照下面的要求回答

if(window.addEventListener){
       var fn = function (type,fn,useCapture){
       el.addEventListener(type,fn,useCapture);
        }
}
else if(window.attachEvent){
        fn = function (type,fn){
        el.attachEvent('on'+type,);
        }
}

考点：对事件绑定的深入理解
a)以上代码的作用
b)以上代码的优点
c)以上代码中的问题，如果你有更好的，请把它编写出来

解答：
a)以上代码主要是为HTML元素绑定一个事件，并且兼容IE和DOM标准下的浏览器
b)以上代码的优点是做到的了事件绑定的兼容性
c)以上代码中fn这个变量是在DOM标准下的浏览器中才会声明，在IE下它将是一个全局变量

function bind(el, type, fn, useCapture){
         if (window.addEventListener) {
                  el.addEventListener(type, function(){
                           fn.apply(el, arguments);//始终将this指向DOM
                  }, useCapture);
          }
          else if (window.attachEvent) {
                     el.attachEvent('on' + type, function(){
                     fn.apply(el, arguments);//始终将this指向DOM
                     });
          }
}

var el = document.getElementById('demo');
var test = function(){
        alert(this.nodeName);
}
bind(el, 'click', test);

注意代码中的注释部分。因为在符合DOM标准的浏览器中，addEventListener方法将把 this指针指向绑定的函数，而IE中attachEvent方法将始终指向widow对象，为了将this指针始终指向当前绑定事件的DOM，我们必须要使用apply或者call方法来改变函数的作用域。

三、请计算下面变量的值

var a= (Math.PI++);
var b = (Math.PI++);

alert(a);
alert(b);

两个都是 3.1415626536。

参考文献：
    var a = (++Math.PI);   
    alert(a); //1  
    alert(Math.PI); //2  
      
    var b = (Math.PI++);   
    alert(b); //3  
    alert(Math.PI); //4  
      
    var c = Math.PI = (++Math.PI);   
    alert(c); //5  
    alert(Math.PI); //6  
      
      
    var d = Math.PI = (Math.PI++);   
    alert(d); //7  
    alert(Math.PI); //8  
      
      
    var e = Math.PI = (Math.PI + 1);  
    alert(e); //9  
    alert(Math.PI); //10  
Math.PI 在其他语言看来是系统一个常量，修改它的话编译都通不过，不过 javascript 具有很强的的容错性（包容性？），他是不会提醒你的，要搞懂这个不看规范是不行的。

分析

ECMAScript 262 :

PI

15.8.1.6 PI
The number value for π, the ratio of the circumference of a circle to its diameter, which is approximately 3.1415926535897932.
This property has the attributes { DontEnum, DontDelete, ReadOnly }.

只有系统属性才会有 readonly ，我们定义的一般属性没法设置，而 ReadOnly 应该相当于常量了吧？

ReadOnly

8.6.1 ReadOnly
The property is a read-only property. Attempts by ECMAScript code to write to the property will be ignored. (Note, however, that in some cases the value of a property with the ReadOnly attribute may change over time because of actions taken by the host environment; therefore “ReadOnly” does not mean “constant and unchanging”!)

看见一般情况下，readonly属性不可以改，但不报错，即赋值修改没用！也不意味着是常量！

那么现在知道了： 2,4,6,8,10 条代码 alert 都是 3.14 了。

另外 3 alert 也不用解释了，返回自增前结果，还是 3.14

那么 1 alert 难道还是 3.14 ,因为 PI readonly 无法改变？错误

自增运算符

涉及到前缀自增运算符的返回值问题 :

11.4.4 Prefix Increment Operator The production UnaryExpression :

++ UnaryExpression is evaluated as follows:
1.    Evaluate UnaryExpression.

2.    Call    GetV alue(Result(1)).

3.    Call ToNumber(Result(2)).

4.    Add the value 1 to Result(3), using the same rules as for the + operator (see 11.6.3).

5.    Call    PutV alue(Result(1),    Result(4)).
6.    Return Result(4).

则可见返回的是 Result(4) Math.PI+1 ，而不是第五步过后的 Result (1)

那么可见 1 alert 即为 Math.PI+1 = 4.14

赋值操作符

c,d,e 类似，＝操作符具有右结合性，则申明初始化时，变量值为赋值表达式 (Math.PI = ++Math.PI) ，javascript 每个表达式都会返回一个值，这就涉及到了前句的表达式返回值是多少：

11.13.1   Simple Assignment ( = )

The production AssignmentExpression : LeftHandSideExpression = AssignmentExpression is evaluated as follows:
1.   Evaluate LeftHandSideExpression.

2.   Evaluate AssignmentExpression.

3.   Call   GetV alue(Result(2)).

4.   Call   PutV alue(Result(1),   Result(3)).
5.   Return Result(3).

前面自增规范可以得到 ++Math.PI 返回 4.14 为 Result 2,Result 3 ，同样的道理，第4步赋值后，返回的是赋值表达式右端的值 (++Math.PI)，而不是左端的值 Math.PI ，则 (Math.PI = ++ Math.PI) 返回 ++Math.PI == 4.14 ，即连续赋值运算只返回最右边的值，而不管赋值中变量是否发生了变化。

四、注释的代码是否可以实现？如不能实现，请修改

function test(){
    this.name = 'taobao';
    this.waitMes = function (){
        //隔5秒钟执行this.name
    }
}

考点：javascript闭包

function test(){
          this.name = 'taobao';
          var waitMes = function (){
          //每隔5秒钟执行this.name
          setTimeout(function (){alert(self.name)},5000);
           }
         return waitMes;
}
var _test = test();
_test();

posted @ 2012-07-18 00:20 爷爷泡的茶阅读(1098) 评论(0) 编辑收藏举报

刷新页面返回顶部

淘宝Web前端开发面试题

公告