JavaScript
关注
分享
扫一扫
文章平均质量分 53
前端小黑
never give up never give in
展开
-
Electron开发笔记----前端小白开发桌面应用之路（四）桌面应用中的跳转
桌面应用中跳转浏览器链接在桌面应用中，我们打开一个链接，有几种不同的情况1. 直接在应用中跳转到该链接地址当我们在Electron.js写的桌面应用中写入一个a标签来做跳转时，如下<a href="https://www.baidu.com">跳转</a>点击这个跳转时，会发现并不是在浏览器中实现跳转，而是在electron应用中打开了这个页面，如下图2. 在浏览器中打开链接地址我们有时需要通过浏览器去打开一个链接，像vscode里面，就有当我们写的是一个页面的地址原创 2020-08-16 13:36:19 · 2709 阅读 · 0 评论 -
Electron开发笔记----前端小白开发桌面应用之路（三）顶部菜单和右键菜单的创建
顶部菜单的编辑桌面应用的菜单是我们很常用的一个功能，大到各种应用，小到一个小小的记事本，都有自己的菜单，那么接下来就看看如何实现一个菜单传入模板生成菜单Electron提供了一个模块Menu来实现菜单功能，我们直接通过一个demo来演示首先创建如图的目录这里menu文件夹下的menu.js是用来写菜单的信息，包括菜单的内容，以及菜单的点击事件触发的回调，这里实际上是在主进程中调用的，但是为了可以区分功能和复用，我写在menu.js中，并在主进程中require它主进程index.jscon原创 2020-08-01 13:46:19 · 1133 阅读 · 0 评论 -
Electron开发笔记----前端小白开发桌面应用之路（二）文件的读写和新窗口的创建
在本系列的上一篇文章中，我们谈到了如何去搭建一个简单的hello wordl桌面应用，那么这篇文章，来谈谈几个我们在桌面应用中常用的功能文件的读写对于一个桌面应用来说，很多信息都会保存在本地的文件，在我们使用该应用时，读取本地对应的文件，去显示不同的内容这类似于我们在使用web端时，需要去从服务端读取我们想要的配置文件等信息，将信息以各种形式渲染到页面上。对于桌面应用来说，设置一般都是保存在本地的，我们可以将桌面应用读取本地的文件，和web端发起请求的行为对比，其实原理都是一样的。而这里的读写，我们原创 2020-07-29 11:08:20 · 1228 阅读 · 0 评论 -
从node.js的文件监听到webpack的热编译实现
我们知道，webpack可以通过配置实现热更新，让我们在编写代码时不需要手动去执行一些编译命令，而是在保存的时候就可以自动更新视图，那么这些功能是怎么做到的呢首先，我们分解一下要做的事情，我们需要去监听文件的更新，当文件更新时，去修改对应的视图部分，那么，我们先看看如何去监听文件的更新node.js实现监听文件更新使用node.js实现监听文件更新，既然是和文件有关，那么盲猜fs中可能有相关的API。对于文件的监听，fs提供了两个API，watch和watchFile，这两个API最简单的区别，在于原创 2020-05-27 15:36:27 · 772 阅读 · 2 评论 -
透过V8深入理解JavaScript的函数
函数什么是函数在JavaScript中，函数其实也是一个对象，所以函数也可以有自己的属性和值，它与对象不同的地方在于，它可以被执行，执行时会创建函数作用域。V8如何去执行函数我们知道，在执行函数的时候，我们只需要在函数名后面，加上一个括号，在括号里传入参数，就可以执行这个函数了，但是，V8是怎么做到执行这个函数的，V8如何找到这个函数的相关代码既然函数是一个对象，那么它就有自己的属性，除了我们给它添加的属性，函数本身有两个属性，分别是name和code。name属性存储着函数的名字，而code以原创 2020-05-18 12:12:35 · 663 阅读 · 0 评论 -
透过V8深入理解JavaScript的对象
我们知道，V8是Chrome用来编译执行JavaScript的JavaScript引擎，所以如果我们要了解JavaScript，那么结合V8能让我们更好地理解，这篇博客将结合V8，来谈谈JavaScript种的对象对象什么是JavaScript的对象什么是JavaScript的对象， JavaScript中的对象，并不是单单指Object，JavaScript这门语言本身，是基于对象的，可以说，JavaScript里面的大部分内容，都是由对象构成的。比如函数，数组，这些都是由对象构成的，甚至一些基本类原创 2020-05-15 19:27:32 · 674 阅读 · 0 评论 -
从V8来谈谈JavaScript代码的执行
我们知道，V8引擎是Google开发的开源JavaScript引擎，目前用在Chrome浏览器和Node.js中，核心功能是将JavaScript解析成机器能理解的机器码，供机器执行。什么是V8我们可以把V8看成一个虚拟机，其通过模拟实际计算机的各种功能来实现代码的执行，如模拟计算机的CPU，堆栈，寄存器等，此外，虚拟机还有自己的一套指令系统有这样的虚拟机带来的好处是，只要我们按照虚拟机的规范去编写代码，那么即使我们在不同的操作系统，相同的代码执行出来的结果也能是相同的。可能Java虚拟机大家也都听过原创 2020-05-15 19:10:28 · 806 阅读 · 0 评论 -
在两场vue conf后谈谈vue3.0要更新的内容相关笔记
从去年就一直说的沸沸扬扬的vue3.0发布，虽然到现在还没有正式发布的事件，但做为前端开发，我们还是要去了解的，那么vue3.0会更新什么内容呢，早在2018年11月尤大就在远程演讲中说到了，vue3.0会带来更快更小更易于维护更好的多端渲染支持新功能（新的API）下面就这些内容来说一下vue3.0的更新，这些内容基本上都是我在看了2018年和2019年的中国Vue conf视频后...原创 2020-03-18 16:06:34 · 626 阅读 · 0 评论 -
减少回流重绘的方法及相关的性能测试(performance)结果分析
回流必将引起重绘，而重绘不一定引起回流我们经常会看到上面这句话，那么回流和重绘是什么呢回流计算DOM节点在设备视口(viewport)内的确切位置和大小的过程，会在页面节点的几何属性或者布局发生变化时发生的发生回流的情况添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）内容发生变化，比如文本变化或图片被另一个不同尺寸的图片...原创 2020-03-05 17:32:57 · 876 阅读 · 0 评论 -
前端面试题 ES5-ES6 function-class实现类的区别记录详解
在ES5中，我们是通过function来实现类和类的继承，而在ES6中，我们多了class这个语法糖，除了看起来更像一个类外，在很多方面class做到了比function更加严格1. 写法上在ES5中，我们是通过prototype和Object.create()来实现类和继承function Person(){}function Student(){}Student.prototype ...原创 2020-03-02 17:28:39 · 1394 阅读 · 0 评论 -
JavaScript实现类 公有方法 私有方法 静态方法
在面向对象语言诸如java中，我们经常能看到class也就是类，而在JavaScript中，我们也可以实现类ES6之前的实现要通过JavaScript实现一个类，可以通过this的指向来实现function Person(name,age){ this.name = name this.age = age}var p = new Person('Bob',18)这...原创 2020-02-28 19:14:19 · 2039 阅读 · 0 评论 -
详谈JavaScript内存泄漏和底层垃圾回收机制
内存泄漏定义我们知道，程序的运行需要操作系统或者运行时提供内存，而对于持续运行的程序，内存会被持续占用，适时地回收当前不执行的程序占用的内存是很重要的，没有及时地回收内存，轻则造成系统性能变差，重则进程崩溃那么，什么是内存泄漏呢，简单来说，内存中的某个空间被占用，在应当回收的时间没有被回收，就算是内存泄漏了有些语言需要自己手动去清除占用内存而又没有在执行的程序，而像JavaScript这...原创 2020-02-19 17:45:16 · 448 阅读 · 0 评论 -
canvas+js绘制简单能力图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-30 17:45:45 · 1070 阅读 · 0 评论 -
手动实现vue v-指令编译，双向绑定功能的详细步骤
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model在vue中，MVVM的体现就是双向数据绑定，而双向的数据绑定又是我们面试中...原创 2020-01-29 18:56:36 · 1155 阅读 · 0 评论 -
JavaScript文档碎片的使用
JavaScript中，文档碎片独立于DOM树之外，存在于内存中，在创建之初为一个空白的文档片段，我们可以使用createDocumentFragment来创建let fragment = document.createDocumentFragment();对文档碎片的操作，包括插入节点，删除节点的API都和其他DOM元素相同，但是也存在一些不同将DOM树中的元素插入到文档碎片中的时候，...原创 2020-01-27 12:57:21 · 2350 阅读 · 2 评论 -
LeetCode 90. 子集 II JavaScript实现
题目给定一个可能包含重复元素的整数数组 nums，返回该数组所有可能的子集（幂集）。说明：解集不能包含重复的子集。示例:输入: [1,2,2]输出:[[2],[1],[1,2,2],[2,2],[1,2],[]]来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/subsets-ii著作权归领扣网络所有。商业转载请联...原创 2020-01-25 22:45:29 · 335 阅读 · 0 评论 -
LeetCode 75. 颜色分类 javascript实现
题目给定一个包含红色、白色和蓝色，一共 n 个元素的数组，原地对它们进行排序，使得相同颜色的元素相邻，并按照红色、白色、蓝色顺序排列。此题中，我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。注意:不能使用代码库中的排序函数来解决这道题。示例:输入: [2,0,2,1,1,0]输出: [0,0,1,1,2,2]进阶：一个直观的解决方案是使用计数排序的两趟扫描算法。首先，...原创 2020-01-25 22:11:16 · 499 阅读 · 0 评论 -
ES7、ES8，ES9、ES10新特性笔记整理
JavaScript到现在更新了很多次，最大的一次变动是ES6，也因此我们经常会在面试的时候看到需要掌握ES6，而实际上，ES6已经是2015年的事情了，现在已经到了ES2019即是ES10，即将ES2020就出来了，所以有必要将这些内容整理一下了ES71. 求幂运算符（**）求幂运算符功能与Math.pow()功能一样，但写起来更为便捷2. Array.prototype.includ...原创 2020-01-20 17:42:43 · 693 阅读 · 0 评论 -
JavaScript BigInt类型笔记整理
BigInt在ES10之前，JavaScript已经有6种基本类型了，而ES10带来了第七种数据类型BigInt在MDN上看到关于BigInt的描述BigInt is a built-in object that provides a way to represent whole numbers larger than 2**53 - 1, which is the largest num...原创 2020-01-20 16:27:07 · 1464 阅读 · 0 评论 -
javascript回调地狱
回调地狱要了解回调地狱，我们首先需要知道回调函数是什么，在我们平时的代码中，经常出现很多将函数作为参数，传入到方法中，然后在方法中调用该方法，常见的就是定时器，各种DOM操作，各种异步请求在使用这些回调函数的时候，我们有时会在一个回调函数中，再传入一个函数，然后在里面，又传入一个，这样一层层的回调，最终就会形成回调地狱实际上，回调地狱只是我们在使用回调幻术时一种不好的编码习惯，这种习惯导致代...原创 2020-01-06 18:41:11 · 913 阅读 · 1 评论 -
函数柯里化
函数柯里化函数柯里化有三个特点，参数复用，提前返回，延迟执行，它实际上只是一种思想，没有固定的写法参数复用参数复用，简单来说，就是将多个参数变成一个参数，这么做的形式有很多种，下面举个例子function add(...rest){ let sum = 0; for(let i =0;i<rest.length;i++){ sum+=rest[i];...原创 2019-12-06 14:52:30 · 282 阅读 · 1 评论 -
Vue双向绑定原理 从vue2的Object.defineProperty到vue3的proxy
在网上查找资料的时候，看到很多关于Vue双向绑定的文章都直接说是通过Object.defineProperty实现的，但我隐约记得去年看过尤大的视频，记得好像是用proxy实现的，所以又好好找了一下，果然，在vue3.0中，已经改用proxy实现了双向绑定的简单思路在谈论vue2和vue3中各自的双向绑定形式前，我们先了解一下基本的思路要做到双向绑定，即是在我们修改数据时，视图发生变化，而...原创 2019-12-05 16:15:29 · 2129 阅读 · 0 评论 -
详解JavaScript异步执行顺序
JavaScript中，一般代码都是自上而下执行，但有了异步，就不一定是自上而下，我们需要从底层的执行去理解执行的顺序原创 2019-11-30 19:56:56 · 1559 阅读 · 0 评论 -
axios原理深入源码解析
对于我们来说，发起请求有很多种方法ajaxaxiosaxios的github地址上明确写了axios的特征是Make XMLHttpRequests from the browser（从浏览器发起XMLHttpRequests请求）Make http requests from node.js（从node.js发起http请求）Supports the Promise API（支持...原创 2019-11-26 17:31:59 · 1330 阅读 · 0 评论 -
axios请求取消步骤源码详解
请求取消，往往使用在当网络较慢，用户在等待当前请求时转而去点了其他请求，且这两个请求是会相互影响时，我们会将当前请求取消，axios提供了请求取消的接口，在github上官方给出了两种实现请求取消的用法const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get('/user/1234...原创 2019-11-26 14:37:51 · 1031 阅读 · 0 评论 -
使用node serve-static快速搭建测试请求服务器
做了好多次项目，一直都是自己前端把请求和渲染都写好了，但是后端要等到很久才能写好，所以自己搭了个node服务器来测试自己的请求渲染是否有问题，每次vue打包完就把打包后的文件扔到这个服务器下因为只是测试用的，所以我做的很简单，只是匹配前端发送来的数据然后返回一些静态数据以供看渲染效果看完整代码请直接滑到底部使用serve-static搭建静态服务器serve-static可以快速搭建静态服...原创 2019-11-22 10:29:28 · 3331 阅读 · 0 评论 -
pwa学习整理 使用notification做桌面离线在线提示
notification在之前的博客中，我们已经做到了可以在离线的时候访问缓存的资源，这样做的目的是给用户带来更好的体验，但是，一般的用户并不知道他们现在访问的到底是缓存的资源还是最新的通过网络请求到的资源，这反而会给用户带来不好的体验，为了解决这个问题，我们采用notification来解决这个问题首先我们要了解notification是什么notification是用来配置和显示桌面的通...原创 2019-11-10 19:50:54 · 603 阅读 · 0 评论 -
pwa学习整理 使用cacheStorage在离线时访问缓存资源
cacheStorage在pwa中，我们要实现访问一个断网的页面，显示上一次的数据的功能，就必须将上一次的数据存储到缓存中，具体的就是存储到cacheStorage中。使用一个在service worker中使用cacheStorage的例子来讲述缓存的过程初始化各文件首先建立目录如下<!-- index.html --><!DOCTYPE html>&...原创 2019-11-10 19:49:50 · 1222 阅读 · 1 评论 -
pwa学习整理 fetchAPI
fetch因为在service worker，web worker中，无法使用XMLHttpRequest，所以我们要采用别的方法来发起请求Fetch API提供了一个全局fetch方法，作为一个HTTP异步请求方式，通过返回一个promise来处理返回的内容。举例：使用fetch访问同一目录下的manifest.jsonfetch('/manifest.json') .then...原创 2019-11-10 19:48:13 · 473 阅读 · 0 评论 -
pwa学习整理 service worker
Service WorkerService Worker本质上是一个与JavaScript线程分离的单独js文件，可以拦截网络请求，缓存资源或从缓存中检索资源，传递推送信息。与Web Worker不同，Service Worker是长期存在的，而Web Worker是临时的，计算的数据并不能保存起来。Service只能在HTTPS或者http://localhost下运行，前者是为了保证安全...原创 2019-11-10 19:46:05 · 536 阅读 · 0 评论 -
pwa学习整理 manifest的配置
mainfestmanifest作为渐进式Web应用程序pwa中的一个核心技术，通过manifest.json来配置，实现了将Web应用程序添加到设备的主屏幕，为用户提供更快的访问和更丰富的体验。更快体现在放在主屏幕，而更丰富体现在在打开添加到主屏幕的一个缓冲界面及一个自定义的图标。部署manifest部署manifest非常容易，首先我们新建一个文件夹，在该文件夹中创建如下目录in...原创 2019-11-10 19:44:51 · 1945 阅读 · 4 评论 -
Web Worker的使用
Web Worker在JavaScript中，因为是单线程执行，所以如果在执行过程中遇到一个运算量很大的代码块时，就可能会出现阻塞代码的情况。为了解决这个问题，我们可以采用异步来实现这部分代码，此外，也可以采用Web Worker来解决这个问题。Web Worker通过将代码放在后台来实现，避免了阻塞的问题。浏览器实现Web Worker的形式很多，如多线程，后台进程或运行在其他处理器核心上的...原创 2019-10-27 15:47:53 · 732 阅读 · 0 评论 -
跨域问题的解决与具体实现
为什么会有跨域跨域指的是当两个url的协议，域名，端口三者有一个不同，就会发送跨域。之所以会有跨域，是因为浏览器的同源策略限制。跨域的解决方法jsonpjsonp简单来说就是通过在html中插入一个script标签，利用其src属性来发起请求，通过在src中为callback添加对应的回调函数来达到对响应数据进行处理的目的如下例子发起请求的客户端<!DOCTYPE html&...原创 2019-10-26 19:27:49 · 953 阅读 · 1 评论 -
浏览器存储对象使用与对比
在浏览器中，我们常见到的存储对象，分别有localStorage，sessionStorage，cookie。这三者同样能在浏览器中存储数据，但是也存在着各自的特点，在不同的场景中运用。首先是localStorage和sessionStorage，这两者比较相近通用的APIlocalStorage和sessionStorage有很多通用的API以localStorage为例setIte...原创 2019-10-26 19:24:52 · 795 阅读 · 0 评论 -
javascript同时触发多个keydown事件使浮动元素移动
之前在写坦克大战时就遇到一个问题，在移动坦克的同时还要发射炮弹。这个时候如果使用onkeydow事件的话，就会在发射炮弹时停止移动，没法同时触发两个keydown事件，为了解决这个问题，我通过在声明多个对象来记录按键的状态。以移动为例子，假如要通过方向来移动某个在浏览器上的元素，首先给这个元素浮动（在使用canvas画布之类的可以使用里面的API改变元素的位置，这里通过将元素浮动来举例子）...原创 2018-11-28 21:53:33 · 1909 阅读 · 0 评论 -
JavaScript console API小整理
在开发项目的时候在控制台调试时看到console对象有很多个方法，但平时也就用console.log而已，为了了解一下这个对象的各种方法，我上网找了些资料最后整理了出来。打印信息平时在控制台调试和在js中打印出某一部内容时，我都是直接用的console.log，但是其实打印这些内容有几个方法console.log('log')console.info('info')conso...原创 2018-11-19 18:00:52 · 413 阅读 · 0 评论 -
JavaScript解析url参数
最近在写个需要分页数的网页，觉得要每页写对应页数的内容太麻烦，想通过向后台传入不同的参数以获取不同的数据，翻了翻书最后用url的参数传给后台，顺便写了这篇博客。https://www.baidu.com/s?wd=123&rsv_spt=1&rsv_iqid=0x9eaca8490005e3f5&issp=1&f=3&rsv_bp=0&rsv_i...原创 2018-11-03 20:58:49 · 1488 阅读 · 0 评论 -
理解掌握JavaScript的this的指向
学了JavaScript将近一年了，对于this的掌握却还是不太熟悉，甚至有时候都不知道它到底指向哪里，在看了《你不知道的JavaScript上》中关于this的指向的解析，对this的指向认识清晰了不少，接着又在网上查阅了一些资料，写下这篇博客来分享我对this的指向的理解。如果有什么不对请各位大佬指出我的错误。在此之前我对this的理解是函数作用域中指向该函数，在对象中使用就指向该对象，但...原创 2019-01-26 21:42:54 · 390 阅读 · 0 评论 -
JavaScript辨别apply,call,bind 用法与性能
在JavaScript中，我们经常使用apply，call，bind来绑定this的指向，这是this绑定中的硬绑定，即绑定后无法修改。（下面有些代码会涉及this绑定的内容，有关this绑定的内容可以看看我的另一篇博客-->理解掌握JavaScript的this的指向）首先我们看看下面的代码function fn(num1, num2, num3) { console.l...原创 2019-01-30 01:11:30 · 453 阅读 · 0 评论 -
JavaScript正则表达式基础
正则表达式在匹配字符串上十分实用，这里就简单写出在JavaScript中的正则表达式实用基础。首先介绍一下JavaScript中测试正则表达式是否匹配的方法test，该方法传入要匹配的字符串，如果匹配成功返回true，失败返回false。下面都会用这个方法来测试正则表达式的匹配。/a/.test('a');// true正则表达式的创建可以实用字面量直接创建，也可以用构造函数创...原创 2019-02-22 19:15:59 · 283 阅读 · 0 评论