JavaScript面试基础小结(高手请无视)


事件委托

ul#wrap>li.item$*2>{item $}

得到如下

html<ul id="wrap">
    <li class="item1">item 1</li>
    <li class="item2">item 2</li>
</ul>

一个监听,多个函数绑定

js document.getElementById('wrap').addEventListener("click", function(e) {
        if (e.target.nodeName === "LI") {
            console.log("ok");
            switch(e.target.className){
                case "item1":
                    f1();
                    break;
                case "item2":
                    f2();
                    break;
                default:
                    alert("not a li node");
            }
        };
    },false)

    function f1(){
        alert("f1");
    }

    function f2(){
        alert("f2");
    }

JSONP

标签的src属性并不被同源策略(同协议、域名、端口)所约束,所以可以获取任何服务器上脚本并执行。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

以上是网上摘抄,根据自己的理解写下如下代码

js//jsonp.html

 function getName(data){

            console.log(data.name);

        }

        var scriptP = document.createElement("script");

        scriptP.src = "http://localhost:8000/reponse.php?id=1&&callback=getName";

        window.onload=function(){
            document.body.appendChild(scriptP);
        }   

php文件如下

php//reponse.php
<?php
    $getId = $_GET["id"];
    $getCalFun = $_GET["callback"];

    $json = array(
       "id" => $getId,
       "name" => "zhangsan"
    );

   echo $getCalFun+'('+json_encode($json)+')';
?>

但却报错了Uncaught SyntaxError: Unexpected token <,不知道哪里出错了,往大婶指出…

原理很简单,客户端获取数据根据需求动态添加script,并使jsonp的服务端拼接脚本触发函数。

This

jsvar ob = {};

ob.x = 1;
ob.f = function(){
    this.x = 2;
}
ob.f();

console.log(ob.x); // => 2

从上面的代码可以得知,this是引用对象,而且是可以更改指定的对象。

主要应用有两种call和apply

js
function change(s,v){ if(s > v){ console.log("s >v"); }else{ console.log(" s < v"); } } change.call(2,3);// 当前this 指向window ... function changeColor(s,v){ this.style.s = v; } var box = document.querySelector(".box"); changeColor.call(box, "backgroundcolor" , "blue"); //当前this指向changeColor

call和apply的区别只是apply只接受两个参数,第二个参数是数组形式。

疑问

jsvar obj = {
    x : 100,
    y : function(){
        setTimeout(
            function(){ alert(this.x); }    //这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined
         , 2000);
    }
};

obj.y();

上面是刚开始遇到的疑问

后来经指点,一段代码理解问题

jswindow.setTimeout();

解决方法:

...
y.function(){
    var that = this;
    setTimeout(
        function(){
            alert(that.y);  //既然setTimeout指向的是window,我们把它换了就ok
        }
        ,2000)
}
...

以上代码摘自: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html

前端模块化的AMD和CMD

网上已经有很多关于这方面的对比。我只写一下我的理解。

AMD:加载速度快,它是异步加载,预先加载所有资源(这也是缺点?)。

CMD:服务器端模块的规范,同步加载,加载完后才能执行后面的操作。

AMD一般适用于浏览器,CMD则适用于本地或者服务器,例如nodejs就是采用这种模块化(npm)。

圣杯布局

初次听说这个,后来网上一搜,原来也就那么一回事

http://www.elonglau.com/33.html

如果是我的话,我会采用flex了。

Cache-Control

这个只是简单了解,没做深入,好的博客推荐看这里

http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html

主要了解了 HTTP状态码

  1. 1XX表示请求接受成功,待进一步处理
  2. 2XX表示访问成功
  3. 3XX 访问重定向
  4. 4XX 客户端请求错误,包括语法、文件路径
  5. 5XX 服务器出现错误

常见的有

200访问成功,302 访问重定向(google.com转到google.com.hk),304缓存,404页面不存在。

我记不住的:

400 Bad Request,请求出现语法错误。
403 Forbidden,服务器拒绝请求。
500 服务器发生了不可预知的错误
503 服务器当前无法接受请求,请等待一段时间

304

对于304缓存,主要有两个标识判断是否需求请求新的文件:

  1. Etag
  2. 缓存文件的时间和服务器文件最后一次修改的时间

Cache-Control

Cache-Control常见的参数:

  1. public 所有用户均可使用(缓存在服务器上)
  2. private 单个用户专用
  3. no-cache 所有页面都不能缓存
  4. max-age 多少时间不会去访问服务器

参数可以参考: http://fanli7.net/a/bianchengyuyan/C__/20130120/294176.html

JavaScript继承实现

可以直接看阮一峰老师的文章

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_…

未写:

  1. 继承有好几种方式(待写一个YUI继承方式)
  2. 拖拽实现
  3. JavaScript基础算法
  4. Javascript动画算法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>