javascript
Bob丶抱抱
爱工作,爱生活
展开
-
算法系列--哈希表
哈希表哈希表(Hash Table,也叫散列表),是根据键(Key)而直接访问在内存存储位置的数据结构。也就是说,它通过计算一个关于键值的函数,将所需查询的数据映射到表中一个位置来访问记录,这加快了查找速度。这个映射函数称做哈希函数,存放记录的数组称做哈希表。经典例题遍历数组中每个元素,统计比它小的元素的个数leetcode 1365示例:nums[1,2,3,2,1,4], 每个元素小的数组[0,2,4,5], 所以返回[0,2,4,2,0,5]解题思路第一种思路,是排序后, 然后原创 2020-12-03 17:12:46 · 302 阅读 · 0 评论 -
算法系列--二分查找
二分查找是一种效率较高的查找方法,前提是数据结构必须先排好序,它的平均时间复杂度是O(logn)。碰到排好序的数组,第一时间应该想到用二分法求解。二分查找的递归与非递归实现在有序数组arr中,查找目标值value的元素下标// 递归function biSearch(arr, start, end, value) { if (start > end) return -1 let mid = Math.floor((start + end) / 2) if (arr[mid].原创 2020-11-12 16:48:17 · 213 阅读 · 0 评论 -
算法系列--排序
根据时间复杂度分类,常见的排序算法有:O(n^2): 冒泡、插入、选择;O(nlogn): 快排、归并;O(n): 桶、计数、基数;冒泡排序时间复杂度: 平均O(n^2)稳定性: 稳定// 普通版function bubbleSort(arr) { let n = arr.length for (let i = 0; i < n; i++) { for (let j = 0; j < n - i - 1; j++) { if (arr[j] &原创 2020-11-06 11:52:40 · 246 阅读 · 0 评论 -
算法系列--基础知识
基础定义数据结构与算法区别数据结构:一组数据的存储结构;算法:操作数据的一组方法;时间复杂度表示算法的执行时间与数据规模之间的增长关系;只关注循环执行次数最多的代码,这段代码执行次数 n 的量级;乘法法则:嵌套代码的复杂度等于嵌套内外代码复杂度的乘积;常见时间复杂度多项式量级:O(1), O(logn), O(n), O(nlogn), O(n^k)非多项式量级:O(2^n)、O(n!)空间复杂度表示算法的存储空间与数据规模之间的增长关系;常见空间复杂度O(1)原创 2020-10-26 17:44:48 · 106 阅读 · 0 评论 -
算法系列--递归
什么类型的问题适合递归求解一个问题可以分解为几个子问题;子问题与父问题求解方法一样;存在递归终止条件;如何编码递归问题写出递推公式;写出终止条件;翻译成代码;递归代码弊端及解决方法堆栈溢出:通过控制递归深度;重复计算:通过散列表存储计算值;函数调用耗时多:通过控制递归深度;空间复杂度高:转成非递归;经典习题LeetCode 70 爬楼梯:一次可以爬1层或者2层,问爬到n层有多少种方法;分析递推公式:爬到最后一层楼梯只有两种可能,从倒数第二层走一步,或者从倒数第原创 2020-10-23 18:47:58 · 163 阅读 · 0 评论 -
Hybrid通信原理--Jockey源码解析
1. Hybrid通信原理1.1 什么是Hybrid通信本文讲的Hybrid通信指的是:在Hybrid框架中,H5与Native之间的交互。交互包括两部分:H5访问Native,应用场景有设置导航栏,调用Native组件等;Native访问H5,应用场景有H5分享,执行H5回调等;1.2 H5与Native交互实现原理交互分成两中场景:H5访问NativeH5发送Schem...原创 2020-03-29 15:13:34 · 2025 阅读 · 0 评论 -
Vue源码解析--Virutal Dom
1.Virtual Dom是什么Virtual Dom, 又叫虚拟dom,本质是一个js对象,是用来描述一个dom节点信息。例如,一个普通的dom节点:<div class="wrap">i am text</div>它的virtual dom 是:const divVdom = { tag: 'div', attrs: { cl...原创 2020-03-29 00:49:16 · 271 阅读 · 1 评论 -
Javascript单元测试及接口测试
文章概要什么是单元测试为什么要做单元测试javascript测试框架对比koa2中如何使用ava做单元测试vue中如何使用ava做单元测试koa2中如何使用ava做接口测试单元测试是什么单元测试(unit testing)指的是以软件的单元(unit)为单位,对软件进行测试。单元可以是一个函数,也可以是一个模块或组件。它的基本特征就是,只要输入不变,必定返回同样的输出。单元测...原创 2018-09-30 16:15:25 · 4374 阅读 · 1 评论 -
JavaScript 工作原理(一)——内存管理与四种常见内存泄漏的处理方法
转载:JavaScript 工作原理(一)——内存管理与四种常见内存泄漏的处理方法 几周前,我们新开了一系列文章,旨在深入 JavaScript,探寻其工作原理。我们认为通过了解 JavaScript 的构建方式和其运行规则,我们能写出更好的代码和应用。第一篇文章重点介绍了引擎、运行时和调用栈的概述。第二篇文章仔细地分析了 Googl...转载 2018-10-22 18:43:22 · 160 阅读 · 0 评论 -
web 安全入门(一)
一、XSS1.1 定义XSS(Cross Site Scripting),即为跨站脚本攻击,恶意攻击者向web页面中植入恶意js代码,当用户浏览到该页时,植入的代码被执行,达到恶意攻击用户的目的。1.2 危害场景通过document.cookie盗取cookie使用js或css破坏页面正常的结构与样式流量劫持配合csrf攻击完成恶意请求…1.3 分类(1)反射型 XSS反...原创 2018-11-30 15:34:42 · 428 阅读 · 3 评论 -
如何在Node中充分利用cpu
1. 背景Node.js在官网上是这样定义的: “ 一个搭建在Chrome JavaScript运行时上的平台,用于构建高速、可伸缩的网络程序。Node.js采用的事件驱动、非阻塞I/O模型使它既轻量又高效,是构建运行在分布式设备上的数据密集型实时程序的完美选择。”用Node.js处理I/O密集型任务相当简单,只需要调用它准备好的异步非阻塞函数就行了。然而数据密集型实时(data-intens...原创 2018-12-28 16:51:59 · 1114 阅读 · 0 评论 -
Seneca:NodeJS 微服务框架入门(一)
Seneca是什么?(1)官网是这样介绍的:Seneca is a microservices toolkit for Node.js.It helps you write clean, organized code that you can scale and deploy at any time.大概意思是:Seneca是一个库,在Node平台上开发微服务时用的,它能够帮助开发人员...原创 2019-01-29 16:37:17 · 13588 阅读 · 0 评论 -
koa2源码解析一
占个坑,接下来要完成这篇文章~一、koa2是什么1.1 定义1.2 为什么要用koa21.3 怎么用koa2二、koa2实现了哪些重要功能2.1 启动http服务2.2 装载中间件2.3 错误异常处理2.4 重写request,response,上下文对象三、koa2源码实现细节3.1 起服务3.2 洋葱流程3.3 实例上挂载上下文对象四、koa2源码相关疑问4.1 ...原创 2019-02-28 20:54:37 · 364 阅读 · 0 评论 -
Javascript正则表达式--应用篇
在学习了上一篇正则语法篇,是不是迫不及待想知道正则如何在工作中应用呢? 应用1难度:**题目描述判断输入是否是正确的邮箱格式function isAvailableEmail(sEmail) {}给自己5分钟,尝试一下…解题思路: 1. 把一个正常的邮箱格式拆成4部分,分别定义正则难点: 1. 如何拆分邮箱格式答案:functio...原创 2018-07-31 18:31:02 · 336 阅读 · 0 评论 -
Javascript正则表达式--语法篇
使用正则的过程中可能对Js正则的语法记得不太牢,顺便也整理了一下,列在这里。 正则对象(1)构造函数方式var reg = new RegExp('abc', 'gi');第一个参数是正则的内容,第二个参数是修饰符,修饰符通常有三种,i,g,m,i表示的含义是忽略大小写进行匹配,g表示全局匹配即匹配到第一个之后不停止继续匹配,m表示多行匹配,更改^和$的含义,匹配任意一行...原创 2018-07-25 18:19:23 · 210 阅读 · 0 评论 -
2016 使用seajs时如何模块化jquery
【前言】最近接触 seajs ,遇到了下面问题: var $ = require('jquery'); // error:$为null【找原因】1. 调试了一下,发现jquery的路径没有问题,但是$却是null,初步判断require()这个函数没有理解清楚。2. 百度了一下,发现是seajs中 require() 的参数一定要是遵循cmd规范的文件, 而jquery正常原创 2016-03-04 16:19:02 · 3414 阅读 · 2 评论 -
JS窗口间通信--localStorage
【引言】我们知道浏览器有个同域限制,就是说出于安全考虑,浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。上篇提到html5新的api window.postMessage 可以解决这个问题;最近看到localStorage也可以实现,就做了个例子。【原理】浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变 sessionStorage 或 localStorage 的数据时,原创 2016-03-29 20:22:26 · 1099 阅读 · 0 评论 -
js窗口间通信--postMessage
why我们知道:浏览器限制不同窗口之间的通信,除非同一个域名下的网页。为了解决这一问题,HTML5新出了一个API window.postMessage, 实现了不同域名的窗口通信。whatMDN上webAPI语法: otherWindow.postMessage(message, targetOrigin);otherWindow: 其他窗口的一个引用,比如iframe的conten原创 2016-03-28 20:32:38 · 11747 阅读 · 4 评论 -
跨域通信--JSONP和CORS的node版
什么是跨域因为浏览器有个同源策略的限制,只要发送url请求的协议、域名、端口三者与当前页面(location.origin)的地址有一个不同, 即为跨域。 协议不同: http 和 https; 域名: 主域或者子域不同;跨域通信的两种方式JSONP因为浏览器对 script 标签没有同源限制,所以通过它来加载不同域下的数据。原创 2017-10-23 15:42:07 · 332 阅读 · 2 评论 -
js检查ie低版本浏览器,并跳转更新页面
引言现在我们用的一些主流前端框架,如vue, angular, react等对低版本的ie浏览器支持不好,一般指的是ie9以下的。如果低版本ie浏览器,打开我们的网站页面时, 我们希望给用户温馨的提示,去升级浏览器,而不是页面混乱,各种报错。 更新页面效果: 更新页面demo怎么做为了实现以上需求,我们分两步来完成。 1. 用 js 检查当前浏览器版本,如果是ie9以下,跳转原创 2017-11-13 17:48:13 · 6235 阅读 · 0 评论 -
前端自动化之Grunt
前端技术不断更新, 自动化工具也在迭代, grunt在一些项目中依然会用到。接下来主要分享下用grunt如何使用babel, 能够直接在前端写 es6 语法, 特别是如何能够使用 es6 中模块化语法import, export。如何配置grunt配置grunt特别简单,一个Gruntfile.js 配置文件,安装相应的包。 具体参见grunt官网入门:http://www.gruntjs.net原创 2017-12-28 14:33:25 · 428 阅读 · 0 评论 -
JS 遍历数组,遍历对象遇到的坑
最近在项目中发现了一些遍历数组,对象时遇到的坑,一起来看看.. **一、遍历数组**(1) forEach 不能跳出循环 (return, break, continue失效)var arr = [1,2,3];arr.forEach(i => { console.log(i); if (i === 2) return;});// 输出结果:// 1// 2// 3当时我就懵了原创 2017-08-22 19:50:31 · 3976 阅读 · 1 评论 -
Angualar 1 自定义指令的使用--消息框
最近,维护一个Angular 1项目,在用过vue中element-ui后, 想自己也写一些类似组件;同时对比下angular的指令,与vue的单文件组件的用法。 今天的主题就是编写一个消息框 messageBox. 如何开始构思组件(1)组件的结构(html)分析消息框组件的结构,首先想到的是,头部(标题+关闭按钮), 主体(提示内容),底部(取消,确认按钮);后来考虑原创 2018-01-29 20:45:51 · 524 阅读 · 0 评论 -
零配置打包工具Parcel 快速入门 -- vue示例
新的打包工具parcel,号称零配置,开箱即用,今天迫不及待入手看看~ 以vue作为示例: demo 目录结构src├── App.vue├── index.js├── router.js└── components├── ├── Home.vue├── └── ....babelrcindex.htmlpackage.jsonreadme.md(1)创...原创 2018-02-27 22:06:36 · 676 阅读 · 0 评论 -
webpack构建优化实战
背景随着项目的推移, 第三库使用数量增加,业务代码更是成倍增加,不知不觉发现webpack构建速度却越来越慢,从当初的30s,变成5分钟以上。 与此同时,一个同学的项目也遇到了打包慢的问题。 于是下定决心,花两周潜心研究下如何提升webpack构建性能。初步成果两周后,收获满满的。初步战果如下: (1) 自己的项目: vue2(全家桶)+element-ui+axios+echa...原创 2018-03-30 20:20:52 · 1047 阅读 · 1 评论 -
Javascript 遍历中异步操作
引言JS遍历中异步操作,指的是JS循环遍历中,每一次循环都有异步操作。 如经典的闭包应用,每次循环, 在异步操作中输出索引。for (var i = 0; i < 3; i++) { setTimeout(() => { console.log('i', i); }, 10);}// i 3// i 3// i 3结果发现,每次输出的都是3,并不是...原创 2018-05-03 17:43:01 · 4200 阅读 · 0 评论 -
es6 类class入门
什么是类? 类是面向对象程序设计中的概念,是面向对象编程的基础。 - - 百度百科简单介绍下,面向对象编程中几个基本概念:(1)对象一切事物皆为对象,生活中看到的,听到的,闻到的等东西都是对象。准确的说, 对象是一个自包含的实体,用一组可识别的特性和行为来标识。(2)类定义: 类是对现实生活中一类具有共同特征的事物的抽象, 换句话说,类就是具有相同属性和功能的对...原创 2018-05-31 20:45:05 · 292 阅读 · 1 评论