文章收藏(一)

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

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

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

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

前端自动化测试探索

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

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

首先本文不会探讨单元测试方向，因为单测已经有完善的工具体系。但前端开发中，除了一些框架和库，愿意去写单测的少之又少。另外单测维护成本较高，而且也没法满足前端测试的所有需求。前端自动化测试可以在几个方向进行尝试：

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

QQ空间前端工程

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

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

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

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

浏览器的渲染性能

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

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

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

JS 的 new 到底是干什么的？

少做四件事

不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
不用 return 临时对象，因为 new 会帮你做；
不要给原型想名字了，因为 new 指定名字为 prototype。

做了什么

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 抓住。

posted @ 2017-03-18 23:14 chenxj 阅读(289) 评论(0) 编辑收藏举报

刷新页面返回顶部

chenxj

走在前端路上。。。。。。