20200523 前端开发周报

HTTP/3 原理与实践;从 is-promise 事件我们可以学到什么;10天重学Vue(第二天);如何“取巧”实现一个微前端沙箱?;[10分钟学会,或者CV走代码] d3.js 组合 vue, 新手也实现 拓扑图形(svg 版);Vue 实现弹幕效果;Flutter 在 PLUS 业务中的探索和实践;零基础HTML玩家的Bootstrap入门第一课(保证学会)

  1. HTTP/3 原理与实践

    HTTP/3 原理与实践 这是一个视频版的 PPT。

  2. 从 is-promise 事件我们可以学到什么

    4 月 25 日,NPM 社区又一次因更新事故引燃技术圈的讨论,导火索便来自名为 is-promise 的包。 网上盛传一个单行代码的包影响到了谷歌、FaceBook、亚马逊等众多大咖的知名项目,也有人扬言它使几乎整个 JavaScript 生态陷入了混乱。 不过“雪崩”之时,我和身边人都没有体会到震感,不禁疑惑,平时很少有场景需要判断...

  3. 10天重学vue(第二天)

    前情提要 今天的工作主要是看了一下 vue-admin-elementui的权限管理和路由设计,在这个基础上,正好可以把昨天所学习的充足进行了解一番 我们这里主要来解析一下登陆、和路由管理主流程 1、启动登陆流程 src/views/login/index.vue 在登陆中使用 this.$store.dispatch('user/login') vuex 和 js-cookie 来保...

  4. 如何“取巧”实现一个微前端沙箱?

    简介: 如今微前端已经成为前端领域比较火爆的话题,在技术方面,微前端有一个始终绕不过去的话题就是前端沙箱。本文将分享阿里云开放平台微前端方案的沙箱实现原理,具体探讨在微前端领域如何实现前端沙箱。(文...

  5. [10分钟学会,或者CV走代码] d3.js 组合 vue, 新手也实现 拓扑图形(svg 版)

    :rocket: 在线实例 源码地址 如果急用, 可先cv走代码修改, 哪里没明白再回来看哪里. github.com/any86/any-t… 介绍下 D3.js d3 是一个大而全的图形库, 集成了 svg 元素操作 和常见图表(图形)的 数据结构 . 本文基于 v5 版本 的 d3 编写, d3 的功能都是拆分成独立包的, 我们这里只需要引入 d3-hierarch...

  6. Vue 实现弹幕效果

    这两天又看到有人问 Vue 如何做弹幕效果。 正好我过年的时候做了个活动,其中用户可以摇签,然后 C 位飘屏展示。 Vue 版本效果地址:[链接]网上原生版本:[链接] 实现原理 弹幕动画效果 动画效果其实很简单,从右...

  7. Flutter 在 PLUS 业务中的探索和实践

    2016年京东为向核心客户提供更优质的购物体验,特别推出京东PLUS会员,旨在全方位提升和丰富用户网购体验,目前京东PLUS会员已成为电商行业付费人数最多的会员体系。作为PLUS的前端开发,我们思考最多的就是如何让页面更快更好的呈现在用户面前,如何用技术为用户提供最好的购物体验。 为什么会开始...

  8. 零基础HTML玩家的Bootstrap入门第一课(保证学会)

    又看着熟悉的Bootstrap3的网站,想起去年自己刚来时举步维艰的学习过程,想着之前踩过的那些坑,感慨万千。最近团队融入了新鲜血液,本着薪火相传的原则,为了不让后面的人踩同样的坑,才有了这个入门的文章。

  9. 前端安全之防范XSS实战小结

    由于前段时间业务有接触到富文本编辑器,且编辑器由用户直接使用,所以不可避免需要对其涉及到的XSS防护有所了解,因此对XSS防护做一个实战小结。

  10. load-vue(定制化+趣味性的加载动画插件)

    大家好,我是六六。经过测试,一款加载动画插件完美发布。写这个插件的初衷有两点,第一就是加载loading的 有趣性 ,在加载过程变的有趣, 大大地提升用户体验感 。第二就是 定制化 ,开发者可以根据自己的需求随意改变动画的大小,颜色,速度等。已经成功运用在我的仿蘑菇街商城项目里面运行了,效果还是ok的。如果大家...

  11. 前端一键部署(jenkins)

    大家好,我是肥羊羊,今天给大家介绍下jenkins一键部署。说来惭愧,之前说要写一篇jenkins的文章,这让大家一等就是半年,罪过罪过....

  12. 前端开发的瓶颈与未来之路

    前端开发的瓶颈到底在哪里,前端技术是否已经走到一个十字路口,全栈化的系统架构是否能改变目前的窘境?本文将根据我自己的开发经历谈谈当下前端开发中遇到的一些问题和想法。

  13. 女程序员重返前端之路——VUE面试题

    两年没有在发新的文章了,是因为生了个娃娃。 说起生孩子不得不说是每个程序员 每个职业女性都要经历的事吧!很遗憾我没有能平衡好家庭与事业。 在这两年时间里我把我全部的重心都放在孩子身上。技术在不断的更新进步,而我却停了下了。 时间消磨了我,技术也抛弃了我。 经过一番思考,我决定重新来过,希望一切都...

  14. Java 考试系统项目源码 springboot mybaits vue.js 前后分离跨域

    ------------------------------------------------- 题库管理 22. 图片库:创建文件目录,维护图片,供题库选择调用 23. 单选题:维护单选试题,试题题目,选项,答案,类型,级别,状态,解析 24. 多选题:维护多选试题,试题题目,选项,答案,类型,级别,状态,解析 25. 判断题:维护判断试题,试题题...

  15. JavaScript 类的封装操作示例详解

    本文实例讲述了JavaScript 类的封装操作。分享给大家供大家参考,具体如下: 一,首先,为什么要使用封装? 这是从信息的角度出发的,信息的隐藏是最终的目的,而封装只不过是实现隐藏的一种方法。 这里我们需要明白一点就是:类的定义有如下的三种方式: (第一种)门户大开型方式       (...

  16. 简版在线聊天Websocket

    序言 What is Webscoket ? websocket 应用场景 简版群聊实现 代码例子 小结 Webscoket Websokcet 是一种单个TCP连接上进行全双工通信的协议,通过HTTP/1.1 协议的101状态码进行握手。 [链接] Websocket 应用场景 ...

  17. JDK11的新特性:HTTP API和reactive streams

    reactive streams的介绍大家可以参考reactive stream协议详解,使用reactive streams的目的就是为了解决发送者和消费者之间的通信问题,发送者不会发送超出消费者能力的信息。

  18. 【重学前端】JavaScript中的继承

    JavaScript中继承主要分为六种:类式继承(原型链继承)、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承 类式继承(原型链继承) 原理 原理:父类的实例赋值给子类的原型对象 function SuperClass () { this.superName = 'superName' } SuperClass.prototype.getSuperName = function () { ...

  19. 全新的JavaScript runtime —— Deno 初体验

    2020年5月13日,Deno终于正式发布了。Deno是基于V8 JavaScript引擎和Rust编程语言的JavaScript和TypeScript运行时。它是由Node.js之父Ryan Dahl创建的,专注于安全性和生产力。

  20. D3.js库-3-深入理解D3中的update、enter、exit

    Update、Enter、Exit是D3.js中十分重要且关键的3个概念。它们三主要处理的是 数据集个数和选择集个数 之间的匹配问题。 图解三者关系 上图的解释: 绿色:如果给定的数据data和节点Nodes中的数据相等,则进行updata操作 蓝色:如果数组中个数多余节点中的元素个数,进行 update 和 e...

  21. 转行前端一年大概是什么水平

    刚入行那会儿,整个小团队就我一只前端。我没有参考坐标系,不知道自己水平是什么程度,不知道大家是什么水平,更不知道就业市场对一年工作经验的要求是怎样的。那种感觉,就像是高三了,全班只有自己一个。模拟...

  22. js前端数据类型检测

    前言 项目中我们肯定需要处理各种数据,这时候就要判断数据的类型来确定下一步的操作 typeof 常用于判断基本数据类型,在基本数据类型中会又一个例外就是typeof null是Object类型 如果用typeof来判断对象,只有typeof function能判断出是function类型,其他的对象类型如Array,RegExp都会判断为Object 所以我们我们...

  23. 高德前端这五年:动态化技术的研发历程和全面落地实践

    前言 2015年-2020年,历经5年发展,高德地图应用开发前端团队在业务快速发展中不断成长。一路走来,从小团队主要负责短期运营活动开发的散兵游勇,到现在团队规模100人+,覆盖高德5大业务线,上百个模块的坚甲利...

  24. React中组件逻辑复用的那些事儿

    基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码。那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获。如果你对这...

  25. 前端开发之标准化(未完)

    前端开发通常我们不会自己去造轮子,通常是利用已有轮子,或者已有的汽车去制作改装车。但改装车过程多了,也会想去了解底层的轮子,或者自己造轮子。 vue是一个非常实用的MVVM framework,规定了我们的对于前端的写法,隐藏了结构生成和渲染的细节,但vue官方本身是不造轮子的。基于vue有个比较有效的轮子厂element-ui...

  26. 快速实现一个带后端服务的 Vue 项目,用云开发Vue插件

    云开发CloudBase作为一站式的云端一体化研发平台,为前端开发者提供了一站式的计算、存储、数据库、托管等服务;开发者可以通过云开发,快速开发出一个业务完善,性能强劲的 web 应用,极大节约了研发的时间、人力和物力成本。 秉承“为开发者提供更好用的云服务”的服务宗旨,云开发团队推出 云开发Vue插件 ,使用云开...

  27. JS 压缩图片简易实现

    在日常开发中多多少少会碰到用户上传图片的场景,随着拍照设备的提升,越来越多大尺寸照片诞生,无论是存储空间对于服务器压力,还是传输速率对于用户体验都有着很大的影响。 要把一张图从大变小,马上能想到的就是三步曲: 转换格式 、 缩小尺寸 、 降低画质 ,大多数情况下 转换格式 能达到比较好的效果(如 png 转...

  28. 超级详细的Vue-cli3使用教程

    Vue盛行的一个时代,大部分前端开发人员接触的第一个MV*的框架大多全是Vue,当然也有一部分人可能最开始接触的就是React或者Angular,Vue以详细的中文文档,以及容易上手的API被大家所熟知。

  29. 封装Promise版本的 readFile

    作者最近遇到了一个有趣的问题,我们都知道文件读取有两种类型 fs.readFileSync(); //同步读取 fs.readFile(); //异步读取 复制代码 而Promise 是异步编程的一种解决方案, 那么我们能否封装一个Promise版本的 readFile呢? 引子 我们来看看阮一峰老师关于javascript是单线程的解释 链接: www.ruanyifeng.com/b...

  30. Vuex 状态管理实践城市选择页

    Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理模式 一个状态自管理应用包含以下几个部分: state,驱动应用的数据源; view,以声明方式将 state 映射到视图; actions,响应在 ...

  31. [重拾CSS]一道面试题来看伪元素、包含块和高度坍塌

    前几天某个群友在群里问了一道面试题,就是关于一个自适应的正方形布局的困惑,先贴上代码。我其实很长一段时间没有写 CSS 了,对于里面的一些细节也比较模糊了,因此决定重拾 CSS,来重新捋一捋这题目中的一些知...

  32. 基于 Spring Boot 2.0 的实践: WebFlux 集成 MongoDB

    1、理论知识 Spring Boot 2.0 - WebFlux framework 2、基于 Spring Boot 2.0 的实践 ① 在 docker 上运行 MongoDB 首先,获取 MongoDB 的镜像: {代码...} 然后启动 MongoDB 容器 {代码...} ② 构建 Spring Boot 2....

  33. webpack打包ts的两种方案对比

    目前大家常用的webpack打包ts主要为两种方案: ts-loader:将ts转为js,再使用babel将js转为低版本js; @babel/preset-typescript:它是直接移除TypeScript,转为JS,这使得它的编译速度飞快,并且只需要管理Babel一个编译器就行了。 二、方案对比 首先我们需要安装 webpack、webpack-cli、typescri...

  34. MXFlutter0.2.5支持直接编译FlutterUI为可运行的JS代码

    MXFlutter v0.2.5 发布配套 mxjsbuilder v0.0.2 编译器,支持编译 Flutter 工程为 mxflutter 可运行的 JS 代码。 体验包下载地址 MXFlutter_v0-2-5.apk MXFlutter 主要目标是: 支持业务由 Dart 开发,使用mxjsbuilder编译为JS直接运行,实现同一套 Dart 代码同时支持 AOT 编译为 Native ,也可以编译为JS支持动态化 ...

  35. HTML入门学习总结

    本周结束了大众点评的制作,主要是一个不断熟悉的过程,中间遇到的许多问题之前都经遇到过并且合理解决,准备进入下一阶段学习,这篇博客主要是整理了一下制作过程中的思考

  36. 手写Promise,手把手过程

    网上很多手写Promise。根据自己的理解,也写了一份,晒出来希望能被大家指正。也给自己一个梳理的过程。初学者要辩证的看这个文档,你需要对原生Promise很熟悉。 代码其实非常简单,不到100行代码,主要是充分了解原生Promise都能做什么,有什么特征。在根据这些功能特征列出模拟Promise的需求,问题就解决了一大半了...

  37. 在快应用中使用 RxJS

    RxJS 介绍 Rx(ReactiveX)是一种用来管理事件序列的理想方法,提供了一套完整的 API,它的设计思想组合了观察者模式,迭代器模式和函数式编程。响应式编程在各个编程语言中都有对应的实现,应用较为广泛的是 RxJava 以及 RxJS。 RxJS 是基于 ReactiveX 实现的 JavaScript 版本的库,它使编写异步或基...

  38. 史上最强 JavaScript 闭包原理详解:从入门到放弃

    闭包这个东西,很有意思,不管在什么编程语言中,我总能遇到闭包这个玩意(实际是 接触的语言少,运气不好),所以啊,闭包这个小可爱,并不是某一种编程语言特有的,就像变量、函数、作用域这些,在几乎所有编程语言中都有存在;但,在不同的编程语言中,这个小可爱的设计理念和实现逻辑又有所不同,所以想要更好的理解闭...

  39. 十个超级实用的 git 命令

    git无疑已经成为了大家代码版本控制最多的工具了,这其中有不少人是使用终端来进行操作git。这里列出一些超级实用的git脚本,希望可以对大家开发有所帮助。 建议大家讲下面的脚本内容,都保存成脚本,然后设置执行权限,将所在目录加入环境变量,这样使用起来更加方便。 查看未合并到master的分支 ...

  40. JavaScript之选择控制语句(if,switch,while,do-while,for循环)及很重要的表达式真与假

    您将在本文当中学习到 顺序语句 分支语句 If判断,switch,while循坏,do..while循环,for循环,表达式中的真(true)与假(false) 在程序代码中,我们经常都会使用流程控制语句,它是用来控制程序中各语句执行顺序的语句,利用语句的组合便能完成一定功能的小逻辑模块 流程控制方式采用结构化程序设计中规定的...

  41. 腾讯云云函数 SCF Node.js Runtime 最佳实践

    腾讯云云函数 SCF 最近新发布了 Node.js 12.16 的 runtime,也是国内首家支持 Node.js 12.x 的主流云服务商。 Node.js 版本的升级带来了新的特性以及性能方面的提升,有兴趣的同学可以参考国外一博主总结的文章 《Node.js 12: The future of server-side JavaScript》 了解具体内容。 其中比较重要的一点是启动速...

  42. 【2020Python修炼记】前端开发之 JavaScript 基础语法

    【目录】 1、for循环 2、while循环 3、for …in 迭代器 4、break / continue 关键词 1、object 类型 2、声明类(构造函数) 函数名 ( 条件表达式 ){ 代码块 } 一、if 分支结构 1、 if 基础语法 if (条件表达式) { 代码块; } // 1. 当条件表达式结果为true,会执行代码块;反之不执行 // 2. 条...

  43. vue模块移动组件

    一直都想实现类似于五百丁中简历填写中模块跟随鼠标移动的组件,最近闲来无事,自己琢磨实现了一个差不多的组件。 其中每个模块都是组件调入(项目经验、教育经验、工作经验等),所以这里也用到了动态加载组件方式。 思路:鼠标移入模块,显示相应模块的点击移动按钮,点击A模块移动按钮,此时原先A模块所在的...

  44. 【前端面试题】说一说koa中间件的实现原理

    因为做过node,所以被问到koa中间件实现原理的问题,整理一下。 koa的执行顺序是这样的: const middleware = async function (ctx, next) { console.log(1); await next(); console.log(6); }; const middleware2 = async function (ctx, next) { console.log(2); await next(); console....

  45. 新手必看的前端项目去中心化和模块化思想

    大家好呀,我是你们的老倒霉蛋wangly。 最近项目的积量越来越大,项目的架构也变得非常的糟糕。中心化严重,模块化不明确,导致后续开发变得非常杂乱。所写成一篇文章给自己对中心化概念发发电。还有我也注意到有的前端工作了一年,甚至一年以上都不知道 中心化 ,和 去中心化 的概念。这种情况是非常不好的,一开始对...

  46. vue中的修饰符

    vue.js提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等 v-model input最常用的双向绑定指令,实现了输入输出的实时绑定显示 <div> <input type="text" v-model="value"> <p>{{value}}</p> </div> 复制代码 .lazy 光标离开更新 但是...

  47. 初探在 WSL 中设置 Vim 前端开发环境

    在之前的 《在win10的WSL中设置前端开发环境》 一文中,介绍了 win10 结合其 Linux 子系统(WSL)的前端开发设置,使用的是 VSCode 开发工具。 而在某些情况下,出于追求工具轻量化、减轻系统负担,或应付临时开发场景等目的,只需要简单设置一下终端 vim 开发环境,借助各种强大成熟的插件,也能达到八九不离...

  48. 霖呆呆的六个自定义Webpack插件详解-自定义plugin篇(3)

    你盼世界,我盼望你无 bug 。Hello 大家好!我是霖呆呆! 有很多小伙伴在打算学写一个 webpack 插件的时候,就被官网上那一长条一长条的 API 给吓到了,亦或者翻阅了几篇文章之后但还是不知道从何下手。 而呆呆认为,当你了解了整个插件的创建方式以及执行机制之后,那些个长条的 API 就只是你后期用来开发的 &q...

  49. JavaScript连载10-流程控制语句if(快速总结)

    一、if语句 1.基本语法同java语言 2.注意点: (1)如果只有一条语句的时候,if后面的大括号可以省略。(也同Java) (2)分号“;“也是语句,是空语句。 (3)if else是一个整体,else匹配的if的时候是匹配最近的一个 (4)对于非boolean类型的值,会先转换为boolean类型的值然后再进行判断。 (5)判断变...

  50. 口令爆破之突破前端JS加密

    近期安全测试时发现一个系统前台使用了SSO,但是在比较隐蔽API中发现了后台的登录接口,该接口未使用SSO,同时没有图形验证码等校验,通过分析最终爆破进入后台。 0x01 确认攻击途径 通过信息搜集找到后台登录URL,由于URL比较敏感,这里以 admin/login 替代,尝试登录发现没有图形验证码等校验 通过BurpS...

  51. 前端网红框架的插件机制全梳理(axios、koa、redux、vuex)

    前言 前端中的库很多,开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求,但是总有无法预料到的,所以优秀的库就需要提供一种机制,让开发者可以干预插件中间的一些环节,从而完成自己的一些需求。 本文将从 koa 、 axios 、 vuex 和 redux 的实现来教你怎么编写属于自己的插件机制。 ...

  52. 几道我今年跳槽遇到的Vue3.0 面试题

    熟悉我的朋友都知道,我在4~5月间在跳槽面试 发现今年情况大有不一样,已经开始浮现 Vue3.0的面试题,为了避免你们踩坑,我给你们分享几道最近遇到的面试题: Vue3.0 都有哪些重要新特性? Composition API Tree-shaking React Hooks Tree-shaking ...

  53. HTML 页面生成器:使用 JavaScript 和 Node 创建 CLI

    在第 42 期的文章:从零开始使用JavaScript制作自己的命令行(CLI工具) 中我们介绍如何从零开始制作CLI,算是一个入门前传,知道了怎么制作CLI后今天更进一步。 在这篇文章中,我们将构建一个简单的CLI,允许用户生成HTML页面。我们首先要生成一个标准的空白页面,然后让用户输入参数,比如文件名和标题,先通过...

  54. JS自省-对象继承

    JavaScript基于原型链的继承,访问一个对象的属性时,如果找不到,则会顺着原型链向上层查找,以此类推,直到找不到为止 每个构造器都有一个 prototype 属性,代表该构造函数的原型对象 prototype 有个 constructor 属性,指向它的构造函数,构造函数的 constructor 指向自身 实例化对象有个 __proto__ ...

  55. 10天重学vue(第一天)

    vue 前情提要 主要基于 vue-admin-element-ui 来进行辅助学习 为什么用它? 因为它相对来说复杂,实用,入手快,能快速得到成就感,同时在以后都可以用于生产环境进行 第一天先学习下 vue-router ,主要是掌握一下基本的用法 例如 路由跳转 路由重定向 配置信息 路由初始化 路由配置 获取路...

  56. Vue-cli3.0读取外部化配置文件来修改公共路径

    之前我写过一篇通过vue-cli3.0打包发布到nginx配置代理转发的博客,链接在此: https://www.cnblogs.com/jdWu-d/p/12197156.html ,正常来说也是正确的,但不正常之处在了甲方还用了F5负载均衡和gateway来代理转发。所以之前我认为的请求->nginx转发代理->后端服务,实际上是请求->nginx代理转发->F5->ga...

  57. 浅析 Vue 的数据响应式

    数据响应式是指我们在 JS 中修改页面中的数据时,修改了的数据会实时响应到/出现在页面上。 1. 数据响应式的实现 在了解数据响应式如何实现之前,我们需要了解一些函数。 getter 是一个获取某个特点属性的值的方法。 setter 是一个设定某个属性的值的方法。 Obejct.defineProperty 函数让我们能够精确地添加或修改...

  58. Kitty Cloud (HTTP/RPC) 的全局异常处理

    项目地址 https://github.com/yinjihuan/kitty-cloud 异常处理不用我讲,大家都清楚。单独的异常处理太繁琐,全局异常处理可以在一个应用中统一进行异常的处理,非常方便。目前全局异常处理用的也越来越广泛,今天跟大家来聊一聊 Kitty Cloud 中的全局异常是如何处理的? 为什么要使用...

  59. 深入学习 Three.js 核心对象之(三):Material

    分析构成模型对象的另一个重要元素:Material(材质)。 主要介绍: Material的属性及WebGLRenderer的处理: 属性分类、预处理宏与自定义标记 部分属性解读(Todo): 融合属性、深度测试、模板测试、裁剪、多边形偏移等 本文所参考的Three.js版本为0.116.1 Materi...

  60. 你心水的 Nuxt.js 的 SSR 也来啦~

    我们以往部署Nuxt到服务器需要pm2进行进程管理,还需要考虑到服务器的性能,负载均衡、网络安全等一系列运维问题。往往我们做的却不是最优的,那么为什么我们不将它交给专业运维的人去配置呢? 我们只去关心应用层面的业务逻辑,去关心用户的交互体验,这才是我们该做的事~ 所以,云开发它来了!!它可以很完美的帮...

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

原文:20200523 前端开发周报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-weekly-20200523.html)