20200605 前端开发日报

5 个你需要知道的 JavaScript 小技巧;这些热门 GitHub 库,值得每一个前端开发者收藏;尤雨溪:重头来过的 Vue 3 带来了什么?;图解JavaScript——进阶篇(执行上下文、变量对象、作用域、作用域链、闭包、this、原型及原型链、事件循环等一把梭);前端实习凉凉面;web安全之XSS实例解析;VS Code 调试完全攻略(6):调试用 TypeScript 开发并打包的 React ;第二期:前端九条bug分享

  1. 5 个你需要知道的 JavaScript 小技巧

    JavaScript 是目前最流行的编程语言之一。就像其他任何编程语言一样,它也有很多小技巧,从今天开始你就可以使用它们。 大多数程序员都应该每天训练这些小技巧,直到熟能生巧。 在这篇文章中,我们将一起练习一些技巧,它可以让你成为更好的开发者,也可以提高你的 JavaScript 技能。 1. Every 和 Some 并不是所有…

  2. 这些热门 GitHub 库,值得每一个前端开发者收藏

    作为一个码农,我们需要专注于功能和最佳实践,而不是一遍遍地编写样板代码。消除无用功,投入时间学习使用正确的工具或者懂得使用有用的资源可以极大的帮助我们节省时间。

  3. 尤雨溪:重头来过的 Vue 3 带来了什么?

    【CSDN 编者按】为了实现更清晰、更易维护的源代码架构,Vue.js 作者尤雨溪于 2018 年年底透露 Vue 下一版本 Vue 3.0 将从头开始写 。 如今一年多时间已过,在上个月,我们终于见证了 Vue 3.0 beta 的发布:https://github.com/vuejs/vue-next#status-beta,不过对于该测试版,尤雨溪表示,“暂时还不建议升级生产环境…

  4. 图解JavaScript——进阶篇(执行上下文、变量对象、作用域、作用域链、闭包、this、原型及原型链、事件循环等一把梭)

    使用思维导图阐述JS的知识,为面试及工作助力。本节是第二部分,主要内容包括函数的执行(函数执行过程、执行上下文、变量对象、作用域、作用域链、闭包、this指向、原型及原型链等)和事件循环(任务分类、Event…

  5. 前端实习凉凉面

    自我介绍 省略 OSI网络分层 物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 HTTP请求的连接与断开 三次握手 四次挥手 url到页面展示的过程 DNS解析、HTTP请求、浏览器获得数据渲染页面。 DNS是怎么解析的 不清楚 浏览器是怎么将HTML渲染成页面的 解析HTML文档,构…

  6. web安全之XSS实例解析

    跨站脚本攻击(Cross Site Script),本来缩写是 CSS, 但是为了和层叠样式表(Cascading Style Sheet, CSS)有所区分,所以安全领域叫做 “XSS”;

  7. VS Code 调试完全攻略(6):调试用 TypeScript 开发并打包的 React

    说到前端,我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置,只需最少的配置。本文将向你展示如何在 VS Code 中创建匹配的调试器。

  8. 第二期:前端九条bug分享

    这次9个并不都是bug, 其中有几个小优化, 虽然一个月的时间遇到很多bug, 但并不是每个都有参考价值, 让我们看看这次我遇到的有趣问题吧.

  9. 你不知道的 React 最佳实践

    React ⚛️ React 是一个用于开发用户界面的 JavaScript 库, 是由 Facebook 在 2013 年创建的。 React 集成了许多令人兴奋的组件、库和框架 。 当然,开发人员也可以自己开发组件。 图片 在最佳实践之前,我建议在开发 React 应用程序时使用测试驱动开发(TDD) 。 测试驱动开发意味着首先编写一…

  10. WebSocket学习入门

    WebSocket简介 WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。 其他特点包括: (1)建立在 TCP 协议之上,服务器端的实现比较…

  11. 阿里巴巴开源的 JSON 解析库 Fastjson 被曝高危漏洞,官方已发布安全公告

    Fastjson 是阿里巴巴开源的一个 Java 库,可以将 Java 对象转换为 JSON 格式,当然它也可以将 JSON 字符串转换为 Java 对象。fastjson 当前版本为 1.2.68 发布于 3 月底。

  12. Tech 与 Team:再聊 Git Flow

    最近定了一些团队标准的东西,刚好聊到了 Git Flow 这个事,可以拿出来分享一下。 对本文有任何问题,可加我的个人微信询问:kymjs123 最近定了一些团队标准的东西,刚好聊到了 Git Flow 这个事,可以拿出来分享一下。 分支应用情境 根据 Git Flow 的建议,主要的分支有 master、dev…

  13. 正确的将Promise链重构为async函数

    正确的将Promise链重构为async函数 原文作者:Tamás Sallai 0.引言 将一系列 then() 函数转换为async/await,而不会丢失函数作用域 1. 重构成async/await 现在,async/await 已经得到了广泛的支持、应用 ,Promises 已经是一种老的解决方案了,但是它们仍然是驱动所有异步操作的引擎。 但是构…

  14. 从无到有,闲鱼 Flutter 一体化演进之路

    前言Flutter一体化研发模式在闲鱼落地探索已有半年多了,前面也有多篇文章已经分享过阶段性成果,今天给大家分享下在这个过程中闲鱼探索出来的一条路。业务痛点时间回到2019年8月。在那之前闲鱼上每年会有不少创新型交易模式在做探索,但是交易链路代码年久失修,维护成本很高,无法快速支撑到业务。例如下图所示: …

  15. 从最简单的斐波那契数列来学习动态规划。(JavaScript版本)

    前言 斐波那契数列是一个很经典的问题,虽然它很简单,但是在优化求解它的时候可以延伸出很多实用的优化算法。 它的概念很简单,来看一下 LeetCode 真题里对他的定义: 斐波那契数,通常用  F(n) 表示,形成的序列称为斐波那契数列。该数列由  0 和 1 开始,后面的每一项数字都是前面两项数字的和。…

  16. 手撕 Webpack:HtmlWebpackPlugin 插件使用

    介绍 HtmlWebpackPlugin 简化了HTML文件的创建,它可以帮我们自动生成一个 HTML 文件,并自动引入每次编译后的 webpack bundle 文件。如果你不想使用插件生成的 HTML文件, 也可以使用lodash模板提供你自己的模板。关于 lodash 模板的介绍请参考:https://lodash.com/docs#template 安装  npm i …

  17. JS避坑-如何优雅地遍历对象

    for…in 常用于遍历对象或者数组,比如 const obj = { a: 1, b: 2 }; for (const key in obj) { console.log(key, obj ); } // 输出 // a 1 // b 2 复制代码 我们都知道 for…in 会遍历原型链上的属性,所以一般会结合 hasOwnProperty 来判断属性是否在对象自身上,而不是在原型链上。 for…

  18. 前端进阶算法5:全方位解读前端用到的栈结构(调用栈、堆、垃圾回收等)

    栈结构很简单,我们可以通过数组就能模拟出一个栈结构,但仅仅介绍栈结构就太不前端了,本节从栈结构开始延伸到浏览器中 JavaScript 运行机制,还有存储机制上用到的栈结构及相关数据结构,一文吃透所有的前端栈…

  19. 使用JS做文档处理

    最近应友人邀请, 要帮忙写个文档处理脚本, 考虑到如果使用PHP或者Perl需要在友人的机器上,搭建一个运行环境,比较复杂, 使用起来也不友好, 本着以人为本的信念, 决定采用hta实现. 其实, 在Windows平台上, js可以调用很多Windows提供的ActivexObject, 在这个意义上来说, 用js写HTA时, js已经不再是传统意义上的Web客户端…

  20. Node.js实战—Node.js+MySQL+RESTful

    因为菜,所以学习。因为生活,所以热爱。 寄语:长风破浪会有时,直挂云帆济沧海。 本文已收录至 github.com/likekk/-Blo… 欢迎大家star,共同学习,共同进步。如果文章有错误的地方,欢迎大家指出。后期将在将GitHub上规划前端学习的路线和资源分享。 最近学习了一下Node.js相关的内容,在这里初步做个小总结,…

  21. JavaScript必须掌握的基础 — this

    this this是我们在书写代码时最常用的关键词之一,即使如此,它也是JavaScript最容易被最头疼的关键词。那么this到底是什么呢? 如果你了解执行上下文,那么你就会知道,其实this是执行上下文对象的一个属性: {…

  22. canvas圆形可拖动进度条

    一、示例效果: codepen.io/pangyongshe… 二、dome代码 本文是实现可拖动滑块实现的基本思路,及一个简单的dome,( github.com/pangyongshe… ) 三、实现 1、首先在html中创建一个canvas标签 <canvas id="canvas" width="400" height="400"></canvas>…

  23. 前端模块化开发之ES Module

    了解过Web前端开发的小伙伴应该知道,历史上,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言如java、python等都具备这项功能,唯独Java…

  24. VUE使用typescript搭建项目

    作者推荐三个插件 vue-property-decorator 这个插件是对 vue-class-component (官方)插件的一个扩展 npm插件地址 常用插件方法如下 @Prop @PropSync @Model …

  25. js的BOM与DOM知识

    DOM本质 DOM节点操作 DOM树结构操作 几个关键对象:navigator、screen、location、history 事件绑定 事件冒泡 事件代理 HTTP状态码 可以允许跨域的标签j及其特殊用法 JSONP cookie localStorage sessionS…

  26. vue的keep-alive讲解

    保存用户状态,比如说:我们在填写收货地址的页面,需要跳转到另一个页面通过定位选择地址信息再返回继续填写,这时候需要缓存收货地址页面,避免跳转页面导致用户数据丢失。

  27. 解析Vue Router源码

    如果没有相应的 Router 源码阅读经历(如 React Router 的阅读经历),那么可能不需要通过了解整个流程就可以知道大致的实现方式,但是对于没有类似的经历的,那么很难做到 窥一斑而知全豹 。如果一开始就直接按点来进行讲解的话,那么很多时候都会很懵,因为不知道作用。所以在进行讲解之前,先看一下 Vue Router 的工…

  28. TypeScript小抄写员

    TypeScript = Type + Script(标准JS)。我们从TS的官方网站上就能看到定义:TypeScript is a typed superset of JavaScript that compiles to plain JavaScript。TypeScript是一个编译到纯JS的有类型定义的JS超集。

  29. 在Vue中创建可重用的 Transition

    点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

  30. websoket初体验

    websoket心跳机制,是为了检测浏览器与服务端连接是否正常而存在的机制,如果不存在心跳机制,当浏览器异常或断网状态,浏览器或服务端可能一直发送无用的消息,浪费资源.检测原理就是定时向服务端发送消息表明连接正常,如果接收到响应就表明连接依旧存在可正常使用. 二 代码逻辑 //运行环境判断(获取不同环境名称的方法…

更多内容请关注公众号【前端开发博客】每日更新


关注我

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

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

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