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 应用

    云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTMLCSS、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拥有大量的操作符可以说基本涵括日常使用的方方面面, 但总有一天会有没有符合要求的操作符的一天, 或者, 即使有, 但我们却没有找到, 毕竟已经存在的操作符已经很多了, 说不定会越来越多, 这时就需要我们来自...

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

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