HtmlAndJavascript
文章平均质量分 66
K3v
这个作者很懒,什么都没留下…
展开
-
【antd checkbox】 form表单checkbox 但是checkbox不受控
原因:checkbox比较特殊,值绑定用checked,所以需要对form做特殊配置。问题:form表单里面checkbox不能绑定数据。原创 2024-04-16 17:02:23 · 487 阅读 · 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 性能优化--数据存储与DOM相关【二】
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-07-12 16:21:53 · 318 阅读 · 0 评论 -
javascript 性能优化--脚本的加载执行【一】
多数浏览器使用单一进程来处理用户界面【UI】刷新和JS代码执行,所以同一时刻只能做 一件事。JS执行过程耗时越久,浏览器等待响应的时间就越长。原创 2021-07-04 16:01:03 · 249 阅读 · 0 评论 -
【CSS】不定高度的弹框水平垂直居中
why 对于特定的高度的弹框这个问题很好处理,计算好弹框离父元素的的高度,使用margin处理即可。 但是为了通用性,不必每一次都去计算,有没有通用一点的方法呢,是有的, 通过vertical-aign来做。 css 代码: .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* for IE8 */ background: url(data:image/原创 2020-07-25 10:54:13 · 927 阅读 · 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 评论 -
react hooks 里 useMemo 和 useCallback的区别
react hooks提供的两个API,用于缓存数据,优化性能。useMemo用来缓存数据,当 组件内部某一个渲染的数据,需要通过计算而来,这个计算是依赖与特定的state、props数据,我们就用useMemo来缓存这个数据,以至于我们在修改她们没有依赖的数据源的情况下,多次调用这个计算函数,浪费计算资源。直接上代码import React, { useState, useMemo } ...原创 2019-12-31 09:26:01 · 10383 阅读 · 0 评论 -
react app cpu 占用率巨高的处理
前景提要系统: OSX 0.13.6 配置是i7 16g最近做一个react技术栈的项目,同事搭的架子,使用的ts+react全家桶,但是每次启动项目 cpu占用高达150%。这不是重点,因为一开始并没有注意,怎么发现的呢,启动项目之后,风扇狂转,那个声音让人有点抓狂,办公室本来挺安静的,只要一启动项目,咚咚咚咚-----那个声音太大了 ,我看monitor,cpu 占用150%。。。当...原创 2019-12-25 14:04:02 · 2499 阅读 · 0 评论 -
【javascript】给网页添加水印
需求:由于安全,防盗用等原因,需要给页面增加水印。方法一最容易想的是用绝对布局或者fixed布局,写一串文字放在整个body或者content容器里面,贴在最上层即可。但是遇到了问题:,就是因为z-index设置的比较高,无法交互。 下面的点击事件啥的,全部失效了。最后查到了css3有一个新属性:pointer-events 这个CSS 属性指定在什么情况下 (如果有) 某个特定的图形元...原创 2019-11-17 14:27:20 · 1178 阅读 · 1 评论 -
【css】多行多列流式布局
要达到这种效果,自动换行,并且左右等距离对齐:方法一,使用grid布局: .container-1 { padding: 20px; width: 800px; border: 1px solid black; margin: 0 auto; margin-bottom: 50px; ...原创 2019-11-09 15:41:41 · 4631 阅读 · 0 评论 -
【javascript】webpack 使用 DllPlugin加速构建
什么是Dll windows系统里面,你肯定看到过.dll后缀的文件,这些文件叫做动态链接库,其他模块可以调用此库里面的内容。 我们在web项目中的dll也是类似的概念,将web项目依赖的基础模块给抽离出来,打包到一个个单独的动态链接库中。并且一个动态链接库可以包含多个基础模块。 当需要导入的模块存在于某个动态链接库中,这个模块不能被webpack再次打包,而且直接去动态链接(基础)库中去寻...原创 2019-03-30 18:21:44 · 808 阅读 · 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】使用happypack和thread-loader加速构建
使用happypack/thread-loader加速构建标签: webpack为什么需要happypack/thread loader webpack需要处理的文件是非常多的,构建过程是一个涉及大量文件读写的过程。项目复杂起来了,文件数量变多之后,webpack构建就会特别满,而且运行在nodeJS上的webpack是单线程模型的,也就是说Webpack一个时刻只能处理一个任务,不能同时...原创 2019-03-24 16:09:16 · 7957 阅读 · 0 评论 -
【javascript】手写一个webpack loder
手写一个loader为什么需要loader? webpack 实际上只能处理js文件,那么对于除了js文件的其他类型的文件 比如 css sass 等。。我们不能直接用webpack来处理。 我们需要一个翻译员(loader)来帮我们的文件处理一下。有时候我们不只需要一个翻译员来工作,比如要把文言文翻译成外语,首先要转换成白话文,然后转换为外语。 Loader就像一个翻译员,能将源文件经过...原创 2019-03-10 22:04:38 · 304 阅读 · 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】异步-事件轮询-任务队列-工作队列(job queque)
异步异步编程的核心: 现在 与 稍后 的部分之间的关系。例子: 去吃饭排队,先拿一个号,排到了手机会有消息收到。在这个时候,可以取买点喝的。现在:排队拿号 -&amp;gt; 买水 。稍后:短信通知排到了,开吃!event loop 事件轮询js引擎 遇到异步代码块,会将它放到【不一定是马上】一个任务队列里面,当主线程执行完所有代码的时候,会从这个任务队列里面setTimeout 不...原创 2019-01-22 19:04:34 · 1997 阅读 · 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 · 273 阅读 · 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 · 162 阅读 · 0 评论 -
【扫盲贴】JSON数据格式
json的数据格式不只是 键值对的形式{ "name": "kesha" //other....}还可以是下面其他的格式,最简单的验证方法是在postman里面定义body数据为json格式,然后直接输入下面的值,没有报错。 或者去json.cn或者其他验证json的工具站点验证即可。"Fun"[1, 2, 3, "Fun"]truenull维基百科地址: ...原创 2019-05-13 16:13:06 · 400 阅读 · 0 评论 -
【javascript】mui header 在ios系统下 当软键盘弹出的时候错位
尝试了各种办法 ,无果。最后相对好点的解决办法:然后用了双webview 解决了问题,header 作为一个parent webview,在这个webview下面嵌套你的子webview【里面就是你实际的page content】。...原创 2019-09-20 15:26:52 · 476 阅读 · 0 评论 -
Webpack2 起步
Webpack2 起步最初翻译于2017年1月初,后来觉得翻译的不好就删掉了...现在恢复~ 说不定对别人有帮助What is webpack简而言之,webpack是一个JavaScript模块打包工具。但是它可以用来托管并且管理你所有的前端代码(至少它被开发出来的目的或者说社区希望达到的目标是这样的)传统的构建工具执行任务的方式是: 你的cs翻译 2017-04-05 23:22:41 · 703 阅读 · 0 评论 -
【javascript】{} + [] 和 [] + {} 的区别
内容基本上来自于:《you dont know javascript》中卷 第4章 类型与文法 [] + {} // "[object Object]" {} + [] // 0先看第一个表达式,[ ] + { } , 因为[]会被强制转换为"", 然后+运算符 链接一个{ }, { }强制转换为字符串就是"[object Object]"。 最终结果就是后者。在看第二个表达式, ..原创 2019-01-10 11:36:20 · 1752 阅读 · 4 评论 -
【javascript】javascript继承的多种方式
1, 原型链继承 function Super() { }; function Sub() { }; Sub.prototype = new Super() 会出现的问题: a,原型对象的属性,如果是一个引用类型,那么所有实例都会共享这一个引用类型[比如是数组],某一个实例修改了该数组,那么其他实例获取该属性也会是改变之后的结果。 b,第二个问题,没有办法在不影响...原创 2019-01-23 21:55:09 · 163 阅读 · 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 · 392 阅读 · 0 评论 -
【javascript】滚动条事件优化->函数节流与去抖
throttle原创 2017-08-30 15:25:15 · 1545 阅读 · 0 评论 -
Vue 自定义组件使用v-model
正常的业务需求中,我们需要封装一些常用的组件。现在有一个最简单的需求,封装一个有特定样式的input框,够简单吧? 好,我们来这样封装: 字符串模板文件命名为 CInput.vue: <template> <input type="text" class="your-custom-class-name" v-model="name" > </template><style lang="原创 2017-07-20 10:19:18 · 9906 阅读 · 2 评论 -
【CSS】关于background-position
background-position 的取值 有几种情况(在此之前请先去阅读关于background-origin的信息)关键字: center top right bottom left(可以用百分比转换)长度值: 这个长度值解释为 从内边距区左上角的偏移。便宜点是背景图像的左上角。 background-position: 20px 30px;说明背景图像的左上角这个点...原创 2017-04-03 18:02:16 · 681 阅读 · 0 评论 -
【CSS】关于content
content实际上我们大部分情况已经用过了,今天阅读《css权威指南》发现有很多之前不知道的点,现加以记录。 content只适用于:before 和:after这两个伪元素。MDN 上面关于content的语法解释如下:Formal syntax: normal | none | [ <string> | <uri> | <counter> | a...原创 2017-05-03 00:31:39 · 528 阅读 · 0 评论 -
Vue去掉警告 You are running Vue in development mode
已经是生产环境了 但是还是有这个警告这样解决: Vue.config.productionTip = false在这里发现的解决方案: https://github.com/vuejs/vue/pull/4907#issuecomment-284217492转载 2017-05-02 09:50:45 · 26517 阅读 · 2 评论 -
浏览器滚动条相关
转载连接:http://blog.csdn.net/shanghui815/article/details/5816775JS控制滚动条的位置:window.scrollTo(x,y);竖向滚动条置顶(window.scrollTo(0,0);竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight)原创 2016-02-17 11:05:19 · 576 阅读 · 0 评论 -
修改url中参数的值
之前都是先取 window.location.href的值 然后取匹配关键字近日在mdn上面发现了一个简便方法获取url中参数的值. 请点击这个链接找到例子6 或者直接看这段代码(摘自MDN):function loadPageVar (sVar) { return decodeURI(window.location.search.replace(ne原创 2016-02-23 22:06:14 · 5027 阅读 · 0 评论 -
关于事件冒泡和浏览器默认行为
GoodSite:http://caibaojian.com/javascript-stoppropagation-preventdefault.html : http://www.cnblogs.com/lidabo/archive/2012/05/23/2514701.html《一》关于事件冒泡: 阻止事件冒泡得注意一下,w3c的方法是e.stopPropag原创 2015-03-11 23:17:37 · 1424 阅读 · 0 评论 -
鼠标浮动到表格的某行 背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]
之前一直觉得很难,今天用到了 好像超级简单 标题一 标题二 第一行一列 第二行第二列 第二行第一列 第二行第二列 我们以这个表格为例子:绑定事件: $(document).on('mouseenter','#tableData tr',function(){ if($原创 2014-12-24 21:24:51 · 3523 阅读 · 0 评论 -
textarea高度自动变化
最近用到了textarea 才一两行的数据就出现滚动条,会很难看,发现一种方法,让textarea随着内容的多少自动去变化,找到如下代码: //工具方法,自适应textarea // 最小高度 var minRows = 1; // 最大高度,超过则出现滚动条 var maxRows = 4; function autoResize(t) {转载 2015-01-06 10:48:09 · 1020 阅读 · 0 评论 -
textarea在ie中focus不起作用
由于兼容性没有考虑周全,今天遇到了这个问题:html lang="en">head> meta charset="UTF-8"> title>Documenttitle>head>body> textarea name="" id="" cols="30" rows="10" readOnly=true>sdfasdfadsfasdftextarea>原创 2015-01-12 21:04:06 · 1573 阅读 · 0 评论