#JavaScript

JavaScript系列的文章

11 篇文章

如何处理时区

如何处理时区

bg 这个问题可能在日常中不太可能遇到,但是在处理一些国际化的项目中可能会涉及。例如当你浏览一些推特或者国外的论坛,它们会标记所在的时区是什么,在什么时候发布。 考虑一个真实的场景,如果你要定时发布一个文章,可能希望在 12 月 11 日的 12 点发布,采用纽约时间,但是因为你所在中国可能并没有考...

yarn.lock 引发的血案

yarn.lock 引发的血案

最近开发项目的时候遇到一个神奇的 bug,在回滚了无数次之后终于定位到了问题,就是 yarn.lock 引起的,当时升级相关依赖版本不小心把 yanr.lock 文件给干掉了,导致依赖引用的模块有问题。 不过这也引起了我的思考为什么 yarn 要有一个 yarn.lock 文件呢?或者说为什么现代的...

初探 node 接口开发

初探 node 接口开发

接口请求与其它资源请求没有什么不同,都是借助 http 协议返回对应的资源,这篇文章简单介绍一下 node 开发接口以及如何管理多个接口情况和接口风格。 标题关联了 node,主要因为 node 开启一个服务器是很简单,而且语法基本相同没有太多负担,这篇文章主要讲解思路,换算到其它语言也是可以的。 ...

文字高亮

文字高亮

bg 如上图,可能在搜索之类的时候需要将搜索内容进行高亮,下面聊聊小程序和 web 上如何实现。 web 上做法 可以通过正则表达式/(高亮的文字)/来实现 这里实现比较简单,稍微注意一下replaceapi 即可,它还可以接收一个函数作为参数,具体内容这里不做讲解了只简单实现一下。 小程序做法 不...

使用 canvas 实现贪吃蛇

童年使用的诺基亚基本上都会搭载这款小游戏,最近心血来潮想用 canvas 来实现这个游戏就有了这篇文章,下面讲解一下实现的思路,本文的最终代码已经放到了codesandbox上。 当然实现的方式并不止 canvas 这一种,还可以使用 html + css 的形式,这里不讨论优劣取舍,让我们快速开始...

使用 canvas 实现贪吃蛇 - 图片 1
使用 canvas 实现贪吃蛇 - 图片 2
使用 canvas 实现贪吃蛇 - 图片 3

基于History实现前端路由

History是 HTML5 新增的标准,对比hash它的展示更加优雅,但低版本 ie 还有兼容问题。 首先History表示窗口浏览历史,可以通过pushState方法添加历史记录,以及通过go方法来实现跳转,还有popstate事件可以监听到记录变更。 下面就来分析实现一个History路由的基...

基于hash实现前端路由

前端路由分为两部分,hash 路由和 History 路由,例如我们常用的 vue-roter 就包含这两部分,这里并不探讨框架是如何进行封装的,而是使用原生的 api 来实现这样一个功能。 预计分为两部分,这里先介绍 hash 路由,实现基本的接受响应和前进后退(为了方便,下面代码不做任何兼容处理...

优雅处理图片异常

前言 不同浏览器对加载失败图片的图标展示不统一,所以给定一个默认的失败图片就尤为重要。 正好前几天处理了一下公司首页图片 error 默认图片的问题,就趁着记忆没有消失分享一下这篇文章。 error img 标签有一个 error 事件,通过它我们可以捕捉到异常,使用起来也很简单 全局 上面的方法没...

global对象获取

global 在开发中经常经常使用,例如下面一段代码调用的就是 global 内置的对象 这里的 Math 对象就是 global 内置的,在浏览器环境下我们可以通过window.Math.min显示调用,而在 node 环境下我们则要通过global.Math.min来调用,在实际中我们不会通过w...

jsonp实现原理

简单说一下存在的历史,浏览器存在同源政策,即域名+端口+协议必须一致,很多时候我们需要跨域访问,当然在现在我们可以借助 webpack 的反向代理配合服务器设置 cors 实现访问,但是在之前工程化还没出现的时候就需要有一种方法可以访问所以 jsonp 就出现了。 jsonp 的原理就是浏览器的 s...

长列表优化

长列表优化

前言 在项目中如果能分页实现那最好不过了,不过很多时候长列表不可避免,这里又分两种情况 第一次不用全部加载完成,这种可以使用懒加载或者说无限滚动的方式来实现 另外一种则是一次要渲染全部数据出现 下面就来讨论这两种情况如何进行优化,可以对比列表优化具体实现的源码来看 (注:下面是用 Vue 实现的,使...