javascript
文章平均质量分 57
ifredom_
我常常以为,记忆是最容易模糊的东西,在时间的流逝里,人生如一轻烟般的淡去。
展开
-
移动端适配
1. px2vw (推荐)安装postcss-px-to-viewportnpm install postcss-px-to-viewport --save-dev目录中新建postcss.configs.js 配置如下:module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 375, //视窗的宽度,对应我们设计稿的宽度,一般指re原创 2022-01-06 14:27:58 · 191 阅读 · 0 评论 -
Chrome浏览器跨域设置
浏览器本地跨域设置跨域是浏览器自己的一种安全限制,调试起来很麻烦。后端需要配置nginx各种Access-Control-Allow-Origin,Access-Control-Allow-Headers 等,还不一定能成功。最方便的方案,修改本地的chrome浏览器,取消跨域校验。将快捷方式中的目标,由"C:\Program Files\Google\Chrome\Application\chrome.exe"改为"C:\Program Files\Google\Chrome\Appli原创 2021-12-02 23:28:46 · 2217 阅读 · 0 评论 -
audioContext & audio 音频播放
目的:通过对 audio 和 audioContext 的使用,加深对音频的处理使用 标签播放音频使用 AudioContext 对象播放音频<进阶>通过 AudioContext 对音频进行精细化处理:失真、滤波,变调<进阶>通过 AudioContext.createBuffer()生成一段音频使用 audio 标签播放音频使用 audio 标签播放音乐, 加载音频文件可以通过直接在标签上的 src 写好,或通过 audio.setAttribute(“.原创 2021-07-09 12:50:05 · 7607 阅读 · 9 评论 -
前端性能优化
性能问题浏览器的渲染频率一般是 60Hz,也是目前主流显示屏的频率。60Hz 表示计算机一秒钟要渲染 60 帧画面所以渲染一帧或者说每一片段所需时间就是 1/60 = 16.6ms所以对计算机而言,每一帧的总计算量耗时不能超过 16.6ms,否则在这 16.6ms 时间内就得不到计算结果,就会导致这一帧出现卡顿,也就是电脑画面卡顿而浏览器自身的计算引擎也需要占据计算耗时,所以留给开发的时长大概也就 10ms 不到这也就是为什么电脑的 cpu 越强,计算性能也就越强,在浏览器上的表现就是渲染速度原创 2021-06-10 17:23:32 · 424 阅读 · 0 评论 -
memory cache 和 disk cache
from memory cache 和 from disk cache最近在优化Vue项目,因此打开网页,按下F12。发现很多js,css得下载来自于 memory cache,引申出问题:请求时浏览器缓存 from memory cache 和 from disk cache 的依据是什么,哪些数据什么时候存放在 Memory Cache 和 Disk Cache中?启发式缓存浏览器在加载一个网页时,为了尽可能地保证其快速加载,因此设置了一些缓存地策略。经过搜索,记录一下浏览器地缓存策略(使用chr原创 2021-05-08 11:20:59 · 815 阅读 · 0 评论 -
css垂直水平居中
css 元素居中CSS 布局,推介统统使用 Flex<style> .father { background-color: pink; } .child-1 { background-color: #ccc; } .child-2 { background-color: orangered; }</style><body> <div class="father"> <span cl原创 2021-02-25 17:32:57 · 136 阅读 · 0 评论 -
微信小程序-音视频剪辑
产品目的源码后文章尾部,可直接Copy使用最近在做一个英语配音的小程序项目,涉及的核心技术是:音视频剪辑。其实相关的成程序产品已经有很多了,所以花了几天时间也就搞定了,当然有一点微创新,讲解一下其中额核心技术:将一段英语视频中的音轨与视轨分离。用户进行录音,仿照英文进行朗读,并临时保存录音后的音频数据将视频分离后的视轨与录音音频进行合成为一个新的视频正常播放合成后的视频音视频剪辑第一步首先创建一个用于播放视频的video标签,并设置id的值 <view class="vid原创 2020-12-04 14:47:41 · 10104 阅读 · 2 评论 -
给前端的flutter指南
指南介绍如果你是前端开发人员,对Flutter感到好奇,想了解一下?如果使用过React Native, 那么同为跨平台框架,flutter上手究竟有多难?然后我尝试了一下……令我惊讶的是,我能够立即编写出高效的代码。以下内容将比较 Dart / Flutter 和 JS / ReactNative。前端使用 Ts , flutter 使用 dart 语言。程序的入口对于js开发人员,程序并没有特定的一个入口。而dart则指定了**方法main()**作为程序启始入口index.t原创 2020-07-01 15:34:49 · 1428 阅读 · 0 评论 -
Javascript 私有属性和方法
草案进行阶段Public and Private Instance Fields Proposal 目前已经处于Stage 3阶段,这个阶段的内容可以说就是在发布下一个ECMAScript 版本时的正式内容了,可以直接使用了。诞生之前在引入此语法之前,JavaScript 没有(实际上除非我们采用Babel,否则就没有)真正的私有属性和方法。这种功能的缺乏导致,之前都通过约定俗成的下划线前缀来模拟私有属性和方法:function User(name) { this._id = 'xyz';原创 2020-06-02 10:15:39 · 2881 阅读 · 0 评论 -
js-箭头函数和this
普通函数中的this要讨论this,就一定要与函数一起讨论。普通函数中,this所表示的意义与他所处的环境有关。观察打印结果,你会发现this.age没有值,打印结果是NaN,表示没有age的值不是一个number类型,无法自增加一。 function Person() { // 在Person() 构造函数中, `this`表示的是Person它自己的实例. ...原创 2019-09-04 11:47:59 · 301 阅读 · 0 评论 -
axios 重复请求,快速点击
起因一个项目使用的是axios,遇到了用户短时间内,快速点击提交按钮,导致触发了多次请求,提交了多条记录。解决办法import axios from "axios";import md5 from "js-md5";import { Message} from "element-ui";import router from "../router";import { gene...原创 2019-01-30 13:58:06 · 2918 阅读 · 0 评论 -
elementUI分页bug
触发前提data上创建一个属性currentPage点击触发查询方法searchData时,传一个参数进去,其他情况调用searchData不必传参分页组件上必须有sync :current-page.sync="currentPage"重点就是searchData里的写法,见图...原创 2019-02-15 18:09:14 · 1164 阅读 · 1 评论 -
vscode - 创建vue模板
第一步: 新建模板并保存文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存第二步: 添加配置,让vscode允许自定义的代码片段提示出来文件 --> 首选项 --> 设置 ---> 添加这2项// 在其他建议上方显示代码片段建议。"editor.s...原创 2017-07-26 10:28:40 · 29674 阅读 · 6 评论 -
移动端h5图片上传
html结构type: 必须是file multiple :表示允许多图上传。 accept:表示允许接收的图片类型,这里设置为image/*标识 jpg,jepg等常见图片类型都允许 &amp;lt;input type=&amp;quot;file&amp;quot; id=&amp;quot;fileinput&amp;quot; onchange=&amp;quot;addImg()&原创 2017-09-29 14:18:14 · 8671 阅读 · 4 评论 -
nodejs初体验
使用node制作个人博客使用node制作个人博客明确目标express注意事项mongDB注意事项经验技巧明确目标选择前后端框架。使用express作为服务端的框架,使用jade制作前端模板选择数据库。连接到mongDb数据库以及mySQL数据库,并实现增、删、改、查功能进阶优化 开发时,纯前端的思维不再管用,替换为: 前端只管理模板以及样式,后端原创 2018-01-22 16:03:32 · 251 阅读 · 0 评论 -
vue界面测试框架storybook
Vue UI测试框架storybookstorybook是什么?react开发者可能对这个比较熟悉了,即使用storybook的方式创建react组件,并且立即可测.这使组件的性能以及可用性得到了测试保障。而对于vue开发者,传统的开发方式是 (前端开发/后端开发)–联调–测试。其中测试包括了白盒测试、黑盒测试。其中黑盒测试常常就是测试功能的可能性,效率比较低下,且组件可扩展性原创 2018-02-02 13:34:16 · 5152 阅读 · 0 评论 -
Vue-hooks(钩子)
vue-hooks最近尤大发布了一个最新的npm包:vue-hooks 。既喜且优,真是一个悲伤的故事。这个npm包是关于hook(钩子)一个最新思路的探索,也是react团队前不久的首创…hooks 是什么Hook是react中得一项新功能提案,可以让开发人员在不编写Class的情况下使用状态和其他React功能。// react版本import { useState } from...原创 2018-11-05 15:35:28 · 19031 阅读 · 2 评论 -
vue开发时的小技巧
一、善用watch的immediate属性例如:需要初始化某个http请求,并且在其他其他属性变化时,触发这个initFetchSearch请求,很多人这么写:created(){ this.initFetchSearch()},watch: { searchInputValue(){ this.initFetchSearch() }}上面的这种写法可以简写如下:...转载 2018-11-28 13:56:07 · 772 阅读 · 1 评论 -
element-ui 表单渲染v-if组件,验证报错
问题描述使用elementui的form表单组件,如果其中几个表单项使用了v-if进行UI切换,并且默认v-if="false"不可见,切换的元素又是必填项时,那么在验证的时候,就会出现很奇怪的bug。原因:elementui在对form表单中带有prop属性的子组件进行校验规则绑定时,是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的,导致了v-if内的表单项,...原创 2018-12-21 09:52:33 · 24300 阅读 · 1 评论 -
vue-cli3内存溢出,JavaScript heap out of memory
起因本地一个项目是使用vue-cli2构建的,遭遇了运行npm run dev出现过因为模块过多,无法运行的问题。这一次是为了升级到vue-cli3体验一下。解决办法vue-cli2的解决办法是:npm run dev和npm run build都可以直接在前面加上option参数。vue-cli3的解决办法是:yarn serve修改为&amp;quot;serve&amp;quot;: &amp;quot;vue-cli-...原创 2019-01-11 16:26:23 · 41120 阅读 · 29 评论 -
使用图片传输加密数据
图片传输信息不想被人看见的信息,通过图片传输项目介绍为了方便起见,将代码直接写在html中方便查阅。 encode.html,介绍了是如何将数据信息藏在一张图片中 decode.html,介绍了是如何从一张拥有隐藏信息的图片中,把数据给解读出来.# encode.html加密<!DOCTYPE html><html lang="zh"><head&g...原创 2019-01-07 16:49:49 · 3283 阅读 · 0 评论 -
2018年最流行JavaScript明星项目
提要文章通过对比各项目过去12个月在GitHub上新增明星数量,来评估其在2018年度的受关注程度,进而选出2018年度JavaScript领域崛起的明星项目。下列图表对比了各个项目在Github上于过去12个月新增的星数量。分析的数据来源为最好的JavaScript网站,一个WEB领域优秀项目的精选网站。通过点击项目,可以查看更多信息。年度最受欢迎项目排名可喜可乐,作为 Vue的忠实粉...原创 2019-01-10 10:36:08 · 630 阅读 · 0 评论 -
node 系列(一)
node 系列(一)node系列,目的在于检验nodejs路上的一系列思考和练习。从最0基础开始。目录node 系列一目录学习前提node入门注意事项fs操作系统文件http发起服务器请求stream流数据crypto通用的加密解密算法学习前提前提1,会安装QQ。神马,安装QQ谁不会?没错!nodejs的学习就是从安装nodejs软件开始,跟安装QQ没什么两样,全部选择默认。前提2原创 2017-04-26 17:04:50 · 442 阅读 · 0 评论