前端
文章平均质量分 82
Joyce的前端日常
这个作者很懒,什么都没留下…
展开
-
微前端框架single-spa入门
停更已一年,期间做了很多团队和项目管理的事情。回归初心~1. single-spa介绍描述: A javascript router for front-end microservices官网: https://single-spa.js.org/2. 安装及项目启动(1)安装及新建项目并启动npm i create-single-spa@3.0.2 -gcreate-single-spa完成后执行npm start,如下图即为成功(2)错误排查开始使用create-single原创 2021-11-14 22:32:41 · 1552 阅读 · 0 评论 -
iOS 13下的设备判断
文章目录1. 通常的设备判断方式(1) 移动端还是PC(2) 安卓还是iOS(3) 是否用微信打开2. iOS 13的问题3. iOS 13下如何判断设备1. 通常的设备判断方式通常在进行如下判断时,常使用navigator.userAgent。(1) 移动端还是PCfunction isMobile(){ return /Mobile/i.test(navigator.userAge...原创 2019-11-29 18:33:59 · 2012 阅读 · 0 评论 -
移动端兼容性问题解决方案
1. IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器...转载 2018-02-23 18:35:32 · 1232 阅读 · 0 评论 -
《AngularJS权威教程》笔记(6-7)——表达式、过滤器
1. 表达式(1) 解析AngularJS表达式——$parse(2) 插值字符串——$interpolate2. 过滤器(1)简介及用法[1] HTML形式过滤器[2] JS中的过滤器(2) 内置过滤器[1] currency[2] date1) 显示方式2) 年格式化3) 月格式化4) 日期格式化5) 小时格式化6) 分钟格式化7) 秒数格式化8)...原创 2018-03-19 15:20:05 · 282 阅读 · 0 评论 -
Angular中使用me-lazyload实现图片懒加载
1. 懒加载概述实现原理:先将img标签中的src链接设为同一张图片或者空白图片,将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时,将自定义属性中的地址写到src属性中,达到懒加载的效果。目的:提高首屏速度。2. me-lazyload(1) github地址https://github.com/Wyntau/me-lazyload...原创 2018-05-10 18:39:54 · 2460 阅读 · 0 评论 -
客户端存储——cookie和Web Storage(localStorage及sessionStorage)
前言1. 客户端存储的意义2. 存储安全Web Storage(1) 方法属性[1] 写入[2] 获取值[3] 删除[4] 清除[5] 获取key[6] 获取长度(2) 存入JSONcookie(1) cookie的存取[1] 创建[2] 获取(2) cookie的缺陷对比(1) cookie和Web Storage的比较(2) coo...原创 2018-05-18 18:13:03 · 852 阅读 · 0 评论 -
WAI-ARIA 无障碍Web规范(屏幕阅读)
无障碍设计无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和”间接访问”。无障碍设计可以理解为 “能够访问”, 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 Web。然后, 研究和开发无障碍设计对每个人都带来了好处。无...转载 2018-05-21 10:52:20 · 2384 阅读 · 1 评论 -
实现表格第一列固定
背景(1) 需求固定表格的第一列,其余列可以左右滑动。这样的需求往往出现在移动端的表格显示。(2) 难点这个功能的难点在于:如果把第一列从表格中抽出,行无法对齐。(3) 已有解决方案网上有很多解决方案:固定表格高度,只能显示一列。将第一列抽出固定在最左。js动态计算各高度对于这些方案要不过于繁琐复杂,要不单行显示不利于用户体验。实现对于...原创 2018-05-21 11:51:30 · 8956 阅读 · 1 评论 -
使用image-set()解决Retina屏图片显示问题
1. 前言(1) 关于Retina[1] 概念所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。[2] 工作方式以MacBook Pro with Retina Dis...原创 2018-05-16 18:31:32 · 3962 阅读 · 0 评论 -
判断网页滚动方向
这种方式,当一直向下滚动的时候,只会显示一次‘down’,只有两次方向不一样时才会重新显示。var scrollAction,originalDir;window.onscroll = function (e) { var direction = scrollFunc(); if(direction&&originalDir!=direction){ i...原创 2018-05-28 15:34:00 · 1437 阅读 · 0 评论 -
安装nvm管理node版本
介绍在mac上安装nvm来管理node版本,windows请参考其他教程。1. 前提本文主要介绍使用homebrew安装nvm。请确保已经安装了brew。可以通过brew -v查询是否已经安装。 localhost:~ joyce.liu$ brew -v Homebrew 1.7.12. 安装nvmbrew install nvm安装完后,为了...原创 2018-08-13 17:06:38 · 4266 阅读 · 0 评论 -
Google验证码reCAPTCHA接入Web
1. 介绍reCAPTCHA是google旗下的验证码服务(免费的),当然要保证网络能打开google才行,所以常用于国外的网站。 官网:https://developers.google.com/recaptcha/2. 接入(1) site key申请Site Key: http://www.google.com/recaptcha/admin在本地开发时,可以使用此si...原创 2018-08-23 14:42:38 · 34304 阅读 · 9 评论 -
Jade语法简报
文章目录前言Jade语法整理Doctype标签缩进属性前言开始使用Jade已经是4年前的事了,这期间也有使用,但比较少,使用的功能也比较简单。最近因项目需要,进行了Jade的温故。这篇文章整理的比较全面,所以进行了转载:https://www.jianshu.com/p/05ed25bfc2c5Jade语法整理Jade 是HTML预处理语言,省略了大量的尖括号,简洁,高效参考网址:Jad...转载 2019-07-03 11:53:18 · 684 阅读 · 0 评论 -
浅谈Audio
资料1 HTML 5 audio 标签2 HTML5 音频标准3 HTML5 视频和音频的 DOM 参考手册音频标准创建Audio1 audio 标签2 JS生成Audio元素1 documentcreateElement2 new Audio操作Audio1 检测音频类型是否可以播放canPlayType2 更改音频来源重载音频load1 需要使用l...原创 2018-02-12 16:16:59 · 2604 阅读 · 0 评论 -
H5背景音乐解决方案
前言背景音乐播放1 自动播放1 微信问题2 Safari问题3 解决方案代码2 点击播放离开页面关闭音乐缓存状态1 客户端存储数据方法2 示例完整解决方案代码1. 前言很多H5的项目会用到背景音乐,虽然是很小的一个模块,但是有不少的坑。本文总结了背景音乐的常用情况的解决方案。在进行下面内容之前,如果你并不了解Audio,可以参考之前的文章...原创 2018-02-22 15:04:59 · 21378 阅读 · 6 评论 -
EDM - 新作
介绍了EDM遇到的坑和解决方案,解决了Gmail中控制隐藏失效的问题原创 2016-08-26 18:23:19 · 690 阅读 · 1 评论 -
Liferay7.0自定义主题
介绍Liferay如何创建及如何自定义主题原创 2016-11-03 18:21:31 · 4674 阅读 · 0 评论 -
Test Record
Test record 2016原创 2017-01-10 16:39:08 · 447 阅读 · 0 评论 -
Framework7中Template7的使用
Template7的使用及注意事项原创 2017-04-20 18:02:06 · 3976 阅读 · 0 评论 -
资源地址
CommonJS规范ES6Webpack 入门原创 2017-07-06 17:29:18 · 432 阅读 · 0 评论 -
Vue.js+Webpack+Sass+Jade(pug)网站构建
利用Vue.js+Webpack,扩展Sass和Jade(pug)的网站构建原创 2017-07-13 16:50:29 · 3261 阅读 · 0 评论 -
Vue.js+Webpack引入jQuery及插件实践
本文介绍完成了Vue.js+Webpack+Sass+Jade(pug)网站构建后,引入slick插件的实践步骤。原创 2017-08-11 15:38:24 · 3136 阅读 · 0 评论 -
JSX中参数输出HTML
jsx传递参数时,如何将参数识别为html而非字符串。原创 2017-09-07 17:17:50 · 3510 阅读 · 0 评论 -
HTML5调用照相机并自定义显示获取到的图片(FileReader)
越来越多的移动端网页流行,在手机上拍摄照片或者从相册中选取照片并上传的功能不可或缺。本文以实例说明上述功能如何实现,并介绍FileReader对象。原创 2017-09-07 19:09:54 · 7571 阅读 · 0 评论 -
省市区三级联动实例(select居中显示)
省市区三级联动,并居中显示。原创 2017-09-08 17:51:56 · 1500 阅读 · 0 评论 -
js 判断当前页面是否被浏览
http://blog.csdn.net/oulihong123/article/details/53693298转载 2018-01-17 16:34:05 · 967 阅读 · 0 评论 -
前端使用http-server启本地服务
注:下文都是Mac环境在平常开发过程中,常遇到没有用任何框架和工具,就是要运行一个简单的html页面,需要启一个本地的服务器。本文提供一种简单的方式。1. 安装node.js官网地址:https://nodejs.org 下载官网推荐版本,并安装。在命令行输入命令node -v以及npm -v检查版本,确认是否安装成功。2. 安装http-serverhttp-s原创 2018-01-19 18:33:40 · 9784 阅读 · 0 评论 -
使用AddThis实现页面分享(social media)
前言1 概述2 AddThis简介1 官网2 什么是AddThis3 是否收费基本功能1 Share Buttons类型2 页面中添加share buttons3 Dashboard1 Analytics2 Tools3 Get the Code4 Profile Options进阶1 邮箱模板 Email Tempalte1 默认参数2 自定...原创 2017-12-11 17:32:00 · 8831 阅读 · 1 评论 -
《AngularJS权威教程》笔记(1-2)
一、初识AngularJS1、AngularJS概念[ 1 ] AngularJS的官方文档是这样介绍它的。完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。[ 2 ] AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式...原创 2014-12-16 14:53:22 · 1049 阅读 · 1 评论