文章阅读(二)

js闭包其实不难，你须要的只是了解什么时候使用它

究竟什么是闭包？闭包在什么场景下使用？写前端程序须要用到闭包吗？我用jQuery也能写的好好滴呀？闭包能够解决哪些问题？使用闭包会带来哪些好处？

闭包是指能够包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。

包含两方面：要执行的代码块（因为自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（做用域）

既然全部函数都是闭包，还有必要专门提这个概念吗？大多数函数被调用时(invoked)，使用的做用域和他们被定义时(defined)使用的做用域是同一个做用域，这种状况下，闭包神马的，可有可无。可是，当他们被invoked的时候，使用的做用域不一样于他们定义时使用的做用域的时候，闭包就会变的很是有趣，而且开始有了不少的使用场景，这就是你之因此要掌握闭包的缘由。

理解“闭包”：

• step1：掌握嵌套函数的词法做用域规则(lexical scoping rules)。只要记住一点：词法做用域的规则，即函数被执行时(executed)使用的做用域链(scope chain)是 被定义 时的scope chain，而不是执行时的scope chain，就能够很容易的理解闭包的行为了。
• step 2：掌握闭包的使用场景。
• 闭包经典使用场景一：经过循环给页面上多个dom节点绑定事件
• 闭包使用场景二：封装变量
• 闭包使用场景三：延续局部变量的寿命

深刻理解 JavaScript 异步 

Node.js 初体验

• Node是个啥？
• 安装Node
• npm的下载和使用
• 理解Node的模块概念：在Node中，不一样的功能组件被划分红不一样的模块。应用能够根据本身的须要来选择使用合适的模块。每一个模块都会暴露一些公共的方法或属性。
• Node能作什么和它的优点：非阻塞；单线程；事件驱动。
• Node事件流概念：由于Node 采用的是事件驱动的模式，其中的不少模块都会产生各类不一样的事件，可由模块来添加事件处理方法，全部可以产生事件的对象都是事件模块中的 EventEmitter 类的实例。
• 强大的File System 文件系统模块： Node 中的 fs 模块用来对本地文件系统进行操做。文件的I/O是由标准POSIX函数封装而成。须要使用require('fs')访问这个模块。全部的方法都提供了异步和同步两种方式。
• 学习Node的总结：

2017，咱们来聊聊 Node.js

新一代 JavaScript 的开发图谱（2017）

我将会将这张地图分为几个你须要解决的问题，对于每一个问题，我将会：

• 描述问题或工具需求
• 决定你须要选取哪一种工具
• 讨论为何这样选
• 给一些其余选择

问题：

• 包管理
• JavaScript风格
• 编译
• Linting
• 打包工具
• 测试
• UI 库／状态管理
• DOM 操做和动画
• 样式

 JavaScript 中函数节流和函数去抖的讲解

https://segmentfault.com/a/1190000002764479

http://www.topfe.cn/javascript/395.html

函数节流：在频繁触发的状况下，须要执行的逻辑只有执行完以后，才能继续执行下一次。

函数防抖：在频繁触发的状况下，只有足够的空闲时间，才执行代码一次，若是没有执行完就清除掉，从新执行逻辑。

应用场景：高频触发如下方法

• 页面滚动监听（onscroll）
• 窗口resize事件，等到窗口变化结束后才进行业务逻辑的运行
• 鼠标键盘 mousedown/keydown 事件
• 鼠标的进入移出事件（mouseenter/mouseleave）
• DOM 元素的拖拽功能实现（mousemove）
• 输入框搜索等（keyup）

    // 函数节流
    var canRun = true;
    window.onscroll = function(){
         if(!canRun){
             // 判断是否已空闲，若是在执行中，则直接return
             return;
        }
        canRun = false;
        setTimeout(function(){
            console.log("函数节流");
            canRun = true;
        }, 300);
    };

    // 函数防抖
    var timer = false;
    window.onscroll = function(){
        clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
        timer = setTimeout(function(){
        console.log("函数防抖");
        }, 300);
    };

如何在 Vue.js 中使用第三方库

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些很是有用的 JavaScript 库. 但随着项目愈来愈复杂, 可能会采起组件化和模块化的方式来组织代码, 还可能要使应用支持不一样环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不一样的组件和模块使用, 否则, 这些第三方库的管理会给你带来一些麻烦.

补充：ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，可是在咱们一向的node模块中，咱们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。在一个文件或模块中，export、import能够有多个，export default仅有一个。 require和import。

本文将介绍一些在 Vue.js 中使用第三方库的方式：

• 全局变量：在项目中添加第三方库的最简单方式是讲其做为一个全局变量, 挂载到 window 对象上。这种方式不适合于服务端渲染, 由于服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错。
• 在每一个文件中引入：另外一个简单的方式是在每个须要该库的文件中导入。比较繁琐, 而且带来的问题是: 你必须记住在哪些文件引用了该库, 若是项目再也不依赖这个库时, 得去找到每个引用该库的文件并删除该库的引用. 若是构建工具没设置正确, 可能致使该库的多份拷贝被引用。
• 优雅的方式：在 Vuejs 项目中使用 JavaScript 库的一个优雅方式是讲其代理到 Vue 的原型对象上去。Object.defineProperty(Vue.prototype, '$moment', { value: moment });

CSS Grid VS Flexbox：实例对比

