|
|
今天收到了sap的电话面试，感觉自己答得不好，说话有点吞吐，不够自信，虽然学前端没多久，但是不能总拿这个当借口，感觉跪了，不过没关系，又get了很多新技能，知道了自己的不足。下面简要回忆下今天面试的内容。
1、首先自我介绍下和自己做过的和前端有关的项目。我就啪啪啪说了一二三
2、盒子模型
3、外边距堆叠
外边距叠加是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生叠加现象，且叠加后的外边距，等于其中较大者。
另一个叠加现象是当一个元素包含在另一个元素之中时，子元素与父元素之间也会产生叠加现象，叠加后的外边距，等于其中最大者：
外边距叠加的意义
外边距的叠加只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距叠加的存在，段落之间就不会产生双倍的距离。
防止外边距叠加
虽然外边距的叠加有其一定的意义，但有时候我们在设计上却不想让元素之间产生叠加，那么可以有如下几个建议可供参考：
- 尽量使用padding来达到目的
- 在可能叠加的外边距之间添加透明边框或者内边距使之分隔开
- 给元素添加上浮动(float)属性
- 在可能叠加的元素间添加空的块元素
- 绝对定位
4、html5特性
1. 新的Doctype
尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染（向后兼容）
（注doctype是文档类型，告诉浏览器文档应该按照html还是xhtml规范，xhtml 1.0中有3种dtd声明可以选择，过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)）
（doctype有两种用途1 是可以进行页面的有效性验证（看是否符合标准），2、可以区分浏览器使用严格模式还是混杂模式来解析CSS）
2. 去掉link和script标签里面的type属性
3. Email Inputs
如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
4. Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
5. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
6. 语义化的header和footer
7. 更多的HTML5表单特性
8. IE和HTML5
默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
9. hgroup
一般在header里面用来将一组标题组合在一起，如
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
10. Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
<input type=”text” name=”someInput” required>
或者
<input type=”text” name=”someInput” required=”required”>
11. Audio支持
HTML5提供了<audio>标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" /><!--FF-->
<source src="file.mp3" /><!--Webkit-->
<a href="file.mp3">Download this file.</a>
</audio>
12. Video支持
和Audio很像，<video>标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis编码的格式，当使用HTML5 video的时候，你必须都提供：
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs=´vorbis, theora´" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; ´codecs=´avc1.42E01E, mp4a.40.2´" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
13. 显示视频控制
<video preload controls>
14. 正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">Go </button>
</form>
|
本站资源均由 HTML5中国 编辑从其他网站精选HTML5相关资源转载，以供网友参阅，投稿： news@html5cn.org
5、AJAX两种写法？
实现AJAX的两种方法：
1、
//实例化XmlHttRequest对象
var xhr=new XMLhttpRequest();
//使用get方式获取
xhr.open("GET","http：//url",true);
//添加回调函数
xhr.onreadystatechange=function(evt){
//redyState===4处理完成
//readyState===200请求成功
if(xhr.readyState===4){
if(xhr.status==="200"){
console.log(xhr.responseText);
}
else{
console.log("Error:",xhr.statusText);
}
}
};
//发送空请求
xhr.send(null);
1）get和post的区别：GET一般用于获取/查询 资源信息（安全没有副作用 幂等的），而POST一般用于更新 资源信息
GET提交，请求的数据会附在URL之后（就是把数据放置在请求行（request line）中），以?分割URL和传输数据，多个参数用&连接；例如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，所有非ASCII字符均需要编码再传输。对于GET提交时，传输数据就会受到URL长度的限制。
POST提交：把提交的数据放置在是HTTP包的包体中。上文示例中红色字体标明的就是实际的传输数据
因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变
2）．最常用的状态码有：
◆200 (OK): 找到了该资源，并且一切正常。
◆304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
◆401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码，以登录到服务器。
◆403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。
◆404 (NOT FOUND): 在指定的位置不存在所申请的资源。
2、
1 //使用jquerty实现ajax代码
2
3 $.ajax("google.com")//获取谷歌首页
4 .done(function(data){//状态码200显示成功
5 console.log(data);})
6 .fail(funtion(xhr)){//错误处理 不是200
7 console.log("err",xhr.statusText);});
6、js的闭包
闭包就是能够读取其他函数内部变量的函数。
闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
(另一种：闭包就是局部变量集合，但是这个局部变量在函数返回之后仍然可以被访问)
在ECMAScript中，函数对象中定义的内部函数（inner function）是可以直接访问外部函数的局部变量。
1 function greeting(name) {
2 var text = 'Hello ' + name; // local variable
3 // 每次调用时，产生闭包，并返回内部函数对象给调用者
4 return function() { alert(text); }
5 }
6 var sayHello=greeting("Closure");
7 sayHello() // 通过闭包访问到了局部变量text
例子1:闭包中局部变量是引用而非拷贝
1 function say667() {
2 // Local variable that ends up within closure
3 var num = 666;
4 var sayAlert = function() { alert(num); }
5 num++;
6 return sayAlert;
7 }
8
9 var sayAlert = say667();
10 sayAlert();
执行的结果是667.
例子2：多个函数绑定同一个闭包，因为他们定义在同一个函数内。
1 function setupSomeGloals(){
2 var num=666;
3 gAlertNumber=function(){alert(num);}
4 gIncreaseNumber=function(){num++};
5 gSetNumber=function(x){num=x};
6 }
7
8 setupSomeGloals();
9 gAlertNumber(); //666
10 gIncreaseNumber();
11 gAlertNumber();//667;
12 gSetNumber(12);
13 gAlertNumber();//12;
例子3：当在一个循环中赋值函数时，这些函数将绑定同样的闭包
function buildList(list) {
var result = [];
for (var i = 0; i < list.length; i++) {
var item = 'item' + list;
result.push( function() {alert(item + ' ' + list)} );
}
return result;
}
function testList() {
var fnlist = buildList([1,2,3]);
// using j only to help prevent confusion - could use i
for (var j = 0; j < fnlist.length; j++) {
fnlist[j]();
}
}
testList();
特别有意思这个例子，因为testList这里面的三个函数都存在同一个闭包里，而当i=跳出循环时候i=4，list[4] undefined 所以 会alert 三次 item3 undefined.
例子4：外部函数所有局部变量都在闭包内，即使这个变量声明在内部函数定义之后。
1 function sayAlice() {
2 var sayAlert = function() { alert(alice); }
3 // Local variable that ends up within closure
4 var alice = 'Hello Alice';
5 return sayAlert;
6 }
7 var helloAlice=sayAlice();
8 helloAlice();
这个例子也挺有意思，个人感觉就是将函数里函数的局部变量上升到这个父函数的局部变量了。执行结果是弹出”Hello Alice”的窗口。即使局部变量声明在函数sayAlert之后，局部变量仍然可以被访问到。
例子5：每次函数调用的时候创建一个新的闭包
1 function newClosure(someNum, someRef) {
2 // Local variables that end up within closure
3 var num = someNum;
4 var anArray = [1,2,3];
5 var ref = someRef;
6 return function(x) {
7 num += x;
8 anArray.push(num);
9 alert('num: ' + num +
10 '\nanArray ' + anArray.toString() +
11 '\nref.someVar ' + ref.someVar);
12 }
13 }
14 closure1=newClosure(40,{someVar:'closure 1'});
15 closure2=newClosure(1000,{someVar:'closure 2'});
16
17 closure1(5); // num:45 anArray[1,2,3,45] ref:'someVar closure1'
18 closure2(-10);// num:990 anArray[1,2,3,990] ref:'someVar closure2'
闭包的应用
Singleton 单件：
1 var singleton = function () {
2 var privateVariable;
3 function privateFunction(x) {
4 ...privateVariable...
5 }
6
7 return {
8 firstMethod: function (a, b) {
9 ...privateVariable...
10 },
11 secondMethod: function (c) {
12 ...privateFunction()...
13 }
14 };
15 }();
这个单件通过闭包来实现。通过闭包完成了私有的成员和方法的封装。匿名主函数返回一个对象。对象包含了两个方法，方法1可以方法私有变量，方法2访问内部私有函数。需要注意的地方是匿名主函数结束的地方的’()’，如果没有这个’()’就不能产生单件。因为匿名函数只能返回了唯一的对象，而且不能被其他地方调用。这个就是利用闭包产生单件的方法。
以上部分摘抄于酷客（http://coolshell.cn/articles/6731.html）作者：Neo
7、前端mvc框架
models数据对象，实现了对数据源的增删改查，大部分人业务逻辑也放在这里，Controller用来转发请求连接这两者。view视图层，将处理过的数据结果呈现给用户。
前端获取JSON数据作为Model.各种前端框架view,controller.
比较常用的backbone.js 谷歌的AngularJS,Ember.js
AngularJS 中的双向数据绑定特性(Two Way Data-Binding)，将 Model 和 View 自动关联了起来，在更复杂的业务场景下，还有代码分离的好处，将 DOM 操作和应用逻辑解耦，非常实用。
8、兼容性 hack
感觉自己应该更自信点，然后打好基础！
（自己要补的课 js解析url，以及打开一个网址浏览器到底发生了什么？）
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2015-9-17 14:08:32
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