文字高亮
如上图,可能在搜索之类的时候需要将搜索内容进行高亮,下面聊聊小程序和 web 上如何实现。
web 上做法
可以通过正则表达式/(高亮的文字)/来实现
function highlight(str, sep, color) {
const reg = new RegExp(`\(${sep...
模拟实现call和apply
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
上面是 call 的定义,apply 与 call 类似只是第二个参数是一个数组而 call 接收的则是一个参数列表。
看一个例子
var obj = {
name: "obj"
};
functio...
模拟实现bind
之前说了模拟实现 call 和 apply,下面就来实现 bind,首先先看一下定义 bind 定义
bind()方法创建一个新的函数,在 bind()被调用时,这个新函数的 this 被 bind 的第一个参数指定,其余的参数将作为新函数的参数供调用时使用。
第一版
根据定义我们尝试写一...
变量提升
这里只是用伪代码的形式来说明,实际上变量声明只是执行上下文有关,推荐阅读
JavaScript深入之变量对象
太长不看篇
函数参数 > 函数声明 > 变量声明
变量声明
首先想用一个伪生命周期来说这个事情,假设这段代码分为两个阶段,初始化阶段和赋值阶段; 看下面一段代码,用伪系统的话来阐述
...
模拟实现new
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
上面的定义有点抽象,我们来通过一个例子看 new 运算符扮演的角色
function Foo(name, age) {
this.name = name;
this.age = age;
}
Foo.pr...
深浅拷贝和extend
前言
深浅拷贝和 extend 是项目中常用的工具类函数,今天就动手实现一下
下面会重复这几个基础函数,为了简洁下面不会出现相关定义
function isObject(obj) {
return obj && typeof obj === "object";
}
function typ...
global对象获取
global 在开发中经常经常使用,例如下面一段代码调用的就是 global 内置的对象
const min = Math.min(...[1, 11, 22, 55, -2, -1]);
这里的 Math 对象就是 global 内置的,在浏览器环境下我们可以通过window.Math.mi...
使用 canvas 实现贪吃蛇
童年使用的诺基亚基本上都会搭载这款小游戏,最近心血来潮想用 canvas 来实现这个游戏就有了这篇文章,下面讲解一下实现的思路,本文的最终代码已经放到了codesandbox上。
当然实现的方式并不止 canvas 这一种,还可以使用 html + css 的形式,这里不讨论优劣取舍,让我们快...
怎么用 Vue Composition 造轮子
最近项目临近尾声,终于有时间来对这段工作总结。其实之前使用的一直是 Vue 但是现在公司的主要业务使用是 React 为此还特意看了许多文章,加上实际上这两个框架有很多类似的地方,所以就有了这篇文章。
因为主要是分享经验所以下面的示例主要作为抛砖引玉的作用,在正式分享之前先科普两个小知识
h...
基于History实现前端路由
History是 HTML5 新增的标准,对比hash它的展示更加优雅,但低版本 ie 还有兼容问题。
首先History表示窗口浏览历史,可以通过pushState方法添加历史记录,以及通过go方法来实现跳转,还有popstate事件可以监听到记录变更。
下面就来分析实现一个History路...