JavaScript 应用
JavaScript 应用
杏子姐_1024
1、科大讯飞前端负责人,书籍《Web全栈项目开发入门与实战》作者。
2、职业规划师,可解决:①职业定位问题(帮你找到更适合你的工作);②提升职场竞争力(帮你升职加薪);③职业转型问题(如果你不喜欢当前的工作,辅助你快速转型);④提升职业幸福度(帮你平衡家庭和工作,消除职业倦怠期)。可修改简历和辅导面试。
3、【梦想岛】社群创办人,该社群带领大家一步步实现自己的人生目标,自律打卡,每天进步。人生可以慢,梦想不缺席。
展开
-
1分钟了解 IIFE
IIFE(Immediately-Invoked Function Expression)指的是立即执行函数或者立即调用的函数表达式,即声明的同时就要调用。原创 2020-11-28 16:12:49 · 750 阅读 · 0 评论 -
3分钟了解 WebAssembly
WebAssembly 就是一种非 JavaScript 语言编写的代码也能够在浏览器运行的技术方案。与 WebAssembly 类似的还有 asm.js。两者功能基本一致,就是转出来的代码不一样。asm.js 是文本,WebAssembly 是二进制字节码。原创 2020-11-26 13:46:44 · 1918 阅读 · 0 评论 -
3分钟了解微前端
说到微前端之前先提一下微服务。微服务是为了解决庞大的后端服务带来的变更与拓展方面的限制,而将一个大型的服务应用分割成若干个颗粒度较小的可独立开发、测试及部署的单个子应用。而越来越复杂的前端项目也面临同样的问题。于是有了微前端的诞生。原创 2020-11-25 17:22:36 · 6574 阅读 · 2 评论 -
1分钟了解 rap2
现在大部分的 web 应用都使用前后端分离的方式。即明确前后端需求之后,前后端可以独自开发。这时候前端一般会模拟一些接口数据来填充页面。前面在博客《告别等待后端接口,前端使用在线mock数据》中有介绍到关于模拟数据的工具 mockjs 。 今天来介绍一个由淘宝团队开发的类似工具 rap2。原创 2020-11-24 17:44:56 · 4749 阅读 · 0 评论 -
antd Table 组件动态合并单元格
使用 antd 开发 PC端应用的人肯定知道的 Table 组件。一个功能很完善,界面很优化的表格组件。通过查阅官方文档,你可以很轻松地使用这个组件。但是如果表格中涉及到合并单元格昵?原创 2020-08-28 16:00:35 · 14108 阅读 · 6 评论 -
JavaScript 动画实现 requestAnimationFrame 用法
JavaScript 动画实现 requestAnimationFrame 用法原创 2019-11-10 13:49:13 · 538 阅读 · 0 评论 -
H5 移动端适配
H5移动端适配前言一、案例说明二、移动端适配的两大要素三、完整代码前言移动端的适配是前端开发者必须考虑的一个问题,适配问题也是响应式问题,那么如何开发一个响应式的H5移动端应用?即在不同的设备下元素大小与间距会有不同的变化。今天就给大家分享这个问题。一、案例说明蘑菇街看一下蘑菇街网站是如何做适配的。下面分别截图了屏幕宽为375(iPhone6/7/8)和414(iPhone6p/7p...原创 2019-09-29 20:50:14 · 2189 阅读 · 0 评论 -
格式化时间戳
格式化时间戳前言一、转换为 2019-08-26 格式二、转换为 15:01 的格式三、转换为 2019-08-26 15:01:01的格式前言在前端开发中,大部分的应用都会涉及到时间展示。而前后端为了时间展示的灵活性,通常后端会返回时间戳给前端,那么前端就需要对时间戳进行格式化。今天给大家分享几个时间戳格式化的方法。时间戳时间戳就是将时间转换为毫秒,如下所示,将当前时间转化为毫秒数。...原创 2019-08-26 15:13:57 · 3217 阅读 · 0 评论 -
封装一个非空校验函数
不管是前端还是后端,非空校验在 Web 应用中都很常见。前端应用中,特别是调取接口数据传参时,非空校验几乎必不可少。大部分的人实现思路都是判断是否为空,空则 return 。只有一两个参数判断还好说,但是如果有很多参数需要判断,就要写很多重复的代码。本着做一个 “**不多写一行重复代码**” 的码农,封装出一个非空校验函数是必需的,今天就把这个方法分享给大家。如果不想看推导过程可以直接看五,直接使用。原创 2019-08-11 18:42:45 · 1146 阅读 · 1 评论 -
前端 3 种Ajax请求方式(jQuery/axios/fetch)详解
目前市面上前端请求接口的主流方式是 Ajax(Asynchronous JavaScript and XML),而封装的 Ajax 有 3 种,在单页面应用还没出现的时候,最原始的 jQuery 使用最频繁。后来 axios 与 fetch 也相继而出。本文主要分享这 3 种 Ajax 请求方式的使用与异同。原创 2019-08-24 15:31:46 · 1652 阅读 · 0 评论 -
30行代码封装一个链式调用简易 promise 异步函数
前端开发工程师对 Promise 函数肯定不会陌生,它是 JavaScript 中处理异步场景的利器,但是好多人对 Promise 只知其然,不知其所以然。简单说一下 Promise 主要是为了解决回调地狱以及优雅的处理异步而生。今天通过 30 行代码封装了一个链式调用的简易 Promise 函数,分享给大家。原创 2019-08-23 21:46:27 · 935 阅读 · 0 评论 -
告别等待后端接口,前端使用在线mock数据
在如今前后端分离的背景下,时常会出现前端界面开发完成,等待后端接口联调的情况。那么有没有什么方式可以有一个后端的模拟数据昵?最 low 也是最直接的方法就是自己在本地写 json 格式的模拟数据。这种方式有个弊端就是,数据没有封装好的话,在切换环境的时候要改业务代码。所以有没有更好的方式昵?原创 2019-08-14 14:25:15 · 4436 阅读 · 2 评论 -
原生 JS 实现无缝轮播图(基础版)
一、前言轮播图是大多数网站与应用最常见的效果,实现轮播图并不复杂,但是要实现无缝轮播,则需要抓住关键点。本文用原生 JS 实现一个无缝轮播图。二、实现轮播图的基本思路布局:1. 使用 flex 布局使子元素水平排列;2. 子元素宽度设置100%,flex-shrink 设置为0(这个属性保证子元素不被压缩);逻辑:1. 轮播的核心原理是每隔指定的时间(比如1.5s)改...原创 2019-02-22 11:05:19 · 4900 阅读 · 2 评论 -
js实现组织结构图
一、前言这种组织结构图是不是很熟悉?一般是以画图的形式或者word形式展现,下面给大家介绍一下如何用原生 JS 实现,以便于可以显示在网页上。二、整理思路(实现步骤)1. 要想实现这种复杂的组织结构图,首先需要整理具有逻辑性的数据结构,如下所示:var depArr = [ {departmentname: 'CEO', subcompanyid1: '2', su...原创 2019-02-15 20:42:28 · 16164 阅读 · 11 评论 -
原生 JS 实现飘雪效果
一、前言大家也许见过到以下场景:1. 逢年过年或活动日,各大网站(淘宝,京东等)飘着漫天红包;2. 下雨下雪的时候美团上的外卖地图上会有飘雨飘雪的景象;3. 手机里的天气背景有电闪雷鸣的效果;那么这些动效是如何实现的昵?本文用原生 JS 简单实现一个漫天飘雪的效果。二、整理思路1. 动态增加 div;2. div 每10秒下降3px;透明度减少0.003;3. ...原创 2019-02-15 19:57:46 · 2128 阅读 · 4 评论 -
解决移动端父子窗体滑动相互影响问题
一、问题描述在web的移动端页面,写了一个弹框;弹框内容较长,所以弹框内有滑动效果;在滑动的时候,当你想滑动的是弹框内的窗体,但是偶尔外层窗体跟着滑动,两个窗体相互影响。二、产生原因为什么说偶尔呢,弹框的窗体滑动与外层父窗体的滑动有先后顺序,一般是弹框窗体滑动,滑动完之后,再滑动页面的时候,就变成了父窗体滑动(浏览器默认行为),但是这个时候,不想父窗体滑动, 希望用户操作的滑动跟父窗体...原创 2019-02-23 17:59:01 · 1415 阅读 · 0 评论 -
点击每个兄弟节点获取对应节点下标的六种方案详解
在 DOM 节点中,或者在循环引用中,如何点击每个兄弟节点获取对应节点下标,比如 ul 下有 3个 li,要求实现点击每个 li 获取其对应的下标。原创 2019-05-20 17:59:59 · 1636 阅读 · 0 评论 -
解决左边宽度固定,右边宽度随浏览器自适应的3种方案
解决左边宽度固定,右边宽度随浏览器调整的问题前言一、思路二、代码三、总结前言在前端开发中,不管是自己写项目,还是应试,都会遇到这样一个问题,左边宽度固定,右边宽度随浏览器的变化而变化,今天就来分享一下解决方案。一、思路二、代码三、总结...原创 2019-07-29 17:45:50 · 6275 阅读 · 1 评论 -
最简单的 textarea 高度自适应办法
最简单的 textarea 高度自适应办法问题描述问题解决总结问题描述今天在项目中遇到一个需求是用户输入框的高度随着字数大小自动变化。问题解决解决思路通过监听 input 时间将 textarea 高度改成滑动高度,也就是将 scrollHeight 属性值复制给 textarea 的高度。代码案例var textarea = document.getElements...原创 2019-07-23 11:45:53 · 2025 阅读 · 6 评论 -
3种方式实现瀑布流布局
今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式。原创 2019-08-06 17:23:30 · 63241 阅读 · 17 评论 -
原生 JS 实现无缝轮播图(进阶版)
上一篇有讲到原生 JS 实现无缝轮播图基础版;这一篇主要实现进阶版,包括左右按钮点击功能以及指示灯功能。原创 2019-02-22 23:48:07 · 27739 阅读 · 12 评论