20200703 前端开发日报

(初级前端)面试如何写出一个满意的深拷贝;37个JS 面试题为你助力,让面试更有力(面试必读);TypeScript 学习笔记;通熟易懂的Vue响应式原理以及依赖收集;前端校招字节跳动面试(第一篇);前端日常工作中常用开发小技巧 —JavaScript;30 个纯 HTML5 实现的游戏;JavaScript ES6代理的实际用例

  1. (初级前端)面试如何写出一个满意的深拷贝

    已经有很多关于 深拷贝与浅拷贝 的文章,为什么自己还要写一遍呢:100: ❝ 学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。 ❞ 分享一个不错的思维导图:point_down: 通过...

  2. 37个JS 面试题为你助力,让面试更有力(面试必读)

    先赞再看,养成习惯~ 1.JS中let和const有什么用? 在现代js中,let&const是创建变量的不同方式。 在早期的js中,咱们使用var关键字来创建变量。 let&const关键字是在ES6版本中引入的,其目的是在js中创建两种不同类型的变量,一种是不可变的,另一种是可变的。 const:它用于创建一个不可变变量。不可变变量是指...

  3. TypeScript 学习笔记

    typeScript 是一门基于javaScript 之上的一门编程语言,解决了javascript 自有的语言类型系统的不足。TypeScript 大大提升了系统的安全性。 语言类型 区分编程语言的两个维度: 1.类型安全:强类型与弱类型 2.类型检查:静态类型与动态类型 类型安全 强类型VS弱类型: 1.强类型,从语言层面限制函数的实参...

  4. 通熟易懂的Vue响应式原理以及依赖收集

    最近在看一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山,只有自己去登山,才能看到不一样的风景,体会更加深刻。今天我们就来聊聊Vue中比较重要的响应式原理以及依赖收集。 响应式原理 Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作。何为...

  5. 前端校招字节跳动面试(第一篇)

    1.讲一下排序,给一个不懂快排序的人讲快排,复杂度,为什么它叫快排序? 参考白话经典算法系列之六 快速排序 快速搞定 2.个按照某个位置旋转的数组(连续且有序)求中位数,例如 ,复杂度,如何降到比n更低? 思路:先找到最小的数,也就是还没翻转时arr 这个数。然...

  6. 前端日常工作中常用开发小技巧 —JavaScript

    1.格式化金钱值 const ThousandNum = num => num.toString().replace(/B(?=(d{3})+(?!d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整  代替正数的 Math.floor() ,代替负数的  Math.ceil() const num1 = ~~ 1.69; const n...

  7. 30 个纯 HTML5 实现的游戏

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

  8. JavaScript ES6代理的实际用例

    元编程是一种强大的技术,使你能够编写可以创建其他程序的程序。ES6借助代理和许多类似功能,使在JavaScript中利用元编程变得更加容易。ES6 Proxy(代理) 有助于重新定义对象的基本操作,从而为各种可能性打开了...

  9. webpack打包css背景图片路径问题

    在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 复制代码 在webpack中css-loader的解析配置如下 { test: /.(css|less)$/, exclude: path.resolve(__dirname, 'node_modules'), use: ['style-loader', 'css-l...

  10. 打造一款适合自己的快速开发框架-前端篇之权限管理

    在后端篇中已对权限资源进行了分类:API接口、路由菜单、页面按钮。本文重点讲一下如何对这些权限资源进行分配并对不同的登录用户,根据权限的不同,呈现不一样的功能菜单、按钮进行统一处理。 关系梳理 用户与角色 多对多关系:一个用户可以拥有多个角色,一个角色包含多个用户 角色与菜单 多对多关系:一个角色有...

  11. JavaScript异常报错处理:Uncaught TypeError: xxx is not a function

    摘要 页面报错bug是常有的事,我们可以根据错误bug提示关键性的去修复问题。依稀的记得之前有个小伙伴询问了一个js异常的错误bug: Uncaught TypeError: xxx is not a function。 这个错误问题定位处理起来很快,但是我却不知其所以然。为了弄清楚报错的深层面原因,去调研了关于错误的解决方案。学习吸取别人的经验,...

  12. 记一次简单JS爬虫

    最近很烦,干啥啥不行,吃喝玩乐第一名。可是自己又不是富家子弟!!!所以还得学习!!!在公司日常划水中,这时,我的领导走了过来,难道是有新需求了。我的心里还是很期待的,毕竟已经很久没活了。这时领导丢过来一个网址。 宝哥 你看看这个网站,能不能把上面的信息给我扒下来?一听到扒这个字我就觉得...

  13. electronjs基于nodejs实现桌面端应用

    electronjs使用nodejs实现桌面端应用 electronjs基于nodejs使用 JavaScript,HTMLCSS 构建跨平台的桌面应用程序。 https://www.electronjs.org/ 开始 从 https://github.com/electron/electron-quick-start 下载基础配置,在本地解压后,执行 npm i 进行安装依赖。 electronjs插件里面有比较大的依赖文...

  14. JavaScript中的函数式编程–函子

    为什么要学函子 通过之前的学习我们已经学习了函数式编程的一些基础,但是我们还没有演示在函数式编程中如何把副作用控制在可控的范围内,以及如何进行异常处理、异步操作等。 什么是Functor 首先:是一个对象 容器:包含值和值的变形关系(这个变形关系就是函数) 函子:是一个...

  15. 重学JavaScript(二)邂逅JavaScript基础知识

    什么是变量(可以存储变化的数据) 什么是变量 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据 为什么要使用变量 使用变量可以方便的获取或者修改内存中的数据 如何使用变量 var声明变量 var age; 复制代码 变量的赋值 va...

  16. JavaScript异步编程–Promise

    一种更优的异步编程统一方案,但是直接使用传统回调方式去完成复杂的异步流程会造成大量的回调问题(回调地狱),CommonJS社区提出了Promise的规范,目的就是为异步编程提供更合理更规范的统一解决方案,在ES2015中被标准化,成为语言规范。 Promise就是一个对象,用来表示一个异步任务最终结束之后究竟是成功还是失败,...

  17. electron-vue开发笔记(3)多窗口多页面入口配置

    electron-vue默认的配置是单页面应用,但是在这种情况下想实现多个窗口,即 同时打开aWin,bWin两个窗口, 且aWin窗口展示a.html,bWin窗口展示b.html。 复制代码 解决方案 1. 创建多页面 首先在renderer里创建两个Vue实例,为了方便管理,统一放到pages路径下。提出store统一管理这两个Vue实例,文件结构如图,...

  18. 《HelloGitHub》第 51 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣、入门级的开源项目。 这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等,这些开源项目大多都是非...

  19. Mozilla WebXR Viewer 2.0 实验兼容 WebXR 的 iOS JavaScript API

    WebXR 2.0 是 Mozilla 实验性增强现实(AR)浏览器的完全重写,旨在让 web 开发人员使用 WebXR 在 ios 上体验基于 Web 的增强现实 。WebXR 2.0 是一个新的、符合 规范 的 WebXR JavaScript API 实现。 Mozilla 首席研究科学家 Blair MacIntyre 说,Mozilla 在三年前就开始开展 WebXR 方面的工作, 随着 WebXR 规范...

  20. JavaScript实现冒泡排序法、插入排序法、快速排序法

    冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。 它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小、首字母从Z到A)错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素列已经排序完成。 这个算法的名字由来是因为越小的元...

  21. 前端性能优化,这些你都需要知道

    前言 最近花了一些时间在项目的性能优化上,背后做了很多工作,但是最后依然没有达到自己想要的结果,有些失望,但是还是记录下自己的执着。 性能优化总结:减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式。 性能分类 对前端工程性能的优化,我觉得可以分为两类: 站...

  22. 你想到的这都有-JS数组归总

    在工作之中我们所遇到最多的无非就是数组以及对象,对象很多情况下就是对他进行一个解构取到我们想要的值,那么相比起来,我们操作数组就有非常多的方法去得到自己想要的结果,司尘呆呆今天就来分享一个汇总,分三大块:存储方式、修改、遍历。文章篇幅可能有点长,但是毕竟是总结就想写详细一点,有些方法这边就一笔带...

  23. JavaScript中的函数式编程–函数

    函数式编程是随着React的流行收到越来越多的关注,React中的高阶组件使用高阶函数老实现,高阶函数就是函数式编程的一个特性;再就是React中的redux也是使用了函数式编程的思想 iOS中的自动布局框架Masonry也是使用函数式编程实现的 在新发布的vue3中也是用了大量了高阶函数,由此可见在流行的框架中(React、vue、Ma...

  24. LeetCode 27. 移除元素:JavaScript 遍历和双指针两种解法

    题目链接: leetcode-cn.com/problems/re… 方法一 解题思路 主要思路是遍历数组 nums ,每次取出的数组元素为 num ,设置初始下标为 ans 。 在遍历过程中,如果 num 与需要移除的值不同,则进行拷贝覆盖 nums = num , ans 自增 1。 如果相同,则跳过该数字不进行拷贝覆盖,最后 ans 即为新...

  25. JavaScript中的函数式编程–函数组合

    问题:纯函数和柯里化很容易写出洋葱(一层套一层)代码,形如:h(g(f(x))),实际中遇到的问题如:获取数组的最后一个元素在转换成大写字母, _.toUpper(_.first(_.reverse(array))) 解决:函数组合可以让我们把细粒度的函数重新组合生成一个新的函数 管道 下面这张图标识程序中使用函数处理数据的过程,给fn函数输入...

  26. : Vue.js 函数式组件:what, why & when?

    原文:https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713 要义:如果你的组件不需要状态化,将其转换为一个 函数式组件(functional component) 可提高 70% 的渲染性能 What - 何为函数式组件? functional component (别跟 Vue 的 render function 搞混) 是一个不持有...

  27. WebWorker,这次一定会

    在 【异步发展史,这次一定会!】 中,因为js引擎是单线程的,所以我们需要异步编程,需要将耗时的操作异步处理。但是当这些执行异步任务时,它们先被放入浏览器的事件任务队列中去,等到执行栈空闲时才会按照队列先进先出的原则被一一执行,但终究还是单线程。若是复杂耗时的任务仍然会耗费较大的时间。 为了能使js...

  28. Vue router 使用 History 模式导致页面请求 404

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用路由的 history 模式 ,这种模式充分利用  history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history'...

  29. [建议]续上一期JS输出题酸爽继续(内容共1.8W字+巩固JS基础)

    前言 最近一直在复习JavaScript部分,如果停留在基础知识点的话,收获可能不是很大,所以打算空闲的时间给做一些常见的JS面试题,给自己充充电:battery::battery: 当然了,肯定有人已经做过类似有趣的事情了,我觉得自己去做的话,总结一下,对巩固自己的知识点有所帮助:heavy_check_mark: 你的鼓励点赞:+1:收藏...

  30. 从ES6到ES10的新特性万字大总结(不得不收藏)

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。

  31. JavaScript异步编程–简介

    众所周知javascript是单线程模式,这是因为javascript设计时是被用来运行在浏览器中执行dom操作的,如果设计成多线程模式会出现繁琐的线程通信问题,如:有多个线程同时修改了一处dom,此时需要复杂的运算来决定执行哪个线程的修改。 javascript在调用模式上分为两种 同步模式(Synahronous) 异步模式(Asynahron...

  32. webpack概述

    如果2020年作为一个前端开发你还不知道 Webpack 是什么,真的就要考虑回炉重造了。很多人可能会得意洋洋,嘴角上扬回答:这谁不知道,不就是一个项目构建工具吗,我们的项目现在都用着了。这我当然信,但是如果让你认真介绍 Webpack 核心的概念有哪些,底层的原理是怎么样的,那么你还能淡定地娓娓道来吗?之前的我可...

  33. 单页面应用程序(SPA)vs 多页面应用程序(MPA):选择哪个用于web开发

    原文链接: Single-Page Apps(SPA) vs Multi-Page Apps(MPA): What To Choose For Web Development 一个成功的web应用程序始于为它选择正确的技术栈和架构。在web开发方面,选择SPA(single-page applications)还是MPA(multiple-page applications)一直是一个热议的话题。面对如此多的不同意见,你可能很难决定使...

  34. vue是怎么做一个跟踪狂的

    vue是以数据驱动视图,所以很多的场景我们是基于数据的改变去做一些操作,这里就来探究一下vue是怎么样去追踪数据的变化的,追踪到数据变化,我们可以做些什么,不从源代码的角度去研究,这里我们粗浅的水一下 二、对象属性 在此之前,你需要对对象有一定的了解,首先看一个例子 var obj = { name: 'zhangsa...

  35. JS高级程序笔记(五)——正则表达式与RegExp与支持正则表达式的 String 对象的方法的记录

    假如我们有这样一个需求:把日期'2015-12-25'替换成'12/25/2015',如果是你,你现在会怎么做呢? 你可能会这样写: var reg = /d{4}-d{2}-d{2}/g; var text = '2015-12-25' var result = text.replace(reg,'12/25/2015'); console.log(result);//12/25/2015 复制代码 但是上面这样的写法,你只能够匹配到'2015-1...

  36. Vue props 原理分析

    ​ vue的props属性用于父组件向子组件传递值,是一个高频使用的特性。 ​ props的使用需要父子组件的配合,在父组件中使用v-bind绑定要传递的值,在子组件中的props属性中声明接受属性的类型和默认值。使用示例: // 父组件 App.vue <hello-world :testData="testData"></hello-world> export de...

  37. 如何编写React Hooks风格的Redux组件

    Hooks特性在React的16.8版本被引入,在解决组件重用和生命周期逻辑破碎两大难题的同时,极大简化了组件写法,而且兼容旧写法,即便不想学也没关系,向开发者释放了极大的善意。

  38. 用vue开发一个时间范围选择组件

    最近公司内部需要做个会议室预定的小程序,了解大概的需求之后,就开始上手开发 小程序直接用 uni-app 开发,简单暴力,会vue的直接能上手撸了 开发完以后,觉得选择时间组件还不错,就考虑开源了,有需求的就可以帮忙省点时间,早点下班回家 先看一下组件, 在线预览 戳我 有什么功能 可以选...

  39. 可能是世界上最简单的用 Go 来写 WebAssembly 的教程

    原标题:The world’s easiest introduction to WebAssembly 原文链接:The world’s easiest introduction to WebAssembly - freeCodeCamp.org - Medium 作者:Martin Olsansky (olso) 一个与猫咪交互的 Canvas 手机游戏,这个项目完全由 Golang 编写。图里这只小猫正在体验我编写的小游戏 ...

  40. js 如何全部替代一个子串为另一个子串

    本题摘自于我 github 上的面试每日一题: github.com/shfshanyue/… ,并有大厂面经及内推信息 如果需要全量替换字符串,可以使用 String.prototype.replace(re, replacer) ,其中正则表达式需要开启 global flag const s = 'foo foo foo' s.replce(/foo/g, 'bar') 复制代码 那如题中,是否可以使用正则表达式来...

  41. webpack4 搭建企业级脚手架(最新)

    commjs使用同步的方式去加载模块,使用module.export导出,require引入,commjs适合用于在服务端, 因为服务端读取磁盘文件较快,commjs同步的特性让其在编译完成就可以使用模块了。commjs的加载机制是 require的值是module.export的值的拷贝, amd和cmd都是使用的异步的加载机制,主要用于浏览器端。 es6模块是ECMA 提...

  42. 基于项目实战阐述vue3.0新型状态管理和逻辑复用方式

    前言 背景: 2019年2月6号,React 发布 「 16.8.0 」 版本,vue紧随其后,发布了 「 vue3.0 RFC 」 Vue3.0受React16.0 推出的hook 抄袭 启发(咳咳...),提供了一个全新的逻辑复用方案。使用基于函数的 API,我们可以将相关联的代码抽取到一个 "composition function"(组合函数)中 —...

  43. (下)Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享(附源码)

    2020年07月01日 阅读 20 (下)Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享(附源码) 回顾 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要的是提高自己的项目经验,对于找工作而言有着大大的帮助。 作...

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

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