- 博客(40)
- 收藏
- 关注
RSS订阅转载 浏览器数据库IndexedDB介绍
摘要在移动端H5页面开发的时候，为了更好的提高用户体验，可以对不常变化的数据做浏览器端数据缓存，在用户打开页面的时候，首先加载本地的数据，然后异步请求服务端，更新数据。在移动端webview中，可以使用IndexedDB的方式对数据进行存储。当然如果数据量不大的情况下，localstorage也是一种选择。什么是IndexedDB一般来说，数据库分两种类型：关系型和文档型（也称NoSQ...
2020-04-30 16:50:43
940
转载 前端数据库——WebSQL和IndexedDB
一、WebSQLWebSQL是前端的一个独立模块，是web存储方式的一种，我们调试的时候会经常看到，只是一般很少使用。并且，当前只有谷歌支持，ie和火狐均不支持。我们对数据库的一般概念是后端才会跟数据库打交道，进行一些业务性的增删改查。而这里的数据库也不同于真正意义上的数据库。废话少说，先出招吧：主要方法：openDatabase：这个方法使用现有的数据库或者新建的数据库创...
2020-04-30 16:48:53
448
转载 浏览器数据库 IndexedDB 入门教程
一、概述随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，...
2020-04-30 16:47:15
504
转载 PWA介绍及快速上手搭建一个PWA应用
PWA初次体验 前言：本示例不用安装任何东西部分资源来自网络资源及PWA官网，不要把PWA想象的太复杂，跟着示例走一下，你行的。PWA介绍一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。官网：https://developers.google.com/web/progressive-web-apps/是 ...
2020-04-30 16:44:47
850
转载 获取localStorage和sessionStorage当前已存储大小及容量检测
function get_cache_size(t){ t = t == undefined ? "l" : t; var obj = ""; if(t==='l'){ if(!window.localStorage) { console.log('浏览器不支持localStorage'); }else{ ...
2020-04-30 16:40:58
3958
转载 如何清空微信浏览器缓存
微信其实内嵌了一个QQ浏览器，只是这个浏览器没有菜单界面，看上去无法清理微信内置浏览器的缓存。本经验就教大家如何清空微信浏览器缓存。工具/原料 手机微信APP 方法一：debug页面清楚法 1 随便打开一个聊天窗口，输入debugx5.qq.com 并发送 2 点击自己发送的地址，打开debug 调试页面。 3 拉到调试页面的最底...
2020-04-30 16:36:18
1969
转载 jquery-ui日期插件datepicker仅显示年月且含有全部按钮
1.日历插件仅显示年月，需要在html中作如下处理：<style type="text/css"> .ui-datepicker-calendar { display: none; }</style>2.因业务需要，需要查询全部，故使用清除按钮做为全部，后台查询方法体现在插件的onClose方法，如果放在beforeShow则会出现后...
2020-04-30 16:33:55
889
转载 Template-TModJS：使用tmodjs
1、安装npm install -g tmodjs2、配置我的模板都放在tpl文件夹中，htmls用于存放模板页面，每一个后缀名都是.html，而build用于存放编译后输出的模板js。如果不设置type，默认会将所有的模板编译合并为template.js ，而如果设置了type，就会单独生成对应js文件。运行后htmls文件夹下会生成一个package.js...
2020-04-30 16:32:24
570
转载 前端模板template-web简单使用
template-webM：template-web是什么东西，有什么作用？Z： 这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。如果不用该js，手动来操作，我们可能需要繁杂的拼接html标签，还要做for循环。（使用方法完全同tmodjs.js）M：具体使用的方式是怎么样的呢？Z：这里有个demo<!DOCTYPE html><h...
2020-04-30 16:29:59
1470
转载 CSS font-family 各字体一览表
windows常见内置中文字体字体中文名 字体英文名宋体 SimSun（浏览器默认）黑体 SimHei微软雅黑 Microsoft Yahei微软正黑体 Microsoft JhengHei楷体 ...
2020-04-30 16:22:23
8218
1
转载 前端代码打开软件-外部协议请求
1.打开酷狗kugou://play?p=eyJGaWxlcyI6W3siZmlsZW...2.打开qq聊天弹窗pc端如何实现QQ在线咨询？html代码如下：<a href="tencent://message/?uin=1234567&Site=Sambow&Menu=yes">QQ在线咨询</a>或者是：<a href="h...
2020-04-23 10:07:26
862
转载 小程序web-view覆盖原生组件
小程序web-view覆盖原生组件web-view一、web-view的使用官方文档<web-view class="map-box" src="https://www.forguo.com"> </web-view>** 官方指出，小程序默认会覆盖其它所有的组件**二、解决需求需要在web-view页面上面加一个按钮，用来跳转到小程序的页面，1....
2020-04-23 10:06:33
1932
转载 小程序与H5如何互相跳转
由于小程序官方没有提供外部H5网页直接跳转到小程序的api，所以目前只支持小程序内嵌H5，并且只有内嵌的H5才能跳回小程序小程序跳转H5需要用到小程序的web-view，官方文档链接web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。写法如下：<view class="page-body"> <web-vi...
2020-04-23 09:58:04
1168
转载 git推代码报错"You do not have permission to push to the repository via HTTPS"
git推代码报错"You do not have permission to push to the repository via HTTPS"问题描述:使用git提交代码时报错,如图下:意思是: 通过https方式推代码没有权限解决办法:情况一: 有可能是没有推代码的权限解决方法: 你可以git pull 拉取一下代码,如果能拉取,不能推就是权限问题,请找公司其他人帮你...
2020-04-23 09:55:44
1398
转载 git-git add 撤销及.gitignore忽略多层文件夹用**
git-git add 撤销git status 先看一下add 中的文件git reset HEAD 如果后面什么都不跟的话 就是上一次add 里面的全部撤销了git reset HEAD XXX/XXX/XXX.java 就是对某个文件进行撤销了.gitignore忽略多层文件夹用****/bin/Debug/前面的两个*号代表任意多层上级文件夹需要 ...
2020-04-23 09:48:55
321
转载 nativeShare 移动端浏览器调用原生分享插件
原文地址https://github.com/fa-ge/NativeShare/blob/master/README.md起因最近有一个活动页需要在移动端浏览器分享网页到微信，QQ。虽然每一个浏览器都有分享到微信的能力，但不是每个都提供接口供网页来调用。及时有提供，浏览器暴露出的api也各不相同，而我写NativeShare的目的只是为前端开发者提供一致的api来调用浏览器的原生分享组...
2020-04-23 09:46:26
467
转载 H5唤起APP进行分享的尝试
H5唤起APP进行分享最近很久没有写blog和note，倒是过家家的开发日志简单草草写了一点。这次记录下这个学习过程由来我们的 "通达有你"，web h5页面的分享功能体验太差了，我一直想改变提高体验度。通常点分享然后跳转到另一个页面，比如QQ、空间、微博，还有微信。微信通常要扫二维码分享，（我们只有一个手机啊，还要再屏幕上扫二维码，通常要是我是尝试分享者，微信这么麻烦的分享我肯定...
2020-04-23 09:43:41
3391
转载 h5 在全屏iphonex中的适配
iphonex 已经上线有一段时间了，作为业界刘海屏幕第一款机型，导致全屏不能正常的全屏显示了，，所以需要对iphonx 适配，下面就详细说说如何适配先看一张适配前后的图:iphonex 提供的 meta 头<meta name="viewport" content="viewport-fit=contain"><meta name="viewport" con...
2020-04-23 09:41:16
624
转载 JavaScript项目中锁定npm依赖包版本
前言：最近使用cnpm安装项目依赖后，运行项目出现样式错乱问题。描述：最近升级项目webpack的时候，删除了node_modules，重新安装了，cnpm install，运行项目发现有些地方样式和之前样式不一样，样式变得错乱了，然后就开始找问题,找到运行正常的同事对比了package.json发现版本信息都一样，问题就很奇怪，按理package.json里面一样，node_modules也...
2020-04-23 09:38:55
474
转载 在JavaScript项目中锁定npm依赖包版本
问题最近在项目中遇到这样一个问题，webpack生成的vender包的哈希值在我和同事的电脑上不一致。由于之前已经配置过了CommonsChunkPlugin（配置如下），所以我们期望的结果是在不同环境下构建出的文件哈希值应该是一致的。注：只给出了和本文内容相关的配置项module.exports = { entry: { app: './src/js/app...
2020-04-23 09:34:10
1827
转载 angular1.x之表单验证与ngMessages
刚接触angular1.x很多经常用到的ngMessages的地方，这里顺便记一下，效果如下图： 如果引用了angular-messages.js报如下错误，说明你的angular.js和angular-messages.js版本不匹配，需要找到能用的版本。可在这里在线测试各个版本https://docs.angularjs.org/api/ngMessages 引入版...
2020-04-21 10:51:08
414
转载 getClientRects 和 getBoundingClientRect 的用法和区别
getClientRects获取元素占据页面的所有矩形区域描述获取元素占据页面的所有矩形区域。语法 var rectCollection = object.getClientRects();值getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。TextRectangle对象包含了, top left bottom...
2020-04-21 10:48:45
868
转载 js 实现纯前端将数据导出excel两种方式，亲测有效
由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，参考了好多资料以及很多大佬写的博客终于实现，兼容chrome没问题，其他还没有测试过，这边介绍两种实现方式，并附上代码和gif动图，博主不才还望轻喷方法一将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件...
2020-04-21 10:45:08
448
转载 textarea如何实现高度自适应？
今天需要些一个回复评论的页面，设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好，然后想起了新浪微博的做法：点击评论，默认显示一行，当输入的文字超过一行或者输入Enter时，输入框的高度会随着改变，直到输入完毕。顿时觉得这个细节做得挺不错的，可以效仿下。下面分享2种实现textarea高度自适应的做法，一种是用div来模拟textarea来实现的，用CSS控制样式，不用J...
2020-04-21 10:37:37
952
转载 Vue表单校验插件Vuerify使用详细教程及示例
前言表单校验，在开发中是非常常见的，为了防止用户误操作，填写错误数据，亦或是防止用户恶意提交数据等，都需要前端同学来做一些简单的表单校验，虽然只是用来防君子的。今天就为大家推荐一款Vue表单校验插件：Vuerify。什么是Vuerify？Vuerify 是一款轻量级的数据校验 Vue 插件，同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则，也可以调用全局设置的规则。 插...
2020-04-21 10:35:43
1490
转载 css常用font-family
实例例1（小米米官网）：font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; 例2（淘宝技术研发中心）：font: 12px/1.5 tahoma,arial,'Hiragino Sans...
2020-04-21 10:31:19
621
转载 解决classList的兼容问题(ie9及以下)
只需要在文件中引入以下代码就可以使用了(function(){//解决classList的兼容问题(ie9及以下) if (!("classList" in document.documentElement)) { Object.defineProperty(Element.prototype, 'classList', { get: function() { var s...
2020-04-21 10:29:04
590
转载 vue-config.js配置 vue-cli3.0及简单使用配置
本文配置是根据官网写的。vue-cli配置参考module.exports={ //部署应用包时的基本url。 //baseUrl:"/",//从 Vue CLI 3.3 起已弃用 publicPath:"/"， //默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。 //如果...
2020-04-21 10:15:33
741
转载 video 属性和事件用法大全
1、video 属性<!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test....
2020-04-21 10:12:13
441
转载 安装指定版本的nodejs及npm升级到最新版本、指定版本
node有一个模块n，是专门用来管理node.js的版本的。1、安装n模块： 1 npm install-g n 2、升级node.js到最新稳定版 n stable3、安装指定版本： 1 n v6.11.5 转载于：https://www.cnblogs.com/anyun/p/8328397...
2020-04-21 10:05:55
10927
转载 ECharts 3.0底层zrender 3.x源码分析3-Handler（C层）canvas事件
这一篇，介绍下Handler处理机制。Handler负责事件处理,包括’click’, ‘dblclick’, ‘mousewheel’, ‘mouseout’, ‘mouseup’, ‘mousedown’, ‘mousemove’, ‘contextmenu’等。我们知道canvas API没有提供监听每个元素的机制，这就需要一些处理。处理的思路是：监听事件的作用坐标（如点击时候的坐标），...
2020-04-20 11:17:22
592
转载 js加载第三方字体,检测加载完成事件
最近在做一个项目涉及到加载第三方字体的问题,首批需要支持一百多种字体,然后首先想到的就是@fant-face,但是在实际应用中发现无法满足当前需求. 目前的项目是用canvas的一个开源库fabric.js实现图片和文字的拖动,放大,缩小,旋转等操作,需要对文字设置不同字体的功能,首先就用的@fant-face,因为之前没用过,本来以为是只要用@fant-face定义的字体文件会在页面加载就去加载...
2020-04-20 11:11:57
5543
转载 使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合，比如：构建自动编绎工具当源文件改变时，自动运行build过程，比如当你写CoffeeScript文件或SASS CSS文件时，保存之后可即时生成对应的JS或CSS.构建自动布署工具通过侦听源文件夹的改变，你可以自动即时将改后的文件布署到测试服务器，加快你的开发测试速度。这些工具其实都需要侦听文件夹的改变，基于Node.JS的侦听文件...
2020-04-20 11:08:57
1677
转载 uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)
一、指令压缩 1.安装node,npm——详细见nodejs安装与使用入门 2.安装 uglifyjs——npm install -g uglify-js 3.压缩例子：1)uglifyjs main.js->main-min.js 2)uglifyjs main.js -o main-min.js二、批量压缩1）新建txt文件，内容如下...
2020-04-20 11:07:30
1471
转载 UglifyJS--javascript代码压缩使用指南{转}
在线测试地址http://lisperator.net/uglifyjs/下面都是基于linux系统的安装使用.UglifyJS是遵循了CommonJS规范写成的，可以在支持CommonJS模块系统的javascript环境中运行。当然，这是官方的说法，通俗的说，就是可以在浏览器里和node.js的环境中兼可运行了。UglifyJS的作者在今年9月份的时候，开始了UglifyJS2的项目...
2020-04-20 11:05:23
745
转载 文件压缩/js语法检查/css加前缀/babel转换实战
前端工程化实现本文主要通过4个点来讲述现在前端的工作开发流程css加前缀 js语法检查 压缩 ES6 => ES5CSS自动加前缀我们一般使用autoprefixer来给我们写的css自动添加前缀，来配合不同浏览器的区别。aotoprefixer官网 介绍了它是postcss的一个插件，所以我们可以通过postcss来使用autoprefixer来自动添加前缀。pos...
2020-04-20 11:03:32
292
转载 es6 babel转码器安装配置及常见命令
示例：在d盘，新建文件夹es6，文件夹里新建一个文件es6.js。（1）先全局安装babel-cli，输入命令npm install babel-cli -g（2）输入d:( 进入d盘)，再输入cd es6(进入es6文件夹)（3）输入npm init;(引导创建一个package.json文件，包括名称、版本、作者等这些信息)（4）输入npm install --save-dev...
2020-04-20 10:59:56
213
转载 ES6 转换到 ES5的工具 - Babel的使用
Babel 是 ES2015 语法转换器，将ES6 转换为 ES5, 官网：http://babeljs.ioES6 不能完全的呗浏览器兼用，所以我们可能需要转化成 ES5。Babel的安装：npm install -g babel-cli // -g 表示全局安装到 nodejs 下的目录 将 Babel 的转换插件安装到项目的目录中：npm install...
2020-04-20 10:58:26
640
转载 VSCode拓展推荐（前端开发）
一、使用说明相似功能的插件，不推荐全都装上，请挑选一个使用 本列表所有插件均已测试使用过，但不代表不存在问题 任何插件本身的问题，请到对于代码仓库提交issue二、拓展名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import import提示 Auto Rename Tag 修改HTML标签时，自动修改匹配的标签 ...
2020-04-20 10:55:55
153
转载 vscode插件不生效之手动安装
vscode插件不生效之手动安装这段时间在用vscode写前端代码，听说vscode的很多实用功能都需要通过插件来安装，我自己就在vscode软件里的插件安装模块搜索插件安装了CSS Peek这个插件。根据视频上介绍，安装这个插件后，在html页面标签中的class处按住ctrl点击一下就可以跳到它对应的css处，按住ctrl鼠标移上去也会出现对应的css。确实方便。但是我在这个插件市...
2020-04-20 10:52:11
3981
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人