web面试常见问题

1事件继承

function ClassA(sColor) {
     this.color = sColor;
     this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) {

  ClassA.call(this, sColor);

    this.name = sName;
    this.sayName = function () {
         alert(this.name);
     };
}

 

1  this.newMethod = ClassA;

     this.newMethod(sColor);

     delete this.newMethod;

2

call()

ClassA.call(this, sColor);

 

3 apply()

ClassA.apply(this, new Array(sColor));

4 用原型来做继承使用Prototype

function ClassA() {

}

ClassA.prototype.color = "";

ClassA.prototype.sayColor = function () {

     alert(this.color);

};

function ClassB() {

}

 

ClassB.prototype = new ClassA();

注意：调用 ClassA 的构造函数，没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。

参考网址：https://zhidao.baidu.com/question/1497390251403130659.html

         http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp

http://www.cnblogs.com/humin/p/4556820.html

2 闭包

3事件冒泡（阻止事件冒泡两种方法）

   1

  在子函数上e.stopPropagation();//阻止点击事件向上冒泡

2

 元素收到事件后，判断事件是否符合要求，然后做相应的处理，然后事件继续冒泡往上传递；

1. document.getElementById("span").addEventListener("click",function(event){  
2. if(event.target == event.currentTarget)  
3. {  
4. alert("您好，我是span。");  
6. }  
7. }); 

 

 

两种方法的缺点：

 方法一缺点：为了实现点击特定的元素显示对应的信息，方法一要求每个元素的子元素也必须终止事件的冒泡传递，即跟别的元素功能上强关联，这样的方法会很脆弱。比如，如果span 元素的处理函数没有执行冒泡终止，则事件会传到div2 上，这样会造成div2 的提示信息；

        方法二缺点：方法二为每一个元素都增加了事件监听处理函数，事件的处理逻辑都很相似，即都有判断 if(event.target == event.currentTarget)，这样存在了很大的代码冗余

 

优化方法：

1. window.onload = function() {  
2. document.getElementById("body").addEventListener("click",eventPerformed);  
3. }  
4. function eventPerformed(event) {  
5. var target = event.target;  
6. switch (target.id) {  
7. case "span":   
8. alert("您好，我是span。");  
9. break;  
10. case "div1":  
11. alert("您好，我是第二层div。");  
12. break;  
13. case "div2":  
14. alert("您好，我是最外层div。");  
15. break;  
16. }  
17. }  

使用switch case语法在父级函数进行判断

 

参考网址：http://blog.csdn.net/luanlouis/article/details/23927347

4 原型链的概念

1 凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象

2 prototype是原型对象  ， _proto_是内置属性用于指向创建它的函数对象的原 型对像prototype

3 原型对象prototype中都有个预定义的constructor属性，用来引用它的函数对    象。这是一种循环引用
   person.prototype.constructor === person //true
   Function.prototype.constructor === Function //true
   Object.prototype.constructor === Object //true

总结：

1.原型和原型链是JS实现继承的一种模型。
2.原型链的形成是真正是靠__proto__ 而非prototype

参考网址：http://www.108js.com/article/article1/10201.html?id=1092

5 prototype和 __proto__区别

同上

6 promise

1

Promise 是异步编程的一种解决方案。简单来说 Promise 就是一个容器， 里面保 存着某个未来才会结束的异步操作的结果。

　　 从语法上说，Promise 是一个对象，通过它可以获取异步操作的消息。

2

Promise 的出现就是为了主要解决这两个主要问题：它可以让我们以同步的方式编写异步代码，同时我们也可以优雅的捕获错误和异常。

3

　 promise 对象的错误具有冒泡性质，会一直向后传递，直到捕获为止。错 误总是会被下一个 catch 语句捕获。

　　 一般来说，不要在 then 方法里面定义 Reject 状态的回调函数，总是使 用 catch捕获错误。

 

 

4

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

　　 Promise.all 方法接受一个 promise 实例数组作为参数（可以不是数组， 但需要具有 iterator 接口）， 如果元素不是 Promise 实例，就会先调 用Promise.resolve 方法，将参数转为 Promise 实例，再进一步处理。

　　 Promise.all 方法返回的 Promise 实例状态分为两种情况：

　　 实例数组中所有实例的状态都变成 Resolved，Promise.all 返回的实例才 会变成 Resolved， 并将 Promise 实例数组的所有返回值组成一个数组， 传递给回调函数。

　　 实例数组中某个实例变为了 Rejected 状态，Promise.all 返回的实例会 立即变为 Rejected 状态。并将第一个 Rejected 的实例的返回值传递给 回调函数。

5

Promise.race 方法跟 Promise.all 方法差不多。唯一的区别在于该方法 返回的Promise 实例并不会等待所有 Proimse 都跑完，而是只要有一个 Promise 实例改变状态，它就跟着改变状态。并使用第一个改变状态实例 的返回值作为返回值。

参考网址：http://it.sohu.com/20170316/n483577094.shtml

 

 

 

7 Ajax

1

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网 页的情况下，对网页的某部分进行更新。

2

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

 

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 

2  onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

 

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪

 

 

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

 

 

 

 

 

 

 

3 向服务器发送请求

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

post与get区别：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

4 使用 Callback 函数

 

 

与后台数据库交互的方式：

5   showHint() 函数

当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发：

参考网址：http://www.th7.cn/web/ajax/201602/156990.shtml

6 showCustomer() 函数

当用户在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数。该函数 由 "onchange" 事件触发

参考网址：http://www.w3school.com.cn/ajax/ajax_database.asp

新增ajax运用：

