![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
Kid thePhantom Thief
专注于大前端技术开发(前端与客户端以及底层C )近两年偏向于前端渲染引擎、游戏引擎应用及源码研究
展开
-
Vue3与2是如何监测数组变化的
前言Vue3.x已经发布一段时间了,更新内容也是比较多的,但是比较让我感兴趣的还是如何对Vue2无法直接监测数组变化的优化,今天抽时间来简单看一下实现原理。一、Vue2为什么不能监测数组的变化首先从表象上来看,Vue2对数组的响应式实现是有些不足的:无法监测数组的新增无法监测用索引改变数组的操作先来简单分析下为什么会存在上述问题:我们知道Vue2是通过Object.defineProperty方法来进行数据监测的,但是这个方法是无法监测到数据的变化吗?其实并不是,我们来看下下面的例子:.原创 2021-02-22 18:30:19 · 2500 阅读 · 0 评论 -
Vue初始化源码解析
本文主要来描述下Vue的整体创建流程,可以熟悉下Vue的初始化的过程,帮助大家明白当我们在运行new Vue()的时候发生了什么。首先来看下Vue初始时的方法:import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin原创 2020-07-10 19:18:10 · 219 阅读 · 0 评论 -
nodejs命令行工具的开发
命令行工具的开发应该是每个前端工程师必备的技能,但是有很多同学刚开始学习时不知道如何入手,今天就来简单介绍一下如何用commander来开发命令行工具。初始化首先cd进入某个文件夹,运行npm init,根据提示信息来生成package.json文件;之后在同级目录下创建bin/test1.js文件;接着在package.json中增加bin字段:"bin": { "test1": "./bin/test1.js" },我们在写命令行工具的时候,需要指定一个可执行文.原创 2020-06-24 15:52:09 · 665 阅读 · 0 评论 -
npm命令浅析
npm 脚本有一个非常强大的功能,就是可以使用 npm 的内部变量:通过npm_package_前缀,npm脚本可以拿到package.json里面的字段; console.log(process.env.npm_package_name); // package.json内的name字段 console.log(process.env.npm_package_version); // 1.2.5repository字段的type属性,可以通过npm_package_repos.原创 2020-06-24 15:42:12 · 479 阅读 · 0 评论 -
如何开发一个简单交互式命令行工具
本文主要来实现实现一个从gitlab拉取项目模板的可交互命令行工具,旨在让大家来理解开发一个交互式命令行工具的整个流程。创建项目首先当然是npm init node-cli-demo -y 直接创建出一个空白项目,之后修改package.json文件,之后创建src和bin文件夹,之后目录结构如下图所示:npm init node-cli-demo -ypackage.json"scripts": { "convert": "babel src --out-dir ./bin/..原创 2020-06-23 20:51:04 · 1654 阅读 · 0 评论 -
PIXIJS性能优化之图集加载
介绍使用pixi去开发一个稍微复杂的项目的时候就会涉及到各种类型的图片加载成为纹理,之后GPU去渲染,但是在图片数量较多但尺寸较小时,分开去加载还是比较消耗性能的,因为浏览器的并行下载都是有限制的,下载图片的时候可能就会影响到首页的接口请求速度以及其他更重要的UI渲染速度,因此建议当首次加载有此类情况的时候最好去使用图集的方式来实现。如何实现纹理图集的实现分为雪碧图的制作导出、场景内加载两部分,接下来分开介绍:雪碧图的制作导出:雪碧图的制作需要用到TexturePacker(免费版本就可以满足.原创 2020-06-23 16:21:57 · 3904 阅读 · 0 评论 -
babel日常使用指南
刚开始使用babel的时候,很多童鞋只是单纯跟着官网或则其他人的代码去安装一大堆bbabel相关的npm包,但是并不知道具体每个包都是什么样的作用,本文就是来阐述日常开发时用到的babel全家桶分别的作用、使用场景以及其原理。什么是babel首先来看一下babel是什么?Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of Ja.原创 2020-06-23 16:12:37 · 830 阅读 · 0 评论 -
performance.now() VS Date.now()
performance.now() VS Date.now()最近在研究THREE.js时,Clock方法的解释中有这么一段话: Object for keeping track of time. This uses performance.now() if it is available, otherwise it reverts to the less accurate Date....原创 2018-05-21 18:01:41 · 3573 阅读 · 0 评论 -
ES6学习之数组
扩展运算符定义 扩展运算符(spread)是三个点(…),作用是将一个数组转化为用逗号分隔的参数序列。 e: …[1, 2, 3] // 1 2 3 该运算符主要用于函数调用。应用1. 复制数组 不采用ES5的cancat()来合并数组,而是直接采用扩展运算符来做。 const a1 = [1...原创 2018-02-11 16:58:34 · 265 阅读 · 0 评论 -
算法之斐波那契数列
斐波那契数列概念斐波那契数列,又称黄金分割数列,指的是这样一个数列:0、1、1、2、3、5、8、13、21、34、……在数学上,斐波纳契数列主要考察递归的调用。 递归一般大家都会写出来的,但是凡事还是得多想个办法滴,就像平时开发时候,一种方法被否决是很正常的。 生成菲波那切数列的方法:fibo[i] = fibo[i-1]+fibo[i-2];js实现funct...原创 2017-07-07 00:11:07 · 476 阅读 · 0 评论 -
js继承之组合继承
组合继承(原型链+构造函数)概念组合继承就是将原型链和构造函数结合起来发挥二者优势的一种模式。其大体思路是:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承,很好地解决了原型链继承的缺点,是较为常用的一种继承方式。实现function SuperType(name){ this.name = name; this.colors = ['red', '原创 2017-07-07 11:19:17 · 307 阅读 · 0 评论 -
浅谈js继承之原型链继承
继承之原型链本文是简单来谈一下自己对原型链的理解,并且写个例子来巩固一下。概念继承是OO语言中一个重要的特性和概念。许多的OO语言中都支持两种继承方式:接口继承和实现继承。ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现。那么首先就先来讲讲原型链。原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾下构造函数、原型和实例的关系:每个构造函数或则函数都要一原创 2017-07-07 10:43:09 · 484 阅读 · 0 评论 -
js统计字符串中字符出现的个数以及最大个数
用js判断字符串中某字符出现的个数今天碰到的一道题,比较简单,为了防止眼高手低还是写一下吧<script> var testStr = 'aoifhoiwehfoiweiwadakl'; var i; var tempObj = {}; for (i = 0; i < testStr.length; i++) { var charAt = testSt原创 2017-07-05 23:45:17 · 7075 阅读 · 0 评论 -
js深浅拷贝
js深浅拷贝概念大家都知道js有基本类型和引用类型,当把对象赋给另一个对象的时候,修改被复制的对象的属性时,赋值的对象的属性也会被修改,这是因为对象存储的都是一块内存地址,也就是指向的都是同一内存,故修改时都会发生修改,直接来个事例代码。var age = 20;var b = a;b.age = 25;console.log(a.age); //25有了上面这个概念再来理解一下这两个概念:原创 2017-07-05 21:53:01 · 274 阅读 · 0 评论 -
vue-cli构建vue项目
最近开始学习vue2.0,先是过了一遍官网的文档,然后就想着去github上面找个大神的项目学习学习,下载下来vue2-happyfri-master,就是这个项目,大神做的给新手练手的,下下来各种不会打开,鼓捣了两个晚上才发现这个貌似使用vue-cli来生成的项目,然后将vue文件用webpack打包生成js,有时间还是的多用用这几个前端化的工具,最近多学学nodejs、webpack在博客更新转载 2017-03-14 22:34:17 · 238 阅读 · 0 评论 -
js数组去重
由于项目需要做了几个月的前端项目,但是以前没接触过,直接写项目有的小知识点不清楚还得经常查,万事开头难,慢慢来,故也想把小的知识点记录在这里,留给自己有时间翻翻。这个知识点就是indexOf(),开始时候一直以为这个方法知识用来判断字符串里面是否有给定的字符串,但是偶然看到竟然能跟在数组之后进行判断数组是否存在目标值,mark一下。下面是在数组去重的方法里面碰到的:利用indexOf方法;va原创 2017-03-08 23:07:43 · 183 阅读 · 0 评论