Li Yucang

While there is life there is hope

浏览器跨域方案详解

页面间互相通讯的方式

跨域方案详解 同源策略 在开始将跨域之前先了解一下浏览器的同源策略。 浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 没有同源策略限制的两大危险场景 浏览器是从两个方面去做这个同源策略的,一是针对接口的请求,二是针对 Dom 的查询。试想一下没有这样的限制上述两种动作有什么危险。 没有同源策略限制的接...

js异步编程

体验异步编程之美

js 异步编程 js 异步编程简介 所谓”异步”,简单说就是一个任务不是连续完成的,可以理解成该任务被人为分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。 比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。 ...

js原型简析

探索原型链的尽头

js 原型简析 这篇文章主要对 js 原型链进行整体的分析,也会讲解几个比较难理解的地方,不会介绍具体的应用,也不会进行过多的拓展。 开局一张图,大家看看自己对这一块的掌握程度有多少: prototype 首先来介绍下 prototype 属性。这是一个显式原型属性,只有函数才拥有该属性。基本上所有函数都有这个属性,但是也有一个例外 let fun = Function.pro...

npm scripts 使用指南

彻底搞懂npm script脚本

npm scripts 使用指南 npm 脚本 npm 允许在 package.json 文件里面,使用 scripts 字段定义脚本命令。 { // ... "scripts": { "build": "node build.js" } } 上面代码是 package.json 文件的一个片段,里面的 scripts 字段是一个对象。它的每一个属性,对应一段脚...

nodejs错误处理,及自定义错误信息

教你在node中自定义错误码

nodejs 错误处理,及自定义错误信息 最近在用 egg 搭建自己博客的时候,想让 egg 接口不管错误与否全部返回 200 状态码,再携带上必要的信息,这样能方便前端的处理。查阅 egg 文档,如下写到: 框架通过 onerror 插件提供了统一的错误处理机制。对一个请求的所有处理方法(Middleware、Controller、Service)中抛出的任何异常都会被它捕获,并...

浅谈浏览器运行机制及单线程js的执行

事件循环与任务队列

浅谈浏览器运行机制及单线程 js 的执行 本文从浏览器进程,再到浏览器内核运行,再到 JS 引擎单线程,再到 JS 事件循环机制,从头到尾系统的梳理一遍,摆脱碎片化,形成一个知识体系。 线程与进程 首先这里来个经典的列子简单了解下进程与线程: 进程是一个工厂,工厂有它的独立资源 工厂之间相互独立 线程是工厂中的工人,多个工人协作完成任务 工厂内有一个或多个工人 工人之间共享空...

移动端H5页面适配方案

移动端自适应方案

移动端 H5 页面适配方案 手机设备屏幕尺寸不一,做移动端的 Web 页面,需要考虑在安卓/IOS 的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,前端怎样做能更好地适配不同屏幕宽度的移动设备。 自适应与响应式的区别 响应式设计表示在不同的屏幕尺寸下,都有良好的布局和内容表现,简单一点的说,就是一个页面可以适配多种不同尺寸的屏幕,而且看上去还是设计良好的。为了实现这个目的,可...

js数字类型精度问题

让我们沉迷二进制的世界吧

js 数字类型精度问题 话题研究的背景 今天在计算商品价格的时候再次遇到 js 浮点数计算出现误差的问题,以前就一直碰到这个问题,都是简单的使用 tofixed 方法进行处理一下,这对于一个程序员来说是及其不严谨的。所以今天查阅资料对 js 数字类型精度问题做个总结。 我们先来看一段 JS。 console.log( 0.1+ 0.2); // 0.30000000000000004...

剖析JavaScript类型转换

带你走出类型转换的迷宫

剖析 JavaScript 类型转换 js 在使用==进行比较的时候,如果==两边类型不同则会发生隐式类型转换。很多初学者对这块理解的不够,今天就让我们一起把它弄清楚吧,先来一段典型的具有迷惑性的代码: []==[] //false []==![] //true {}==!{} //false {}==![] //VM1896:1 Uncaught SyntaxError: Unexpe...

localStorage、sessionStorage、Cookie的区别及用法

比较几种浏览器缓存的异同

localStorage、sessionStorage、Cookie 的区别及用法 h5 webstorage HTML5 提供了在客户端存储数据的新方法 webstorage,包括 localStorage 和 sessionStorage。 localStorage localStorage 生命周期是永久,这意味着除非用户显示在浏览器提供的 UI 上清除 localStorag...