:81/dir/index.html不同源 不同的端口(81)

  不同源 不同的主机(news)

  跨域的几种解决方案1）、document.domain方法

  我们来看一个具体场景：有一个页面，它里面有一个iframe，这个iframe的源是，很显然它们是不同源的，所以我们无法在父页面中操控子页面的内容。

  解决方案如下：

  <pre class="code-snippet__a href='https://www.veimoz.com/1729' title='on2.js主要功能是做什么的？' target='_blank'js/a" data-lang="xml"><p style="margin-left: 16px;margin-right: 16px;">``document.domain = 'example.com';
</pre></p>
  <pre><pre class="code-snippet__js" data-lang="xml"><p style="margin-left: 16px;margin-right: 16px;">``document.domain = 'example.com';``var iframe = document.getElementById('iframe').contentWindow.document;`` ``//后面就可以操作iframe里的内容了...
</pre></p>
  所以我们只要将两个页面的document.domain设置成一致就可以了，要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域。

  但是，这种方法只能解决主域相同的跨域问题。

  2）、window.name方法

  window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

  我们来看一个具体场景，在一个页面example.com/a.html中，我们想获取data.com/data.html中的数据，以下是解决方案：

  <pre class="code-snippet__js" data-lang="xml"><p style="margin-left: 16px;margin-right: 16px;">``window.name = 'data'; //这是就是我们需要通信的数据
