Gyoung杨广

原创 js全屏问题

判断全屏function isFullscreen(){ return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;}...

原创 数组函数some()、every()用法

这两个方法用的其实并不多，但遇到了还是记录一下some()、every()是用于判断数组的：1.some()不创建新数组、不改变原数组、判断为true则马上return true，否则return false；let arr = [1,2,3,4,5];let result1 = arr.some((item)=> { return item > 2 &a...

原创 30个前端技术分享主题

这是我们团队前30期的前端内部技术分享主题，我做的是第1、10、19期的分享，仅供大家参考

原创 一道经典的考察事件循环、宏任务、微任务的js题

一道经典的考察事件循环、宏任务、微任务的js题 async function async1(){ console.log('async1 start') await async2() console.log('async1 end')}async function async2(){ console.log('async2')}console.log('script star...

原创 记一次电商活动页开发经历

对电商项目来说，营销活动肯定是少不了的促销手段，比如淘宝的双11、支付宝最近的瓜分15亿等等，那么在很多时间节点，我们前端开发就要进行一些活动页的开发。我们bilibili会员购项目在这过年前夕也将上线一个集卡游戏的活动页，我负责开发的部分是闯关和抢仓库的部分。整个集卡游戏的流程就是许愿集赞、下单做任务获得卡牌，然后用卡牌来闯关，最后到仓库中抢商品，当然还有一些其他的辅助页。在做这次活动页...

原创 svg初探

svg是一种可缩放的矢量图形，基于XML语法，缩放不会失真，可以直接在HTML中嵌入svg代码，也可以用img等元素引入svg文件。常用的一些元素有如下几种：（1）<rect><rect>用于绘制矩形。（2）<circle><circle>用于绘制圆形。（3）<ellipse><ellipse>...

原创 【canvas踩坑】跨域和缓存问题

这次拜年祭做了一个集卡游戏的营销活动，需要分享一张获奖图片出去，我是用canvas画出来的，中间遇到了两个坑，与大家分享一下，最终图片做出来的效果如下：【1】第1个坑是跨域的问题一般我们图片都会放在静态资源cdn服务器上，而域名与我们项目域名一般不同，这就存在一个跨域问题。即使服务端会设置CORS的跨域响应头，但是在js中使用canvas toDataURL api时，会报这样的错...

原创 强缓存和协商缓存逻辑

原创 推荐一个字体系列font-family写法

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;第1、2个"Helvetica Neue", Helvetica为ma

原创 如何让vscode eslint插件检查vue单文件问题

在vscode中安装了eslint插件，并且配置了.eslintrc.js配置文件后，默认情况下并不会在控制台检查出.vue单文件的报错。这种情况下只需更改vscode用户设置中的eslint validate配置就行，新增html, vue项，如图。打开settings.json文件，新增最后几行覆盖默认配置...

原创 vue源码中有ts语法，vscode查看提示错误问题

当用vscode查看vue源码时，发现js文件中有ts语法时，vscode会提示错误，如图这个原因是因为vscode默认开启了对js文件的验证检查，可以在用户设置区禁用它，如图最后一行这样即可让vscode不再错误的验证了。 ...

原创 纯正的nodejs程序调试

对于本地编写的nodejs程序怎么调试呢？其实在chrome开发者工具中自带了调试工具，那么步骤如下：首先编写完node程序后，用node --inspect app.js调试模式启动你的程序，然后在chrome访问你的路由，再打开开发者工具，你将会看到一个绿色的入口，如图点击这个入口即可进入调试工具。假如你没看到这个入口可以，在浏览器里输入http://localhost:9...

原创 《Effective JavaScript 编写高质量JavaScript代码的68个有效方法》

第1章 让自己习惯JavaScript第1条 了解你使用的JavaScript版本确保你使用的任何JavaScript特性对于应用程序将要运行的所有环境都是支持的；总是在执行严格模式检查的环境中测试严格代码。第2条 理解JavaScript的浮点数事实上，JavaScript中所有的数字都是双精度浮点数。位运算将数字视为32位的有符号整数。浮点数权衡了精度和性能，当我们...

原创 《前端架构设计》读后记录

这本书主要讲了作为一名前端架构师的三个职责，分别是体系设计、工作规划、监督跟进，四个架构的核心，分别是代码核心、流程核心、测试核心、文档核心。《前端架构设计》pdf百度网盘下载链接: https://pan.baidu.com/s/1QWBola_Ne12FtAA3EJf5Gw 密码: ecac第一部分 引言软件架构师的职责就是要保证项目中每一步都在总体架构的指导下进行，而不是随机...

原创 《写给大家看的设计书》读后记录

其实前端工程师也要懂点设计，毕竟还要与上下游的人打交道，说不定看到设计给你的设计稿时，还可以提点建设性意见呢。这本书我也是在豆瓣上看到别人写的web前端工程师必读书目清单里看到的，书的作者是一位世界级的设计师。读到本书的第一部分真的是让我有点震惊，设计这么抽象的东西竟然可以抽象成4个原则，并且这4个原则一说人人都懂，然后看了里边很多实例，真的是很佩服作者。如果大家有兴趣也可以看看，读下来也就一两...

原创 《软技能 代码之外的生存指南》

这是一本关于程序员人生的书籍，并不是一本技术书。作者从职业、自我营销、学习、生产力、理财、健身、精神七个方面来介绍，从中可以看出作者初期还是一个扎实、能力强的程序员，后面慢慢进入房产和其他投资实现了财务自由。读完这本书后，感觉职业篇、自我营销篇、学习篇、生产力篇、理财篇还是有很多干货值得我们学习的。《软技能 代码之外的生存指南》pdf书籍下载链接: https://pan.baidu.co...

原创 看技术书籍坚持不下来的，看这里，记录增量学习法

今天，在阅读《软技能 代码之外的生存指南》这本书的过程中，学习到了番茄工作法、定额工作法，受此启发，突然脑海里冒出了一个方法论，这是我独创的一个学习方法论，我把它称作“记录增量学习法”。当然，这不是我凭空想出的，这是我这一年来的学习实践，通过这种方式我已经成功的坚持读完了将近20本技术书籍了，从我之前的博客文章也可以看到我一直在使用它，并且之前还有人在下方评论质疑这种方式到底是啥，到底有什么作用。...

原创 张鑫旭的《CSS世界》读后笔记

【题外话】之前有人问过我你这样做笔记有啥用吗，跟写目录一样，我的回答是这不是写目录哈，这是在阅读过程中把些自己认为重要的知识点记下来。这样做对我有几个作用，首先是可以敦促自己一步一步把这本书认真的阅读完，其次是加深一下自己对这些知识点的记忆，还有就是方便以后自己回顾。不知道这个方法对你们有没有用哈，如果拿一本向《Javascript高级程序设计》这样的大部头给你读，你做不到坚持读完的话，可以试试...

原创 前端人员也能拥有自己的个人网站

现在来写这篇文章看似有点迟了，因为我的个人网站服务器没有续费已经停掉了。但还是可以根据截图来写一写，姑且当作回顾。pc首页【历史背景】首先，简要说下开发这个网站的背景，这是2017年12月份突发奇想想做一个网站，但是做什么呢？想着最近好像今日头条特别火，就想着做一个内容类的网站，这类网站内容通过爬虫也很容易获取，哈哈哈，所以最终就做了《金句猫》这个站点。网站采用了前后端分离的架构，前...

原创 《深入浅出Webpack》

第1章 入门（1）模块化1.CommonJSCommonJS是一种被广泛使用的Javascript模块化规范，其核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。2.AMD与CommonJS最大的不同在于，它采用了异步的方式去加载依赖的模块。主要用于解决针对浏览器环境的模块化问题，最具代表性的实现是requirejs。...

原创 《HTML5与CSS3权威指南》

第1章 Web时代的变迁2010年正式推出HTML5。 第2章 HTML5与HTML4的区别（1）新增的元素：Section元素、article元素、aside元素、header元素、hgroup元素、footer元素、nav元素、figure元素；video元素、audio元素、embed元素、mark元素、progress元素、time元素、ruby元素、rt元素、rp...

原创 《极客与团队》读书记录

第一章 天才程序员的传说（1）帮我把代码藏起来（2）天才的传说（3）隐瞒是有害的公车因子：一个项目里，需要有多少人被公车撞到才能令其完全瘫痪。（4）团队才是王道（5）三支柱谦虚、尊重、信任第二章 培养出色的团队文化（1）什么是文化团队文化不仅仅是成员们编写代码的方式或是成员之间的相处之道，它还包含了所有人都认可的经验、价值观、目标。（2）为什么关心它（3）文化和人（4）优秀团队文化中的沟通模式（5...

原创 Mac下更新nodejs版本

 第一步，先查看本机node.js版本：        $ node -v第二步，清除node.js的cache：       $ sudo npm cache clean -f 第三步，安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"        $ sudo npm install -g n第四步，安装最新版本的node....

原创 《CSS权威指南》第3版 续

第10章 浮动和定位（1）浮动：Float: left | right | none | inherit; （会脱离文档流）包含块：浮动元素的包含块是其最近的块级祖先元素。此外，浮动元素会生成一个块级框，而不论这个元素本身是什么。Clear：left | right | both | none | inherit;（2）定位：通过position属性，可以选择4种不同类型的定位position: ...

原创 《CSS权威指南》第3版

第1章 CSS和文档层叠样式表（Cascading Style Sheets，CSS）的功能非常强大，可以影响一个或一组文档的表现。1995年，W3C开始发布一种正在进行的计划，称为CSS。到1996年，这已经成为了一个成熟的推荐草案，其地位与HTML同样举足轻重。层叠：CSS还规定了冲突规则，这些规则统称为层叠。替换元素：是指用来替换元素内容的部分并非由文档内容直接表示，例如img元素，它由文档...

原创 Android、ios h5开发特殊问题处理

（1）滚动条隐藏问题用::-webkit-scrollbar{display:none}会存在兼容性问题，可以这样设置padding-bottom:18px;margin-bottom:-18px;取巧解决。（2）字体垂直偏上问题Font-size小于14px时在ios显示正常，但是在android上会偏上一点，可以通过transform:scale(0.5)缩放解决。（3）scr...

原创 flex布局

任何一个容器都可以指定为Flex布局：块级元素display:flex;   行内元素display:inline-flex;  webkit内核浏览器加上display:-webkit-flex;设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。以下6个属性设置在容器上：（1）flex-direction决定主轴的方向Flex-direction: r...

原创 charles使用

（1）手机设置ip地址和8888端口（2）访问https需安装证书，charles help下SSL Proxying，手机端chls.pro/sslIphone上关于本机勾选信任证书Android可以试试浏览器能否安装证书，不能的话可以用爱莫助手连接电脑传文件过去(http://web.airmore.com/)。（3）接口使用mock数据，charles proxy下勾选macOs proxy...

原创 《了不起的Node.js》读后笔记

介绍：主要介绍五部分：Node核心设计理念、Node核心模块API、Web开发、数据库以及测试。从2009年Ryan Dahl着手开发Node.js。Node以其异步IO、服务器端JavaScript的特点为Web开发掀开了新的篇章。Node.js快速高效的优点得益于一种叫做事件轮询(event loop)的技术，以及其构建于V8之上，V8是Google为Chrome Web浏览器设计的JavaS...

原创 JS笔记：第25章 新兴的API

第25章 新兴的APIrequestAnimationFrame()：很长时间以来，计时器和循环间隔一直都是JavaScript动画的最核心技术。requestAnimationFrame告诉浏览器，有一个动画开始了，进而浏览器就可以确定重绘的最佳方式。（1）早期动画循环setInterval()方法来控制动画。大多数电脑显示器的刷新频率是60HZ，大概相当于每秒钟重绘60次。因此，最平滑动画的最...

原创 JS笔记：22-24章 高级技巧、离线应用与客户端缓存、最佳实践

第22章 高级技巧高级函数：（1）安全的类型检测Object.prototype.toString.call(value) == “[object Array]”;检测数组Object的toString()方法不能检测非原生构造函数的函数名。（2）作用域安全的构造函数没有使用new操作符来调用构造函数的情况下，this会映射到全局对象window上。这个问题的解决方法就是创建一个作用域安全的构造函...

原创 JS笔记：18-21章 XML、JSON、Ajax、跨域和安全

第18章 JavaScript与XML曾几何时，XML一度成为存储和通过因特网传输结构化数据的标准。此前，由于浏览器无法解析XML数据，很多开发人员都要动手编写自己的XML解析器。而自从DOM出现后，所有浏览器都内置了对XML的原生支持（XML DOM），同时也提供了一系列相关的技术支持。浏览器对XML DOM的支持：（1）DOM2级核心支持DOM2级的浏览器中创建一个空白的、文档元素为<r...

原创 JS笔记：15、16、17章 Canvas、HTML5编程、错误处理

第15章 使用Canvas绘图不用说，HTML5添加的最受欢迎的功能就是<canvas>元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。除了具备基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。基本用法：<canvas id=“drawing” width=“200” height=...

原创 JS笔记：第13、14章 事件和表单脚本

第13章 事件JavaScript与HTML之间的交互是通过事件实现的。事件流：事件流描述的是从页面中接收事件的顺序。但有意思的是IE和Netscape开发团队居然提出了差不多完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。（1）事件冒泡IE的事件流叫事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节...

原创 JS笔记：第10、11、12 DOM相关

第10章 DOMDOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。节点层次：DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。文档节点是每个文档的根节点。<html>元素，我们称之为文档元素。每个文档只能有一个文档元素。每一段标记都可以通过树中的一个节点来表示...

原创 前端跨域解决方案

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。同源策略：同源是指“协议+域名+端口”三者相同。跨域解决方案：1.通过jsonp跨域；2.document.domain+iframe跨域；3.location.hash+iframe跨域；4.window.name+iframe跨域；5.postMessage跨域；6.跨域资源共享（CORS）；7.nginx代理跨域；8.nod...

原创 前端安全知识

（1）XSS（跨站脚本攻击Cross Site Scripting）最常见的攻击WEB网站的方法，攻击者通过注入非法的html标签或者javascript代码，从而当用户浏览该网页时，控制用户浏览器。可能造成以下影响：1.利用虚假输入表单骗取用户个人信息；2.利用脚本窃取用户的Cookie值，被害者在不知情的情况下，帮助攻击者发送恶意请求；3.显示伪造的文章或图片；防御：按理说，只要有输入数据的地...

原创 如何发布自己的第一个npm包

（1）在https://www.npmjs.com/注册一个账号（2）在github上创建一个空项目，然后clone到本地（可选）（3）在空项目中创建一个index.js文件，写入你想写的内容，该文件作为你包入口文件（3）在空项目中执行npm init初始化一个json配置文件（4）然后本地npm login登录你的npm账号（5）然后npm publish 包名，发布你的npm包（6）第5步可能...

原创 浅析vue.js双向数据绑定mvvm实现原理

什么是双向数据绑定？按简单的话语描述，就是数据变化更新视图，视图变化更新数据。两种实现双向数据绑定的方法：（1）脏值检查（angular.js）Angular.js是通过脏值检查的方式来判断数据是否更新，来决定视图是否更新。最简单的就是通过setInterval()来设置一个定时器轮询数据是否变动，当然angular只有在指定的事件触发时才进入脏值检测，如：DOM事件，比如用户输入文本，ng-cl...

原创 【带图】讲解offsetHeight、offsetLeft、clientWidth、scrollHeigth、scrollTop等几个属性的区别

1.偏移量元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框的大小（注意，不包括外边距）。offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、水平滚动条的高度、上边框高度和下边框的高度。offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft：元素的左外边框至包含元素...