20200606 前端开发周报

vue3.0 beta已出,来快速实践一下吧;图解 Promise 实现原理(四)—— Promise 静态方法实现;js从原始数据类型到深浅拷贝(个人笔记);这些热门 GitHub 库,值得每一个前端开发者收藏;javascript代码重构之:写好函数;【深度揭秘】你不知道的 JS 强制类型转换知识;5 个你需要知道的 JavaScript 小技巧;探究SEO与VUE首屏渲染及其解决方案

  1. vue3.0 beta已出,来快速实践一下吧

    vue3.0 beta已出,来快速实践一下吧 本文视屏 我的个人博客 vue3向下兼容vue2,vue2目前也是必学的 本节源码 立即前往 前段时间尤大在哔哩哔哩直播了vue3的预览,来简单实践一下吧 api文档 Composition API RFC 立即前往 vue3地址 立即前往 vue3的改变 更小更快 …

  2. 图解 Promise 实现原理(四)—— Promise 静态方法实现

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/Lp_5BXdpm7G29Z7zT_S-bQ 作者:Morrain 了用法,原生提供了Promise对象。更多关于 Promise 的介绍请参考阮一峰老师的  ES6入门 之 Promise 对象 。 很多同学在学习 Promise 时,知其然却不知其所以然,对其中的用法理解不了…

  3. js从原始数据类型到深浅拷贝(个人笔记)

    最近学习总结感觉很多知识都串一起去了,所以今天就把几个知识点一起理一理把。 原始数据类型 number null   (没有值却存在  这里“没有对象”,即不应该有值) underfined  (应该有值却不存在,这里"缺少值",就是这里应该有值,但是还没有定义) boolea string …

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

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

  5. javascript代码重构之:写好函数

    系统由程序、子程序和函数组成。写好函数,就会让你的代码读起来清晰得多。接下来讨论如何写好函数 1、函数要短小,一个函数只做一件事 如果函数做了较多的事情,它就难以组合、测试和推测。同时让函数只做一件事情的时候,它们就很容易重构。 // Bad function showStudent(ssn){ const student = db.get(ssn); …

  6. 【深度揭秘】你不知道的 JS 强制类型转换知识

    如 | 或者 ~ ,只适用于 32 位整数,运算符会强制操作数使用 32 位格式。 比如: 0 | -0 // 0 0 | NaN // 0 0 | Infinity // 0 0 | -Infinity // 0 复制代码 以上的数字因为来自 IEEE 754 标准,而运算符强制要求 32 位格式,但是它们无法以 32 位格式来呈现,所以返回 0。 对于 ~ ,首先将值强…

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

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

  8. 探究SEO与VUE首屏渲染及其解决方案

    前言 【音乐博客】 上线啦! 开开心心部署到服务器,然后满怀欣喜打开首页,结果发现有点小慢,这就很不愉快啦 下面来解决vue首屏渲染 五个方面 1. SPA单页面应用 首屏打开速度很慢,因为用户首次加载需要先下载SPA框架及应用程序的代码,然后再渲染页面。 不利于…

  9. 也许这才是你想要的微前端方案

    微前端是当下的前端热词,稍具规模的团队都会去做技术探索,作为一个不甘落后的团队,我们也去做了。也许你看过了Single-Spa,qiankun这些业界成熟方案,非常强大:JS沙箱隔离、多栈支持、子应用并行、子应用嵌套…

  10. Vue的class语法与常规语法对照表

    由于项目需要,需要使用 Vue 的 class 语法配合 TypeScript 来进行组件开发,我也简单总结了一下Class语法与常规语法的对照,便于记忆和查阅。 项目中使用的是 vue-class-component 、 vue-property-decorator 配合 TypeScript 来进行开发的,其中 vue-class-component 提供了 class 语…

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

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

  12. vue-cli踩坑记录

    初步判断,由于css样式资源、页面资源都已经加载到位,排除网络环境问题后,让用户打开控制台截图看一下,白屏的原因是由于JS执行报错阻塞了后续的逻辑执行和渲染。

  13. 从一个误写的逗号谈开去——JS代码是如何被压缩的

    故事起源于一个很小问题,我写了个代码,被质疑有问题:简化之后大概如下: {代码…} 被质疑的主要原因是第三行a=123的后面为什么是逗号,不是分号。坦白来说,我是简单的手误,将分号错写成了逗号。但是感觉貌…

  14. 一篇文章,全面掌握Git

    版本控制 版本控制就是记录项目文件的历史变化。它为我们查阅日志,回退,协作等方面提供了有力的帮助。 版本控制一般分为集中化版本控制和分布式版本控制。 集中化主要的版本数据都保存服务端。 分布式版本数据…

  15. css布局实例第二篇:3种方法实现三栏布局高度不定,左右宽度一定,中间宽度自适应

    承接上文思考2 flex布局,table布局,grid布局可以实现高度不定,左右自适应中间高度 float布局overflow:hidden可以使中间内容垂直排布,不能左右自适应; 绝对定位布局只能指定固定高度,不能左右自适应; {代码…

  16. 用js实现css的文字两端对齐效果

    引言: 作为前端开发,我们常常用到text-algin这个属性使文字两端对齐。今天我们使用js来实现一个文字两端对齐的效果! 题目: 给定一个所有项都是长度大于0的字符串words,以及每行最大字符数target。请实现每一行两端对齐。最后一行需要采用左对齐! eg1: Input: words = ["This", "is", &quot…

  17. 小小试水—npm上传自己的vue组件

    注册npm账号 搭建一个vue项目 新建packages文件夹 修改vue.config.js配置 修改package.json配置 搭建一个vue项目 可以查看我的文章搭建一个vue3/4项目 目录如下: ├── node_modules/ # 依赖包; ├── public/ # 静态资源,不经过打包; │ ├── favicon.ico …

  18. 使用Vue全家桶+Node.js搭建的小型全栈项目

    项目运行 # 克隆到本地 git clone git@github.com:Hanxueqing/Douban-Movie.git # 安装依赖 npm install # 开启本地服务器localhost:8080 yarn serve # 发布环境 yarn build 项目开发 1、安装vue-cli3脚手架 现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境…

  19. 前端自动生成图片并下载(不到60行代码)

    需求 由于一些简单的图片拼合需要处理(大概8000张),但是又没有找到合适的傻瓜软件能够很好地解决需求,同时也很令人头疼的是nodejs里面图片处理库,基本上没几个好用,且安装费时费劲 (当然我还是装了)。作为一个有追求的前端,如果能不依靠其他的东西,直接在前端页面上实现它不香么?于是就有了这个小尝试。其…

  20. 万丈高楼平地起(3)继续梳理js 知识点(浏览器存储,TCP流程,get post ,js内存)

    简介:浏览器存储大致可分为三个点,cookie,localStorage,sessionStorage下面我将为大家一一介绍这三种浏览器存储方式并总结 一、cookie 1、cookie的定义 cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用docum.cookie可以查看当前正在浏览网站的cookie。 2、c…

  21. 来自 1000+ 个项目的 10 大 JavaScript 错误(以及如何避免)

    为了回馈我们的开发人员社区,我们查看了包含数千个项目的数据库,并发现了JavaScript中的前10大错误。我将向你展示导致它们的原因以及如何防止它们发生。如果你避免这些“陷阱”,它将使你成为更好的开发人员。 由于数据为王,因此我们收集、分析并排名了前10个JavaScript错误。Rollbar收集每个项目的所有错误,…

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

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

  23. 实现一个Vue自定义指令懒加载

    比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不下,那么懒加载就是优先加载可视区域的内容,其他部分等进入了可视区域在加载。

  24. jQuery实现视频展示效果

    本文实例为大家分享了jQuery实现视频展示的具体代码,供大家参考,具体内容如下 效果: 用户可以单击左上角的左右箭头,来控制视频展示的左右滚动。当单击向右箭头时,下面的展示视频会向左滚动,同时新的视频展示会以滚动方式显示出来。 思路: 当视频展示内容处于最后一个版面时,如果再向后,…

  25. websocket+nodejs实现聊天室

    传统http协议,是基于请求和响应的,无法直接做到客户端向客户端发送消息。 websocket协议是基于tcp的一种新的网络协议。实现了浏览器与服务器全双工通信。全双工:客户端可以主动给服务器发送消息,服务器也可以主动给客户端发送消息。 websocket是一种持久协议,http是非持久的 传统http协议实现即使聊天,必须通过aja…

  26. 循序渐进VUE+Element 前端应用开发(5)— 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询、列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表页面的查询,列表展示和字段转义处理。 在前面随笔《 循序渐进VUE+Element 前端应用开发(4)— 获取后端数据及产…

  27. Webpack 详解之代码分割(code-splitting)

    本文所有的内容均基于 webpack@4.42.0 所撰写。阅读本文之前需了解 Webpack 的一些基本概念,如: entry 、 chunk 、 module 等。 代码分割是 Webpack 最引人注目的特性之一。这个特性允许开发者将代码分割成不同的包,然后可以按需加载或并行加载这些包。它可以用来实现更小的包,并控制资源加载优先级,如果…

  28. Express 基于 Node.js 平台,快速、开放、极简的 Web 开发框架

    //导入express const express = require(‘express’) //创建app对象 const app = express() //构建请求 app.get(‘/’,(req, res)=>res.send(‘hello world’)) //配置app监听3000端口 app.listen(3000, ()=>console.log(‘Example app listening on port 3000!’)) 复制代码 快速创建应用的骨架-Express 应用程序生成…

  29. Vue-常见的组件通信方式

    最近一直在从头开始学习vue,顺手整理一下vue组件化的相关通信方式,分析不到之处,还望各位指正。 组件化 vue组件系统提供了⼀种抽象,让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤,任意类型的应⽤界⾯都可以抽象为⼀个组件树。组件化能 提⾼开发效率 , ⽅便重复使⽤ , 简化调试步骤 , 提升项⽬可维护性 …

  30. JavaScript – 原生JS实现滚轮翻页

    当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox 3.5+ 中提供了一个等同的事件:”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个…

  31. 使用 Vuepress 编写组件示例文档的最佳实践

    这篇文章面向使用 Vuepress 来开发 Vue 组件文档库的用户服务,去年差不多这个时候我为公司开发了一个基于 AntDesignVue 封装的高阶组件库,经过一年的版本迭代与文档更新,收获了很多坑点,其中有一个就是关于组件示例维护相关的,今年有意重构组件库的文档与代码结构,后面会陆陆续续将踩到的坑点与相应的解决方案一…

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

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

  33. RN和React路由详解及对比

    在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换。下面会对比一下react路由和RN路由的本质区别和使用方法。

  34. 这才是真正的 Git 分支合并

    本文通过讲解三向合并和 Git 的合并策略,介绍 Git 如何完成一次合并。

  35. 使用 Nodejs 开发的 SpaceX-API 开源了

    上面是这个图片不是从网上随便找的,来自于 SpaceX-API 项目的 Github 网站,想起了之前说的一个玩笑 “面试造火箭” 这次是真的造火箭了。。。 SpaceX-API 是什么? SpaceX-API 是一个用于火箭、核心舱、太空舱、发射台和发射数据的开源 REST API。 https://docs.spacexdata.com 展示了所提供的 API 接口,还包括…

  36. 关于Git rebase你必须要知道的几件事

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。 官方网站:devui.designNg组件库:ng-devui(欢迎Star) 官方交流群:添加 DevUI小助…

  37. 基于promise和原生ajax写axios源码

    代码要写在一个私有作用域中(闭包),防止变量污染,用window.xxx=xxx的方式向外暴露使用的方法axios,axios.get|options|delete|head|post|put方法要挂载到方法实例上,还有defaults(默认的配置)和interceptors(拦截器),通过整理默认config和自定义的config结合得到最后的config,通过这个配置结合原生的ajax实现axios 代码 …

  38. Nodejs 中 ES Modules 入门使用讲解

    2020-05-26 Nodejs v12.17.0 LTS 版发布,去掉 –experimental-modules 标志。 虽然已在最新的 LTS v12.17.0 中支持,但是目前仍处于 Stability: 1 – Experimental 实验阶段,如果是在生产环境使用该功能,还应保持谨慎,如果在测试环境可以安装 n install v12.17.0 进行尝试。 删除标志也是将 ESM 变为稳定性而…

  39. 面试系列——JavaScript基础篇

    JS中存在的 执行上下文类型 : 全局上下文:windows对象 函数上下文:每次调用函数时,创建一个新的上下文 eval上下文 每个执行上下文,都存在三个属性: 作用域 、 变量 、 this 作用域:JS只有 全局作用域 和 函数作用域 var创建的变量只有 函数作用域 let和const创建的变量既有 …

  40. js每天一个小技巧-变量和函数提升

    首先,先丢出来一道题: var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 复制代码 如果我们不了解 javascript 中的变量提升和函数声明提升,那么我们的答案肯定是 1。 那么正确的答案是什么呢? 我们首先把这段代码还原: var foo = 1; function bar(){ …

  41. 前端实习凉凉面

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

  42. Flutter Provider 迄今为止最深、最全、最新的源码分析

    Flutter State Management状态管理全面分析上期我们对Flutter的状态管理有了全局的认知,也知道了如何分辨是非好坏,不知道也没关系哦,我们接下来还会更加详细的分析,通过阅读Provider源码,来看看框架到底如何…

  43. 精读JS系列(9b) Promise — 回调地狱、Promise构造器

    看一下进阶时间线: 看到梦想之前,我只想到了无限长的距离…… 首先解释一下这张时间线,它的起点就是 入门完成 ,所以自然会从 印象最深的概念 开始入手——即 异步 这里。所以较复杂的知识已经在之前搞完了,现在就是比较简单的了。 本文将简单的介绍一下 Promise 以及 promisify 的方法,不涉及 底…

  44. 从零开始解说vue中动态组件的创建和使用

    逻辑: 用户手动选择加入那些组件 方式:通过element ui tree组件复选框来选择,加载哪个组件 1.在html页面构建 加入keep-alive是保持这些组件的状态,以避免反复重渲染导致的性能问题 el-tree(:data="treeData" ref="tree" class="filter-tree" show-che…

  45. JDK14性能管理工具:jstack使用介绍

    简介 在之前的文章中,我们介绍了JDK14中jstat工具的使用,本文我们再深入探讨一下jstack工具的使用。 jstack工具主要用来打印java堆栈信息,主要是java的class名字,方法名,字节码索引,行数等信息。 更多精彩…

  46. JavaScript框架的"代价"

    原文标题:The Cost of Javascript Frameworks 原文地址: https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/ 本文采用意译而非直译,有删减 网页中大量使用JavaScript会拖慢网页的速度。这是因为,我们在网页中使用JavaScript时,需要付出以下的成本: 从网络上下载js文…

  47. JavaScript重构技巧-降低函数复杂度

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

  48. web安全之XSS实例解析

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

  49. 一分钟玩转 Git

    今天又有新来的小朋友问我关于 Git 的用法,我发现还是有蛮多新人不会用的,或者用不好的。其实想想自己刚工作时也是倒腾不清楚这些参数和用法,而且总怕出错,慢慢的多看文档、用得多了就熟悉了,今天简单跟大家…

  50. Robust 第 15 期:跳出框架看前端分层结构

    时下最火的前端框架,说白了实际上都是视图开发框架。前端开发除了遵循框架的范式外,实际上还有很大的空间。但是实际上前端开发不单单只包含视图层开发。我们关注的核心,实际上包含了界面、数据、业务、事件。本期robust就来聊一聊,前端分层结构,如何发挥MVC,梳理出前端开发的结构层次。 网易云音乐: 点…

  51. JavaScript的padStart()和padEnd()格式化字符串使用技巧

    几天前,我正在使用JavaScript构建倒数计时器,因此我需要格式化秒和毫秒,我希望秒始终是2位数的长度,而毫秒总是3位数的长度,换句话说,我希望 1 秒显示为 01,1 毫秒显示为 001。

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

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

  53. CSS 创意构想 – Part 2/2

    背景 本文接上篇, 继续我们的《CSS》 创意构想。 因为有一些案例没有代码, 本着学习的态度, 我需要一个个补齐, 也方便大家看。 更新的时候可能就按小节, 逐步更新。 废话补多少, 开始正文吧。 正文 本文的…

  54. 记 vue-cli 项目首页加载速度慢的有效优化

    开始我想把这个锅甩给网速,但我发现一些大商城项目(淘宝,京东),在网速一般的情况下,加载速度依然还是挺快,哎,网速不背这个锅 还是找项目的原因吧,加载时间4.5s 监控首页加载的过程,找到拖后腿的 vendors***.js 这个锅他来背 1.9M 的 js文件下载3.42秒 ,先不说网速,这个js也太TM大了…

  55. AV1 vs HEVC:WebRTC 编解码器之争卷土重来?(四)

    有关最新WebRTC视频编解码器的常见问题解答 Web WebRTC是否支持HEVC(H.265)? 不,并没有正式支持。 苹果正在Safari中添加对HEVC的支持,但是其他浏览器没有添加,或表示有此计划。 我可以在WebRTC中使用HEVC吗? 可以,但浏…

  56. WebView库功能完善

    01.loadUrl到底做了什么 02.触发加载网页的行为 03.webView重定向怎么办 04.js交互的一点知识分享 05.拦截缓存如何优雅处理 06.关于一些问题和优化 07.关于一点面向对象思想 08.关于后期需要研究目标 01.loadUrl到底做了什么 WebView.loadUrl(url)加载网页做了什么? 加载网页是一个复杂的…

  57. VS Code 调试完全攻略(5):基于浏览器的 React 应用

    这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。我们将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。它超级强大,同时又很容易,所以在调试 CRA 和 React 程序时没有理由不…

  58. vue的keep-alive讲解

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

  59. JS实现select选中option触发事件操作示例

    我们在用到下拉列表框select时,需要对选中的 <option> 选项触发事件,其实 <option> 本身没有触发事件方法,我们只有在select里的onchange方法里触发。 想添加一个 option 的触发事件,在 option 中添加 onclick 点来点去就是不会触发事件。 又在 select 中添加 onclick 这下可好了,没选 opti…

  60. Flutter Weekly Issue 58

    教程 逆向 Flutter 应用 进展汇总 | Flutter 精彩不停,与您同在 插件 creditcard-slider Dart package for creating a credit card slider flutter-orientation …

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


关注我

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

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

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