Font-End（理论知识）
在package.json中的版本号问题
2.14.1：分别是“大版本“、“次要版本“、“小版本“
~2.14.1：
表示：不低于2.14.1的、次要版本号系列都可以
[2.14.1 , 2.15.0)
^2.14.1：
表示：不低于2.14.1的、大版本号系列都可以
[2.14.1 , 3.0.0)完美（水平）居中
//css
//父：
sup {
position: relative;
}
//子：
sub {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}完美（垂直）居中——flexbox
parentElement{
display:flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}new操作符经历了哪些步骤
① 创建一个新的对象；
② 将构造函数的作用域赋值给新的对象；（此时this指向新的对象）
③ 执行构造函数里的代码；（为这个新对象添加属性）
④ 返回一个新的对象
js创建对象的模式
工厂模式：
function factory(name,age){
var obj = {};
obj.name = name;
obj.age = age;
return obj;
}
var p1 = factory("name",21);
//缺点：不具备对象识别；构造函数模式：
//工厂模式的改版：
function Person(name,age){
this.name = name;
this.age = age;
}
var p2 = new Person("carl",21);
//优点：具有对象识别。对象的constructor属性可以用来标志对象类型的；js的继承：
js实现继承的主要方法：原型链；
基本思想是：利用原型，让一个引用类型去继承另外一个引用类型的属性和方法；
用的比较多是：组合继承。
function Sup(name){
this.name = name;
this.color = ['1','2'];
}
Sup.prototype.sayName = function(){
alert(this.name);
}
function Sub(name,age){
Sup.call(this,name);//利用借用构造函数的方法实现对实例属性的继承
this.age = age;
}
Sub.prototype = new Sup();//利用原型链来实现对原型的属性和方法的继承；
Sub.prototype.constructor = Sub;
var p1 = new Sub("carl",21);
alert(p1.color);//这个colors就是 对象p1的实例属性
p1.sayName();//这个sayName就是 对象p1的原型方法
优点：
① 利用“原型链”实现对原型的属性和方法的继承；
② 利用“借用构造函数”实现对实例属性的继承。
跨域八大家
① documetns.domain + iframe
（只有主域相同的时候，才能使用）
② 动态创建script
③ location.hash + iframe
④ window.name + iframe
⑤ postMessage
⑥ CORS
（CORS的背后思想，就是使用自定义的HTTP头部让服务器进行沟通，从而决定请求或相应是应该成功还是失败）
⑦ JSONP
（JSONP包含两部分：回调函数、数据）
缺点：1）安全问题；2）要确定jsonp请求是否失败并不容易
你好，WebSocket
WebSocket是一种浏览器API，他的目的是在一个单独的持久连接上建立全双工、双向通信；
原理是：js创建WebSocket后，会发送一个HTTP请求到服务器端以建立连接。服务器端响应后，建立的连接会HTTP升级，成为WebSocket协议。
优点：
① 支持服务器端及时的消息推送；
② 复用长连接；
③ 在同一条WebSocket连接上能同时并发多个请求；（A请求的响应未到达，可以发送B）
缺点：
① 需要维护WebSocket连接；
② 消息推送比较复杂；
③ 技术比较新，能用的组件少。
float的四种属性
left
right
none
inherit
SVG和Canvas的却比
SVG 是一种使用XML描述2D图形的语言；
- 产生DOM的数量多；
- 可以使用CSS设置动画样式
Canvas 是通过js来绘制2D图形；
- 产生的DOM数量少；
- 不可以用CSS设置动画样式
[“1”,”2”,”3”].map(parseInt)的执行结果是[1,NaN,NaN]
因为map有3个参数（val，idx，function），
parseInt有2个参数（val，进制）；
这样写的话，会给parseInt传入两个参数，即val，indx；那么将他们按索引值进行进制转换，变成NaN了
Javascript的关键字
with、void、class
Web应用从服务器主动推送Data到客户端有哪些方式？
① HTML5 Websocket；
② WebSocket通过Flash；
③ XHR长时间连接
④ XHR Multipart Streaming；
⑤ 不可见的Iframe
对网站文件和资源进行优化
① 文件合并
② 文件最小化/文件压缩
③ 使用CDN托管
④ 缓存的使用
typeof NaN === ‘number’，
typeof Infinity === ‘number;’
typeof (new Number(1)) === ‘object’
setTimeout中所执行函数中的this，永远指向window（非严格）
注意是要延迟执行的函数中的this哦
指向undefined（严格）
“use strict”的作用
① 变量在声明前使用会报错；
② 不能delete变量或函数；
③ 对象的属性名不能重复；
④ 不能使用with；
⑤ 不能使用eval；
⑥ 对arguments参数：
1）不能定义arguments；
2）不能修改arguments；
3）不能使用arguments.callee和arguments.caller;
4）不再追踪参数（即同步，在函数体内，如果改了同名参数，arguments[0]这些不会同步变）的变化！
arguments.callee和arguments.caller的区别
arguments.callee指向该arguments的函数对象。
arguments.caller没啥用，在严格模式下无法访问，非严格模式下的值也为undefined，而且貌似被废弃了。
Headers（7）
请求方式 资源路径 协议及协议版本
Accept：客户端支持的资源类型
（有Accept-Encoding压缩数据的类型、Accept-Language：语言类型）
Connection：客户端和服务端的连接关系
Cookie：
Host：连接的目标主机和端口号
Referer：告诉服务端，客户端来自哪里
User-Agent：客户端版本号的名字
Date：客户端访问服务端的时间
Response（9）
协议及协议版本 状态码 描述信息
Content-Type：服务端发送的类型及采用的编码方式
（有Content-Encoding压缩编码类型、Content-Language：语言类型）
Connection：服务端和客户端的连接关系
Location：服务端需要客户端访问的页面路径
Server：服务端的Web服务端名
Refresh：服务端要求客户端x秒后刷新，然后访问指定的页面路径
Last-Modified：服务端对该资源最后修改的时间，检验协商缓存的属性
Expires：检验强缓存的属性
Cache-Control：检验强缓存的属性
Date：服务端响应客户端的时间
函数提升先，还是变量提升？
1、函数提升优先，变量提升再后；
2、变量**声明**，不会覆盖掉之前的函数声明；
3、变量**赋值**，才会覆盖掉之前的函数声明。cellpadding和cellspacing
cellpadding：单元格的内边距padding
cellspacing：单元格和表格的边距之间的距离
H5的data
<input id="test" type="radio" data-name="he" />
//jq用法：
//$('#test').data("name");//获取name
//js用法（“-”改成驼峰）：
//document.getElementById('test').dataset.Name;
用正则表达式，将strA替换成strB
strA =
'HelloWorld, [img:(http://www.baidu.com/pic.png)]'
strB =
'HelloWorld, 
'
//解法（注意转义字符的使用）：
var reg=/\[\w+:\((\S+)\)\]/
strA.replace(reg,'HelloWorld, 
')
//其中\$1表示匹配成功的的第一个分组，分组就是从左到右，各个括号的内容，上面就是(\S+)
//切记，这个$1、$2 不能直接在第二个参数的位置，用作obj读取对应的属性，例如：
strA.repalce(reg,obj[$2]);//会undefined
应该弄一个匿名函数返回：
/*
strA.repalce(reg,function($0,$1,$2){
console.log($0);
console.log($2);
$2 = obj[$2];
return $2;
})
*/下面函数输出什么？
function test(){
var n=4399;
function add(){
n++;
console.log(n);
}//这是个闭包，有权访问另外一个函数作用域内变量的函数！
return {n:n,add:add}
}
var result = test();//此时，result指向一个对象{n:4399,add:add};
var result2 = test2();//此时，result指向另外一个对象{n:4399,add:add};
result.add();//调用闭包，读取另外一个函数（test）作用域内变量n=4399+1=4400；
result.add();//和上面一样，因为函数add的作用域链，自己的活动对象没有n，找上一级的test的活动对象，有n（4400），然后+1=4401；
console.log(result.n);//这里读取的是result指向的那个对象的属性n（4399）
result2.add();//这里是调用第二个闭包，为4400块内声明函数的做法
if(x){
var foo = function(){}//不能用函数声明，会声明提升，导致x判断错误。
}f能取到a,b么？
var F=function();
Object.prototype.a = function(){};
Function.prototype.b = function(){};
var f = new F();
//f能取到a，不能取到b
//因为f不是通过函数的构造方法Function(…)创建的，而是通过关键字new调用，创建的一个普通对象。div p和div>p和div+p的区别
div p {
/*div的子子孙孙p*/
}
div>p {
/*div的子p*/
}
div+p {
/*div的下一个兄弟p*/
}
stopPropagation( )和preventDefault( )的区别？
e.stopPropagation( );//阻止事件向父容器继续传递
e.preventDefault( );//阻止事件的默认行为（ 不会跳转）
var arr =[];arr[0]=1;arr[1]=2;arr.foo=”hsy”;arr.length=?
2。
因为：
① arr也是 Array对象，只是额外多了一种存储数据的模式；
② arr.length和arr.foo都是arr的属性，是并列的，是负责统计数组里的长度；
③ 同时，数组里的方法也不改变外面的属性。
10s后，调用check( )函数？
window.setTimeout(check,10000);
或者window.setTimeout(“check( )”,10000);
解释语言的特性有什么？
翻译（解释 or 编译）高级语言 ———–> 机器语言
【解释语言】：不用编译的。每个语句都是执行时才翻译，效率低，且不独立
【编译语言】：要编译的啊。执行前，会编译成文件，效率高，且独立
CSS选择器的*代表所有元素，但是不能组合写
例：*p是错的
四舍五入Math.round(3.14)
是看 小数点后一位 四舍五入的，后面都不管，最后得出是整数
window对象产生的框
提示框：window.prompt( );
警示框：window.alert( );
确认框：window.confirm( );
history对象的方法：
back（）：加载history列表中的前一个URL；
forward（）：加载history列表中的下一个URL；
go（）：加载history列表中的指定页面；
go（）的参数可以传入数字（-1上一个页面、1前进一个页面），也可以传入字符串（URL列表中第一个匹配的完整URL）；
DHTMLX Touch JavaScript 是H5的框架
它是针对移动和触摸设备的js框架
兼容主流的web浏览器
可以针对移动和触摸设备创建跨平台的web应用
bootstrap的栅格系统
①Container包含row，row包含column；
②column里面也可以包含row（列的嵌套）；
自闭合标签
、link/、
判断arr是不是一个数组？
①typeof arr；（不可行，都是Object）；
②arr instanceof Array；（不可行，在跨frame对象构建的场景会失效）；
③Object.prototype.toString.call(arr);//”[object Array]”；（可行）
实现跨域
①jsonp、GET；
②iframe的document.domain
用js禁用button？
① element.disabled = true;
② element.setAttribute(“disabled” , true);//实际上第二个参数无论如何，就是会禁用的
stopPropagation( ) 用于阻止冒泡
preventDefault( ) 用于阻止默认事件的默认操作
+ 和 三目运算符
console.log(’ Value is ’ + (val != ‘0’) ? ‘define’ : ‘undefine’);
//输出define，因为+号优先级高于三目运算符，不管括号是啥，前面肯定是true
函数的调用方式
1、直接调用；
2、作为对象的方法调用；
3、作为构造函数调用；
4、通过call和apply方法调用
关于
H5标准的链接默认带下划线
bootstrap链接只有hover状态下才带下划线
sort( )
默认是按首字符的字符串编码排序
计算两个数的最大公约数
function gongyueshu(x,y){
while(x % y != 0){
var temp = x % y;
x = y;
y = temp;
}
return y;
}清除浮动的三种方法
①、在最后新增一个元素，并设为clear:both
②、为父元素新增伪元素:after
③、父元素设为overflow:hidden
.outer {
zoom: 1;//为了兼容性，因为ie6、7不能使用伪类
}
.outer:after {
clear:both;
content: ' ';
display:block;
width: 0;
height: 0;
visibility:hidden;
}手写直角梯形
//HTML Code
<div class="example">div>
<style>
.example {
position: relative;
width: 100px;
height: 50px;
}
.example:before, .example:after {
content: ' ';
position: absolute;
top: 0;
}
.example:before {
left: 0;
width: 50px;
height: 50px;
background-color: orange;
}
.example:after {
right: 0;
border: 25px solid;
border-color: transparent transparent orange orange;
}
style>还是要说说盒模型
width（也就是我们平时设定的width:111px）、
padding、
border、
margin
W3C标准盒模型
width、padding、border、margin四个独立分开的，
我们设定width是多少，内容的width就是多大
IE盒模型
width是包含了padding、border的，只有margin独立
我们设定width是多少，内容的width = 我们设定的width - padding - border
用代码说话
//HTML CODE:
<div class="imgBox" id="contentBox">
<img src="/image/header.jpg" />
</div>
<div class="imgBox" id="borderBox">
<img src="/image/header.jpg" />
</div>
//CSS CODE：
.imgBox img{
width: 140px;
height: 140px;
padding: 20px;
border: 20px solid orange;
margin: 10px;
}
#contentBox img{
box-sizing: content-box;
-ms-box-sizing: content-box;
-webkit-box-sizing: content-box;
-o-box-sizing: content-box;
-moz-box-sizing: content-box
}
#borderBox img{
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
}关于栅格系统
1、会有自动的padding样式
2、其字体默认是14px
3、其box-sizing默认为border-box
HTML5中input新增的type属性值
拾色器：color
时间：date、datetime、datetime-local、month、week、time
范围：number、range、url
日常：tel、email
搜索：search
层级谁最高？
帧元素 > 表单元素 > 非表单元素
CSS sprites
①可以将零星图片都包含到一张大图中；
②利用css的”background-image”、”background-repeat”、”background-position”的组合进行背景定位；
③减少了 总的图片字节，很好地减少了网页的http请求，从而大大地提高页面的性能；
④整理起来更为方便，同一个按钮不同状态的图片也不惜要一个个切割出来并个别命名
a:link{..} a:visited{..} a:hover{..} a:active{…}
css的关于链接的固定顺序
var a=[5,3,2,1];a.splice(7,1,”hehehe”);a=?
a=[5,3,2,1,”hehehe”];//因为a[7]不存在，那它就不会删任何的，直接在最后插
var a =[ ];a[0]=1;a[1]=2;a[5]=4，那么a.length=?
6
IE6/7/8
①可以用createElement
②IE6/7不能通过setAttribute设置【元素的class属性】、也不能【为元素绑定事件】
（即element.setAttribute(“style”,”…”)、element.setAttribute(“class”,”…”)是无效的！）
元素的焦点
onblur：失去焦点
onFocus：获得焦点
哪个H5内建对象用于在画布上的绘制？
getContext
主流浏览器内核私有属性css前缀
-moz （mozilla内核，firefox）[Gecko]
-webkit （safari , chrome）[Webkit]
-o （opera）[Presto]
-ms（trident，ms是 mircosoft 缩写！）[Trident]
开箱即用的UI控件
YUI（Yahoo! User Interface）
ExtJS
位操作符
~ 按位非
& 按位与
| 按位或
^ 按位异或
<< 左移（1<<5 为 16）
>>> 无符号右移
>> 有符号右移
H5的本地存储
IndexedDB 和 Web Storage
IndexedDB：在本地存储大量结构化数据；
WebStorage：在本地存储数据（用字符串键值对的方式）
1、cookie
2、localStorage
3、sessionStorage
4、globalStorage
5、userData
display:inline
在IE6/7不怎么兼容
脱离文档流
position:absolution（绝对定位）
position:fixed（固定定位）
float:left
以上三者都是脱离文档流
position:relative（相对定位）就不会脱离！
ajax支持返回以下类型
xml、
json、
jsonp、
html、
text、
script
JS的内部对象
①History对象包含用户（在浏览器窗口中）访问过的URL；
②Location对象包含有关当前URL的信息；
③Window对象表示浏览器中打开的窗口；
④Navigator对象包含有关浏览器的信息
声明function的两种方法
//①函数声明：
function f1(){
...
}
//②函数表达式：
var foo = function bar(){
return 1;
}
typeof foo;//"function"
typeof foo();//"number"
typeof bar;//"undefined"
typeof bar();//"Error"转成Boolean类型和对象的区别
var x = new Boolean(false);
if(x){
alert("hi");//会弹出，因为x是个对象
}
var y = Boolean(0);
if(y){
alert('hello');//不会弹出，因为用全局方法Boolean将数字0转成Boolean
}js放在
1、【从上往下】如果js放在，那意味着要下载完里的js，会出现短暂的空白页，因为加载到 才开始显示页面；
2、【预先加载】说到预先加载，那就是dom还没有出来，不能对dom进行任何操作
除了window.onload
或者 (document).ready(function()…或者 ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) … 或 者 (function( ){…})
JavaScript Node
process.stdin.resume();
process.stdin.setEncoding('ascii');
var input = "";
var input_array = "";
var count;
var result = [];
var arr_y = [];
var arr_x = [];
process.stdin.on('data', function (data) {
input += data;
});
process.stdin.on('end', function () {
//console.log遇到\n会自动截断，后面内容不管了
input_array = input.split("\r\n");
var len = input_array.length;
// input_array[i].trim().split(' ');
for(var i=0; iif(i == 0){
count = input_array[i];
} else {
arr_x = arr_x.concat(input_array[i].split(' '));
}
}
console.log(calculate(arr_x));
process.exit(0);
});
function calculate(arr_x){
arr_y = arr_x.splice(count,count);
arr_x = arr_x.slice(0,count);
for(var i=0; iparseInt(arr_x[i]) + parseInt(arr_y[i]) - 2;
}
return Math.min.apply(this,result);
// return result;
}
// process.on('SIGINT', function () {
// input_array = input.split("\n");
// var len = input_array.length;
// var result = [];
// for(var i=0; i
// var temp = input_array[i].trim().split(' ');
// for(var j=0; j
// if(temp[j]!=='' && result.indexOf(temp[j]) == -1){
// result.push(temp[j]);
// }
// }
// }
// console.log(input);
// process.exit(0);
// });
JavaScript V8
var count ;
var arr_x = [];
var arr_y = [];
var arr_z = [];
var result = [];
var input_array = [];
var line;
while(line=readline()){
input_array.push(line.split("\n").toString());
//arr_x = arr_x.concat(input_array.split(" "));
}
print(cut(input_array));
function cut(input_array){
count = parseInt(input_array.splice(0,1));
arr_x = input_array.splice(0,1);
arr_x = arr_x[0].split(" ");
arr_y = input_array[0].toString().split(" ");
for(var i=0; iparseInt(arr_x[i]) + parseInt(arr_y[i]) - 2;
}
return Math.min.apply(this,result);
} HTML5新增的表单元素
· datalist 规定输入域的选项列表
· keygen 提供一种验证用户的可靠的方法
· output 用于不同类型的输出
元素分类
1、块级元素block（自动换行，可设置宽高）：