20191215 前端开发周报

9个极其强大的JavaScript技巧;你不知道的 JSON.stringify() 的威力;2019年底史上最全Vue框架整理从基础到实战(二);前端面试必会 | 一文读懂 JavaScript 中的闭包;Vue中容易被忽视的知识点;JS防止页面后退;实现Vue项目主题切换;连v-show都不会你还敢说熟悉 Vue 原理?

  1. 9个极其强大的JavaScript技巧 我喜欢优化! 但是,如果站点无法在用户的 Internet Explorer 11 浏览器中运行,他们不会在乎我的优化代码。 我使用 Endtest 来创建自动测试,并在跨浏览器的云上执行它们。 Netflix 使用相同的工具来测试他们的 web apps 。 你应该查看 文档 下面是9个极其强大的 JavaScript 技巧。 1.全部替换 …
  2. 你不知道的 JSON.stringify() 的威力其实有很多有用的东西,当时学习了,也记住了,但是时间久了就是记不住,所以导致在日常开发中总是想不起来原来这个东西可以这么用,而去选择了更加复杂和麻烦的方式。其实我们日常学习的知识就是拿来用的,即使…
  3. 2019年底史上最全Vue框架整理从基础到实战(二) 单文件组件 在很多Vue项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: ‘#app ‘}) 在每个页面内指定一个容器元素。 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这…
  4. 前端面试必会 | 一文读懂 JavaScript 中的闭包 本文翻译自 blog.bitsrc.io/a-beginners… ,作者 Sukhjinder Arora,内容有部分修改,标题有修改。 闭包是每个 JavaScript 程序员都应该知道并且掌握的基础概念。然而,这个概念使很多 JavaScript 新手感到困惑。 对闭包有适当的了解将有助于您编写更好,更有效和干净的代码。反过来,它将帮助您成为更好的 JavaScr…
  5. Vue中容易被忽视的知识点Vue的学习成本和难度不高,这除了和框架本身的设计理念有关之外,还和Vue完善的官方文档有着密不可分的关系,相信有很多的开发者和我一样,很长时间没有仔细去看过官方文档了,最近花时间仔细看了一下官方文档,…
  6. JS防止页面后退防止页面后退,包括 键盘、鼠标手势等产生的后退动作。 {代码…} 作者:小小书童网站:apppay.xyz
  7. 实现Vue项目主题切换 对于SaaS平台而言,因为需要一套平台面向不同客户,所以会有不同主题切换的需求。本篇主要探讨如何在Vue项目中实现该类需求。 几种方案 有产品需求就要想办法通过技术满足,经过搜索,找到了以下几种方案: 方案一, 定义 theme 参数,通过 prop 下发,子组件根据 theme 来动态绑定 style 的方式实现。具…
  8. 连v-show都不会你还敢说熟悉 Vue 原理? Vue 作为最主流的前端框架,中文资料齐全、入门简单、生态活跃,可以说是工作中最常用的,如今对 Vue 原理的熟悉基本上是简历的标配了。之前参与了部分 2019 校园招聘的面试工作,发现很多简历上都写了:“精通 Vue”、“熟悉 Vue 原理和源码”、“熟悉 Vue 全家桶及其底层原理”、“熟悉 Vue&nb…
  9. 关于 Promise 的 9 个面试题作者:dan levy翻译:疯狂的技术宅 原文:[链接] 未经允许严禁转载 请完成以下9个问题 1. 多个 .catch {代码…} 以上代码的输出将会是什么?请选择正确的答案: [ ] 打印一次消息 [x] 打印两次消息 [ ] Unhand…
  10. 借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项目。
  11. 前端培训-中级阶段(26)- Canvas 绘图(2019-11-21期)前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(…
  12. 2020年史上最全移动端Web整理从开发基础到实战(二) 一、Zepto简介 Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库 , 它 与jquery有着类似的api。 Zepto 主要使用在移动端浏览器上面,由于移动端的浏览器都是比较新的平台,而 jQuery 主要是在 PC 上为了浏览器的兼容性而使用的,所以 在移动端一般不使用 jQuery,因为它的兼容性失去了意义。 …
  13. 你可能不知道的 JS 特性:可选链今天我们来介绍一个你可能没见过的 JS 新特性,目前处于 Stage 3 阶段,它叫作 可选链(optional chaining),它可能解决很多人都面对过的痛点,让我们来了解这下~
  14. vue之新手使用 vue中文网站:https://cn.vuejs.org/v2/guide/installation.html  包含了安装、使用、api、视频。 一. 什么是 Vue Vue 是一个前端框架,特点是 数据绑定 比如你改变一个输入框 Input 标签的值,会 自动同步 更新到页面上其他绑定该输入框的组件的值 组件化 页面上小到一个按钮都可以是一个单独的文…
  15. vue-router源码全解析 最近立了一个flag,要通读 vue-router 源码。压力有点大,希望我能写完。。。 参考版本: vue-router@v3.0.1 github.com/vuejs/vue-r… 源码在 ./src 下,使用 tree 命令查看下目录结构 . |– components // 组件(view/link) | |– link.js | `– view.js |– create-matcher.js // Route…
  16. 【Webpack4】CSS 配置之 MiniCssExtractPlugin 在配置 Webpack 时,需要区分用于开发模式还是生产模式。比如我们只需要在生产模式时压缩 CSS;而在开发模式的时候,我们又希望生成 Sourcemap 便于调试,以及样式热更新。那么,怎么在 webpack.config.js 中判断开发、生产模式呢? 我通常会定义三个 webpack 配置文件: webpack.config.base.js :通用的配置…
  17. 前端应该知道的cors web跨域细节 本文将要讲什么 什么是cors跨域、细节 cors跨域带cookie的细节 结合 demo( zhiguangphoenix/cors-demo ) 前提知识和背景 知道什么是跨域,什么是同源策略,跨域的限制等等 知道除cors外常见的跨域实现 前段时间在工作中接了一个小的后端服务的需求,做的过程中可能需要接入跨域带cookie的方案…
  18. 2020年Node.js将会有哪些新功能2019 年是 Node.js 诞生的第 10 个年头,npm 上可用的包数量超过了 100 万。 Node.js 本身的下载量也在持续增长,同比增长了 40%。另一个重要的里程碑是 最近 Node.js加入了 OpenJS 基金会,该基金会承诺改善项…
  19. 前端-团队效率-webpack4打包骚操作 需求背景 使用angular-cli打包时当工程较大,引入过多时会出现打包卡顿卡死的情况 使用webpack4自定义工程打包,面临着打包时间的问题 常见解决方案 dll缓存,happypack多核打包,optimize压缩缓存,alice别名引用,mode配置等等, www.jeffjade.com/2017/08/12/… 与脚手架结合 在vue-cli中vue.c…
  20. webpack入门指南(基于webpack v4.41.2) 2019年12月5日初稿 ,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员。 webpack官方使用指南( 参考1 ): https://www.webpackjs.com/guides/getting-started/ 本文参考( 参考2 ): https://segmentfault.com/a/119000000…
  21. 硬核 逛了4年Github ,一口气把我收藏的 Java 开源项目分享给你Great Java project on Github(Github 上非常棒的 Java 开源项目).
  22. React Hook 系列(一):彻底搞懂react hooks 用法(万字慎点)用心阅读,跟随codesandbox demo或运行源码,你将熟悉react各种组件的优缺点及用法,彻底熟悉react hook的用法,收益应该不小
  23. 高质量前端快照方案:来自页面的「自拍」将网页保存为图片(以下简称为快照),是用户记录和分享页面信息的有效手段,在各种兴趣测试和营销推广等形式的活动页面中尤为常见。
  24. 记忆化斐波那契函数的思考(JavaScript) 斐波那契数列指的是类似于以下的数列: 1, 1, 2, 3, 5, 8, 13, …. 复制代码 用伪代码表示就是第 n 个数由数列的前两个相加而来: f(n) = f(n – 1) + f(n -2) 常见的处理方式就是直接翻译斐波那契数列的定义 // 定义式 的斐波那契数列计算方式 function fibonacci(n) { if(n === 0 || n === 1) …
  25. [ES6 系列] 你真的了解ES6吗(二)前言 本文是 ES6 系列的第二篇,可以在 这里 查看 往期所有内容 本文的 答案 不一定是最优解释,如果你有更好的想法或更优雅的写法,欢迎留言讨论 如果文章中有出现纰漏、错误之处,还请看到的小伙伴多多指教,先…
  26. 前端性能优化与原理实践之【webpack性能与Gzip原理】 【网络篇】前端性能优化之 webpack 与 Gzip 原理! 一、前端的性能优化思路 从输入 URL 到页面加载完成,这个过程进行不断的优化、反复的琢磨, 把优化做到极致: DNS 解析; TCP 连接; HTTP 请求抛出; 服务端处理请求,HTTP 响应返回; 浏览器拿到响应数据,解析响应内容,把解析的结果展示给…
  27. Github 上的个人项目开源心得「gortal」一个使用 Go 语言开发的,超级轻量的堡垒机(跳板机)服务原文链接 https://elfgzp.cn/2019/12/09/gortal-site-project 由于最近在 Github 发了一个个人开源项目 -「gortal」一个使用 Go 语言开发的,…
  28. 不可不知的JS函数基本知识 思维导图 | |—— 关于函数的定义和作用 |—— (ES6前后的三种定义方法) |—— |—— | |—— 关于函数的参数 |—— |—— | |—— 关于函数的作用于 |—— | |—— 关于函数的执行 |—— …
  29. Javascript浅拷贝和深拷贝浅拷贝和深拷贝在前端开发中是非常重要的知识点,有时候面试官也非常喜欢问到这点,相信很多人只是听过这两个词,不明白他们的意思和涵义,这里将会浅显的讲解浅拷贝和深拷贝。总结学习的同时,希望大家也会有点…
  30. 学习WebFlux时常见的问题回顾一下上篇我对WebFlux的入门,如果没读过的同学建议读一下再来看本篇文章,上一篇文章花了我很多的心血~~
  31. Vue组件的操作-自定义组件,动态组件,递归组件作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件。v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件。 v-m…
  32. 继 HTML、CSS 和 JavaScript 之后,WebAssembly 正式成为 Web 的第四种语言万维网联盟(W3C)2019年12月5日宣布,WebAssembly 核心规范 现在是一种正式的 Web 标准,它为 Web 发布了一种功能强大的新语言。 WebAssembly 是一种安全、可移植的低级格式,能够在现代处理器(包括 Web 浏览器…
  33. 利用 JS 实现多种图片相似度算法在搜索领域,早已出现了“查找相似图片/相似商品”的相关功能,如 Google 搜图,百度搜图,淘宝的拍照搜商品等。要实现类似的计算图片相似度的功能,除了使用听起来高大上的“人工智能”以外,其实通过 js 和几种简单…
  34. VUE 项目基于 i18n 的国际化处理工具 项目 git 地址: i18n-collect-cli npm 依赖包地址: i18n-collect-cli issue 地址: issue 可用于已有 vue 项目的中文提取与替换,将语言文件如 zh.js 转成 excel,同时也可以将 excel 转成对应的翻译文件如 en.js 目前工具的限制 目前脚本 仅支持 .vue 文件和 .js 文件 中的中文提取与写入,如果…
  35. 我的前端知识梳理-VUE篇 1 Vue的底层原理 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。 Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 这里文档只推荐官…
  36. D3 js实现简洁实用的动态仪表盘 动态效果图(动画开头有延迟,稍等…): 细看上面的动态效果图,可以发现: 一个值变换到一个新的值时,是一个渐变的过程; 圆弧末尾有一个竖线,作为仪表盘的指针,在仪表盘数值变化时,有一个弹性的动画效果。 一开始,我是用 Echarts 来实现仪表盘,但是它无法满足上面的两点需求。所以后…
  37. 【新手向】JS继承代码示例 1.通过原型链实现继承 改变原型链的指向 // 父类构造函数 function Person(name,age) { this.name = name; this.age = age; } Person.prototype.hello = function() { console.log(‘hello’); } //子类构造函数 function Student(score) { this.score = score } Student.prototype = new Person(‘mike’…
  38. 前端技术观察(第 11 期):解密 VS Code 断点调试的原理 《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集,主要分为以下几个板块: Highlights 优秀的工具、库 好的教程、深度解读已有技术的文章 业界最新的技术、热点文章…
  39. 注意侵入 JSON Web Token (JWT) 全文共4545字,预计学习时长13分钟 图源:Unsplash 想象一下,你正安逸地躺在家里刷公众号,突然,你的手机嘀嘀嘀,一笔又一笔巨款从你的卡里不翼而飞,急得你惊起直跺脚,咋回事啊?! 突然你想到了刚刚在“读芯术”看到的有关“JSON Web Token”…
  40. WebSocket 与 Socket.io 最近在做一个在线的聊天系统,我利用了 WebSocket 技术,具体说是websocket的库socket.io。 1. 什么是 WebSocket 提到 WebSocket,我首先会想到 “及时通讯” 和 “推送” 这类词。在 WebSocket 以前,很多网站通过其他方式来推送信息,下面我们先看看以前的推送方式,这样,有比较才能看出 WebSocket 的优势。 1.1 (…
  41. vuex-基础以及辅助函数的用法 组件之间的参数传递有父子之间的传值,兄弟之间的传值,祖先和孙子之间的传值在层级较少的时候比较方便使用。 但是层级数较多,嵌套较麻烦时,使用起来就会相对的繁琐且不好维护 因此想到了vuex,将组件的共享状态抽取出来,以一个全局单例模式进行管理。组件树则形成了一个巨大的”视图“。 不管树的哪个位置,任何组件都…
  42. D3.js 制作柱状图 D3 是用于数据可视化的Javascript库。使用 SVG , Canvas 和 HTML 。结合强大的可视化技术和数据驱动的DOM操作方法。 D3与JQuery的区别 D3 是数据驱动的, JQuery 不是:我们使用 JQuery 直接操纵元素;但是使用 D3 时我们需要通过 D3 专有的 data() , enter() 和 exit() 方法提供数据和回调,然后 D3 操作元…
  43. Vue项目部署到nginx服务器资料收集Nginx报502错误,日志connect() failed (111: Connection refused) while connecting to upstream的最终完美有效解决方案 – hithedy的专栏[链接]
  44. JS算法题之每日一题-数组删除重复项(2019-12-13)给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。
  45. 阿里经济体前端技术最新内容汇总作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成。在此期间研发小组经历…
  46. JS回顾变量、作用域、内存问题 ECMAScript变量包含两种不同数据类型的值: 基本数据类型 和 引用数据类型 在将一个值赋值给变量时,解析器必须知道这个值是基本数据类型还是引用数据类型.基本数据类型: Undefine、Null、Boolean、Number和String,这五种基本数据类型是按值访问的,因为可以操作保存变量中的实际的值. 引用数据类型的值是保存在内存…
  47. HTML5 与 CSS3 基础语法自学教程(十三) 本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注,第一时间看文章! 导读:本小节主要讲解有关结构化元素的内容,其中包含了什么是结构化元素,以及一系列具体的结构化元素的语法和用法。通过本小节的学习,可以很好地掌握结构化元素的概念以及具体用法。结构化元素也是网页开发的基…
  48. 前端代码重构一、代码规范化 1. 整理一套vscode中格式化配置,在页面保存时自动格式化,团队成员格式统一(搭配eslint)。 2. 整理项目中的命名(不要嫌长,但也不能过于冗长,尽量能让人一眼看明白) {代码…} 3. html嵌套…
  49. 还没搞懂 NodeJS 的 HTTP 服务器?看这一篇就够了 http2/https不在本文的讨论范围,本文基于Nodejs v13.1.0 阅读本篇文章之前,请阅读前置文章: nodejs深入学习系列之libuv基础篇(一) nodejs深入学习系列之libuv基础篇(二) nodejs是如何和libuv以及v8一起合作的?(文末有彩蛋哦) Nodejs流学习系列之三: Duplex Stream &…
  50. 【100天复习前端】JavaScript对象机制-创建对象 前面复习了 JavaScript 对象的基本内容,主要包括对象的基本概念以及对象的两种属性,这一节将复习 JavaScript 对象创建的几种方式,核心要点在于对对象原型的理解,这也是后面关于对象继承一块中原型链的关键所在。 1.工厂模式 工厂模式的核心是利用函数来封装以特定接口创建对象的细节,这一个的话不是我们复习的…
  51. 写给前端的正则表达式入门 1. 概览 在JavaScript中,使用//即可创建一个正则表达式对象,当然也可以使用new RegExp() 常用的跟正则相关的方法有match、test和replace。 其中match,replace都是字符串上的方法,test是正则对象上的方法。 下面看具体的图示: 2. 匹配单字符 /r…
  52. GitHub 计划登陆中国,将产生哪些影响与意义?近日,全球最大的软件开发平台 GitHub 计划在中国开设子公司。GitHub 首席运营官 Erica Brescia 在接受英国《金融时报》采访时表示,对于该公司在中国扩张的计划,中国方面「非常鼓励」。
  53. 基于 HTML5 WebGL 的 3D 科幻风机许多世纪以来,风力机同水力机械一样,作为动力源替代人力、畜力,对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机发电机的发展缓慢下来。
  54. 关于 http 的一些面试题总结关于 http 的一些面试题总结 题目汇总 【Q121】我们如何从 http 的报文中得知该服务使用的技术栈 【Q119】https 是如何保证报文安全的 【Q117】既然 http 是无状态协议,那它是如何保持登录状态 【Q116】http 服…
  55. gulp 4.0.2[更新]函数式task使用(含gulp.watch处理方法)作者最近在学习node 使用gulp模块构建项目,在gulp官方中文文档 [创建任务(task)页] 发现官方推荐使用function写法创建task,可使用gulp.series() 、 gulp.parallel() 处理多task,使用分别如下
  56. HTML5树叶飘落动画 HTML5动画经典源码 互联网的那些破事的微博视频

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流