CSS Grid布局这样玩

理解 Flexbox：你须要知道的一切

• 挑战 1：定位页面部分
• 挑战 2：将页面变为响应式页面
• 挑战 3：对齐标头组件

结论:

1. CSS grids 适用于布局大画面。它们使页面的布局变得很是容易，甚至能够处理一些不规则和非对称的设计。
2. Flexbox 很是适合对齐元素内的内容。你可使用 Flex 来定位设计上一些较小的细节。
3. 2D 布局适合使用 CSS grids（行与列）。
4. Flexbox 适用于单一维度的布局（行或列）。
5. 共同窗习并使用它们。

优化浏览器前端

为了提高用户体验（User Experience，UX），咱们但愿前端提供快速加载和执行的网页。而对于提高开发者体验（Developer Experience, DX）来讲，咱们但愿前端可以快速，简便和实用。这样的优化不只使咱们的用户和开发者满意，也会显着提升SEO排名, 由于Google的SEO排名会偏向于优化较好的页面。

优化浏览器前端的方法：首先，咱们不能控制浏览器或者改变它的行为方式，可是咱们能够理解它的工做原理，用来优化咱们页面的加载。幸运的是，浏览器行为的基本原理至关稳定并有据可查，长时间内也不会显着改变；其次，代码，堆栈，结构和模式是咱们能够控制的。他们更灵活，改变地更快，为咱们提供更多的选择。 

咱妈说别乱点连接之浅谈CSRF攻击

CSRF（Cross-site request forgery），它的中文名称是跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

简单地说，CSRF就是利用了咱们的登陆状态或者受权状态（请注意“利用”，并无窃取到），而后作一些损害咱们自身利益的事情。

从上面这个实例可知,完成CSRF攻击流程：

1. 用户登陆了信任的网站A，而且保存登陆状态
2. 黑客找出网站A没有防护的连接，经过社会工程学假装，诱导点击。
3. 只要登陆状态保持，用户主动访问目标连接，则攻击成功。

总结：CSRF可以攻击的根本缘由是：服务器没法识别你的来源是否可靠。

那么防护的方法有不少：

1. 好比加上验证码。但这么作很繁琐，而且影响用户体验。
2. 好比转帐须要二次密码验证，如今不少银行就这么搞的。
3. 确认来源是否可靠（推荐）

根据验证是否可靠性思路，能够有如下几种方法：

• 验证HTTP Referer 字段：HTTP协议里面定义了一个访问来源的字段，这个字段叫Referer。
• 服务端验证请求的token一致性：实现原理：在服务端生成一个随机的token，加入到HTTP请求参数中，服务器拦截请求，查看发送的token和服务端的是否一致，若一致，则容许请求；若不一致，则拒绝请求。
• Ajax防护CSRF

【译文】了解XSS攻击

跨站点脚本（Cross-site scripting，XSS）是一种容许攻击者在另外一个用户的浏览器中执行恶意脚本的脚本注入式攻击。攻击者并不直接锁定受害者。而是利用一个受害者可能会访问的存在漏洞的网站，经过这个网站间接把恶意代码呈递给受害者。对于受害者的浏览器而言，这些恶意代码看上去就是网站正常的一部分，而网站也就无心中成了攻击者的帮凶。

恶意代码是如何注入的：对于攻击者来讲可以让受害者浏览器执行恶意代码的惟一方式，就是把代码注入受害者从网站下载的页面中。若是网站直接在页面中呈现用户输入的内容的话，这种攻击有可能得逞。由于攻击者能够以字符串的形式向页面插入一段受害者浏览器可以执行的代码。好比一段评论包含了"<script></script>"，页面加载就中招了。

什么是恶意脚本：Javascript的执行环境受到严格限制并只有很是有限的权限访问用户的文件和操做系统，因此不算特别恶意。恶意的有Javascript有权访问一些用户的敏感信息，好比cookie；Javascript可以经过XMLHttpRequest或者其余一些机制发送带有任何内容的HTTP请求到任何地址；Javascript可以经过DOM操做方法对当前页面的HTML作任意修改。

恶意脚本的后果：攻击者有能力发动如下几类攻击，Cookie窃取；Cookie窃取；钓鱼网站（Phishing）。

很是值得注意的重要一点是，恶意代码只有在受害者的浏览器中最终获得解析以后才算得上是恶意，这只可能发生有XSS缺陷的站点上。

攻击是如何工做的：攻击者利用提交网站表单将一段恶意文本插入网站的数据库中；受害者向网站请求页面；网站从数据库中取出恶意文本把它包含进返回给受害者的页面中；受害者的浏览器执行返回页面中的恶意脚本，把本身的cookie发送给攻击者的服务器。

XSS攻击类型：虽然XSS攻击的终极目标是在受害者的浏览器中执行恶意脚本，可是实现这个目标的不一样途径仍是有根本上的差异的。有持续型XSS攻击：恶意文原本源于网站的数据库；反射型XSS攻击：恶意文原本源于受害者的请求；基于DOM的XSS攻击：利用客户端而不是服务端代码漏洞发动攻击。

阻止XSS攻击的方式：编码，也就是转义用户的输入，这样浏览器就会把它解读为数据而不是代码；校验，也就是对用户的输入进行过滤，这样浏览器仍然把它解读为代码但当中已不存在恶意指令了。