20200427 前端开发日报

浓缩的就是精华——ES6 Promise；原来webpack的loader如此简单，轻松写一个自己loader；【面试官】| 要不说说，JavaScript中的new操作符（别走）；云开发静态网站托管现已支持 Angular 应用；Angular 9 的新特性；【Babel 小玩具】如何用 Babel 为代码自动引入依赖；「架构师技术图谱」上 GitHub 热榜了，助你早日成为架构师；图片添加水印、文件转图片、图片转文件、html2canvas截屏功能

1. 浓缩的就是精华——ES6 Promise

   ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态…

2. 原来webpack的loader如此简单，轻松写一个自己loader

   webpack的思想就是万物皆模块，这里的模块不仅仅只是JavaScript文件，它还可以是一个文件、一张图片、一个css样式表等资源。如果我们把这些内容全部在index.html中引入，那整个项目的代码看起来满篇都是引入的外…

3. 【面试官】| 要不说说，JavaScript中的new操作符（别走）

   文章第一时间发在笔者github mdn-箭头函数 阮老师es6-箭头函数 什么是箭头函数 语法简洁 没有自己的this 不能用作构造函数。 const agesArr = const res = agesArr.map(item=>`${item}岁`) console.log(res) // [ ’12岁’, ’13岁’, ‘7岁’, …

4. 云开发静态网站托管现已支持 Angular 应用

   云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。 在云开发静态托管中，你同样可以托管一个 Angular 项目，接下来，我就介绍一下应该如何将一个 Angular 项目部署到云开发静态网站托管服务中。 …

5. Angular 9 的新特性

   注意： Angular 9 现在已经处于 release candidate 阶段，随时可能发布。 Ivy 来了 Angular 8 中虽然支持试用 Ivy Renderer，但是默认的 Complier Engine 还是 View Engine，并且需要修改 tsconfig.json 文件： "angularCompilerOptions": { "enableIvy": true } JavaScript复制代码 Ang…

6. 【Babel 小玩具】如何用 Babel 为代码自动引入依赖

   最近在尝试玩一玩已经被大家玩腻的 Babel ，今天给大家分享 「 如何用 Babel 为代码自动引入依赖 」 ，通过一个简单的例子入门 Babel 插件开发。 const a = require(‘a’);import b from ‘b’;console.log(axuebin.say(‘hello babel’));复制代码 同学们都知道，如果运行上面的代码，一定是会报错的： VM…

7. 「架构师技术图谱」上 GitHub 热榜了，助你早日成为架构师

   大家好，我是头条菌。 我爱程序员！我的微信号：toutiaoio007，欢迎加我好友，拉你入群～ 头条菌推荐过很多别人家的项目。 今天，我们的「架构师技术图谱」上了 GitHub 热榜！已有 7.1k Star! 那就自荐下吧！ 本项目是《码农周刊》架构学习资料精选，码农周刊团队官方出品。架构师…

8. 图片添加水印、文件转图片、图片转文件、html2canvas截屏功能

   做法: canvas base64 下面先提供代码，并对代码做进一步的讲解： picWaterMark = ({ // 1 url = ”, textAlign = ‘left’, font = "30px Microsoft Yahei", fillStyle = ‘rgba(255, 255, 255, 0.8)’, content = ‘请勿外传’, callback = null, } = {}) => { const img = new Image(); // 2…

9. 【Vue】组件

   Vue的两大核心 1. 数据驱动 – 数据驱动界面显示 2. 模块化 – 复用公共模块，组件实现模块化提供基础 组件基础 组件渲染过程 template —> ast（抽象语法树） —> render —> VDom(虚拟DOM) —> 真实的Dom —> 页面 Vue组件需要编译，编译过程可能发生在 打包过程 （使用vue文…

10. JS-数组之间相等操作符、布尔操作符、隐试转换

    问题场景: 在做一个后台返回数据是否有值的处理操作时，用if判断发现的一个有意思的问题 代码如下: 复制代码 后台返回数据即：res.data.list = ){ console.log(‘无数据返回’) } else { console.log(‘有数据’) } 打印结果：有数据 复制代码…

11. CSS conic-gradient() 锥形渐变简介

    锥形渐变是 CSS Images Module Level 4 规范中新定义的一种渐变，可以非常方便实现过去很难实现的效果，例如饼图，色板，棋盘等各种效果，CSS 开发必学必会技能。

12. Vue 中如何转移 Dom ？

    这个标题可能很拗口，请允许我先做下简短的解释。 在我们使用 Vue 进行开发时，Dom 最终渲染的结构与 template 嵌套逻辑是一致的，有着严格的父子级关系。 假如我们有特殊需求，需要将某个 viewModel 的 Dom 渲染到父级之外，需要如何操作？ 一、真的有这种需求 ？ 可能你在看了前面介绍之后会觉得很奇怪，也意…

13. Vue 3-beta 相关文集

    还是这篇总结得全…… 看到内容我都惊呆了

14. vue项目中，采坑自定义video视频控制条

    最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。 首页效果图： 需求描述： 当鼠标放在图片上的时候，自动播放视频，并显示预览进度条，当鼠标移开，显示预览图片，再次hover图片，继续上次播放 视频详情页的效…

15. node.js学习笔记之MongoDB数据库

    术语 解释说明 database 数据库，mongoDB数据库软件中可以建立多个数据库 collection 集合，一组数据的集合，可以理解为JavaScript中的数组 document 文档，一条具体的数据，可以理解为JavaScript中的对象，一个json对象 fiel…

16. 如何测试angular组件间传值

    我们知道angular组件间通讯有多种方法，其中最常用的一种方法就是借助于 @Input 和 @Output 进行通讯。具体如何通讯请参考angular组件间通讯，本文不再赘述，我们来讲讲关于此方法如何进行单元测试。

17. 【Vue】状态管理

    页面应用需要Vuex管理全局/模块的状态，大型单页面组件如果靠事件（events）/属性（props）通讯传值会把各个组件耦合在一起。因 此需要Vuex统一管理，当然如是小型单页面应用，引用Vuex反而会增加复杂度。因此需要衡量引用Vuex增加的收益是否大于成本。 快速入门 1. 安装vuex库 cnpm install -S vuex 2. 创…

18. JavaScript ECMA-262-3 深入解析（二）：变量对象实例详解

    本文实例讲述了JavaScript ECMA-262-3变量对象。分享给大家供大家参考，具体如下： 介绍 我们在创建应用程序的时候，总免不了要声明变量和函数。那么，当我们需要使用这些东西的时候，解释器(interpreter)是怎么样、从哪里找到我们的数据(函数，变量)的，这个过程究竟发生了什么呢？ 大部分ECMAScript程序员应…

19. 为rxjs添加自定义操作符

    rxjs拥有大量的操作符可以说基本涵括日常使用的方方面面, 但总有一天会有没有符合要求的操作符的一天, 或者, 即使有, 但我们却没有找到, 毕竟已经存在的操作符已经很多了, 说不定会越来越多, 这时就需要我们来自…

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