文章收藏(一)

时间 2019-11-18

标签文章收藏繁體版

原文原文链接

用 Yarn 你还能作这 5 件事 [译]

在 JavaScript 领域中有几个包管理器: npm，bower，component，和 volo。到本文为止，最受欢迎的包管理器是 npm。npm 客户端提供了对 npm 注册库中成千上万代码的访问。Facebook 推出了一款名叫 Yarn 的包管理器，声称比现有的 npm 客户端更快，更可靠，更安全。javascript

Yarn 是一个由 Facebook 建立的新 JavaScript 包管理器。为开发者使用 JavaScript 开发 app 时提供了快速，高可用，而且安全的依赖管理。下面有能够用 Yarn 作的五件事情：css

1. 离线工做
2. 从多个注册表安装
3. 快速获取安装包
4. 自动锁定安装包版本
5. 在不一样的机器上以一样的方式安装依赖

前端自动化测试探索

测试是完善的研发体系中不可或缺的一环。前端一样须要测试，你的css改动可能致使页面错位、js改动可能致使功能不正常。因为前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不普遍，不少人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。html

为何须要自动化测试？一个项目最终会通过快速迭代走向以维护为主的状态，在合理的时机以合理的方式引入自动化测试能有效减小人工维护成本。自动化测试的收益能够简单总结为：自动化的收益 = 迭代次数 * 全手动执行成本 - 首次自动化成本 - 维护次数 * 维护成本。对于自动化测试来讲，相对于发现未知的问题，更倾向于避免可能的问题。前端

首先本文不会探讨单元测试方向，由于单测已经有完善的工具体系。但前端开发中，除了一些框架和库，愿意去写单测的少之又少。另外单测维护成本较高，并且也无法知足前端测试的全部需求。前端自动化测试能够在几个方向进行尝试：java

界面回归测试测试界面是否正常，这是前端测试最基础的环节
功能测试测试功能操做是否正常，因为涉及交互，这部分测试比界面测试会更复杂
性能测试页面性能愈来愈受到关注，而且性能须要在开发过程当中持续关注，不然很容易随着业务迭代而降低。
页面特征检测有些动态区域没法经过界面对比进行测试、也没有功能上的异常，但可能不符合需求。例如性能测试中移动端大图素材检测就是一种特征检测，另外常见的还有页面区块静态资源是否符合预期等等。

QQ空间前端工程

QQ空间的hybrid页面首屏优化方案webso，由于活动页面、运营页面的须要，亦或者客户端开发周期长，须要采用H5的技术方案，愈来愈多的H5页面内嵌在客户端里了, 即所谓hybrid形式。android

QQ空间如何优化hybrid页面：把H5页面内嵌在QQ空间客户端里面，是一个开发重点转型的问题，也是面临的新的优化课题。hybrid页面主要体如今两个客户端：QQ空间客户端和手Q客户端git

当初面临的主要体验问题是：github

客户端的webview启动太慢，尤为是android上
页面加载有白屏的过程因此咱们的精力也主要集中于来解决这两个问题。

浏览器的渲染性能

你所作的页面，不但要能被快速加载，还要能流畅运行：页面的滚动要快速响应手指的动做，动画和交互效果更要如丝般顺滑。要想编写高性能的web站点或应用，你须要充分了解浏览器是如何处理HTML/JavaScript/CSS的，从而确保你写的代码（或引用的第三方代码）是尽量高效的。
60fps和设备刷新率:当今大多数设备的屏幕刷新率都是 60次/秒。所以，若是在页面中有一个动画或渐变效果，或者用户正在滑动页面，那么浏览器渲染动画或页面的每一帧的速率，也须要跟设备屏幕的刷新率保持一致。
像素渲染流水线:在编写web页面时，你须要理解你所写的页面代码是如何被转换成屏幕上显示的像素的。这个转换过程能够概括为这样的一个流水线，包含五个关键步骤：JavaScript、计算样式、布局、绘制、渲染层合并。
课程：浏览器渲染性能

别再为了this发愁了------JS中的this机制

