9月18号
javascript中实现跨域的方式总结
✔jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>
document.domain；这种方式用在主域名相同子域名不同的跨域访问中（通过iframe设置document.domain可以实现跨域）
window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源
✔ CORS；CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败
Web Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
✔ 接口代理，使用 nginx 或其他接口代理工具。将请求转发到指定接口。
NOSCRIPT标签是做什么用的？
✔NOSCRIPT标签用来定义在脚本未被执行时的替代内容。也可以用在检测浏览器是否支持脚本，若不支持脚本则可以显示NOSCRIPT标签里的innerText。这个元素可以包含能够出现在文档中任何html元素，script元素除外。包含在noscript元素的内容只有在下列情况下才会显示出来JQuery 获取元素的高度和宽度
width() 和 height() 方法 （不包括内边距、边框或外边距）亲自试一试
innerWidth() 和 innerHeight() 方法（包括内边距）亲自试一试
outerWidth() 和 outerHeight() 方法（包括内边距、边框和外边距）亲自试一试
alert((window).height());//浏览器当前窗口可视区域高度alert((window).height()); //浏览器当前窗口可视区域高度 alert((window).height());//浏览器当前窗口可视区域高度alert((document).height()); //浏览器当前窗口文档的高度
alert((document.body).height());//浏览器当前窗口文档body的高度alert((document.body).height());//浏览器当前窗口文档body的高度 alert((document.body).height());//浏览器当前窗口文档body的高度alert((document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert((window).width());//浏览器当前窗口可视区域宽度alert((window).width()); //浏览器当前窗口可视区域宽度 alert((window).width());//浏览器当前窗口可视区域宽度alert((document).width());//浏览器当前窗口文档对象宽度
alert((document.body).width());//浏览器当前窗口文档body的高度alert((document.body).width());//浏览器当前窗口文档body的高度 alert((document.body).width());//浏览器当前窗口文档body的高度alert((document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
JavaScript 的全局函数及属性
js的全局属性 Infinity、NAN、undefined js的全局函数 decodeURI() 解码某个编码的 URIdecodeURIcomponent() 解码一个编码的 URI 组件encodeURI() 把字符串编码为 URIencodeURIcomponent() 把字符串编码为 URI 组件escape() 对字符串进行编码unescape() 对由 escape() 编码的字符串进行解码eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行isFinite()isNAN()Number()parseFloat()parseInt()String()typeof
亲自试一试
this对象
在事件中，this指向触发这个事件的对象， 特殊的是，IE中的attachEvent中的this总是指向全局对象Window
函数调用时，指向window
以方法调用时，指向调用该方法的对象
使用new创建一个对象时，指向该对象
call，apply ，bind 可以改变 this指向
9月19号
input属于窗体元素，层级显示比flash、其它元素都高。
请判断这句话的正确与否。F
在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；
所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
有窗口元素包括：select元素，object元素，以及frames元素等等。无窗口元素：大部分html元素都是无窗口元素。
重绘（repaint）与重排（reflow）
重排一定重绘，重绘不一定重排
重排
页面渲染初始化时；（这个无法避免）添加或删除可见的DOM 元素元素尺寸改变时、位置改变时、内容改变时；
重绘
改变 visibility、outline、背景色等属性
重排优化
将多次改变样式属性的操作合并成一次操作，减少DOM访问。如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment元素的应用）将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。
补充：
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
9月20号
1、关于Javascript中数字的部分知识总结：
1.Javascript中，由于其变量内容不同，变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存，存储基本数据类型(数值、布尔值、null和未定义)的值，引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。
JS中的数字是不分类型的，也就是没有byte/int/float/double等的差异。JavaScript内部，所有数字都是以64位浮点数形式储存（8Byte），即使整数也是如此。
2、以下哪个语句打印出来的结果时false？
alert(3==true) // false 3 == 1
alert(2=="2") 2 == 2
alert(null == undefined)
alert(isNaN("true"))
== js会优先选择将字符串转成数字==
isNaN() 函数用于检查其参数是否是非数字值。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
3、判断对象myObj是否存在的写法
！obj
！window.obj
typeof myObj == “undefined”（判断对象是否有定义，已定义未赋值，返回true）
myObj == undefined（已定义未赋值。返回true）
myObj === undefined （已定义未赋值，返回true）
!this.hasOwnProperty(‘myObj’))（判断是否为顶层对象的一个属性）
myobj == null（注意null与undefined的区别，null指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined指的是不存在或没有赋值的对象。） 故这种方法无法判断该对象是否存在
4、什么是 XML
XML 指可扩展标记语言（EXtensible Markup Language）XML 是一种标记语言，很类似 HTMLXML 的设计宗旨是传输数据，而非显示数据XML 标签没有被预定义。您需要自行定义标签XML 被设计为具有自我描述性XML 是 W3C 的推荐标准
5、XML 与 HTML 的主要差异
XML 不是 HTML 的替代。XML 和 HTML 为不同的目的而设计：XML 被设计为传输和存储数据，其焦点是数据的内容。HTML 被设计用来显示数据，其焦点是数据的外观。HTML 旨在显示信息，而 XML 旨在传输信息。
6、哪些方法可以用作javascript异步模式的编程
回调函数
这是异步编程最基本的方法，优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱，而且每个任务只能指定一个回调函数。
例：假定有两个函数f1和f2，后者等待前者的执行结果，如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数
f1();f2();function f1(callback){setTimeout(function () {// f1的任务代码callback();}, 1000);}f1(f2);
事件监听
任务的执行不取决于代码的顺序，而取决于某个事件是否发生。有利于实现模块化。
例：为f1绑定一个事件，当f1发生done事件，就执行f2。
f1.on('done', f2);function f1(){setTimeout(function () {// f1的任务代码f1.trigger('done');}, 1000);}
发布/订阅
我们假定，存在一个”信号中心”，某个任务执行完成，就向信号中心”发布”（publish）一个信号，其他任务可以向信号中心”订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”（publish-subscribe pattern）， 又称”观察者模式”（observer pattern）。这种方法的性质与”事件监听”类似，但是明显优于后者。因为我们可以通过查看”消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。
jQuery.subscribe("done", f2);function f1(){setTimeout(function () {// f1的任务代码jQuery.publish("done");}, 1000);}jQuery.unsubscribe("done", f2);
Promises对象
是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。
例：f1的回调函数f2，f1().then(f2);
f1().then(f2);function f1(){var dfd = $.Deferred();setTimeout(function () {// f1的任务代码dfd.resolve();}, 500);return dfd.promise;}指定多个回调函数：f1().then(f2).then(f3);指定发生错误时的回调函数：f1().then(f2).fail(f3);
7、哪些对象是 JavaScript 内置的可迭代对象
ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。
原生具备 Iterator 接口的数据结构如下。
ArrayMapSetStringTypedArray函数的 arguments 对象NodeList 对象
对象并不是 JavaScript 的内置可迭代对象
8、以下哪些代码执行后i的值为10：
let i =1 + {valueOf() {return 9; }};// 10
let i = 0;new Array(10).forEach(() => {i++;});// 0
let i = parseInt('0xA'); // 10
let i = 5;function a(i) {i *= 2;}a(i); // 5
B选项：输出值为0是因为forEach方法在数组元素为空时会跳过执行回调函数，相当于此选项回调函数并未执行，所以还是输出0。
ES5:
forEach()，filter()，reduce()，every()，some() 都会跳过空位
.map() 会跳过空位，但会保留这个值
.join()，toString() 会将空位视为 undefined，而 undefeind 和null 会被处理为空字符串
ES6中都会将空位当作undefined
D 选项：i是形参，，属于局部变量，不影响全局变量i的值
A 选项： 如果在需要使用原始值的上下文中使用了对象，就会自动调用valueOf方法.这里重写了默认的valueOf 方法。
所以相当于 let i = 1+9
8、isNaN() 和 parseInt()
isNaN() isNaN()函数用来判断一个数是否是NaN（只有一个值是NaN或者能被转换为NaN的时候才返回true）
console.log(isNaN('e'));//true,因为e可以被转换为NaN console.log(isNaN('11'));//false,因为字符串可以被转换为数字,不能被转为NaN console.log(isNaN(null));//false,因为null可以被转换为0,不能被转为NaN console.log(isNaN(NaN));// true,NaN返回true
parseInt()
string字符串只会被解析从第一个字符开始直到不是数字的字符部分
console.log(parseInt('223'));//223console.log(parseInt('22e3'));//22
如果字符串中第一个字符就不是数字,那么返回NaN
console.log(parseInt('e21'));//NaN
parseInt() 的第二个参数 进制（默认为10进制）这个参数小于2或者大于36的时候,都会返回NaN
console.log(parseInt(1,1));//NaN ,因为第二个参数是1表示1进制<2,所以错误console.log(parseInt(1,2));//如果第一个参数前缀使用0x/0X则表示使用16进制console.log(parseInt(0x99));//153=16*9+9console.log(parseInt(0x99,10));//如果第一个参数使用了0x表示十六进制,那么第二个参数设置了值也无效
看下面的一个小案例
var arr=[1,2,3,2,5];console.log(arr.map(parseInt));//[1, NaN, NaN, 2, NaN]// arr.map方法就是对于数组arr里面的每一项都去使用方法里面的函数,最后返回新数组// 因为map方***有索引,所以实际上就是 parseInt(1,0);//1,因为0表示十进制parseInt(2,1);//1进制<2，所以错啦!parseInt(3,2);// 2进制,但是3不在0——2范围内(3应该改为11),所以不符合2进制要求parseInt(2,3);//符合,因为三进制是0-3,而2在范围内parseInt(5,4);//4进制不包括5,所以NaN
9月21号
1、JavaScript 对象分为三类： 内置对象 宿主对象 自定义对象
（1）内置对象： Arguments Array Boolean Date Error Function Number String Regexp Math Object
（2）宿主对象：运行环境提供的对象。如Window和Documen，Element，form，image。
（3）自定义对象：开发人员定义的对象。
2、判断输出的结果
console.log(([]) ? true: false); console.log(([] == false? true : false)); console.log(({} == false)? true : false);
布尔类型里只有这几参数个返回false，其它都为 true
Boolean(undefined) // falseBoolean(null) // false Boolean(0) // false Boolean(NaN) // false Boolean('') // false
布尔类型与其它任何类型进行比较，布尔类型将会转换为number类型
[] == false? true : false// 等价于Number([]) == 0 ? true : false;// 等价于0 == 0 ? true : false; // true;
({} == false)? true : false// 等价于(Number({})) == 0 ? true : false;// 等价于NaN == 0 ? true : false; // false
补充 Number 的转换
// 数组Number([]); // 0Number([123]); // 123Number([123, 123]); // NaN// 字符串Number("123"); // 123Number("A"); // NaNNumber("123a"); // NaNNumber("a123"); // NaNNumber("true"); // NaNNumber("false"); // NaN// 布尔值Number(true); // 1Number(false); // 0// 对象Number({}); // NaNNumber({a:1}); // NaN// 其他Number(undefined); // NaNNumber(null); // 0Number(Infinity); // InfinityNumber(-Infinity); // -InfinityNumber(1/0); // InfinityNumber(0/1); // 0
3、instanceof
5、WEB页面的生命周期
9月22号
1、表单
如何获取下面表单 select域的选择部分的文本？
<form name="a"><select name="a" size="1" id=”obj”><option value="a">1</option><option value="b">2</option><option value="c">3</option></select></form>
window.onload = function(){//首先获得下拉框的节点对象；var obj = document.getElementById("obj");//1.如何获得当前选中的值？：var value = obj.value;//2.如何获得该下拉框所有的option的节点对象var options = obj.options;//注意：得到的options是一个对象数组//3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样：var value1 =options[0].value;//4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：var text1 = options[0].text;//5.如何获得当前选中的option的索引？var index = obj.selectedIndex;//6.如何获得当前选中的option的文本内容？//从第2个问题，我们已经获得所有的option的对象数组options了//又从第5个问题，我们获取到了当前选中的option的索引值//所以我们只要同options[index]下标的方法得到当前选中的option了var selectedText =options[index].text;}
obj.options[obj.selectedIndex].text
下拉菜单中，用户更改表单元素Select中的值时，就会调用（ ）事件处理程序
onMouseOver
onFocus
onChange
onClick
2、以下哪一条Javascript语句会产生运行错误？
var obj=( ); 语法错误
var obj=[ ];
var obj={ };
var obj=/ /; 创建正则对象
3、常见的请求头和相应头都有什么
请求（request）
GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)Accept:/(客户端能接收的资源类型)Accept-Language: en-us(客户端接收的语言类型)Connection: Keep-Alive(维护客户端和服务端的连接关系)Host: localhost:8080(连接的目标主机和端口号)Referer: http://localhost/links.asp(告诉服务器我来自于哪里)User-Agent: Mozilla/4.0(客户端版本号的名字)Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)Cookie(客户端暂存服务端的信息)Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)
响应（response）
HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)Location: (服务端需要客户端访问的页面路径)Server:apache tomcat(服务端的Web服务端名)Content-Encoding: gzip(服务端能够发送压缩编码类型)Content-Length: 80(服务端发送的压缩数据的长度)Content-Language: zh-cn(服务端发送的语言类型)Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)Refresh: 1;url=(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)Transfer-Encoding: chunked(分块传递数据到客户端）Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)Expires: -1//3种(服务端禁止客户端缓存页面数据)Cache-Control: no-***(服务端禁止客户端缓存页面数据) ****** Pragma: no-***(服务端禁止客户端缓存页面数据)Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)
在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法
4、Angular 的知识，没有$send.
$emit只能向parent controller传递event与data$broadcast只能向child controller传递event与data$on用于接收event与data
5、 触摸事件有哪些
touchstart: 手指放到屏幕上时触发touchmove: 手指在屏幕上滑动式触发touchend: 手指离开屏幕时触发touchcancel: 系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: 当前屏幕上所有手指的列表
targetTouches: 当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: 涉及当前事件的手指的列表，尽量使用这个代替touches
6、按照CommonJS规范，在任何模块代码的作用域下内置了以下哪些变量？
module exports require global
浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量。 module exports require global
7、history 对象
8、下列不属于document对象方法的是？
onload ✔
querySelectorAll
children
ajax
onload 为 document 对象的属性，而不是方法
document上有onload事件，window上也有onload事件，如果给document.onload上加事件处理函数不会执行，但在window.onload上加事件处理函数会执行
children是一个只读属性，返回一个节点的子元素，是一个动态更新的 HTMLCollection 类型。不是 document 对象的方法
ajax 不是 JavaScript 的规范，它只是一个缩写：Asynchronous JavaScript and XML，意思就是用 JavaScript 执行异步网络请求。在现代浏览器中主要依靠 XmlHttpRequest 对象
9、浏览器版本兼容问题
Firefox 不支持 DOM 对象的 outerHTML innerText outerText 属性在 IE6 IE7 IE8 中，createElement 方法不仅可以通过合法的标签名创建节点对象，还可以通过传入一段合法的 HTML 代码字符串作为参数创建节点对象IE6 IE7 IE8(Q) 中无法通过 “Element.setAttribute(“class”, “AttributeValue”)” 设置元素的 class 属性，而需要使用 “Element.setAttribute(“className”, “AttributeValue”)”IE6 IE7 IE8(Q) 中无法通过诸如 “Element.setAttribute(“onclick”, “alert(‘ok’)”)” 为元素绑定事件
9月23号
1、正则表达式
？出现0次或1次. [0,1]
* 出现0次或多次. [0,+∞]
+ 出现1次或多次 [1,+∞]
2、以下代码执行后，a.x 和 b.x 的结果分别是？
function A(x){this.x = x;}A.prototype.x = 1;function B(x){this.x = x;}B.prototype = new A();var a = new A(2), b = new B(3);delete b.x;
a.x // 2
b.x // undefined
delete b.x 删除了 b 中的 x 值，并没有删除掉键 x 故访问时值为 undefined 并不会往原型链找
3、下面哪种方式不能改变作用域链？
withwhiletry catcheval
while的话只是在函数局部环境或者全局环境运行，并不会改变作用域链。
while、if等分支结构语句不改变作用域，创建对象、新建函数肯定改变作用域
4、如何阻止IE和各大浏览器默认行为
e.preventDefault()
e.returnValue = false (IE)
补充：阻止冒泡：
e.stopPropagation()
e.cancelBubble = true (IE)
5、事件冒泡
不能冒泡
可以冒泡
9月24号
以下代码的输出结果是
var f = function g() {return 23;};typeof g();
首先在 javaScript 中 function 有两种类型
函数声明
function g() {return 23;}
函数表达式
var f = function g() {return 23;}
这时 g 只是当前函数 f 的 name 属性
回到该题目中
typeof g() 此时会报错。因为：当前的函数 g 是没有被保存下来，只是赋值给 f 。直接调用 g() 会报 g is defined
var f = function g() {return 23;};g(); // g is definedtypeof g(); // g is definedtypeof f(); // number
但如果改成
function g() {return 23;};var f = g;typeof g(); // numbertypeof f(); // number
以下哪些操作会触发Reflow
alert(obj.className)alert(obj.offsetHeight)obj.style.height = "100px”obj.style.color = "red"
这里只要注意的点是： 访问了 scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值
防止用户访问该值后，修改了值
9月25号
1、哪个CSS属性是继承属性
只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。所有元素可继承 visibility、cursor 内联元素可继承 letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction 终端块状元素可继承 text-indent、text-align 列表元素可继承 list-style、list-style-type、list-style-position、list-style-image
2、哪个 HTML5 元素用于显示已知范围内的标量测量？
<meter>标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等
<meter>标签不应用于指示进度（在进度条中）。如果标记进度条，请使用<progress>标签
3、什么是SVG?
SVG 指可伸缩矢量图形(Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用XML格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体SVG是HTML下的一个分支
4、input 中 type 的属性值
4、哪些是预编译 css 工具
lesssassstylus
