20200630 前端开发日报

【代码鉴赏】简单优雅的JavaScript代码片段;由浅入深,66条JavaScript面试知识点;前端面试的那些事儿 ~ 深入浅出 webpack 之基础应用篇;用 Javascript 爬取网页;JavaScript 昨天, 今天和明天;定制一个可以react和vue共存的ts项目;Vue DOM Diff算法详解;JS如何去除数组中相同的数值

  1. 【代码鉴赏】简单优雅的JavaScript代码片段

    Promise.race不满足需求,因为如果有一个Promise reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

  2. 由浅入深,66条JavaScript面试知识点

    我只想面个CV工程师,面试官偏偏让我挑战造火箭工程师,加上今年这个情况更是前后 两男 ,但再难苟且的生活还要继续,饭碗还是要继续找的。在最近的面试中我一直在总结,每次面试回来也都会复盘,下面是我这几天遇到的面试知识点。但今天主题是标题所写的66条JavaScript知识点,由浅入深,整理了一周,每(zhěng)天(lǐ...

  3. 前端面试的那些事儿 ~ 深入浅出 webpack 之基础应用篇

    前端工程化经历过很多优秀的工具,例如 Grunt、Gulp、webpack、rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 weback 打包了。因此 webpack 也自然而然成了面试官打探你是否懂前端工程化的重要指标。 由于 webpack 技术栈比较复杂,因此决定分以下几篇文章全面深入的讲解: 基础应用篇 ...

  4. 用 Javascript 爬取网页

    本文主要针对具有一定 JavaScript 经验的程序员。如果你对 Web 抓取有深刻的了解,但对 JavaScript 并不熟悉,那么本文仍然能够对你有所帮助。

  5. JavaScript 昨天, 今天和明天

    “Any application that can be written in JavaScript, will eventually be written in JavaScript.” “任何可以用JavaScript编写的应用,最终都会用JavaScript来编写。” — Jeff Atwood, Author, Entrepreneur, Cofounder of StackOverflow JavaScript 的诞生 从浏览器的诞生说起 蒂姆&mid...

  6. 定制一个可以react和vue共存的ts项目

    跟风微前端,看了一圈源码,觉得微前端并不适合公司目前的项目,例如css会有多次加载的问题等,而且我们也不会有juqery的库,所以将html解析成字符串动态插入并执行的路子在我这并非最优解,现在花点时间做一个共用的项目 #github https://github.com/757566833/react-vue 复制代码 库的结构 以react为主,vue辅...

  7. Vue DOM Diff算法详解

    本篇文章能带给你如下内容: - 了解key属性在diff算法中的的作用,以及我们在代码中改如何正确的给key赋值 - 深入diff算法的核心,理解“同层对比”到底是个什么鬼 复制代码 patch 函数 代码位于:vue项目的 src/core/vdom/patch.js return function patch (oldVnode, vnode, hydrating, removeOnly) { if (is...

  8. JS如何去除数组中相同的数值

    问题: 使用富文本编辑上传图片后,小程序渲染后图片之间有空隙 // 解决办法: vertical-align: top; outline-width: 0px; 复制代码 2、阿里云部署个人静态页面无法访问 问题:ngnix部署成功,ping成功页面外网还是无法访问? 1、静态资源不能放到root // 根目录下的文件夹中没有权限访问, 2、记得开启服务器防火墙...

  9. 轻松上手promise原理(2):then的简单实现

    在上一篇文章中,我们对于promise有了初步的认识,我们了解到promise是new出来的对象,有三个对应pedding,fulfilled,rejected的状态,在初始化时,拥有status和value和初始化参数executor,executor需要传入resolve和reject函数作为参数。、 在本节我们继续来探索promise的原理,在了解基本的promse构造后,我们来对t...

  10. Electron: 如何以 Vue.js, Vuetify 开始应用

    Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架 Vue.js: Web 前端用于构建用户界面的渐进式框架 Vuetify: Vue.js 的 Material Design 组件框架 看完以上介绍,也明白了本文要做的事:用 Vue.js 与 Vuetify 组件,基于 Electron 来创建原生桌面应用。 环境准备 Visual Stud...

  11. 理解js中的异步编程

    在理解js异步编程时, 我们先再心中想一下为什么js语言会引入异步任务?异步到底解决了哪些问题?理解了这些之后,我们才能更好地运行异步编程思想去书写我们的业务代码逻辑。。。下面写一下个人对异步模型的理解

  12. 一文彻底搞懂webpack devtool

    为什么需要Source Map 首先根据谷歌开发者文档的介绍,Source Map一般与下列类型的预处理器搭配使用: 转译器(Babel) 编译器(TypeScript) Minifiers(UglifyJS) 为什么呢?因为通常我们运行在浏览器中的代码是经过处理的,处理后的代码可能与开发时代码相差很远,这就导致开发调试和线上...

  13. 10 个“贼”好用JavaScript图像处理库

    用 JavaScript 处理图像可能非常困难且繁琐。 幸运的是,有许多库可以让这些变得简单得多。 下面介绍一些图像处理的库。 1. Pica 事例地址:http://nodeca.github.io/pica/demo/ Github: https://github.com/nodeca/pica pica 可在浏览器上实现高质量而且高性能的图片大小调整JS库,目标是在浏览器中以最快的速...

  14. Vue 的异步更新

    Vue 是异步更新的,这个我们都知道,所以我们一般会使用 nextTick 来确保更新完后执行一些业务逻辑。我一直认为自己已经懂了,但是当我看到这个题目后,发现我似乎又不懂了: 题目:下面的打印顺序?注释掉 this.name = 'b' 以后呢? 答案:第一问 2 1,第二问 1 2。 <template> <div id="app&qu...

  15. 图解 webpack(模块化 – CommonJS)

    提到 webpack,可以说是与我们的开发工程非常密切的工具,不管是日常开发、进行面试还是对于自我的提高,都离不开它,因为它给我们的开发带了极大的便利以及学习的价值。但是由于webpack是一个非常庞大的工程体系...

  16. JavaScript 基本语法及面试注意点

    表达式一般都有值,语句可能有值也可能没有,语句一般会改变环境(声明、赋值),但这些都不是绝对的。 undefined undefined 2. 标识符的规则 第一个字符可以是 Unicode字母、$、下划线(_)或中文 后面的字符,除了上述字符,还可以有数字 变量名是标识符 JavaScript 大小写敏感 3. 注释 好的注释...

  17. 从零开始的Flutter之旅: Navigator

    往期回顾 从零开始的Flutter之旅: StatelessWidget 从零开始的Flutter之旅: StatefulWidget 从零开始的Flutter之旅: InheritedWidget 从零开始的Flutter之旅: Provider 这篇文章是从零开始系列的第五期,前面我们...

  18. 什么是 CLS?在浏览器和 Node.js 中实现 CLS

    在写 Flutter 和 Serverless 查资料的时候,在某个博客里看到了 CLS 的相关内容,感觉其实是个很不错的软件工程的解耦想法,于是保存了下来。今天回过头来仔细研究了一下并决定给自己留下一些记录。 场景 无论是在浏览器,还是在服务端 Node.js,我们经常会碰到打点上报,追踪错误这样的需求,即使不对特定用户进行追...

  19. 关于css的display:flex;flex:grow,flex:shrink

    1.解决以前需要用定位position,浮动float,百分比%来解决的布局问题,2.解决以前比较难以把握的垂直居中问题vertical-align

  20. 这些vue技巧,你值得拥有

    使用环境 如图,这是一个v-for渲染的列表(只是目前这个版块才刚开始做,目前只有一个),圆圈内的就是一个组件,也就是要v-for动态组件 实际使用 一开始就是基本的组件引入了 import ColorIn from '@/components/Magic/ColorIn.vue' import LineIn from "@/components/Magic/LineIn.vu...

  21. 一文读懂 JavaScript 深拷贝与浅拷贝

    前言 在 javascript 中有不同的方法来复制对象,如果你还不熟悉这门语言的话,复制对象时就会很容易掉进陷阱里,那么我们怎样才能正确地复制一个对象呢? 读完本文,希望你能明白: 什么是深/浅拷贝,他们跟赋值有何区别? 深/浅拷贝的实现方式有几种? 浅拷...

  22. 从零开始配置vue权限控制

    约定后端返回数据格式 children: component: "views/index/content/index" id: 5 meta: {isLogin: 1, icon: "el-icon-postcard", title: "项目概览", isShow: 1} name: "/home/index/c...

  23. 重读Vue核心插件–routervuex

    引入vuerouter组件、定义路由(也称配置路由)、创建router实例、全局挂载路由 在全局挂载后,我们就可以通过this.$router访问路由器 动态匹配路由 意义:对于同一组件,但是有着不同请求参数的请求,我们可定不能为每一参数都配置一个路由、一个组件,我们肯定要设置一个通用的路由,所以我们提出了动态路由匹配,解...

  24. JS异步原理以及解决方案

    JavaScript最大的特点就是他是单线程的,即同一时间只能做一件事。 为什么js被设计成单线程的语言呢? js作为一门脚本语言,主要的用途是完成用户交互以及DOM操作,而假如js同时拥有多个线程,其中一个线程在修改DOM节点,而另外一个线程也在修改这个DOM节点,那么这时候就发生了冲突。单线程的特点,避免了js的复杂性...

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