误解一：this引用function自己
误解二：this引用的是function的词法做用域
规则一：默认绑定全局变量，当函数被单独定义和调用的时候，应用的规则就是绑定全局变量
规则二：隐式绑定，函数调用时拥有一个上下文对象，就好像这个函数是属于该对象的同样
规则三：显示绑定，bind()\apply()\call()函数
规则四：new新对象绑定，用new来调用，那么绑定的将是新建立的对象

JS 的 new 究竟是干什么的？

少作四件事web

不用建立临时对象，由于 new 会帮你作（你使用「this」就能够访问到临时对象）；
不用绑定原型，由于 new 会帮你作（new 为了知道原型在哪，因此指定原型的名字为 prototype）；
不用 return 临时对象，由于 new 会帮你作；
不要给原型想名字了，由于 new 指定名字为 prototype。

作了什么ajax

http://warjiang.github.io/devcat/2016/05/12/JS%E4%B8%ADnew%E5%88%B0%E5%BA%95%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88/?utm_source=tuicool&utm_medium=referral

var o = new Object();
o. __proto__ = A.prototype;//这里还记得之那个function里面的默认的属性么?
A.call(o)//因为这里this是指向o,能够把什么this.name/getName绑定到o上.
把这个o返回给a;//完成var a = new A()的过程.

2017前端性能优化清单

https://www.w3ctech.com/topic/1945

一个项目的性能是很是重要的，除了要在技术层面上注意，更要在项目的设计之初就开始考虑，这样才可使性能的各类隐形需求完美的整合到项目中，随着项目一块儿推动。性能最好具备可量化、可监测以及可改动的特性。网络愈来愈复杂，对网络的监控也变得愈来愈难，由于监测的过程会受到包括设备、浏览器、协议、网络类型以及其余技术（CDN，ISP，缓存，代理服务器，防火墙，负载均衡器和服务器对性能的影响都很大）的很大影响。

JavaScript严格模式

ECMAScript 5的严格模式是JavaScript中的一种限制性更强的变种方式。严格模式不是一个子集：它在语义上与正常代码有着明显的差别。不支持严格模式的浏览器与支持严格模式的浏览器行为上也不同，因此不要在未经严格模式特性测试状况下使用严格模式。严格模式能够与非严格模式共存，因此脚本能够逐渐的选择性加入严格模式。

严格模式在语义上与正常的JavaScript有一些不一样。首先，严格模式会将JavaScript陷阱直接变成明显的错误。其次，严格模式修正了一些引擎难以优化的错误：一样的代码有些时候严格模式会比非严格模式下更快。第三，严格模式禁用了一些有可能在将来版本中定义的语法。
若是你想让你的JavaScript代码在严格模式下运行，能够参考转换成严格模式。
有时，你会看到符合规范的、非严格模式被称为"懒散模式"，这不是官方术语，但你应该注意到它.

JavaScript经常使用代码总结

分享了一些经常使用JavaScript代码，有：1.手机类型判断、2.字符串长度、3.获取url中的参数、4.js 绑定事件、5.当前浏览器JS的版本、6.全选/全不选、7.移除事件、8.回车提交、9.ajax提交等。

localStorage，您坑了吗？

客户端localStorage被写满时，致使功能没法正常使用，只能本身挖的坑本身填了。在填坑以前，咱们先考虑了使用缓存须要注意的问题：

缓存只是为了提高性能，不能认为缓存必定可用，数据获取失败或写入失败都应该有后续的代替处理
有可能会存在部分缓存数据写入以后，长期都未使用过或者代码中已再也不会使用该缓存（已失去效用的数据占用了空间）
缓存的使用都是开发直观上的认为有须要，可是写入以后，后续是否真正有使用到（可能该功能用户只使用一次以后就再也不使用），是否也是非必要占用了缓存的空间
数据缓存保存在客户端，须要有必定的机制来控制缓存的增加或者作缓存的清除

从proto和prototype来深刻理解JS对象和原型链

Object自己是构造函数，继承了Function.prototype;Function也是对象，继承了Object.prototype。

Object instanceof Function // true Function instanceof Object // true

那么具体到JS，ES规范是怎么说的？Function自己就是函数，Function.__proto__是标准的内置对象Function.prototype。Function.prototype.__proto__是标准的内置对象Object.prototype。