第一种:
$.ajax({
            type: "POST",请求方式
            url: "ShowProduct.aspx/GetDHList",

     async:true默认设置为true，所有请求均为异步请求

     Cache:true,设置为false将不会从浏览器缓存中加载请求信息
            data: '{CategoryId:"' + CategoryId + '"}',要求为Object或String类型的参数，发送到服务器的数据
            contentType: "application/json;charset=utf-8",内容编码类型
            dataType: "json",预期服务器返回的数据类型json/xml/text等
            success: function (data) {
                var item = eval(data.d);
                var StrHtml = "";
                for (var i in item) {}
           }, async: false
        });
第二种:
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

第三种:
$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

 

8css3

1 弹性盒子是 CSS3 :

弹性盒子是 CSS3 的一种新的布局模式

1 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

<div class="flex-container"> 

<div class="flex-item">flex item 1</div> 

<div class="flex-item">flex item 2</div> 

<div  class="flex-item">flex item 3</div> 

</div>

2  direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布 局也跟着改变.

3 flex-direction 顺序指定了弹性子元素在父容器中的位置。

语法：flex-direction: row默认 | row-reverse右对齐 | column纵向排列 | column-reverse反转纵向排列

例如：

.flex-container {

-webkit-flex-direction: row-reverse; //浏览器兼容

flex-direction: row-reverse;

}

4 justify-content属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性 容器的主轴线（main axis）对齐。

语法：justify-content: flex-start | flex-end | center | space-between | space-around

5 align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法：align-items: flex-start | flex-end | center | baseline | stretch

6  flex-wrap属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法：flex-flow: nowrap默认 | wrap子项溢出的部分会被放置到新行 | wrap-reverse反转 wrap 排列

7  align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它 不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch

弹性子元素属性：

1 order排序

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

2  margin-right: auto 对齐

可以使弹性子元素在弹性容器的两上轴方向都完全集中。

3 align-self

用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

4 flex

用于指定弹性子元素如何分配空间。

语法：flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

新边框属性

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3

Css3图片新增：

1 border-radius圆角

2 img {
     max- 100%;
     height: auto;
}响应式图片

3 img {
         filter: grayscale(100%);
}图片滤镜效果

4 @media only screen and (max- 700px){
    .responsive {
          49.99999%;
         margin: 6px 0;
    }
}响应式图册效果

5 .modal-content, #caption {    

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

}遮罩层效果

Css3分页导航条

1 ul.pagination

Css3框大小

1 添加
    box-sizing: border-box;

可以不用考虑内边距和外边距大小问题

Css3渐进效果

background: linear-gradient(red, blue);----线性渐进上到下

background: radial-gradient(red, blue);----线性渐进左到右

 

9 html5

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside页面主区域内容之外的内容, nav, main, article, figure { display: block; }

 

 

解决浏览器兼容问题：

<!--[if lt IE 9]>

<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js">

</script>
<![endif]-->

 

视频播放技术：

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  您的浏览器不支持 HTML5 video 标签。

</video>

音频技术：

<audio controls> 

<source src="ho。rse.ogg" type="audio/ogg"> 

<source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。

</audio>

新多媒体元素

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

Canvas

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000"; --------矩形图片颜色

ctx.fillRect(0,0,150,75);--------矩形图片尺寸

 

绘制图像基本步骤：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle=”#fff000”;-----------定义绘制图片的颜色

ctx.fillRect(0,0,150,60);-------------定义绘制图片的位置和大小

ctx.moveTo(0,0); -----------定义线条开始坐标

ctx.lineTo(200,100); -----------定义线条结束坐标

ctx.beginPath();-----------定义圆

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

定义文字

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",0,50);------实体字

ctx.strokeText("Hello World",10,50);------空心字

图片放置：

img.onload = function() {

ctx.drawImage(img,50,10);

}

Veg图片：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

   <polygon points="100,10 40,180 190,60 10,60 160,180"

   style="fill:lime;stroke:purple;stroke-5;fill- rule:evenodd;"/>

</svg>

mathML算数表达式:

 

 <math xmlns="http://www.w3.org/1998/Math/MathML">

 

         <mrow>

            <msup><mi>a</mi><mn>2</mn></msup>

            <mo>+</mo>

 

            <msup><mi>b</mi><mn>2</mn></msup>

            <mo>=</mo>

 

            <msup><mi>c</mi><mn>2</mn></msup>

         </mrow>

 

      </math>

文字图片拖放：

<script> 
function allowDrop(ev) 
{ 
    ev.preventDefault(); -----使得元素可以被拖拽
} 

function drag(ev) 
{ 
    ev.dataTransfer.setData("Text",ev.target.id); -----规定了拖拽的对象
} 

function drop(ev) 
{ 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(data)); ----区域接受被拖拽过来的对象
} 
</script> 
</head> 
<body> 

<p>拖动 W3CSchool.cc 图片到矩形框中:</p> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<img id="drag1" src="/images/logo.png" draggable="true" ----元素可拖拽ondragstart="drag(event)" width="336" height="69"> 

使用地理纬度：

Navigator.geolocation

Input类型新增：

• Color：颜色
• Date：日期
• Datetime：在本地缓存一个时间
• datetime-local：在本地缓存一个时间（无时区）
• Email：邮箱
• Month：选择一个月份
• Number：选择一个数字
• Range：选择一个精准的数值--滑动杆
• Search：搜索框
• Tel：电话
• Time：选择时间
• Url：输入网址格式
• Week：选择周和年

表单元素：

加密<keygen name="security">密匙生成

<output name="x" for="a b"></output>用于不同类型的输出，比如计算或脚本输出

 

HTML5 Web 存储

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

HTML5 Web 访问后台数据库sql

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {  

  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');