- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue3与2是如何监测数组变化的
前言Vue3.x已经发布一段时间了，更新内容也是比较多的，但是比较让我感兴趣的还是如何对Vue2无法直接监测数组变化的优化，今天抽时间来简单看一下实现原理。一、Vue2为什么不能监测数组的变化首先从表象上来看，Vue2对数组的响应式实现是有些不足的：无法监测数组的新增无法监测用索引改变数组的操作先来简单分析下为什么会存在上述问题：我们知道Vue2是通过Object.defineProperty方法来进行数据监测的，但是这个方法是无法监测到数据的变化吗？其实并不是，我们来看下下面的例子：.
2021-02-22 18:30:19
2608
原创 初探Vite
Next Generation Frontend Tooling概述最近Vite可能算是比较火的一个话题，尤其是随着2.0版本的正式发布之后，各个公众号都在头部推荐，似乎是可以给前端童鞋开发效率带来巨大变革的样子，因此今天抽时间撸一遍看看，毕竟还是要紧跟时代潮流的。Why Vite官方文档开头第一部分就是介绍为什么要有Vite这个工具，其实这也是大家关心的点，前端构建编译工具经过几年的发展从最开始的gulp、grunt一直到现在的webpack，看起来现在已经是webpack一家独大的局面了，..
2021-02-20 17:29:48
1619
4
原创 Android中android.os.NetworkOnMainThreadException异常问题
Android开发中遇到了android.os.NetworkOnMainThreadException报错，由于刚开始接触并不熟悉所以走了写弯路，在此记录下问题。官方解释是从SDK3.0开始，Google不再允许网络请求（HTTP、Socket）等相关操作直接在主线程中，会阻塞主线程，用户体验不好，因此此类操作应该是在子线程去开启，当然解决方法也有很多种，在这里只记录下个人认为比较好的方式：开启子线程来完成网络操作new Thread(networkTask).start();Runnabl
2020-10-10 19:37:44
1856
原创 Android中JSONArray如何转换成List以及Attempt to invoke interface method报错
安卓开发，调试运行中报错：Attempt to invoke interface method ‘boolean java.util.List.add(java.lang.Object)’ on a null object reference原因是你定义了 List lists;但并没有初始化，应该这样写：List lists = new ArrayList<>();JSONArray data = configData.optJSONArray("data");List<St
2020-10-10 19:25:06
382
原创 记Android开发时URL参数的截取工具方法
最近在学习Android（安卓）开发遇到一个解析URL参数的情况，很简单的工具方法，记录一下，之后需要的时候可以直接拿出来用。具体思路如下：截取?之后的字符串用&符号分成数组用=号分成key-value加入Map中之后直接从Map内部去取就可以了/*** * 获取url Map;
2020-10-10 19:17:40
846
原创 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
253
原创 Vue 虚拟节点及diff算法详解
Vue进入2.0以来在其内部加入了虚拟dom的实现，减少了dom的操作，极大提高了性能，同时其diff算法的时间复杂度为O(n)，性能很高。虚拟dom首先我们来看下什么是虚拟DOM（virtual DOM ），虚拟DOM就是提通过js生成一个dom对象，之后通过diff算法比较之后生成patch，即补丁，之后虚拟dom通过补丁更新，再渲染成真实DOM显示出来，可以看到只涉及到了一次DOM操作，效率、性能无疑很高。具体实现步骤：初始化时创建虚拟dom树将虚拟dom render成实体dom，显示出
2020-07-09 21:47:24
1563
原创 nodejs命令行工具的开发
命令行工具的开发应该是每个前端工程师必备的技能，但是有很多同学刚开始学习时不知道如何入手，今天就来简单介绍一下如何用commander来开发命令行工具。初始化首先cd进入某个文件夹，运行npm init，根据提示信息来生成package.json文件；之后在同级目录下创建bin/test1.js文件；接着在package.json中增加bin字段："bin": { "test1": "./bin/test1.js" },我们在写命令行工具的时候，需要指定一个可执行文.
2020-06-24 15:52:09
696
原创 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
537
原创 如何开发一个简单交互式命令行工具
本文主要来实现实现一个从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
1694
原创 PIXIJS性能优化之图集加载
介绍使用pixi去开发一个稍微复杂的项目的时候就会涉及到各种类型的图片加载成为纹理，之后GPU去渲染，但是在图片数量较多但尺寸较小时，分开去加载还是比较消耗性能的，因为浏览器的并行下载都是有限制的，下载图片的时候可能就会影响到首页的接口请求速度以及其他更重要的UI渲染速度，因此建议当首次加载有此类情况的时候最好去使用图集的方式来实现。如何实现纹理图集的实现分为雪碧图的制作导出、场景内加载两部分，接下来分开介绍：雪碧图的制作导出：雪碧图的制作需要用到TexturePacker(免费版本就可以满足.
2020-06-23 16:21:57
4110
原创 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
878
原创 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
3651
原创 ES6学习之数组
扩展运算符定义 扩展运算符（spread）是三个点（…），作用是将一个数组转化为用逗号分隔的参数序列。 e: …[1, 2, 3] // 1 2 3 该运算符主要用于函数调用。应用1. 复制数组 不采用ES5的cancat()来合并数组，而是直接采用扩展运算符来做。 const a1 = [1...
2018-02-11 16:58:34
286
原创 web前端面试题集锦（转）
web前端面试题集锦伪类和伪元素的区别 CSS 伪类用于向某些选择器添加特殊的效果（active、docus、hover、link、visited、lang等）。 CSS 伪元素用于将特殊的效果添加到某些选择器（first-letter、first-line、before、after）。 link 和@import 的区别是? （1）、link属于XHTML标签，而@impor...
2018-02-11 16:03:39
4000
原创 ES6学习之promise对象
ES6-Promise[TOC] 本文用来记录一下学习ES6的promise对象，方便用的时候直接找到。-promise含义 - promise基本用法 - promise基本用法实例 - promise APIpromise含义 ES6原生提供了promise对象，该对象就是一容器，内部包含有未来某个时间结束的动作。promise基本用法ES6 规定，Promise对象是一个构造函数，用
2017-10-09 18:14:58
409
原创 移动端一像素边框
移动端一像素边框由于手机屏幕dpi（设备像素比）[关于dpi内容可点击这里](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)的不同，正常的一像素在手机端显示出来的就不是所谓的一像素，而是根据不同手机屏幕的ｄｐｉ显示不同的像素，但是一像素边框又是一个很常见的需求，故这里mark一下所谓的一像素边框。可将下面代
2017-07-31 00:56:15
493
原创 图标字体的制作
图标字体的制作在前端中制作图标字体是一个较为普遍的工作，正好最近写一个新项目练一下Ｖｕｅ，把项目中用到的一些技术梳理记录一下。１.首先使用的是iconmoon app这个网站，登陆进去。 2.点击ｉｃｏＭｏｏｎ进入，点击import,导入ｓｖｇ图 ３.选择生成的图标，点击右下角generate fonts, ４.点击ｐｒｅｆｅｒｅｎｃｅｓ可以修改相关的配置，在点击右下角下载，就可
2017-07-24 00:31:48
405
转载 http协议
HTTP简介HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于199
2017-07-11 00:20:00
251
原创 从输入URL到显示页面，发生了什么？
从输入URL到显示页面，发生了什么？正如文中开头写的，当我们在地址栏输入URL之后，浏览器会发生一系列的行为，但是我们根本看不到，所以导致对许多内部原理不清楚，作为一个迈向geek程序员的路上还是要知其然知其所以然的，凡事还是要弄懂原理，这样会对自己有一个较大的提升，希望大家共勉。好了，闲话不多说，开始上干货了：（由于其中涉及到许多复杂知识，单列出来都能说好多，暂时只说一个大概的框架，不考虑很多复
2017-07-07 14:11:41
521
原创 js继承之组合继承
组合继承（原型链+构造函数）概念组合继承就是将原型链和构造函数结合起来发挥二者优势的一种模式。其大体思路是：使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，很好地解决了原型链继承的缺点，是较为常用的一种继承方式。实现function SuperType(name){ this.name = name; this.colors = ['red', '
2017-07-07 11:19:17
336
原创 浅谈js继承之原型链继承
继承之原型链本文是简单来谈一下自己对原型链的理解，并且写个例子来巩固一下。概念继承是OO语言中一个重要的特性和概念。许多的OO语言中都支持两种继承方式：接口继承和实现继承。ECMAScript只支持实现继承，其实现继承主要是靠原型链来实现。那么首先就先来讲讲原型链。原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾下构造函数、原型和实例的关系：每个构造函数或则函数都要一
2017-07-07 10:43:09
510
原创 算法之取最大差值
数组取最大差值假定有一个数组，找到数组中的最大差值。var arrTest = [10,5,11,7,8,9,2,1];－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－－－－说一下自己的思路： 求最大差值，应该是找出最大值和最小值，然后取差值，个人感觉还可以结合冒泡来用，冒泡得到的数组第一个和最后一个相减得到最大差值。顺便复习一下冒泡。 var bub...
2017-07-07 00:38:49
1946
原创 算法之斐波那契数列
斐波那契数列概念斐波那契数列，又称黄金分割数列，指的是这样一个数列：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
509
原创 设计模式之策略模式
策略模式研究angularjs源码时候发现provider是策略模式和工程模式的混合，但是策略模式印象不是很深刻了，再翻出来看看写写吧。有爱看源码的小伙伴可以一起交流啊。概念定义一系列算法，把他们一个一个封装起来，并且使他们可以相互替换(具有相同的目标和意图)接口与实现分离优点: 1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句 2...
2017-07-07 00:00:12
304
原创 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
7105
原创 js深浅拷贝
js深浅拷贝概念大家都知道js有基本类型和引用类型，当把对象赋给另一个对象的时候，修改被复制的对象的属性时，赋值的对象的属性也会被修改，这是因为对象存储的都是一块内存地址，也就是指向的都是同一内存，故修改时都会发生修改，直接来个事例代码。var age = 20;var b = a;b.age = 25;console.log(a.age); //25有了上面这个概念再来理解一下这两个概念：
2017-07-05 21:53:01
297
原创 算法之JS冒泡排序
JS冒泡排序原理 依次比较相邻的两个值，如果后面的比前面的小，则将小的元素排到前面。依照这个规则进行多次并且递减的迭代，直到顺序正确。 时间复杂度，空间复杂度，稳定性平均时间复杂度O(n*n) 最好情况O(n) 最差情况O(n*n) 空间复杂度O(1) 稳定性：稳定JS冒泡的写法function sort(array) { for(var i = 0; ...
2017-07-05 20:43:32
303
转载 vue-cli构建vue项目
最近开始学习vue2.0,先是过了一遍官网的文档，然后就想着去github上面找个大神的项目学习学习，下载下来vue2-happyfri-master，就是这个项目，大神做的给新手练手的，下下来各种不会打开，鼓捣了两个晚上才发现这个貌似使用vue-cli来生成的项目，然后将vue文件用webpack打包生成js，有时间还是的多用用这几个前端化的工具，最近多学学nodejs、webpack在博客更新
2017-03-14 22:34:17
264
原创 js数组去重
由于项目需要做了几个月的前端项目，但是以前没接触过，直接写项目有的小知识点不清楚还得经常查，万事开头难，慢慢来，故也想把小的知识点记录在这里，留给自己有时间翻翻。这个知识点就是indexOf(),开始时候一直以为这个方法知识用来判断字符串里面是否有给定的字符串，但是偶然看到竟然能跟在数组之后进行判断数组是否存在目标值，mark一下。下面是在数组去重的方法里面碰到的：利用indexOf方法；va
2017-03-08 23:07:43
213
原创 js动态添加svg
js动态添加svg今天在做一个基于bpmnjs的项目时候，想在任务节点内部的<text>标签对中添加一个<tspan>显示出来，即给任务节点添加名字。刚开始时是用jQuery找到text,然后直接append，加入自己要加的内容进去，但是发现虽然加进去了，但是在页面部分不显示，纠结好久，试了许多方法，最后终于发现错误。我是在svg标签里面加内容展示，但是却在内部加的是html的标签对，所以导致不显
2017-03-08 22:35:39
2754
互联网安全现状调研模板
2018-08-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人