javascript
文章平均质量分 51
K3v
这个作者很懒,什么都没留下…
展开
-
合并两个有序数组
【代码】合并两个有序数组。原创 2024-05-04 17:28:49 · 114 阅读 · 0 评论 -
【antd checkbox】 form表单checkbox 但是checkbox不受控
原因:checkbox比较特殊,值绑定用checked,所以需要对form做特殊配置。问题:form表单里面checkbox不能绑定数据。原创 2024-04-16 17:02:23 · 489 阅读 · 0 评论 -
【javascript】飞书群机器人发消息到飞书群(node)
飞书就机器人,发消息,node原创 2023-02-13 15:26:19 · 1015 阅读 · 0 评论 -
【小程序】判断当前元素是否出现在视窗范围内
可视范围原创 2023-02-01 15:31:45 · 970 阅读 · 0 评论 -
typescript记录
最近需要扩展Funcion类型,增加一个布尔类型的属性值。1,可以自定义类型type OwnFunc = Function & { once?: boolean } 2,也可以声明接口interface OwnFunc { ():any once?: boolean}原创 2021-10-09 16:28:35 · 143 阅读 · 0 评论 -
性能优化-循环优化[三]
独立于语言递归使用迭代替换递归调用栈太深,所有递归都能用迭代实现。考虑斐波那契数列用迭代实现迭代的优化Duff's Device 减少迭代的次数// 初始化要处理的数组 与handle函数const process = (n)=> n * nvar arr = new Array(100000)for (let i= 0, len = arr.length; i < len; i++) { arr[i] = i}let len = arr.length// 原始原创 2021-07-18 18:03:10 · 190 阅读 · 0 评论 -
javascript 性能优化--脚本的加载执行【一】
多数浏览器使用单一进程来处理用户界面【UI】刷新和JS代码执行,所以同一时刻只能做 一件事。JS执行过程耗时越久,浏览器等待响应的时间就越长。原创 2021-07-04 16:01:03 · 249 阅读 · 0 评论 -
寻找有序数组中元素第一次出现的索引和最后一次出现的索引
有序数组 比如 [1,2,3,4,4,4] 这个在js里面可以直接使用findIndex与lastIndexOf来求出,如果我们自己用代码实现该如何做呢? 看到有序数组的查找,没错,二分 二分,对于有序的数据,总能用二分去解决。findIndex的实现代码:var findFirstIndex = (arr, target) => { let l = 0 let r = arr.length - 1 while(l <= r) { let mid = Ma原创 2020-12-12 23:59:20 · 2059 阅读 · 0 评论 -
找到一个数组的【所有奇数个数的】子数组
var getSubOddArrays = function(arr) { let res = [] for (let i = 0; i < arr.length; i++) { for (let oddLen = 1; (oddLen + i) <= arr.length; oddLen += 2) { res.push(arr.slice(i, i+oddLen)) } } return res };原创 2020-11-12 17:20:28 · 545 阅读 · 0 评论 -
vue3升级概览
都来自于官网的的升级文档,官网文档点击我异步组件1, overview2.x(before)// simpleconst asyncPage = () => import('./NextPage.vue')//advancedconst asyncPage = { component: () => import('./NextPage.vue'), delay: 200, timeout: 3000, error: ErrorComponent, load原创 2020-10-20 20:26:50 · 416 阅读 · 0 评论 -
【javascript】ajax请求下载文件
使用javascript blob 下载文件模拟浏览器下载文件(不与server端交互) 纯前端的模拟一个下载文件动作 const downloadJsonFile = () => { var jStr = { hello: 'World' } var blob = new Blob([JSON.stringify(jStr, null, 2)], {type: 'application/json'}) const link = document.createElem原创 2020-05-26 22:26:25 · 1275 阅读 · 0 评论 -
【javascript】实现上传预览图片功能
浏览器在上传图片之后,我们能够获取到图片的file对象,现在的问题就是让这个图片在浏览器里面显示出来。思路: file对象转换成base64字符串,然后赋值给img的src即可。 Base64 是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。我们将file对象转换为base64字符串,需要通过FileReader对象的readAsDataURL来做。HTML代码 <inpu原创 2020-05-26 22:11:12 · 218 阅读 · 0 评论 -
javascript复制基础文本功能
const handleCopy(content) { const input = document.createElement('input'); input.value = content; document.body.appendChild(input); input.select(); if (document.execCommand('Copy')) { document.execCommand('Copy'); } in..原创 2020-05-22 09:09:25 · 171 阅读 · 0 评论 -
javascript时间戳 与 mysql 时间戳不一致
遇到一个问题,js获取特定日期的的时间戳,存数据库,但是在mysql里面通过FROM_UNIXTIME(timestamp,'%Y-%m-%d')格式化日期,是不一致的。。。查了一下,是时区问题,mysql时区不对,验证一下,执行sql语句: select now();如果与js执行结果:new Date()不一致,那么需要调整一下mysql的时区了。。修改容器内配置文件/etc/...原创 2020-05-05 17:04:10 · 1404 阅读 · 0 评论 -
react hooks 里 useMemo 和 useCallback的区别
react hooks提供的两个API,用于缓存数据,优化性能。useMemo用来缓存数据,当 组件内部某一个渲染的数据,需要通过计算而来,这个计算是依赖与特定的state、props数据,我们就用useMemo来缓存这个数据,以至于我们在修改她们没有依赖的数据源的情况下,多次调用这个计算函数,浪费计算资源。直接上代码import React, { useState, useMemo } ...原创 2019-12-31 09:26:01 · 10384 阅读 · 0 评论 -
react app cpu 占用率巨高的处理
前景提要系统: OSX 0.13.6 配置是i7 16g最近做一个react技术栈的项目,同事搭的架子,使用的ts+react全家桶,但是每次启动项目 cpu占用高达150%。这不是重点,因为一开始并没有注意,怎么发现的呢,启动项目之后,风扇狂转,那个声音让人有点抓狂,办公室本来挺安静的,只要一启动项目,咚咚咚咚-----那个声音太大了 ,我看monitor,cpu 占用150%。。。当...原创 2019-12-25 14:04:02 · 2501 阅读 · 0 评论 -
【javascript】给网页添加水印
需求:由于安全,防盗用等原因,需要给页面增加水印。方法一最容易想的是用绝对布局或者fixed布局,写一串文字放在整个body或者content容器里面,贴在最上层即可。但是遇到了问题:,就是因为z-index设置的比较高,无法交互。 下面的点击事件啥的,全部失效了。最后查到了css3有一个新属性:pointer-events 这个CSS 属性指定在什么情况下 (如果有) 某个特定的图形元...原创 2019-11-17 14:27:20 · 1179 阅读 · 1 评论 -
【javascript笔记】js基本数据类型<零>
.记录一下以前没掌握的21变量解释示例String字符串,一段文本。 要指示变量是字符串,你应该将它们用引号包裹起来。var myVariable = 'Bob';Number数字,一个数字。不用引号包围。是只有一个单一的数据类型,内部被表示为64位的浮点数,和java的double一样. NaN是一个特殊原创 2015-10-19 23:07:33 · 786 阅读 · 0 评论 -
【javascript】javascript继承的多种方式
1, 原型链继承 function Super() { }; function Sub() { }; Sub.prototype = new Super() 会出现的问题: a,原型对象的属性,如果是一个引用类型,那么所有实例都会共享这一个引用类型[比如是数组],某一个实例修改了该数组,那么其他实例获取该属性也会是改变之后的结果。 b,第二个问题,没有办法在不影响...原创 2019-01-23 21:55:09 · 163 阅读 · 0 评论 -
【javascript】{} + [] 和 [] + {} 的区别
内容基本上来自于:《you dont know javascript》中卷 第4章 类型与文法 [] + {} // "[object Object]" {} + [] // 0先看第一个表达式,[ ] + { } , 因为[]会被强制转换为"", 然后+运算符 链接一个{ }, { }强制转换为字符串就是"[object Object]"。 最终结果就是后者。在看第二个表达式, ..原创 2019-01-10 11:36:20 · 1752 阅读 · 4 评论 -
【javascript】异步-事件轮询-任务队列-工作队列(job queque)
异步异步编程的核心: 现在 与 稍后 的部分之间的关系。例子: 去吃饭排队,先拿一个号,排到了手机会有消息收到。在这个时候,可以取买点喝的。现在:排队拿号 -&amp;gt; 买水 。稍后:短信通知排到了,开吃!event loop 事件轮询js引擎 遇到异步代码块,会将它放到【不一定是马上】一个任务队列里面,当主线程执行完所有代码的时候,会从这个任务队列里面setTimeout 不...原创 2019-01-22 19:04:34 · 1997 阅读 · 0 评论 -
【javascript】手写一个webpack loder
手写一个loader为什么需要loader? webpack 实际上只能处理js文件,那么对于除了js文件的其他类型的文件 比如 css sass 等。。我们不能直接用webpack来处理。 我们需要一个翻译员(loader)来帮我们的文件处理一下。有时候我们不只需要一个翻译员来工作,比如要把文言文翻译成外语,首先要转换成白话文,然后转换为外语。 Loader就像一个翻译员,能将源文件经过...原创 2019-03-10 22:04:38 · 304 阅读 · 0 评论 -
【javascript】手写一个webpack plugin
手写一个pluginwebpack中的plugin这个概念 插件是webpack的“支柱”功能,在项目中你肯定使用到了插件系统,比如:html-webpack-plugin以及webpack内置的:HotModuleReplacementPlugin 和 DefinePlugin 我们既然已经有loader了,为什么还需要插件呢,plugin是用来扩展webpack功能,他在构建流程里...原创 2019-03-17 21:52:47 · 1274 阅读 · 0 评论 -
【javascript】webpack 使用 DllPlugin加速构建
什么是Dll windows系统里面,你肯定看到过.dll后缀的文件,这些文件叫做动态链接库,其他模块可以调用此库里面的内容。 我们在web项目中的dll也是类似的概念,将web项目依赖的基础模块给抽离出来,打包到一个个单独的动态链接库中。并且一个动态链接库可以包含多个基础模块。 当需要导入的模块存在于某个动态链接库中,这个模块不能被webpack再次打包,而且直接去动态链接(基础)库中去寻...原创 2019-03-30 18:21:44 · 808 阅读 · 0 评论 -
【javascript】使用happypack和thread-loader加速构建
使用happypack/thread-loader加速构建标签: webpack为什么需要happypack/thread loader webpack需要处理的文件是非常多的,构建过程是一个涉及大量文件读写的过程。项目复杂起来了,文件数量变多之后,webpack构建就会特别满,而且运行在nodeJS上的webpack是单线程模型的,也就是说Webpack一个时刻只能处理一个任务,不能同时...原创 2019-03-24 16:09:16 · 7957 阅读 · 0 评论 -
【react】tsx文件中的Module 'xxxx' has no default export
项目使用create-react-app创建,然后引入antd-mobile里面的组件报错。报错:在tsx引入react的时候报错,是通过将import React from "react" 改为import * as React from "react"去掉错误。但是我们引入antd-mobile三方库这样就不行了。我们需要在tsconfig.json里面加上配置:"allowSyn...转载 2019-04-03 16:35:07 · 5291 阅读 · 0 评论 -
一步一步手写promise[一]
前些日子,同事分享了手写promise,它的思路清晰 一步一步的梳理。于是乎后来我自己尝试来写一写,于是乎有了此篇浅显的文章。我们看一个基础的原生promise var p1 = new Promise((resolve, reject) => {}) var p2 = new Promise((resolve , reject) => { resolve(1) })...原创 2019-04-20 17:37:53 · 274 阅读 · 0 评论 -
【javascript】webpack 加载svg
标签(空格分隔): webpack如何在我们的项目中加载svg矢量图?使用file-loader比如像sketch等工具能够导出svg文件,我们可以在css中的background-image属性引用一个svg矢量图为你教案,也可以在html标签img中使用src源引入。像这样: .path-svg { background-image: url('./svgs...原创 2019-04-13 17:55:56 · 3535 阅读 · 0 评论 -
一步一步手写promise[三]
上一篇文章我们已经走到差不多最后一步了,只需要处理如果then接受状态的返回值是一个promise,我们递归处理即可。最后的代码长这样:function Promise5(executor) { this.status = 'pending' this.value = void 0 this.error = void 0 this.fulFillTasks = [] th...原创 2019-04-27 14:09:55 · 165 阅读 · 0 评论 -
一步一步手写promise[二]
在上一步,我们已经实现了Promise的基本功能, 构造一个Promise对象,并且可以同步或者异步,将其status转变为 resolved 或者 rejected,并且then方法能正确处理同步的状态变化,但是异步的状态变化我们处理不了。。。回忆一下我们上一步的then方法:Promise3.prototype.then = function(onFulfilled, onRejected...原创 2019-04-24 13:06:48 · 163 阅读 · 0 评论 -
【扫盲贴】JSON数据格式
json的数据格式不只是 键值对的形式{ "name": "kesha" //other....}还可以是下面其他的格式,最简单的验证方法是在postman里面定义body数据为json格式,然后直接输入下面的值,没有报错。 或者去json.cn或者其他验证json的工具站点验证即可。"Fun"[1, 2, 3, "Fun"]truenull维基百科地址: ...原创 2019-05-13 16:13:06 · 401 阅读 · 0 评论 -
【javascript】react router在配置嵌套路由下的404页面
转载记录:官网的嵌套路由在这里: https://reacttraining.com/react-router/web/example/route-config项目最近用到嵌套路由 ,需要添加全局的404页面,找到一个例子:https://codepen.io/pshrmn/pen/KWeVrQ但是到最后发现貌似 和 在每一处子路由的地方添加了404 <router>是一...转载 2019-07-11 22:50:07 · 1640 阅读 · 0 评论 -
【vue】组件之间通过provide/inject共享数据
组件之间共享数据的方式常用的有:1, props 属性传递数据2, emit 事件 a: 全局的eventHub机制 b: 父组件调用子组件使用v-on:eventName="handleFunc",子组件在需要的时候调用this.$emit(eventName, params)即可。3, vuex4, ref 父组件给子组件添加一个ref引用,<child-compo...原创 2019-07-24 21:42:57 · 4022 阅读 · 8 评论 -
【javascript】mui header 在ios系统下 当软键盘弹出的时候错位
尝试了各种办法 ,无果。最后相对好点的解决办法:然后用了双webview 解决了问题,header 作为一个parent webview,在这个webview下面嵌套你的子webview【里面就是你实际的page content】。...原创 2019-09-20 15:26:52 · 476 阅读 · 0 评论 -
【javascript】《你不知道的javascript》中卷笔记
7种内建类型null / undefined / object / number / string / booleanES6 新增了一个 symbol 类型typeof 操作符 (7个值)返回的也是7个值,typeof 总是会返回字符串:typeof undefined === 'undefined'typeof 42 === 'number'typeof '42' === ...原创 2018-12-31 16:20:01 · 393 阅读 · 0 评论 -
【javascript】《你不知道的javascript》上卷笔记
【javascript】《you dont know javascript 上卷》读书笔记欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文...原创 2018-11-20 14:17:12 · 253 阅读 · 0 评论 -
Couldn't find preset “es2015” relative to directory
node_modules 里面装了结果还是这个错,解决办法:在package.json 里面 增加 属性: "babel": { "presets": [ "es2015", "react" ] }原文链接: Error: Couldn’t find preset “es2015” relative to directory转载 2016-12-25 17:16:52 · 14157 阅读 · 0 评论 -
Vue2.0 事件发射与接收
由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象new Vue({ el: '#app',原创 2016-11-30 23:03:13 · 26818 阅读 · 7 评论 -
Vue 使用nprogress
这个问题做一个简单的记录。 当下用的vue 和 vue-router 版本都是 2.0 入口文件,main.js引入 nprogress ...import App from './App'import VueRouter from 'vue-router'import router from './router' //你的路由文件//引入nprogressimport NPro原创 2016-12-11 15:01:13 · 7671 阅读 · 0 评论 -
module.exports 与 exports的区别
这个问题近半年看过三次,一直都是迷迷糊糊的,今天看朴大以及一些stack上面的资料终于算是明白点了,先记录一下以免忘记.大白话: exports 只是 module.exports 的引用,他们都指向内存中的同一个地址.node在加载模块的时候,每个模块默认有一个module对象,该对象有个属性exports;初始值是空对象{},可以认为require引入模块调用的是module.exports最终原创 2016-05-19 00:40:29 · 971 阅读 · 0 评论