</pre></p>
  <pre><pre class="code-snippet__js" data-lang="xml"><p style="margin-left: 16px;margin-right: 16px;"> function getData () {`` var iframe = document.getElementById('iframe');`` iframe.src = 'example.com/b.html'; // 这里让iframe与父页面同源`` `` iframe.onload = function () {`` var data = iframe.contentWindow.name; //在这里我们得到了跨域页面中传来的数据`` };`` }``
</pre></p>
  3）、JSONP方法

  JONSP(JSON with Padding)是JSON的一种使用模式。基本原理如下：

  <pre class="code-snippet__js" data-lang="xml"><p style="margin-left: 16px;margin-right: 16px;">` function dealData (data) {`` console.log(data);`` } `
</pre></p>
  <pre><pre class="code-snippet__js" data-lang="xml"><p style="margin-left: 16px;margin-right: 16px;">``
</pre></p>
  这时候在a.html中我们得到了一条js的执行语句dealData('data')，从而达到了跨域的目的。

  所以JSONP的原理其实就是利用引入script不限制源的特点，把处理函数名作为参数传入，然后返回执行语句，仔细阅读以上代码就可以明白里面的意思了。

  如果在jQuery中用JSONP的话就更加简单了：

  <pre class="code-snippet__js" data-lang="xml"><p style="margin-left: 16px;margin-right: 16px;">$.getJSON(''http://example.com/data.php?callback=?', function (data) {`` console.log(data);``});
</pre></p>
  注意jQuery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用JSONP的回调函数。

  25、页面编码和被请求的资源编码如果不一致如何处理？

  若请求的资源编码，如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为 charset="utf-8"或"gbk"。

  比如： 中嵌入了一个

  a.html 的编码是gbk或gb2312的。而引入的js编码为utf-8的 ，那就需要在引入的时候

  26、模块化开发怎么做？

  模块化开发指的是在解决某一个复杂问题或者一系列问题时，依照一种分类的思维把问题进行系统性的分解。模块化是一种将复杂系统分解为代码结构更合理，可维护性更高的可管理的模块方式。对于软件行业：系统被分解为一组高内聚，低耦合的模块。

  （1）定义封装的模块

  （2）定义新模块对其他模块的依赖

  （3）可对其他模块的引入支持。在JavaScript中出现了一些非传统模块开发方式的规范。CommonJS的模块规范，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。AMD是异步模块定义，所有的模块将被异步加载js清除浏览器缓存，模块加载不影响后边语句运行。

  27、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

  AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

  区别：

  1) 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。

  2) CMD 推崇依赖就近，AMD 推崇依赖前置。

  3) AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。

  <pre class="code-snippet__js" data-lang="javascript">// CMD`define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething()})// AMD 默认推荐define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething(); // 此处略去 100 行 b.doSomething();})`</pre>

  28、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）

  核心是js的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存。

  29、 call和apply

  call（）方法和apply（）方法的作用相同，动态改变某个类的某个方法的运行环境。他们的区别在于接收参数的方式不同。在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组。

  30、documen.write和 innerHTML的区别

  document.write()只能重绘整个页面

  <pre class="code-snippet__js" data-lang="javascript">setTimeout(function(){` document.write('<p>5 secs later
');`}, 5000);</pre></p>
  或

  <pre class="code-snippet__js" data-lang="javascript">window.onload = function() { document.write("HI");</pre>

  innerHTML可以重绘页面的一部分

  31、回流与重绘

  当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘

  32、DOM操作

  （1）创建新节点

  createDocumentFragment() //创建一个DOM片段

  createElement() //创建一个具体的元素

  createTextNode() //创建一个文本节点

  （2）添加、移除、替换、插入

  appendChild()

  removeChild()

  replaceChild()

  insertBefore() //在已有的子节点前插入一个新的子节点

  （3）查找

  getElementsByTagName() //通过标签名称

  getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

  getElementById() //通过元素Id，唯一性

  33、数组对象有哪些原生方法，列举一下

  pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight

  forEach、map、filter、every、some

  34、那些操作会造成内存泄漏

  全局变量、闭包、DOM清空或删除时js清除浏览器缓存，事件未清除、子元素存在引用

  35、什么是Cookie 隔离？（或者：请求资源的时候不要带cookie怎么做）

  通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开。

  因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入server，也减少了server对cookie的处理分析环节，提高了server的http请求的解析速度。

  36、响应事件

  onclick鼠标点击某个对象；onfocus获取焦点；onblur失去焦点；onmousedown鼠标被按下

  37、flash和js通过什么类如何交互?

  Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

  38、 Flash与Ajax各自的优缺点？

  Flash：适合处理多媒体、矢量图形、访问机器。但对css、处理文本不足，不容易被搜索。

  Ajax：对css、文本支持很好，但对多媒体、矢量图形、访问机器不足。

  39、 有效的javascript变量定义规则

  第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；其他字符可以是字母、下划线、美元符号或数字。

  40、XML与JSON的区别？

  1) 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。

  2) 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

  3) 数据描述方面。JSON对数据的描述性比XML较差。

  4) 传输速度方面。JSON的速度要远远快于XML。

  41、HTML与XML的区别？

  （1）XML用来传输和存储数据，HTML用来显示数据；

  （2）XML使用的标签不用预先定义

  （3）XML标签必须成对出现

  （4）XML对大小写敏感

  （5）XML中空格不会被删减

  （6）XML中所有特殊符号必须用编码表示

  （7）XML中的图片必须有文字说明

  42、渐进增强与优雅降级

  渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。

  优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

  43、Web Worker和Web Socket？

  web socket：在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议（ws://、wss://），同源策略对web socket不适用。

  web worker：运行在后台的JavaScript，不影响页面的性能。

  创建worker：var worker = new Worker(url);

  向worker发送数据：worker.postMessage(data);

  接收worker返回的数据：worker.onmessage

  终止一个worker的执行：worker.terminate();

  44、JS垃圾回收机制？

  1) 标记清除：

  这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。

  这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。定期的，垃圾回收器将从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象。从根开始，垃圾回收器将找到所有可以获得的对象和所有不能获得的对象。

  2) 引用计数：

  这是最简单的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。

  该算法有个限制：无法处理循环引用。两个对象被创建，并互相引用，形成了一个循环。它们被调用之后不会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收。

  45、web应用从服务器主动推送data到客户端的方式？

  JavaScript数据推送：commet（基于http长连接的服务器推送技术）。

  基于web socket的推送：SSE（server-send Event）

  46、如何删除一个cookie？

  1） 将cookie的失效时间设置为过去的时间（expires）

  <pre class="code-snippet__js" data-lang="makefile">document.cookie = ‘user=’+ encodeURIComponent(‘name’) + ';`expires=’+ new Date(0);`</pre>

  2） 将系统时间设置为当前时间往前一点时间

  <pre class="code-snippet__js" data-lang="javascript">var data = new Date();`date.setDate(date.getDate()-1);`</pre>

  47、attribute与property的区别？

  attribute是dom元素在文档中作为html标签拥有的属性

  property是dom元素在js中作为对象拥有的属性。

  所以，对于html的标准属性来说，attribute和property是同步的，是会自动更新的。但对于自定义属性，他们不同步。

  48、 Ajax请求的页面历史记录状态问题？

  （1）通过location.hash记录状态，让浏览器记录Ajax请求时页面状态的变化。

  （2）通过HTML5的history.pushstate，来实现浏览器地址栏的无刷新改变。

  本文完