文章收藏(一)

用 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软件的特殊性,尽管测试领域工具层出不穷,在前端的自动化测试上面却实施并不广泛,很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。

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

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

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

用github来展示你的前端页面吧

全球架构师峰会

QQ空间前端工程

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

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

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

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

中国第二届CSS Conf总结

浏览器的渲染性能

  • 你所做的页面,不但要能被快速加载,还要能流畅运行:页面的滚动要快速响应手指的动作,动画和交互效果更要如丝般顺滑。要想编写高性能的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 抓住。

 

转载于:https://www.cnblogs.com/Chen-XiaoJun/p/6576692.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401374.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端 进阶

前端 进阶一、HTMLmetaviewport[题] meta标签&#xff0c;实现页面自动刷新/跳转二、CSSCSS选择器CSS选择器匹配原理CSS优先级 / 权重可继承 / 不可继承属性盒模型offsetWidth、clientWidth、scrollWidth**box-sizing属性BFC块级格式化上下文position定位实现水平居中实现垂直居…

Windows文件被占用解决办法

我们有时会遇到某个文件被占用&#xff0c;无法删除或者修改。很多人此时重启机器来解决&#xff0c;但是因为有的程序已启动就把文件占用了&#xff0c;重启也没用。 其实&#xff0c;我们可以使用perfmon.exe /res 在上面的搜索框里输入被占用的文件名&#xff0c;就可以知道…

配置yum,nc,telnet

一、学习中问题   最近学习在学习Hadoop的一个子项目Zookeeper&#xff0c;在测试其中的“四字命令”---”echo ruok|nc localhost 2181“时发现命令无法被识别&#xff0c;如下图所示&#xff1a; [roothadoop ~]# echo ruok|nc localhost 2181 -bash: nc: command not foun…

调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别...

方法名&#xff1a;mssql_fetch_row() 测试&#xff1a; 返回&#xff1a; Notice: Undefined index: UserId in D:/_PHP_Test/Test2/test_connLocalDB.php on line 32 ::王小一Notice: Undefined index: UserId in D:/_PHP_Test/Test2/test_connLocalDB.php on line 32 ::王小…

20145318赵一《网络对抗》后门原理与实践

20145318赵一《网络对抗》后门原理与实践 知识点 后门 后门程序一般是指那些绕过安全性控制而获取对程序或系统访问权的程序方法。  在软件的开发阶段&#xff0c;程序员常常会在软件内创建后门程序以便可以修改程序设计中的缺陷。但是&#xff0c;如果这些后门被其他人知道&…

Nagios:企业级系统监控方案

在大多数情况下Cacti RRDtool已经实现对系统各种参数的监测。但很多企业可能不满足于仅仅监测系统基本参数的需求&#xff0c;而是需要监测除基本参数之外的各种应用程序的运行状况。很显然在这种情况下对于一些系统或者是自定义的程序Cacti RRDtool的局限性就显示出来了。而…

Universal-Image-Loader解析(二)——DisplayImageOptions的详细配置与简单的图片加载...

在使用这个框架的时候&#xff0c;我们必须要配置一个DisplayImageOptions对象来作为ImageLoader.getInstance().displayImage&#xff08;&#xff09;中的参数&#xff0c;所以很有必要讲解这个对象的配制方法。讲解完了后其实这个框架我们就会了解的比较详尽了。 1.默认的配…

React 进阶

React 进阶一、认识 React1、是什么&#xff1f;2、React 特性3、React 第一个实例&#xff08;HTML 模板&#xff09;4、React 安装二、React 核心1、JSX2、元素渲染3、组件4、Props5、State6、组件生命周期7、事件处理8、条件渲染9、列表 & Key10、表单11、状态提升12、组…

dropMenu----简单的下拉菜单生成器

HTML <div class"input-group"><span class"input-group-addon" style"width: 100px" >职级&#xff1a;</span><input type"text" class"units form-control" id"jobTitle" value"其…

linux之Vim使用

