前端开发
文章平均质量分 67
一个前端小朋友
个人的一点看法,如有错误,请不吝指教
展开
-
前端开发怎么给变量起名
在开发中,学会变量命名是一种学问,一个好的命名能减少很多工作量原创 2023-07-07 10:12:26 · 1114 阅读 · 0 评论 -
IE播放wav格式录音解决方案
浏览器支持wav由于ie不支持audio 中的wav(edge是支持的),因此只能放弃audio标签。目前有两种方式可以实现1、使用bgsound,播放背景音2、使用embed标签由于bgsound无法灵活控制音频,因此改用embed标签。注意这里有个坑,embed标签src引用的是资源路径,如果是xhr返回的流文件是无法播放的。...原创 2022-04-08 13:08:13 · 1229 阅读 · 0 评论 -
手写一个简易的PWA
PWA(Progressive web apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。准备工作新建以下几个文件index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>PWA DEMO1</ti原创 2021-02-26 14:55:07 · 330 阅读 · 1 评论 -
elasticsearch+kibana (windows系统搭建+导入数据)
是什么?ElasticSearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎。它能很方便的使大量数据具有搜索、分析和探索的能力。Kibana是一个开源的分析与可视化平台,设计出来用于和Elasticsearch一起使用的。官方页面: Kibana干什么?你可以用kibana搜索、查看存放在Elasticsearch中的数据。Kibana与Elasticsearch的交互方式是各...原创 2019-10-30 14:42:17 · 1097 阅读 · 0 评论 -
监听某个div的宽高是否发生变化(MutationObserver)
web api中有一个叫做MutationObserver的接口MutationObserver接口提供了监视对DOM树所做更改的能力。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。用过vue 的nextTick的就会知道,这个方法就是用到了MutationObserver下面是一个示例 // Firefox和Chrome早期版本中带有前...原创 2018-10-16 18:34:25 · 21753 阅读 · 0 评论 -
canvas简单操作总结
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#0000ff&q原创 2018-11-16 17:15:26 · 251 阅读 · 0 评论 -
前端播放rtmp和hls视频流(vue-video-player)
前端是不支持直接播放视频流的。想要实现直播可以安装flash插件。推荐使用videojs,这里用vue做示范首先安装建议使用npmnpm i vue-video-player --save因为rtmp需要flash所以npm i videojs-flash在需要的组件中引入 import 'video.js/dist/video-js.css' import 'videojs-f...原创 2018-11-30 12:54:17 · 8177 阅读 · 3 评论 -
前端渲染和后端渲染的区别
前端没兴起之前,网页的展示大都是后端渲染,也就是服务器渲染。随着前端行业的发展,前端的工作越来越精细。前后端开始分离,前端只关注ui渲染。后端只提供数据和进行逻辑处理。简单的解释,后端的程序在把html页面吐给前端之前,先把html页面上的特定区域,特定符号,给用数据填充过,再扔给前端,这就是后端渲染。前端渲染是“填”数据,通过网络请求将数据填到页面中,这时候,前端更关注ui渲染。...原创 2018-12-19 14:12:12 · 4102 阅读 · 0 评论 -
工厂模式,构造函数模式,原型模式,组合模式简单理解
作为编程人员一定要知道面向对象,javascript支持面向对象编程。今天我们来简单介绍一下创建对象的几种模式。我们知道创建对象常见的方式有两种:字面量方式和new 操作符方式字面量var people1 = {name:"小明"}new操作符var people2 = new Object()people2.name="小花"尽管这两种可以满足我们的基本要求,但是在创建大量...原创 2019-05-21 11:41:56 · 485 阅读 · 0 评论 -
vue 左右滑动手机屏幕切换路由-touch事件
手机左右滑动,切换导航 以维修记录为例,当页面偏移50px而且手离开屏幕时,路由相应切换 var router = this.$router; this.$refs.maintain.addEventListener('touchstart', (e) => { this.startX = e.touches[0].pageX; }) ...原创 2018-05-30 17:43:48 · 6097 阅读 · 1 评论 -
Ajax ——无刷新页面加载页面
Ajax 是一种无需重新加载网页就能更新部分页面数据的技术Ajax的全称是AsynchronousJavaScript and XML,即异步JavaScript+XML。Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取原创 2017-09-21 10:53:30 · 4520 阅读 · 0 评论 -
base64编码与图片之间相互转换
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一 一、将base64转换成图片 只需要在img 标签中引入即可,注意要加上标明前缀(data:image/png;base64),否则并不知道,这串代码是干啥的 如: AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU原创 2018-02-02 16:00:26 · 19619 阅读 · 0 评论 -
前端上传文件到服务器端
今天公司要让上传文件到服务器,尽管网上有很多插件,而且各种UI组件库,像iview,eleUI也都替我们封装好了,根本不用我们操心。但是由于好奇心重,于是就想研究一下,经过一下午的网上查询,得出一点结论,分享一下。 原生form表单上传文件 直接上代码 &lt;form enctype='multipart/form-data' action="http://192...原创 2018-02-06 17:43:54 · 30194 阅读 · 5 评论 -
BOM和DOM的基本操作
Bom和Dom Bom:浏览器对象模型Bom提供了独立于内容而与浏览器窗口进行交互的对象 Window对象是bom的顶层对象对象:document frames history location navigator screen网页链接Location .href = “”;Window.location = “”; ...原创 2018-03-05 10:24:58 · 513 阅读 · 0 评论 -
ES5与ES6的区别
什么是ES5 作为ECMAScript第五个版本(第四版因为过于复杂废弃了),增加特性如下。strict模式 严格模式,限制一些用法,’use strict’;Array增加方法 增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法PS: 还有其他方法 Functi...原创 2018-04-09 10:33:11 · 1715 阅读 · 0 评论 -
vue项目设置服务器代理(实现跨域)
设置服务器代理在config文件中的index.js中的proxyTableproxyTable: {//设置服务器代理"/taokubuy": {"target":"http://198.33.33.33:8000,"changeOrigin":true,"pathRewrite": {"^/api":""//api相当于一个别名,代指http://198.3原创 2018-04-16 17:28:15 · 4915 阅读 · 0 评论 -
h5页面如何判断是系统Android,ios还是微信等
代码如下: var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 ...原创 2018-04-18 14:17:32 · 4739 阅读 · 0 评论