JavaScript口试基本小结(高手请疏忽)

2024年5月21日 186次阅读 来源: Liuvio

事宜托付

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动画算法
    原文作者：Liuvio
    原文地址: https://segmentfault.com/a/1190000002635401
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