- 博客(18)
- 收藏
- 关注
RSS订阅原创 koa 路由保姆级教程
# koa 路由保姆级教程时间：2021 年 09 月 11 日作者：吴业飞---在这个系列里，我会从零开始搭建项目，完整展示如何从最基础的路由写法到最佳实践的改造过程。你会看到从把所有路由都写在 app.js 里的写法到把路由抽离出来，再到路由自动引入及自动注册的全过程。# 项目搭建## 前期准备新建文件夹 learn-koa-router新建文件 app.js初始化 npm: `npm init`下载 koa:`npm install ..
2021-09-12 00:16:41
400
原创 REM适配实践
# REM适配实践作者：吴业飞时间：2018.06.21---## js动态修改html的font-size因为所有页面都要使用`rem`适配，所以修改`html`的`font-size`的代码应该写在`Global.js`中然后在`layout.html`中将`Global.js`引入//get viewportvar htmlWidth = document.documentElement.clientWidth || document.body.clientWidt.
2021-09-05 09:38:33
83
原创 Media Query Break Point
# Media Query Break Point作者：吴业飞时间：2018.07.02自己总结的做移动端适配时的媒体查询断点写法/*media query break point*Author: Alan*Date: 2018.07.02*/// mobile:442px*870px/*Phone Resolution*Galaxy S5 360*640*Pixel2 411*731*Pixel2 XL 411*823*iPhone 5/SE 3
2021-09-05 09:38:01
107
原创 JS数组总结
# JS数组总结时间： 2019年6月25日作者：Alan-----## 黑科技### length的妙用数组的length不是只读的。所以我们可以通过length完成【1】从数组末尾移除项【2】在数组末尾添加新项【3】清空数组/**** 从数组末尾移除项* **/var colors = ["red", "blue", "green"]; // 创建一个包含3个字符串的数组colors.length = 2;alert(colors[2]
2021-09-05 09:37:34
86
原创 JS数组系列之length妙用
# JS数组系列之length妙用时间： 2019年6月25日作者：Alan-----## 黑科技### length的妙用数组的length不是只读的。所以我们可以通过length完成【1】从数组末尾移除项【2】在数组末尾添加新项【3】清空数组/**** 从数组末尾移除项* **/var colors = ["red", "blue", "green"]; // 创建一个包含3个字符串的数组colors.length = 2;alert(
2021-09-05 09:36:33
113
原创 JS数组系列之检测数组
# JS数组系列之检测数组时间： 2019年6月25日作者：Alan-----## 检测数组要检测某个对象是不是数组，我们可以用/**** 检测数组* **/function isArray(value) {if(value instanceof Array) {return true;}}#### 适用条件：对于一个网页，或者一个全局作用域可以放心使用。#### 存在的问题：`instanceof`操作符假定单一的全局执行.
2021-09-05 09:35:48
168
原创 IE自动给图片加上width和height属性的修复
# IE自动给图片加上width和height属性的修复作者：吴业飞时间：2018.07.25## 情景再现在项目中写了一个图片列表，再普通不过的一行3张图，用的是栅格布局，`html`代码大概如下<div class="row"><div class="col-md-4"><img src="" alt=""></div><div class="col-md-4"><img src="" alt=""&g
2021-09-05 09:35:22
108
原创 a标签不能包裹div了？！你可能犯了这个错
# a标签不能包裹div了？！你可能犯了这个错作者：吴业飞时间：2019年1月8日---# 背景本文记录了一次发现bug解决bug的过程。# 需求要求在整个全屏banner都能点击跳转页面，而不是点击banner上的按钮才跳转# 问题一拿到这个需求不以为然，因为太常规了，但是后面发生的事让我百思不得其解。我的代码结构原来大概是这样的<div class="banner"><!-- some code here --><a hr
2021-09-05 09:34:43
375
原创 自己常用的VScode snippet（持续更新）
# 自己常用的VScode snippet（持续更新）作者：吴业飞时间：2018年12月4日---在VScode里编辑自己的代码段（snippet），Ctrl + Shift + p,输入snippet,首选项：配置用户代码片段。## html.json{// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and.
2021-09-04 09:53:39
262
原创 自己常用的mixin（持续更新）
# 自己常用的mixin（持续更新）作者：吴业飞时间：2018年12月4日---/**列表展示的项目*param {$width: 百分比，一行展示4个用25%，以此类推，$marginRight：项目水平间距，单位px}*/@mixin width-box($width, $marginRight: 0px) {width: calc(#{$width} - #{$marginRight});display: inline-block;v.
2021-09-04 09:52:59
139
原创 【教程】在页面上使用SVG(SVG Sprite)
# 【教程】在页面上使用SVG(SVG Sprite)作者：吴业飞时间：2019年1月4日---# 前言本文是我在阅读了张鑫旭大神的文章《未来必热：SVG Sprite技术介绍》后整理出来的实际操作流程，全部为实测代码，按照本教程可以即学即用。为了更好的理解本文，建议先行阅读[《未来必热：SVG Sprite技术介绍》](https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/)# 最终
2021-09-04 09:52:28
451
原创 图片随意命名可能被广告拦截插件拦截
# 图片随意命名可能被广告拦截插件拦截作者：吴业飞时间：2018.09.06## 情景再现在我电脑上图片正常显示，在同事电脑上显示不出来，查看控制台图片请求没有发出，直接报错，状态码blocked:other## 解决方案发现图片命名是ad1.jpg,ad2.jpg，这种ad命名被广告拦截插件当成广告拦截了，由于我的电脑没有广告拦截插件所以正常显示，解决方案是图片重命名！---版权声明：自由转载-非商用-非衍生-保持署名...
2021-09-04 09:51:55
104
原创 使用ScrollMagic制作与滚动相关的动画效果
# 使用ScrollMagic制作与滚动相关的动画效果作者：吴业飞时间：2019年1月17日---# 背景经常看到一些国外动效做的特别炫的网站使用的是ScrollMagic这个js库，于是我决定写个demo试用一下。# 需求产品详情页的侧边分类导航要实现滚动到页面顶部转为固定效果。# 例子<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">&l
2021-09-04 09:51:03
485
原创 使用Babel将ES6+转换成ES5
# 使用Babel将ES6+转换成ES5作者：吴业飞时间：2019年2月18日---## 环境，版本信息node: v8.11.1npm: v6.5.0babel: v7.3.0## 安装npm install --save-dev @babel/core @babel/cli @babel/preset-envnpm install --save @babel/polyfill这里特别说明一下，这两条安装命令是babel官网上的，我在实际安装过程中使用VSc
2021-09-04 09:50:40
238
原创 解决谷歌地图嵌入到https的网站引发的Mixed content问题
# 解决谷歌地图嵌入到https的网站引发的Mixed content问题作者：吴业飞时间：2018.10.23---# 背景在工作中遇到需要在页面里嵌入谷歌地图的需求，我的做法是在谷歌地图中搜索出地名，然后点击分享-嵌入代码，将代码粘贴在页面上。这样有个问题，分享的代码是http的，而网站是https的，会引发Mixed content报错，地图加载不出来。# 解决方案## 换用调用谷歌地图Api的方式这样得到的链接是https的，但是调用Api需要注册一个结算.
2021-09-04 09:49:41
170
原创 布局解决悬浮固定导航栏遮挡页面主体内容问题（主要考虑遮挡锚点问题）
# 布局解决悬浮固定导航栏遮挡页面主体内容问题（主要考虑遮挡锚点问题）作者：吴业飞时间：2018.06.21---在工作中经常遇到使用`position: fixed;`固定在页面顶部的导航栏会遮挡页面主体内容，特别是在使用锚点跳转的时候，锚点默认跳转到视窗顶部，正好被导航遮挡。我使用过两种方式解决这个问题，各有优劣，视具体需求而定。## 导航fix定位下的解决方案思路是将锚点安在真正要使用锚点定位的元素的上一个兄弟元素上，文字表述有点绕，show the code!假设.
2021-09-04 09:48:29
1918
原创 版本控制（主要针对直接在FTP服务器中修改代码的场景）
# 版本控制（主要针对直接在FTP服务器中修改代码的场景）作者：吴业飞时间：2018.07.14---## 前言本文讨论的工作场景是从FTP服务器上拉取代码到本地，完成开发后再上传到FTP服务器上。在这个场景下我们该怎么做版本管理。本文不涉及git、svn等版本控制方案，因为在我看来在本文讨论的场景下使用它们是杀鸡用牛刀，反而增加了复杂度。本文提出的解决方案也许不是最佳方案，只是我当前使用的解决方案，在此总结出来。## 需求分析我们的代码一旦上传到FTP上，在FT.
2021-09-04 09:48:02
221
原创 【提高效率】sass的mixin和VScode的snippet组合使用大幅提高编码效率
#【提高效率】sass的mixin和VScode的snippet组合使用大幅提高编码效率作者：吴业飞时间：2018年12月13日---## 背景在日常编写前端代码时，会发现一些经常出现的代码组合，本着DRY(Don't repeat yourself)原则，我发现了sass的mixin和VScode的snippet组合使用可以大幅提高编码效率。## 应用场景举一个简单的例子。比如现在我们需要加一个标题样式，我们可能会写如下CSS代码.title {font-size:
2021-09-04 09:46:35
99
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人