最后总结：先有Object.prototype（原型链顶端），Function.prototype继承Object.prototype而产生，最后，Function和Object和其它构造函数继承Function.prototype而产生。

该死的IEEE-754浮点数，说「约」就「约」，你的底线呢？以JS的名义来好好查查你

77% 的网站使用了至少有 1 个漏洞的 JavaScript 库

在 Alexa 上的 top 5000 网站上跑了测试，发现数字达到了惊人的 76.6%，76.6% 的网站使用了至少包含 1 个漏洞的库。

须要说明的是，没有一个单一的解决方案能够解决这个问题。相反，须要的是将提升安全意识、使用更好的工具、一套简单可维护的 JavaScript 前端实现方法等相结合（前端包管理工具的使用远不像后端那样广泛）。而这也仅仅是个开始。

可是，正如咱们前面所说的，对此依旧满怀信心。第三方 JavaScript 的安全问题是一个可解决的问题，只是比预想的须要更长的时间而已。

Sticky Footer，完美的绝对底部

form me:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
          .wrapper{
            width: 100%;
            min-height: 100%;   /*必须使用min-height*/
          }
          .main{
              padding-bottom: 50px;
          }
        .footer{
            width: 100%;
            height: 50px;
            margin-top: -50px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="main">main</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

页面的 HTML 结构:

<div class="wrapper">
    <div class="content"><!-- 页面主体内容区域 --></div>
    <div class="footer"><!-- 须要作到 Sticky Footer 效果的页脚 --></div>
</div>

实现方案一：absolute，经过绝对定位处理应该是常见的方案，只要使得页脚一直定位在主容器预留占位位置。经常使用
实现方案二：calc，经过计算函数 calc 计算（视窗高度 - 页脚高度）赋予内容区最小高度，不须要任何额外样式处理，代码量最少、最简单。兼容性
实现方案三：table，经过 table 属性使得页面以表格的形态呈现。不建议使用
实现方案四：Flexbox，Flexbox 是很是适合实现这种效果的，使用 Flexbox 实现不只不须要任何额外的元素，并且容许页脚的高度是可变的。

JavaScript排序，不仅是冒泡

https://segmentfault.com/a/1190000008796659

实例分析 JavaScript 词法做用域

做用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，做用域决定了代码区块中变量和其余资源的可见性。

做用域有两种常见的模型：词法做用域(在词法分析阶段就肯定了，不会改变。变量的做用域是在定义时决定而不是执行时决定)和动态做用域(在运行时根据程序的流程信息来动态肯定的)。

若是一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），它们的运行顺序是：
JavaScript 解析过程：
JavaScript 执行过程：
实例分析：不一样做用域中的同名变量；参数和同名变量

用Async函数简化异步代码

随着 ES6 的到来(如今被称做 ES2015)，除了引入 Promise 的规范，不须要请求那些数不尽的库以外，咱们还有了生成器。生成器可在函数内部中止执行，这意味着可把它们封装在一个多用途的函数中，咱们可在代码移动到下一行以前等待异步操做完成。忽然你的异步代码可能就开始看起来同步了。

这只是第一步。异步函数因今年加入 ES2017，已进行标准化，本地支持也进一步优化。异步函数的理念是使用生成器进行异步编程，并给出他们本身的语义和语法。所以，你无须使用库来获取封装的实用函数，由于这些都会在后台处理。

async/await与Promises ：

链式操做： async 函数在这个方面甚至比 Promise 作得还好。使用 async 函数，只须要像编写同步代码那样调用 asynchronousOperation
并发操做：Promise 还有另外一个伟大的特性，它们能够同时进行多个异步操做，等他们所有完成以后再继续进行其它事件。ES2015 规范中提供了 Promise.all()，Promise.all() 也能够看成 async 函数使用。
处理拒绝：使用Promise，传递给 then，做为其第二个参数，或者传递给 catch 方法。不使用 Promise API 中的方法，能够经过 try 和 catch 来处理。
中断 Promise：拒绝原生的 Promise，只须要使用 Promise 构建函数中的 reject 就好，固然也能够直接抛出错误。在 async 函数中随时随地抛出错误，它总会被 Promise 抓住。