- 博客(194)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 抛弃jenkins，如何用node从零搭建自动化部署管理平台
一、背景H5页面由于其具有发布灵活、跨平台、易于传播等突出特点，所以H5页面是引流拉新、宣传推广的重要渠道和方式，备受各公司的青睐。小编的日常工作就是做各种面向用户的H5促销活动的开发，在整个开发周期中，接合我司的一些情况，我总结了H5活动页面的以下特点：面向用户，流量大；各端展示方案不同，需要兼容各端（比如活动规则、展示模块，ios和android不一样）；需求变更频繁；合作方较多...
2019-09-02 09:21:30
1367
原创 事件循环机制
我们知道JavaScript的一大特点就是单线程，而这个线程中拥有唯一的一个事件循环。JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。队列数据结构一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分
2017-04-01 10:46:04
1809
原创 JavaScript 异步机制
先看两个js代码片段for (var i = 1; i <= 5; i++) { setTimeout(function(){ console.log(i); }, 0);}结果： 输出 5 次 6var start = new Date;setTimeout(function(){ var end = new Date; cons
2017-03-07 10:05:31
2061
原创 H5页面不同屏幕适配：纯CSS方案
该方案让CSS和JS各司其职，代码也比较整洁。该方案已经被应用于多个公司级营销活动页面、多个移动端项目，未暴漏发现严重的兼容问题。
2022-10-12 11:18:02
5366
4
原创 Vue scoped与深度选择器deep的原理
JS引入模块化概念后，变得更易于开发维护，但是css样式由于其特殊性，一直没有实现模块化，scoped的出现就是为了实现样式模块化，其本质利用属性选择器实现的一种伪模块化，并非真正意义上的模块化，但这已经让css模块化前进了一大步，要知道JS的模块化也是以这种方式开始的，比如早期的seajs，requirejs都是利用闭包封装达到模块化的效果，后来慢慢的出现了ES6的模块化规范import/export，说不定未来的某一天css也会出现真正的模块化，我们就不用学习这种知识点了。说回正题，该篇文章主要从以下
2020-09-25 10:48:37
1824
1
原创 【第25题】node模块的循环加载
题目描述：node 环境下，有A、B两个模块，两个模块互相调用，打印的输出结果是什么？// a.jsexports.x = 'a1';console.log('a.js ', require('./b.js').x);exports.x = 'a2';// b.jsexports.x = 'b1';console.log('b.js ', require('./a.js').x);exports.x = 'b2';// main.jsconsole.log('main.js ',
2020-06-20 17:45:43
388
原创 彻底解决背景跟随弹窗滚动问题
背景在移动端使用弹窗时，我们会经常遇到这种现象：滑动弹窗时，遮罩层下面的背景（body）也会跟随滑动，带来的用户观感体验很差。市面上的解决方案大部分通过阻止touchmove默认事件执行event.preventDefault()解决，但是这种方案存在兼容性，不能对所有浏览器都有效，而且如果弹窗本身存在滚动（如活动规则弹窗），这种解决方案并不能阻止背景滑动，如下图活动规则弹窗所示：终极解决方案先上代码，超级简短// 展示弹窗时，阻止背景滚动function stopScroll () {
2020-06-20 17:44:43
2005
原创 【第24题】三条路径理清原型链（定格记忆篇）
面试题（头条）利用原型和原型链相关知识，画出 Object、 Function、Object.prototype、Function.prototype 四个对象间的关联关系答案解析：原型和原型链，是javascript这门语言中的重要概念，同时也是面试过程中的必考知识点。小编对它也是日常迷惑，每次都需要查资料、重新理逻辑，近日重新换了个角度思考，对原型和原型链有了更加深刻的认识和理解。...
2019-12-26 10:44:56
266
1
原创 node 文字生成图片
背景不知不觉，公众号【前端名狮】已经做了三个月时间了，期间共更新了22篇解析经典面试题的文章，60篇精选文章，真的是困苦和收获共存的三个月。公众号发布文章时，需要为文章配置一个封面图片。我的常规做法就是网上搜一张图片，然后利用 PhotoShop，在图片上加入文章标题，然后导出生成图片，如下图所示：上图实际就是在一张背景图中，加入了一行文字。操作步骤简单，但是每次都需要打开PhotoSho...
2019-12-04 09:42:40
3222
原创 【第23题】排列组合
题目描述高中的时候数学课上（或者小学奥数）学的排列组合，大家还记得吗？排列比较简单，就不提了。那么，组合怎么用程序来实现呢？比如箩筐里有6个标了号的苹果，1 2 3 4 5 6，从里面取出3个苹果，都有什么取法呢？/* * arr 一筐苹果的数组，比如['1', '2', '3', '4', '5', '6'] * num 选出几个 */function getCombinat...
2019-11-15 10:40:05
325
原创 【第22题】理解 JS 模块化
题目描述简单描述一下你所了解的JS模块化答案解析这道题目主要考察对JS模块化发展历程的了解，以及发展中出现的一些规范和技术的掌握。模块化是每一种语言膨胀的毕竟之路，JS 也不例外，从原来的不支持模块化，到现在支持模块化，经历了一个曲折的过程。JS 模块化产生的原因以前JS本身没有模块化的概念和相关API，开发者一般都是在html中引入多个script标签，业务逻辑复杂时，就会带来很多...
2019-11-11 09:59:38
227
原创 Navigator.sendBeacon 无阻塞发送统计数据
业务场景当用户关闭浏览器、刷新浏览器或者跳转其他页面时，向服务器发送一些统计数据。常规方案1. 直接发送 xhr 请求我们会优先想到监听页面的unload或者beforeunload事件，在事件回调里使用XMLHttpRequest发送异步请求。但是由于是xhr请求是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。异步请求响应返回后，由于页面和相关资...
2019-10-28 12:23:44
7874
原创 【第21题】数组随机排序的三种方法
题目描述给定一个数组，对其进行随机排序。示例如下：// 示例输入：[0, 2, 4, 8, 1, 3, 5, 8]// 因为是随机排序，输出结果不唯一输出：[3, 0, 4, 5, 8, 2, 8, 1]答案解析这道题目在面试中也是常考的，变相考察思维逻辑、数组操作API的熟练程度等方面，题目难度为Easy。我能想到的应用场景就是：接口返回若干道题目，希望每次进入页面，题目的展...
2019-10-12 09:29:00
1418
原创 支持跨时区、兼容本地时间不准且不依赖后端接口的倒计时
前言倒计时是网页中最常见的一种功能，比如淘宝双十一定时抢购、小米手机定时抢购等，这些都是倒计时的常见场景。倒计时也是前端初学者必学的一个demo，正是由于倒计时功能的常见性，导致一些问题常常被忽略，比如：倒计时如何兼容跨时区的问题？在本地时间不准确的情况下，不依赖后端接口，如何保证倒计时精准无误？也许在你刚开始学习前端，写倒计时的时候，并没有考虑上面的问题，但在真正的业务场景中，上面...
2019-10-10 21:29:52
804
原创 完爆scroll事件，交叉观察器 IntersectionObserver 在千万级PV页面中的应用实践
IntersectionObserver 介绍概念IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。功能网页开发时，常常需要判断某个元素是否进入了"视口"（viewport），即用户能不能...
2019-09-27 09:20:28
2222
转载 累死累活干不过一个写PPT的（如何量化工作成果）
无论是身处什么行业什么领域，数据分析越来越成为一向必不可少的技能，而运用数据思维进行决策更能产生形成高质量的决策结果。随着互联网的不断发展和物联网设备的不断普及，我们日...
2019-09-21 07:51:55
5008
转载 历时俩月，给大家挖掘了22个佛性更新的优质前端公众号
本人是一个公众号重度沉迷用户，今天给大家挖掘了22个佛性更新的前端公众号，他们虽然更新的频率不高，但是每篇文章都很经典、实用，建议大家可以全部关注，后面不喜欢的再取关。前...
2019-09-20 08:15:00
173
转载 第18题 - 被小看的传值 or 传引用
前几天一个正在找工作的朋友发来一个面试题，感觉挺有意思的今天发出来大家一起乐呵乐呵。这个题其实不难，但是涉及到不只一个知识点，而且平时可能不会注意到。来直接看题得到这个题...
2019-09-20 08:15:00
138
转载 一首歌不仅让腾讯音乐服务器崩了，还拉高了50亿市值。
最近两天最火的事情无疑就是周杰伦发新歌了。朋友圈像过年一般，都在分享周杰伦的新歌。小编也赶紧打开腾讯音乐准备听一下的时候，发现要支付3元购买单曲，犹豫了一秒决定买就是了。...
2019-09-19 08:15:00
223
原创 下一代 Web 应用应用模型Progressive Web App（PWA）- Service Worker
背景Web 应用的现状网络资源下载带来的网络延迟Web 应用依赖于浏览器作为入口没有很好的离线使用方案没有好的消息通知方案….针对以上问题，出现了PWA技术PWA简介PW...
2019-09-18 08:00:00
303
原创 node实例推导浏览器的渲染机制
前言浏览器的渲染原理是每个前端开发工程师的必修课，网络上也有很多这方面的文章，但大多数只是告诉你浏览器表现就是这样的，并没有一个直观的认识，让人读完就瞬间忘却。所以小编决定通过node实践来模拟浏览器渲染时的一些场景，对市面上的文章的一些观点进行验证，希望能够加深自己的认识。动手实践之前，先了解下浏览器的渲染机制的一些基本知识，如下图所示：DOM：Document Object Mo...
2019-09-17 09:19:51
289
转载 浏览器的一些"滚动"行为鉴赏
最近挺忙的，这次抽空写写文陶冶下情操，浏览器滚动真的天天见日日见啦，比如你现在看的这篇文章，往下看就必须得滚动，这篇文章主要聊聊滚动相关的一些方法跟属性，还有一些有趣的例...
2019-09-16 20:32:07
107
转载 我居然在中秋节收到了七龙珠？！ 能召唤神龙吗？
欢迎关注“前端名狮”公众号。一年一度的中秋节又到了，每当这个季节就会看到各个公司都在变着花样的出月饼，在朋友圈里吸引大家的眼球。我是看不到那么多公司的月饼，只能看到爱奇艺...
2019-09-12 13:01:20
97
转载 Git 常见场景问题解决攻略，让你纵享丝滑不是梦
引言本文整理自工作多年以来遇到的所有 Git 问题汇总，之前都是遗忘的时候去看一遍操作，这次重新整理了一下，发出来方便大家收藏以及需要的时候查找答案。一、必备知识点仓库R...
2019-09-12 13:01:20
588
原创 微信公众号文章新增曝光入口，不再局限于微信APP了
前言小编最近在折腾自己的公众号【前端名狮】，由于公众号文章内容只有订阅者才能收到推送消息，所以文章的阅读量低的实在可怜哈，又加上我的公众号没有做多久，粉丝量不够多，阅读量更是无颜面对江东父老，相信做过公众号的同学应该有同感。（要饭要到你家门了，动动你的小手，扫码关注一下哈）微信读书是我一直用的一个APP，里面有很多高质量的书籍，还可以听朗读，最近发现腾讯自己出的APP【微信读书】，打通了微信...
2019-09-11 10:05:46
819
原创 微信公众号的文章曝光新入口被打通，不再局限于微信APP了
前言 小编最近在折腾自己的公众号【前端名狮】，由于公众号文章内容只有订阅者才能收到推送消息，所以文章的阅读量低的实在可怜哈，又加上我的公众号没有做多久，粉丝量不够多，阅读...
2019-09-11 08:15:00
181
转载 JS截取视频第一帧
当视频能够预览并上传后，非要来一张视频第一帧的截图贴上，第一帧是黑的怎么办，下一帧。一、文件上传使用 <inputtype="file">上传， change...
2019-09-11 08:15:00
5364
3
转载 监听DOM加载完成及改变MutationObserver应用
什么是MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的MutationEvents功能的替代品，该功能是DOM3 Events规范的...
2019-09-10 08:15:00
2578
原创 如何解决弹窗过多，导致的html结构臃肿问题
业务背景弹窗是页面交互中的重要组成部分，前端开发的同学应该经常与它打交道。小编的日常是做面向C端的H5活动页面，弹窗处理是每天都要面对的情况。根据日常工作中的场景，我总结了弹窗有以下特点：不同的活动页面，弹窗样式基本不同；不同的CSS开发者，弹窗的html结构不尽相同；同一个活动页面中的弹窗样式基本相同，但弹窗文案、按钮文案、按钮交互都不尽相同；第一点和第二点导致我们无法抽离出适用...
2019-09-09 09:29:39
962
转载 用比较的方式学习ES6的class
class的由来我在以前的文章中，曾经分享过，关于JavaScript中的对象的知识，其中提到了，构造函数创建的方式以及各个函数的优缺点，其实今天要讲的class，可以看...
2019-09-09 08:00:00
81
转载 前端静态资源缓存 sevice worker
作为前端开发，有没有不需要后端配合的缓存方式呢？下面，我们就一起来了解一下，在客户端代码控制web离线缓存的sevice worker。Service Worker 是 ...
2019-09-08 18:20:18
901
转载 CORS 为什么要区分『简单请求』和『预检请求』？
编者按：本文作者：贺师俊（网名 Hax），360 高级前端架构师，十多年来一直活跃在前端和 JavaScript 社区。对多项 Web 标准有微小贡献，对 Groovy ...
2019-09-06 11:24:16
607
转载 重温基础：ES6系列（六）
ES6系列目录1 let 和 const命令2 变量的解构赋值3 字符串的拓展4 正则的拓展5 数值的拓展6 函数的拓展7 数组的拓展8 对象的拓展9 Symbol10 ...
2019-09-05 13:00:57
138
转载 重温基础：ES6系列（五）
ES6系列目录1 let 和 const命令2 变量的解构赋值3 字符串的拓展4 正则的拓展5 数值的拓展6 函数的拓展7 数组的拓展8 对象的拓展9 Symbol10 ...
2019-09-04 08:00:00
112
转载 第16题-不借助变量交换两个数
不借助变量交换两个数我们在平时写代码的过程之中，竟然会有交换两个变量值的需求。然而我们大多数还是会采用借助额外变量的方式，因为这种方式不仅简单，容易理解，可读性高，更重...
2019-09-04 08:00:00
83
转载 重温基础：ES6系列（四）
ES6系列目录1 let 和 const命令2 变量的解构赋值3 字符串的拓展4 正则的拓展5 数值的拓展6 函数的拓展7 数组的拓展8 对象的拓展9 Symbol10...
2019-09-03 08:00:00
73
转载 重温基础：ES6系列（三）
ES6系列目录1 let 和 const命令2 变量的解构赋值3 字符串的拓展4 正则的拓展5 数值的拓展6 函数的拓展7 数组的拓展8对象的拓展9Symbol10...
2019-09-01 10:51:17
108
转载 深入探究 Function & Object 鸡蛋问题
引言上篇文章用图解的方式向大家介绍了原型链及其继承方案，在介绍原型链继承的过程中讲解原型链运作机制以及属性遮蔽等知识，今天这篇文章就来深入探究下 Function.__p...
2019-09-01 10:51:17
167
转载 重温基础：ES6系列（二）
ES6系列目录1 let 和 const命令2 变量的解构赋值3 字符串的拓展4 正则的拓展5数值的拓展6函数的拓展7数组的拓展8 对象的拓展9 Symbol10...
2019-08-31 09:00:00
188
转载 重温基础：ES6系列（一）
ES6系列目录1 let 和 const命令2 变量的解构赋值3 字符串的拓展4 正则的拓展5 数值的拓展6 函数的拓展7 数组的拓展8 对象的拓展9 Symbol10...
2019-08-30 09:36:45
121
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人