Vim同Emac是Linux世界下最为流行的两个文本编辑工具&#xff0c;集中精力学习一个就好了&#xff0c;暂定以Vim为学习对象。在本文中&#xff0c;一些基本的操作将不再介绍&#xff0c;只会介绍最为常用的命令以及设置&#xff0c;操作系统为Ubuntu 12.04. Vim的默认配置&#…

Holedox Moving

2012-08-11 我的第一个A*算法&#xff1a; 四处看A*算法。。还是有一点没有弄明白就是那个当已经在列表中的时候再次进入的时候怎么去更新。 这道题。。有点难开始的时候不会位压缩&#xff0c;去看了一个别人的代码。所以感谢一下。这位高手。写了一个bfs(),500多ms。 看了A*…

mint mvc文件上传功能——使用篇

为什么80%的码农都做不了架构师&#xff1f;>>> 为了不打击大家的积极性&#xff0c;暂时只着重讲用法&#xff0c;原理方面暂时不讲太多。 配置web.xml 文件上传需要用到servlet3的异步处理功能。需要在web.xml配置文件中加入异步支持声明&#xff08;注释处&am…

React 项目开发问题积累

React 开发问题积累1. 修改antd的组件样式2. antd级联选择框&#xff08;后台数据渲染&#xff09;1. 修改antd的组件样式 问题&#xff1a;直接修改样式好像不起作用&#xff0c;直接在组件上加style行内样式也不生效 方案&#xff1a;用 :global样式穿透 全局样式直接使用 …

关于spring中util:/的配置

解决redis设置缓存时间找到的帖子&#xff0c;我这个初学者需要学习的还是很多的。 原文地址&#xff1a;http://www.doc100.net/bugs/t/216322/index.html 探索<util/>命名空间 事情的发展总是一段曲折前进的过程。当Spring刚出现时&#xff0c;开发者可以使用<…

静态类

静态类必须直接从System.Object派生&#xff0c;从其他任何基类派生没有任何意义。无法创建静态类的实例静态类不能实现任何接口&#xff0c;这是因为只有使用类的一个实例时&#xff0c;才可以调用类的接口方法静态类只能定义静态成员&#xff08;字段、方法、属性和事件&…

ASP.NET 数据库缓存依赖

By Peter A. Bromberg, Ph.D. 在ASP.NET中&#xff0c;Cache类最酷的特点是它能根据各种依赖来良好的控制自己的行为。以文件为基础的依赖是最有用的&#xff0c;文件依赖项是通过使用 Cache.Insert 并提供引用文件的 CacheDependency 对象添加的 Cache.Insert("MyData&qu…

React Router路由详解

React Router路由详解一、基础1、安装使用2、React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter路径匹配组件: Route 和 Switch导航组件: Link 和 NavLinkRedirect 重定向withRouter编程式导航 - history 对象路由过渡动画打包部署的路由配置3、路由配置实例一、…

TLS 1.2详解

TSL由多个协议组成的两层协议集合&#xff0c;工作与应用层和传输层之间。 TLS协议包含两层协议&#xff1a;记录层协议&#xff08;TLS Record Protocol协议&#xff09;和 握手协议&#xff08;TLS Handshake Protocol协议&#xff09;&#xff0c;底层采用可靠传输协议&…

个人作业2——英语学习APP案例分析

第一部分 调研&#xff0c; 评测 1.下载并使用&#xff0c;描述最简单直观的个人第一次上手体验&#xff1a; 没有各种广告&#xff0c;界面简洁&#xff0c;软件安装包略小于其他翻译软件。就内存的占用而言优于同款热门软件有道词典。 2.必应词典&#xff08;Android客户端&a…

IOS开发UI篇之──自定义加载等待框(MBProgressHUD)

这里介绍一下网友开源的MBProgressHUD类&#xff0c;实现等待框&#xff0c; 一、网上下载 MBProgessHUD 类文件&#xff0c;直接导入到工程即可 二、示例分析 在我的工程中示例如下&#xff1a; 1&#xff09;在ShowImageViewController.h头文件代码如下&#xff1a; #import…