20200520 前端开发日报

[10分钟学会,或者CV走代码] d3.js 组合 vue, 新手也实现 拓扑图形(svg 版);如何“取巧”实现一个微前端沙箱?;前端安全之防范XSS实战小结;js前端数据类型检测;React中组件逻辑复用的那些事儿;JS 压缩图片简易实现;【重学前端】JavaScript中的继承;女程序员重返前端之路——VUE面试题

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

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

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

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

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

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

  4. js前端数据类型检测

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

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

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

  6. JS 压缩图片简易实现

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

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

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

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

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

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

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

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

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

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

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

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

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

  13. vue 路由及按钮权限控制 思路总结

    第一种后台返回路由,第二种后台返回权限。共同点:两种方法都可以实现需求前端都要维护一份路由地址与模块文件地址的映射后段返回的数据一般都要再遍历做二次处理有关页面内元素(按钮)的权限都要另做处理技术…

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

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

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

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

  16. 犀牛书作者:最该忘记的JavaScript特性

    编者按:本文译者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团Web前端开发资深专家,360前端技术委员会委员、W3C AC代表。 原文:https://davidflanagan.com/2020/05/12/javascript-to-forget.html 作者:David Flanagan JavaScript这门语言的第一个演示版差不多就在25年前诞生…

  17. 用canvas做批改作业的小插件

      今天公司有一个新的需求,就是要在返回的作业照片里面可以涂鸦批改,批改完后就连同批改后的照片上传到服务器。这对我不怎么熟悉canvas的人来说是个挑战。 需求分析 能进行批改,就是相当于画笔 能进行画笔的撤回功能 能进行全部画笔的清除功能 可以转化画笔的颜色 技术上的实现思路   在听到这需求后…

  18. CentOS7.5搭建javaweb环境Nginx,JDK,Mysql,Tomcat,Redis

    一、安装基本工具 在新申请的CentOS7.5云主机上,我们还需要安装一些最基本的工具: {代码…} 开发环境相关软件版本: {代码…} 二、安装Nginx 1、先下载gcc {代码…} 2、下载源码包 下载源码包,,选择稳定版…

  19. 通过sourcemap解压缩webpack 实战

    现在许多网站都使用webpack对网站打包,许多前端框架也默认配置好webpack。这会在渗透测试或挖洞过程中带来一些麻烦。这让我们极其痛苦。但是开发者忽视起潜在风险,在线上环境使用了开发环境的配置,或者配置了sourcemap允许在生产环境中使用。这使得我们有了机会。 在实际渗透过程中,许多网站还是存在这种情况。通…

  20. 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支持动态化 …

  21. jQuery 动画与停止动画效果实例详解

    本文实例讲述了jQuery 动画与停止动画效果。分享给大家供大家参考,具体如下: jQuery 动画 – animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法: $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长…

  22. GitHub 上周 JavaScript 趋势榜项目

    Pose Animator拍摄2D矢量图,并基于PoseNet和FaceMesh的识别结果实时对其包含的曲线进行动画处理。 它从计算机图形学中借鉴了基于骨骼的动画的思想,并将其应用于矢量字符。

  23. 分享一个vue2.x源码中,事件绑定的一个值得学习的小操作

    学习的时候无意中发现的,我也不知道这算不算一个值得学习的小操作,但是我认为这应该算是吧,如果有大佬觉得这点东西太low了的话,欢迎评论交流。。。。 vue事件绑定的大概流程 我要说的那个小操作是在 如果新旧节点上绑定的事件不一致了 这一步,如何将dom节点绑定的事件切换成最新的事件。 前置知…

  24. 史上最全的 JavaScript 模块化方案和工具

    模块化是大型前端项目的必备要素。JavaScript 从诞生至今,出现过各种各样的模块化方案,让我们一起来盘点下吧。 IIFE 模块 默认情况下,在浏览器宿主环境里定义的变量都是全局变量,如果页面引用了多个这样的 JavaScript 文件,很容易造成命名冲突。 // 定义全局变量let count = 0;const increase = () => +…

  25. 深入学习 Three.js 核心对象(一):Object3D

    从底层对象开始,看看Threejs如果利用图形学知识,通过各种数据对象构建场景,最终通过渲染器绘制出来。首先来看看最基础的Object3D对象,内容包含: 官方demo引入 Object3D的主要属性 Object3D的变换 本文所参考的Three.js版本为0.116.1 一个例子 …

  26. 在Angular中实现一个级联效果的下拉框

    实现一个具有级联效果的下拉搜索框,实现的结果如下图所示 我们主要通过这个组件,来学习一些细微的逻辑,比如: 如何计算input框内文字的长度; 如何获取光标的位置;如何实现滚动条随着上下键盘的按动进行移动…… 具体需求如下 级联搜索最多不超过三级,以”.“作为级联搜索的连接符 搜索框跟…

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

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

  28. 15分钟上手vue3.0

    Vue 3 还没有正式发布,但是 Alpha 版本已经发布了。 虽然官方还不推荐在生产环境中直接使用 Vue 3 ,但是提前学习总归是有好处的。 嘴上喊着老子学不动了,双手还是很诚实的打开了 Vue 3 文档 创建项目 Vue 官方很贴心的提供了一个 github 仓库,让我们能快速体验 Vue 3 的新特性: git clone https://…

  29. 腾讯云云函数 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》 了解具体内容。 其中比较重要的一点是启动速…

  30. vue模块移动组件

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

  31. Babel插件开发&测试与简易源码分析

    本文主要从 Babel 基础 开始介绍,以一个例子完整阐述了插件的开发与测试如何进行,并在最后提供了简易的 Babel 代码解析及其他扩展资料 前置知识 一些工具 AST Explorer – 实时编辑看AST,还带高亮(但是这个和我们代码里拿到的不完全一样,仅作参考) Javascript 可视化分词 …

  32. vue中的修饰符

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

  33. 我发现了7个关于 CSS backgroundImage 好用的技巧

    作者:ryanmcdermott译者:前端小智来源:github点赞再看,养成习惯 本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希…

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


关注我

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

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

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