20200620 前端开发周报

HTTPS是如何保证安全的;35 岁以后,在阿里做前端是怎样一种体验;50道JavaScript基础面试题(附答案);Git 从入门到精通,这篇包教包会;基于Vue来解析页面在浏览器中呈现的过程中所涉及到的知识点;从零搭建一个react-hooks项目(一);vue状态管理机制探究(eventBus vs VUEX);使用无字母的JavaScript语句绕过XSS限制

  1. HTTPS是如何保证安全的

    HTTP存在的问题 窃听风险:通信使用明文(不加密),内容可能会被窃听(第三方可能获知通信内容) 冒充风险:不验证通信方的身份,因此有可能遭遇伪装 篡改风险:无法证明报文的完整性,所以有可能已遭篡改 HTTPS ...

  2. 35 岁以后,在阿里做前端是怎样一种体验

    都说 ~ 在阿里,程序员35岁后如果没有转型就会被 “陆续淘汰”。 而我 ~ 35岁以后作为一线程序员在阿里寻找新的大陆。XD 写这篇文章主要是想分享两件事情: 阿里前端的一些现状 35岁后,在这里办公的一些见闻和心得。 从去年2019年回到天猫团队,一年之间见证了淘系一系列前端组织结构...

  3. Git 从入门到精通,这篇包教包会

    现在版本管理都习惯用git了,git命令你懂多少,当然现在很多工具可以使用,但高手都要懂点命令行,哈哈,不妨看看这篇文章,让你从入门到精通!

  4. 基于Vue来解析页面在浏览器中呈现的过程中所涉及到的知识点

    此篇文章是基于Vue来分析一下从编辑好代码->打包->将dist文件夹放置到服务器上->访问该网址->页面呈现。此过程所涉及到的知识点,本篇很少涉及到具体的代码,主要是理论上的知识,如有错误,烦请各位在评论区指出。 概念 Vue-cli(快速建立开发环境的脚手架) webpack(模块打包工具) Vue-loader...

  5. 从零搭建一个react-hooks项目(一)

    最近有打算仿vue-admin项目构造一个react的项目,不引用官方脚手架,从webpack开始配置一套基于react,redux,typescript的项目,并实时记录一下项目中的一些配置情况 首先搭建一个基本的webpack环境 webpack项目搭建 前置基础,电脑有安装node环境,可以使用npm工具 新建文件夹,命名项目名称(react-admin),...

  6. vue状态管理机制探究(eventBus vs VUEX)

    最初了解到eventBus和vuex并不清楚其原理只知道无脑用,甚至有些时候用的时候还不是很清楚,最近比较好奇这两者的区别,特以此文梳理 eventBus 定义 又称事件总线,作为组件共同的事件中心 组件都可以上下平行的通知其他组件 工作原理 发布订阅模式 创建一个vue实例,通过一个空的vue实例作为桥梁实现vu...

  7. 使用无字母的JavaScript语句绕过XSS限制

    一、前言 在一次 XSS 测试中,往可控的参数中输入 XSS Payload ,发现目标服务把所有字母都转成了大写,假如我输入 alert(1) ,会被转成 ALERT(1) ,除此之外并没有其他限制,这时我了解到 JavaScript 中可以执行无字母的语句,从而可以绕过这种限制来执行 XSS Payload 。 二、JS基础 先执行两段JS代码看下 ( ]+[...

  8. 【vue选手极速进阶】图文详解vue+ts+class+注解风格开发排坑全指南

    ts的大势所趋,你还在吭哧吭中徘徊在vue+js大门口吗?来吧,是时候表演真正的技术了~~~ 从vue开始火热起来到现在,已经基本上前端开发小伙伴入门的技能了。相信这么久时间过去之后,大家也早已习惯vue的开发模式了。那么,你和别人比比的时候,难道不想有些许亮点吗?虽然目前vue2+对ts的支持没有像react、ng等支持...

  9. 异步解决方法Promise的用法

    异步编程模块在前端开发中,显得越来越重要。从最开始的XHR到封装后的ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来,处理异步数据流又有了新的解决方案。在传统的ajax请求中,当异步请求之间的数据存在依赖关系的时候,就可能产生不优雅的多层回调,俗称”回调地域“(callback hell),这却让人望而生畏,Pr...

  10. 2020 祝安,缝隙中寻找机遇:面试题第二波:Git&Webpack

    非常感谢,前同事 行长 @onlyadaydreamer分享的面经。 好吧,日行一张表情包,我们搬砖的也是很有爱的 北京现在有开始严重了,大家不要吃进口海鲜了,抗击疫情,人人有责! 直接正文! git常用操作,怎么回滚?【后续添加相关截图】 首先git 怎么放弃修改,可以参考我以前的文章git放弃修改 ...

  11. 前端应该懂得初级Web分析指标

    从事该职业足够长的时刻的人们经常会忘掉这些目标对于新人来说听起来很荒诞,所以您必须宽恕他们。要学习网络剖析并了解它怎么使您受益,最好先了解周围常见的术语,这是一个好主意。  在本文中,咱们将介绍基...

  12. 为什么 Vue 更符合这个时代的大势所趋?

    发布之后我们对社区里的前端开发者做了一次调查沟通,大家普遍认为 Vue 已经具备了商业项目开发的必备条件,如语法精炼、优雅而简洁、代码的可读性高、成熟的组件模块化能够让开发者从编码中获得乐趣等等,当然,...

  13. Vue 函数式组件的使用技巧

    什么是函数式组件没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件 基本写法: Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // ...

  14. 「预热桶」限流算法详解(附 Node.js 实现)

    文/金禅 「预热桶」是我自己取的名字,它来源于 Google 的 Guava 工具包里的 SmoothWarmingUp 类,表示带预热的令牌桶算法。 限流是在高并发场景下,保证系统稳定性的一把利器,在之前的文章中我介绍了集中基础的限流算法,本文重点介绍一个更高级的限流算法——『预热桶算法』的原理和实现; 「预热桶」的由来 ...

  15. 前端7个快速发现 bug 神仙调试工具

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

  16. [GitHub] JavaScript 趋势榜项目(25周)

    时间:2020 年 6 月 9 日 - 2020 年 6 月 15 日 1. bradtraversy/vanillawebprojects 项目地址: github.com/bradtravers… :star::5917 | forks:1086 | 1101 stars this week 使用HTML5CSS和JavaScript构建的小型项目。 没有框架或库 2. ianramzy/decentralized-video-chat 项目地址: github.com/...

  17. Vue中使用Three.js加载glTF模型

    Three.js是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形,基于WebGL实现,对WebGL进行了进一步的封装,简化了多数复杂的接口。 Three.js支持包括 .obj、.gltf等类型的模型结构。glTF(GL传输格式)是Khronos的一个开放项目,它为3D资产提供了一种通用的、可扩展的格...

  18. CSS 的 background 属性到底有哪些用法?这篇文章帮你全部总结了

    点击壹伴助手,关注我们 前言 前几天有些事情所以没有更新,感谢小伙伴们的理解~最近在做项目的时候一直有用到很多background-image的时候,所以有个想法打算总结一下所有的background属性用法,以后用起来也会更加的方便。 background background属性能够帮助我们为界面的背...

  19. 对 JavaScript 开发者非常有用的 10 个技巧

    我们知道,JavaScript 这门语言正在高速发展中。伴随着 ES2020,又有很多很棒的功能加入。老实说,您可以通过许多不同的方式编写代码。实现同样一个功能,有的代码很长而有的却很短。你可以通过一些小技巧来让你...

  20. Vue技巧 | 在Vue3中使元素在滚动视图时淡入

    优秀的网站要对用户的互动做出反应。做到这一点的一个很好的方法就是对有人向下滚动你的页面做出反应。 除了视差组件和滚动事件外,添加响应式触摸的一种好方法是使元素在滚动视图时淡入。 在本技巧中,将介绍如何使用滚动事件和CSS转换在Vue3中实现此功能。 这是我们将学习如何在本教程中进行构建的屏幕截图。...

  21. 巩固一下前端的基础知识

    很久没有回头看看html和js的一些基础知识了,周末闲来无事的时候看到了一篇关于面试题的文章,突然发现很多都忘记了,好的,那就趁热打铁,撸一波基础知识吧。

  22. 前端测试最佳实践(持续更新,建议收藏)

    最近公司在推行单元测试,但是一些同事对于单元测试只是了解,甚至不怎么了解。因此推动单元测试的阻碍是有的,这种阻碍除了人的层面,还有基础设施的层面。希望通过本文,一方面加深大家对前端测试最佳实践的认知,另一方面可以作为手册,在日常开发中做参考。本文也会不断更新,期待你的参与。 如果大家对前端测试不...

  23. 使用Node.js驱动Redis,实现一个消息队列

    写在开头 最近的 Devops 和微前端已经写得差不多,开始复习下后端相关知识,之前想写的这篇文章,终于落地 如果你想加入前端交流群,可以文末联系我加入 正式开始 电脑环境 推荐Mac|Linux 安装 redis ,并且启动redis ...

  24. 一项改变游戏规则的技术:Flutter

    "A fast app is great, but a smooth app is even better." 使用Flutter beta版上线了一个APP的故事 2018年的11月底,我第一次打开Flutter的官网,想看看Flutter到底是什么;3个星期后,我们赶在Apple的App Store审核团队圣诞节休假前,提交了第一个使用Flutter开发的App。当然,是iosAndroid...

  25. 微前端框架chunchao(春潮)开源啦

    乞丐版微前端框架chunchao源码开源,仅仅为了让大家学习微前端的工作模式而已,实际项目中,我们有使用Paas模式,web components,git submodule等模式都可以实现微前端,当然业内肯定有独特的、优于这些模式的微前...

  26. vue源码阅读第三篇,渲染代码块生成

    个人觉得 本章 可以大概看看我写的内容 最有效的方法是查看测试用例 很详细 覆盖很全面 这一段比较绕,主要是包装compile,最终暴露出compile本身以及包装后的compileToFunctions 1.1 compiler和compileToFunctions的基础baseCompile 它是对src/compiler包下暴露出的核心parse进行初步包装,我们知道parse传入templa...

  27. 深度解析 Vue 响应式原理—源码级

    当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 这些 getter/setter 对用户来...

  28. 是时候考虑搭建自己的站点了:Hugo 和 GitHub Pages 为你助力

    从Hexo迁移到Hugo最强攻略点击上方蓝色“Go语言中文网”关注我们,领全套Go资料,每天学习 Go 语言 拥有一个作品集网站可以使你在寻找一个开发外包时脱颖而出。作品集网站可以让潜在的客户或雇主了解你是一个专家,了解你过去和正在做的工作。不幸的是,一些常见的困难阻碍了许多人拥有作品集网站,包括...

  29. 自认为精通React,这些JavaScript概念你掌握了没?

    本文转载自公众号“读芯术”(ID:AI_Discovery) 想要确定一个人是否掌握React,考考他最新的JavaScript语法就可以了。JavaScript语法对于理解React至关重要,它能让我们更加容易地阅读日志,编写出更简洁的React代码。 一旦掌握了一些新的JavaScript语法,编写React代码将变得轻而易举。来看看精通React不可缺少...

  30. 浏览器如何运行 JavaScript

    浏览器如何运行 JavaScript 需要铺垫的知识点: 执行环境 + 执行栈 执行环境(Execution Context) 执行环境 是函数被调用时所在的环境。执行环境中存储了函数执行时相关的所有事物。当我们在函数内访问某一变量时,这个变量其实也是该函数执行环境提供的。因为执行环境是不能直接被访问的(不能被访问代表...

  31. vue使用富文本编辑器wangEditor,且增加附件功能

    加上附件的 demo地址 加上附件的 demo效果 最简单的使用 封装组件 <!-- Editor.vue --> <template lang="pug"> div div(ref="editor") </template> <script> import E from "wangeditor"; export default { name: "edi...

  32. JS基础(一)-畅游promise世界

    本文主要介绍了个人对promise的一些粗浅理解,如有不正确的地方,还请指正。 一. Promise是什么 从JS语法层面上讲,Promise是一个函数,可以通过new关键字进行调用然后生成一个对象,这个对象被成为promise对象。promise对象有三种状态,为pedding、resolved、rejected,这是promise的重要机制。 从功能的角度来讲,...

  33. 全局挂载组件之Vue.extend

    Vue.extend 属于Vue的全局 api,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中(例如:ElementUI库),所以 Vue.extend + $mount 这对组合非常有必要需要我们了解下。 Vue.component 文档 官网用法: 注册或获取全局组...

  34. 前端存储除了 localStorage 还有啥

    前端的数据存储方式,你除了用过 Cookies、localStorage 和 sessionStorage 外,还有用过其它的存储方式么?其实除了前面提到的 3 种存储方式,目前主流的浏览器还支持 Web SQL 和 IndexedDB。

  35. 原生JS利用transform实现banner的无限滚动

    功能 默认情况无限循环向右移动 点击数字切换到对应图片 点击左右切换可切换图片 原理 首先说下原理。 在布局上所有的图片都是重叠的,即只要保证Y方向对齐即可,当前可见的图z-index层级最高。 每隔3s中更换一张...

  36. TypeScript 使用日志

    Typescript 使用日志 最近这两年,有很多人都在讨论 Typescript,无论是社区还是各种文章都能看出来,整体来说正面的信息是大于负面的,这篇文章就来整理一下我所了解的 Typescript。 本文主要分为 3 个部分: •Typescript 基本概念•Typescript 高级用法•Typescript 总结 Typescrip...

  37. 当后端一次性丢给你 10 万条数据,作为前端工程师,你要怎么处理?

    前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到select中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣. 当...

  38. 教你快速入门vue框架(-)启动vue项目

    2013年发布0.6,0.7版本,当时基本没人使用,大部分使用angular框架 2014年发布0.8~0.11版本,v是mvc的重点,m与c被简化,这时开始有人使用vue 2015年发布1.0版本,自称mvvm框架 2016年发布2.0版本,此时不是mvvm框架,是mvc框架 2019年发布2.6版本 2020奶奶发布3.0版本 启动vue项目 npm install ...

  39. 通过实例了解JS执行上下文运行原理

    壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo 按照代码书写顺序,应该先输出 听风是...

  40. 图解JavaScript——代码实现【1】(Object.assign()、flat()等十四种代码原理实现不香吗?)

    关注公众号“执鸢者”,回复“书籍</font>”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频,回复“代码实现”获取本节整体思维导图。

  41. 请查收这份学习笔记我从Vue源码中学到的5个JavaScript技巧

    本文转载自公众号“读芯术”(ID:AI_Discovery) 从他人的成果中汲取营养是进步的法则之一,阅读知名框架的源代码可以有效地提高编程水平。最近,笔者开始了一场vue2.x的阅读之旅,从中学到了很多与JS相关的技巧。 独乐乐不如众乐乐,本文就将和你分享我的学习成果。 1.确定任何对象的特定类型 JavaScript中有...

  42. React Native 的常见 bug(一)

    原文: https://blog.logrocket.com/common-bugs-in-react-native/ 2020.1.31 翻译: 祝坤荣(时序) email: zhukunrong@yeah.net React Native是可以用来同时实现Android和iOS平台应用的不错的框架。由于它被React社区和Facebook支持,它离version 1.0还很早。 一些你遇到的er...

  43. 前端新工具–vite从入门到实战(一)

    前段时间尤大B站直播,介绍了一款新的前端开发工具,利用了浏览器自带的import机制,无论多大的项目,都是秒开,听起来很诱人,火速看了源码,并且最近做了《前端会客厅》后,经过尤大亲自讲解了设计思路,又有了新感悟,写个文章总结以下 实战 这个没啥,github走起把,贼简单 github.com/vitejs/vite ...

  44. JavaScript各种错误类型

    javascript错误类型有以下几种:①SyntaxError: 语法错误②ReferenceError: 引用错误 要用的东西没找到③RangeError: 范围错误 专指参数超范围④TypeError: 类型错误 错误的调用了对象的方法⑤EvalError: eval()方法错...

  45. 编程语言最新排名:Java最受欢迎、JS用户最多

    IDE工具开发商JetBrains基于2万名开发者,对编程语言的最新情况进行了统计描摹。 就受欢迎程度而言, Java高居第一位,但在使用人数上,JavaScript则名列榜首。 欢迎程度的统计方法是,让参与的开发者选出三种立即觉得必要的语音,最后算结果。 被访问时,JetBrains负责人指出,Java最后欢迎是因为很多项目...

  46. ThreeJS场景相关方法

    THREE.Scene.Add :用于向场景中添加对象 THREE.Scene.Remove: 用于移除场景中的对象 THREE.Scene.childern :用于获取场景中给所有的对象列表 THREE.Scene.getObjectByName :利用name属性,用于获取场景中特定对象 这些方法是和场景相关的重要方法,通常情况下用这些方法就可以满足大部分需...

  47. 【年中收藏】少不了的vue源码探索,除了面试你会学得更多

    众所周知,目前的局势下,前端的开发的任职要求越来越高;不只是问及会使用什么什么,掌握es6熟练vue或react框架最好使用过某某框架又最好是会node,等等...

  48. 58 道 Vue 常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度

    1.vue优点? 答: 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb ; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习; 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单; 组件化:保留了 react 的优点,实现了 html 的封装和重用...

  49. 总结18个webpack插件,总会有你想要的

    Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听 webpack 打包过程中的某些节点,执行广泛的任务。

  50. Bootstrap 5 Alpha 发布不再依赖 jQuery,放弃支持 IE

    Bootstrap 5 的第一个 Alpha 版 发布了! 几个月来我们一直在努力完善 v4 版中开始的各项工作,并对自己的进步感到很满意,但我们要做的事情还有很多。 我们一直在努力简化 v4 到 v5 的迁移过程,但也并不会驻足于那些已经过时或不再合适的内容上。因此,随着 v5 的发布我们很高兴地宣布, Bootstrap 不再依赖 jQu...

  51. 前端高级进阶:前端部署的发展历程

    前端一说起刀耕火种,那肯定紧随着前端工程化这一话题。随着react/vue/angular,es6+,webpack,babel,typescript以及node的发展,前端已经在逐渐替代过去script引cdn开发的方式了,掀起了工程化这一大浪潮。得益于工程化的发展与开源社区的良好生态,前端应用的可用性与效率得到了很大提高。 前端以前是刀耕...

  52. nodejs各种姿势断点调试

    nodejs开启debug模式通过传递参数 --inspect 或 --inspect-brk ,调试方法分为IDE和chrome devtools两种,下面就具体讲解这两种方式如何调试node程序; part1:VS Code调试: 一、launch.JSON 配置 配置详解看另一篇: VSCode launch.json配置详解 1 nodejs调试: 1.1 点击添加配置文件 我们看到 .v...

  53. vue实现公告栏文字上下滚动效果

    在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text" :key="text.id">{{text.val}}<...

  54. Vue组件通信的六种方式

    在平时的开发过程中,父子 / 兄弟组件间的通信是肯定会遇到的啦,所以这里总结了 6 种 Vue 组件的通信方式: props / $emit $emit / $on Vuex $attrs / $listeners $parent / $children 与 ref provide / inject 前言 如上图所示,A/B,B/C,B/D 组件是父子关系,C/D...

  55. 腾讯地图JSAPI-在地图上添加自定义覆盖物

    以下内容转载自多多洛爱学习的文章《JSAPI-在地图上添加自定义覆盖物》作者:多多洛爱学习 链接:[链接] 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  56. 如何在nginx同一端口下部署多个vue项目

    如题,项目部署我们都经历过,这个过程也是十面埋坑。其实部署vue应用比较简单了现在,特别是cli3出来后,比以前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来做代理很好用,可以解决跨域问题。 那么,如何在一个端口号下部署多个应用呢?这个需求有什么用?比如你的一个服务器上部署了...

  57. 小智周末学习发现了 10 个好用JavaScript图像处理库

    本文已经作者授权 用 JavaScript 处理图像可能非常困难且繁琐。 幸运的是,有许多库可以让这些变得简单得多。 下面介绍一些图像处理的库。 1. Pica 事例地址:[链接]Github: [链接] pica 可在浏览器上实现高质量...

  58. 2020年的12个Vue.js开发技巧和窍门

    我真的很喜欢使用Vue.js,每次使用框架时,我都会喜欢深入研究其功能和特性。通过这篇文章,我向你介绍了十个很酷的提示和技巧,你可能尚未意识到这些技巧和窍门,以帮助你成为更好的Vue开发人员。 更漂亮的插槽语法 随着Vue 2.6的推出,已经引入了插槽的简写方式,可用于事件(例如, @click 表示 v-on:click 事件...

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

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