前端面试题-JS（二）

16 说说你对AMD和Commonjs的理解

• CommonJS 是服务器端模块的规范， Node.js 采⽤了这个规范。 CommonJS 规范加载模块是同步的，也就是说，只有加载完成，才能执⾏后⾯的操作。 AMD 规范则是⾮同步加载模块，允许指定回调函数
• AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对module.exports 或 exports 的属性赋值来达到暴露模块对象的⽬的

17 常⻅web安全及防护原理

• sql 注⼊原理
  • 就是通过把 SQL 命令插⼊到 Web 表单递交或输⼊域名或⻚⾯请求的查询字符串，最终达到欺骗服务器执⾏恶意的SQL命令
• 总的来说有以下⼏点
  • 永远不要信任⽤户的输⼊，要对⽤户的输⼊进⾏校验，可以通过正则表达式，或限制⻓度，对单引号和双 “-” 进⾏转换等
  • 永远不要使⽤动态拼装SQL，可以使⽤参数化的 SQL 或者直接使⽤存储过程进⾏数据查询存取
  • 永远不要使⽤管理员权限的数据库连接，为每个应⽤使⽤单独的权限有限的数据库连接
  • 不要把机密信息明⽂存放，请加密或者 hash 掉密码和敏感的信息

XSS原理及防范

• Xss(cross-site scripting) 攻击指的是攻击者往 Web ⻚⾯⾥插⼊恶意 html 标签或者 javascript 代码。⽐如：攻击者在论坛中放⼀个看似安全的链接，骗取⽤户点击后，窃取 cookie 中的⽤户私密信息；或者攻击者在论坛中加⼀个恶意表单，当⽤户提交表单的时候，却把信息传送到攻击者的服务器中，⽽不是⽤户原本以为的信任站点

XSS防范⽅法

• ⾸先代码⾥对⽤户输⼊的地⽅和变量都需要仔细检查⻓度和对 ”<”,”>”,”;”,”’” 等字符做过滤；其次任何内容写到⻚⾯之前都必须加以encode，避免不⼩⼼把 html tag 弄出来。这⼀个层⾯做好，⾄少可以堵住超过⼀半的XSS 攻击

XSS与CSRF有什么区别吗？

• XSS 是获取信息，不需要提前知道其他⽤户⻚⾯的代码和数据包。 CSRF 是代替⽤户完成指定的动作，需要知道其他⽤户⻚⾯的代码和数据包。要完成⼀次 CSRF 攻击，受害者必须依次完成两个步骤
• 登录受信任⽹站 A ，并在本地⽣成 Cookie
• 在不登出 A 的情况下，访问危险⽹站 B

CSRF的防御

• 服务端的 CSRF ⽅式⽅法很多样，但总的思想都是⼀致的，就是在客户端⻚⾯增加伪随机数
• 通过验证码的⽅法

18 ⽤过哪些设计模式？

• ⼯⼚模式：
  • ⼯⼚模式解决了重复实例化的问题，但还有⼀个问题,那就是识别问题，因为根本⽆法
  • 主要好处就是可以消除对象间的耦合，通过使⽤⼯程⽅法⽽不是 new 关键字
• 构造函数模式
  • 使⽤构造函数的⽅法，即解决了重复实例化的问题，⼜解决了对象识别的问题，该模式与⼯⼚模式的不同之处在于
  • 直接将属性和⽅法赋值给 this 对象;

19 为什么要有同源限制？

• 同源策略指的是：协议，域名，端⼝相同，同源策略是⼀种安全协议
• 举例说明：⽐如⼀个⿊客程序，他利⽤ Iframe 把真正的银⾏登录⻚⾯嵌到他的⻚⾯上，当你使⽤真实的⽤户名，密码登录时，他的⻚⾯就可以通过 Javascript 读取到你的表单中 input 中的内容，这样⽤户名，密码就轻松到⼿了。

20 offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

• offsetWidth/offsetHeight 返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
• clientWidth/clientHeight 返回值只包含content + padding，如果有滚动条，也不包含滚动条
• scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺⼨

21 javascript有哪些⽅法定义对象

• 对象字⾯量： var obj = {};
• 构造函数： var obj = new Object();
• Object.create(): var obj = Object.create(Object.prototype);

22 常⻅兼容性问题？

• png24 位的图⽚在iE6浏览器上出现背景，解决⽅案是做成 PNG8
• 浏览器默认的 margin 和 padding 不同。解决⽅案是加⼀个全局的 *
  {margin:0;padding:0;} 来统⼀,，但是全局效率很低，⼀般是如下这样解决：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

• IE 下, event 对象有 x , y 属性,但是没有 pageX , pageY 属性
• Firefox 下, event 对象有 pageX , pageY 属性,但是没有 x,y 属性.

23 说说你对promise的了解

