web前端

Axios 基于 Promise 的 HTTP 客户端

Axios ,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,也可以在 node.js 中使用。

功能:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 中创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防止 XSRF 攻击

示例代码:

执行一个 GET 请求

// Make a request for a user 
    

TypeScript 这十年

今天是 TypeScript 的生日!但是这个生日很特别——10 年前的今天,2012 年 10 月 1 日,TypeScript 首次公开亮相。

 

早期的情况

当 TypeScript 首次亮相时,有很多人持怀疑态度,这也是可以理解的。对于一些 JavaScript 用户来说,一个试图将静态类型引入 JavaScript 的团队可能听起来像是一个邪恶的组织,甚至可视为一个阴谋或笑话。

但是这些功能是有价值的,对吗?类型检查,在你保存文件之前捕捉 Bug,并获得丰富的编辑器功能,如代码完成、导航和重构?我们知道公司内外部的团队在处理复杂的 JavaScript 代码库时遇到了巨大的挑战,而且我们知道 JavaScript 将被广泛使用。因此,谁不希望有强大的工具来帮助编写它呢?对于团队来说,TypeScript 初心未变,一如最初在发布 TypeScript 时所述的那样,“在大型应用开发中使用 JavaScript 开发!"。…

在 Progressive Web Apps 中添加自定义安装按钮

前几天,我正在寻找一种在我的记事本应用程序中添加自定义“安装”按钮的方法,该应用程序本质上是一个渐进式 Web 应用程序 (PWA)

介绍

为了给你一个入门,当你打开一个 PWA 时,一个beforeinstallprompt事件会在支持的浏览器中被触发。触发此事件时,浏览器会像这样向用户显示安装弹出窗口。

原生 PWA 弹窗

然后,用户可以通过点击“安装”按钮或关闭弹出窗口来选择安装应用程序。那么,如果您想在用户关闭安装弹出窗口后再次提醒他们安装您的 PWA 怎么办?

为了解决这个问题,你可以做的是在你的应用程序本身的某个地方显示一个自定义的“安装”按钮,这将触发用户安装你的 PWA。

这也正是我在记事本PWA 中所做的。我是如何做到这一点的?继续阅读以了解如何操作。

您可能喜欢:检查 PWA 是否作为独立应用程序打开

JavaScript 中内存泄漏的原因以及如何避免它们

当涉及到“老式”网页时,对内存管理的关注不足通常不会产生戏剧性的后果。当用户浏览链接并加载新页面时,每次加载都会从内存中删除页面信息。

SPA(单页应用程序)的兴起促使我们更加关注与内存相关的 JavaScript 编码实践。如果应用程序开始逐渐使用越来越多的内存,那会严重影响性能甚至导致浏览器的选项卡崩溃。

在本文中,我们将探讨导致 JavaScript 内存泄漏的编程模式,并解释如何改进内存管理。

Javascript垃圾收集以及内存泄漏

这几天在写代码的时候一直想到一个问题,内存的问题,这个问题解决不了,始终不能安安心心写代码(我这里又又又定义了一个变量,闭包能访问到它,但是我在闭包函数中并没有访问他,闭包一直存在,不占内存吗?之前也一直有一个问题,不解决也是寝食难安,见事件处理函数中this的指向以及函数上下文的继承),以前写c,c++的时候,似乎每次全局作用域有数组我不用了,我就手动给它删除了(局部变量出了作用域就自行销毁),而写javascript的时候意识到,虽然避免使用了全局变量,可是因为闭包的存在难道不会导致内存的泄漏(只要闭包函数存在,就始终拥有对外部函数的作用域的访问权限)?
之前第一次看《javascript高级程序设计》的时候,记得有一节是说垃圾回收机制,当时连对象,应用,原型什么的都没有搞清楚,那章基本上也就跳过了,现在回想起来,似乎我很少在js中对其内存进行管理,除了我不想要某个属性了,会delete一下,别的都没有进行管理,那么Js不需要内存管理吗?不会发生内存泄漏?

js垃圾回收机制

Js有自己的垃圾回收机制,会帮助开发者管理内存。回收机制会查找应用无法到达的内存。这其实跟我们的初衷是有一些细微但是很重要的差别,该机制是寻找无法到达的内存,而我们想要的其实是寻找我不会再使用的内存。一块内存(一个变量,引用),只有开发者我们自己才知道会不会再用到,而检测机制,只能检测到程序中别的地方不会再调用的内存(也正常,要是检测机制能检测到那个变量我不用了才奇怪了)。所以,如果我们不使用某个变量了,让程序别的地方都引用不到它,垃圾回收机制就能够发现并处理它,而内存泄漏的根本原因就是我们不打算继续使用的内存还存在着引用,从程序别的地方可以访问到它,就不会对其进行释放。
综上可以这么说:js的回收机制的关键是理解可到达的概念。从根(window)出发,能够到达的变量都会留在内存中,只有无法到达的节点(变量,函数)才会被回收机制回收。从而完成内存的释放。而引起内存泄漏的根本原因就是存在不想要的引用,使得不需要的内存能够从根节点到达,从而无法释放该内存。

js回收机制示例

普通对象回收机制

如下代码:

function Menu(title) {
  this.title = title
  this.elem = document.getElementById('id')
}
 
var menu = new Menu('My 

请求时浏览器缓存 from memory cache 和 from disk cache 的依据是什么,哪些数据什么时候存放在 Memory Cache 和 Disk Cache中

No description provided.

@lvtraveler
Author

lvtraveler commented on Mar 18, 2019

参考:【缓存】HTML5缓存的那些事

将ul+li 分两列显示(横向显示)的方法

有一个 ul>li 列表,默认为单列显示,把它变为两列显示可以使用DIV+CSS代码,也可以直接使用CSS控制,感兴趣的朋友可以参考了下哈,希望对你有所帮助
目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示。
方法1,使用DIV+CSS代码:

代码如下:

<style type="text/css">
.mycode{ width:300px; height:74px; float:left;}
.mycode ul{ width:280px;}
.mycode li{ width:100px; float:left; display:block;}
</style>
<div>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
</ul>
</div>

方法2,直接使用CSS控制

代码如下:

<style type="text/css">
.list{width:400px;overflow:hidden;zoom:1;border:1px solid #ccc}

打造全屏体验

我们有能力轻松制作身临其境的全屏网站和应用程序,但与网络上的任何内容一样,有几种方法可以做到这一点。现在这一点尤其重要,因为越来越多的浏览器支持启动全屏的“已安装的网络应用程序”体验。

让你的应用程序或网站全屏显示#

用户或开发人员可以通过多种方式获得全屏 Web 应用程序。

  • 请求浏览器进入全屏以响应用户手势。
  • 将应用程序安装到主屏幕。
  • 假装:自动隐藏地址栏。

如何从Angularjs 升级到 Angular

原文: Upgrading from AngularJS to Angular

Author: AngularJS 官方

译者:philoenglish.com 团队

关键字: Angularjs Angular Angular1.x Angular2.x migration 迁移, 升级

这里的Angular是指Angular 2.x, 而AngularJS 是指AngularJS 1.x版本。 Angular (通常是指 "Angular 2+" 或 "Angular v2 及更高版本") 是一个基于 TypeScript 的 开源 Web 应用框架 由 Google