• 依照 Promise/A+ 的定义， Promise 有四种状态：
  • pending: 初始状态, ⾮ fulfilled 或 rejected.
  • fulfilled: 成功的操作.
  • rejected: 失败的操作.
  • settled: Promise 已被 fulfilled 或 rejected ，且不是 pending
• 另外， fulfilled 与 rejected ⼀起合称 settled
• Promise 对象⽤来进⾏延迟( deferred ) 和异步( asynchronous ) 计算
• Promise 的构造函数
• 构造⼀个 Promise ，最基本的⽤法如下：

var promise = new Promise(function(resolve, reject) {
if (...) { // succeed
resolve(result);
} else { // fails
reject(Error(errMessage));
}
});

• Promise 实例拥有 then ⽅法（具有 then ⽅法的对象，通常被称为 thenable ）。
  它的使⽤⽅法如下：

promise.then(onFulfilled, onRejected)

• 接收两个函数作为参数，⼀个在 fulfilled 的时候被调⽤，⼀个在 rejected 的时候被调⽤，接收参数就是 future ， onFulfilled 对应 resolve , onRejected 对应reject

24 你觉得jQuery源码有哪些写的好的地⽅

• jquery 源码封装在⼀个匿名函数的⾃执⾏环境中，有助于防⽌变量的全局污染，然后通过传⼊ window 对象参数，可以使 window 对象作为局部变量使⽤，好处是当 jquery 中访问 window 对象的时候，就不⽤将作⽤域链退回到顶层作⽤域了，从⽽可以更快的访问window对象。同样，传⼊ undefined 参数，可以缩短查找 undefined 时的作⽤域链
• jquery 将⼀些原型属性和⽅法封装在了 jquery.prototype 中，为了缩短名称，⼜赋值给了 jquery.fn ，这是很形象的写法
• 有⼀些数组或对象的⽅法经常能使⽤到， jQuery 将其保存为局部变量以提⾼访问速度jquery 实现的链式调⽤可以节约代码，所返回的都是同⼀个对象，可以提⾼代码效率

25 vue、react、angular

• Vue.js ⼀个⽤于创建 web 交互界⾯的库，是⼀个精简的 MVVM 。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters
• AngularJS 是⼀个⽐较完善的前端 MVVM 框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注⼊等所有功能，模板功能强⼤丰富，⾃带了丰富的 Angular 指令
• react React 仅仅是 VIEW 层是 facebook 公司。推出的⼀个⽤于构建 UI 的⼀个库，能够实现服务器端的渲染。⽤了 virtual dom ，所以性能很好。

26 Node的应⽤场景

• 特点：
  1、它是⼀个 Javascript 运⾏环境
  2、依赖于 Chrome V8 引擎进⾏代码解释
  3、事件驱动
  4、⾮阻塞 I/O
  5、单进程，单线程
• 优点：
  • ⾼并发（最重要的优点）
• 缺点：
  1、只⽀持单核 CPU ，不能充分利⽤ CPU
  2、可靠性低，⼀旦代码某个环节崩溃，整个系统都崩溃

27 谈谈你对AMD、CMD的理解

• CommonJS 是服务器端模块的规范， Node.js 采⽤了这个规范。 CommonJS 规范加载模块是同步的，也就是说，只有加载完成，才能执⾏后⾯的操作。 AMD 规范则是⾮同步加载
  模块，允许指定回调函数
• AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对module.exports 或 exports 的属性赋值来达到暴露模块对象的⽬的

es6模块 CommonJS、AMD、CMD

• CommonJS 的规范中，每个 JavaScript ⽂件就是⼀个独⽴的模块上下⽂（ modulecontext ），在这个上下⽂中默认创建的属性都是私有的。也就是说，在⼀个⽂件定义的变量（还包括函数和类），都是私有的，对其他⽂件是不可⻅的。
• CommonJS 是同步加载模块,在浏览器中会出现堵塞情况，所以不适⽤
• AMD 异步，需要定义回调 define ⽅式
• es6 ⼀个模块就是⼀个独⽴的⽂件，该⽂件内部的所有变量，外部⽆法获取。如果你希望外部能够读取模块内部的某个变量，就必须使⽤ export 关键字输出该变量 es6 还可以导出类、⽅法，⾃动适⽤严格模式

28 那些操作会造成内存泄漏

• 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
• setTimeout 的第⼀个参数使⽤字符串⽽⾮函数的话，会引发内存泄漏
• 闭包、控制台⽇志、循环（在两个对象彼此引⽤且彼此保留时，就会产⽣⼀个循环）

29 web开发中会话跟踪的⽅法有哪些

• cookie
• session
• url 重写
• 隐藏 input
• ip 地址

30 介绍js的基本数据类型

Undefined 、 Null 、 Boolean 、 Number 、 String