20191109 前端开发周报

玉伯:我的前端成长之路;灵活运用CSS开发技巧(66个实用技巧,值得收藏);9个项目助你在2020年成为前端大师;下次面试再问JavaScript怎么实现深拷贝,我就不客气了;(建议精读)原生JS灵魂之问(中),检验自己是否真的熟悉JavaScript?;搭建 TypeScript 开发环境;这些前端资源,你值得拥有;7道简单的 JavaScript 面试题,三个月没招到一个人

  1. 玉伯:我的前端成长之路 编者按:本文通过玉伯授权后发布 注:这是在阿里内部前端大学的一个分享,整理了一份对外的版本,希望分享内容能对你有所帮助。 今天跟大家分享下个人成长和带团队的一些感悟。我可能更偏向于写作型或阅读型,很少在对外分享中讲关于成长的话题。今天尝试下,希望...
  2. 灵活运用CSS开发技巧(66个实用技巧,值得收藏)何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。
  3. 9个项目助你在2020年成为前端大师DEV的年度热文,读完觉得不错,所以翻译出来供大家参考,个人水平有限,文中可能会有一些翻译错误,可以在评论区指正。
  4. 下次面试再问JavaScript怎么实现深拷贝,我就不客气了 大家都知道,JavaScript 中的基础数据类型,比如 number , boolean , string , null , undefined 这些类型的变量在赋值的时候会分配独立的内存空间。而复合类型,比如 Object ,这种类型的变量是引用型的,也就是保存内存的引用地址,可能多个变量指向的是同一个内存地址。这样在修改变量的某个属性时,其他变量的...
  5. (建议精读)原生JS灵魂之问(中),检验自己是否真的熟悉JavaScript? 笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过。打算来做一个系列,一共分三次发,以一系列的问题为驱动,当然也会有追问和扩展,内容系统且完整,对初中级选手会有很好的提升,高级选手也会得到复习和巩固。这是本系列的第二篇。 扫了一眼目录后,也许你可能会说:...
  6. 搭建 TypeScript 开发环境 随着 TypeScript 使用的越来越广泛,是时候入门 TypeScript 。接下来,这篇文章学习 TypeScript 时,通过 Webpack 搭建的 TypeScript 开发环境,方便学习。本人也是刚开始入门,难免会出现错误,请不吝指正。 接下来进入 TypeScript 开发环境搭建吧! TypeScript 安装 安装没有什么好说的,就是使用 npm ...
  7. 这些前端资源,你值得拥有<!-- @Author: Rainy @Github: [链接] @Date: 2019-01-20 15:41:18 @LastEditTime: 2019-01-20 15:41:23--> 笔记地址 因为之前学习前端的收集书签的资源太多,所以就在今年3、4月开始抽空整理了所有的书签...
  8. 7道简单的 JavaScript 面试题,三个月没招到一个人 如果你符合JavaScript高级开发人员的资格,在编码面试中很有可能会被问到一些刁钻的问题。 我知道这不公平。一些不知名的人把你放在角落上下打量,似乎想看你是什么做成的。这是一次不愉快的经历。 你能做什么? 遵循这个建议:“熟能生巧”。通过投入足够的时间,更好地定期深入了解JavaScript,将改善你...
  9. 非常完善且扩展性非常高的在线制作 web 页面的工具 README.md 码良服务端 官网 官网: https://godspen.ymm56.com/ 使用手册: https://godspen.ymm56.com/doc/cookbook/introduce.html 在线体验: https://godspen.ymm56.com/admin/#/home ...
  10. 定制你私有的前端构建部署(Github CI/CD)近来手痒,又陷入了自我捣腾的无限循环。 其实事情是这样的,最近阿里云搞活动(嗯,友情打广告),229买了个3年版低配服务器;前端时间写用React + Github Graphql API自定义你的博客, 见识了Github Action的强...
  11. 前端面试每日 3+1 —— 第204天今天的知识点 (2019.11.06) —— 第204天 (我也要出题) [html] 说下你对DOM树的理解 [css] 手写一个使用css3旋转硬币的效果 [js] 举例说明document.execCommand有哪些用途 [软技能] 你知道什么是区块链吗? 《论语...
  12. 一步一个脚印,3分钟教你看Vue 源码 1、准备工作 下载 Vue 源码 git clone https://github.com/vuejs/vue.git复制代码 安装  rollup sudo npm i -g rollup //mac npm i -g rollup //window复制代码 修改 package.JSON 中 scripts添加 --sourcemap "scripts": { "dev": &qu...
  13. 在开发 Web 程序时常遇到的错误 欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 问题描述 在开发web程序时会不可避免地犯下一些错误,下面将通过观察这些错误出现的现象来学习排除错误的方法,进而排除这些错误。 解决方案 ...
  14. 渐进的了解渐进式框架Vue 原理: Object.defineProperty劫持数据变换,更新dom 事件监听,改变数据 <body> <main> <input type="text" id="input"> <br/> <label>值:<span id="span"></span></label> </main&...
  15. 使用Three.js制作有粘稠感的图像悬停效果 这是一篇关于glsl在web动效交互中的应用。文章质量比较高,翻译过来大家一起学习借鉴。 原文链接: tympanus.net/codrops/201… 学习如何使用噪声在着色器中创建粘稠的悬停效果。 查看 or 下载源码 作为Flash的替代者webGL在近几年随着像Three.js, PIXI.js, OGL.js这样的库而变得越来越火。它们对...
  16. GitLab 开启地域封锁之时,GitHub 在中国畅谈无国界内容导读:GitLab 发布了有关地域封锁的公告,中国被列入受限制名单。而在昨天进行的中国开源年会上,GitHub 副总裁 Thomas Dohmke 和 CSDN 创始人蒋涛进行了一场炉边对谈,他们针对技术社区的发展和开源等问题,...
  17. 这些特效即将告别JavaScript,迎来CSS时代 随着CSS和JavaScript的发展,这两种语言之间的界限逐渐变得模糊。 从自定义属性(即变量)到滤镜、动画或数学操作,CSS采用了很多我们以前在JavaScript(或流行的CSS预处理器)中使用的东西,并为我们提供了原生支持。 两种语言都有不同的用途。现代浏览器的每次发布,都带来了新的特性支持,CSS正在成为一种非常强...
  18. Git常用命令总结下面以从github作为远程仓库为例 gitee 只需替换对应仓库链接,有关Git的相关教学可以参考廖雪峰老师的Git教程,这里不多介绍了。当然以下命令行只是方便你在没有图形化工具的情况下知道如何操作Git,个人觉得很...
  19. JavaScript进阶笔记(七):异步任务和事件循环 JS 是单线程的,对于耗时任务如果按照顺序执行,就会导致浏览器假死卡住。所以需要异步来处理耗时任务,当任务完成后才去处理。 同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; 异步任务:不进入主线程,而进入任务队列中的任务,主线程完成一个事件循环空闲后,会从任务队列中...
  20. 深入源码学习Vue响应式原理 最近一段时间在阅读Vue源码,从它的核心原理入手,开始了源码的学习,而其核心原理就是其数据的响应式。并且结合设计模式进行学习 观察者模式&&发布订阅者模式 这里简短的介绍这两种模式的联系和差异, 观察者模式 观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所...
  21. 深入浅出ES6的标准内置对象ProxyProxy是ES6规范定义的标准内置对象,可以对目标对象的读取、函数调用等操作进行拦截。一般来说,通过Proxy可以让目标对象“可控”,比如是否能调用对象的某个方法,能否往对象添加属性等等。
  22. 在vue中如何使用GraphQL npm install -g @vue/cli vue create vue-apollo-demo 复制代码 选择默认cli的默认模板就可以了 添加 /src/graphql/article.js 、 /src/utils/graphql.js 两个文件。 ├── node_modules └── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── home.js │ ├── components │ │...
  23. Vue.js的实时聊天应用+netlify自动部署 项目是跟着 sitepoint 开发的一个Vue.js的实时聊天应用,核心 chatkit ,使用netlify进行自动部署. 可在 pigchat 体验,账号 test,test2 技术栈 Vue Vuex Vue Router Pusher ChatKit SCSS ElementUI chatkit 项目的核心就是通过 chatkit 开发的,能实时的反映用户的在线状态、发送的消...
  24. 重学JS: 多态封装继承JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承三个...
  25. 你每天都在写 JS, 可你知道是谁在推动 JS 发展吗? TC39(Technical Committee No.39), 一个默默推动 JavaScript 发展的技术委员会,隶属于制定了 JavaScript 语言标准化(ECMAScript 规范)的 ECMA 机构,其成员囊括所有主要浏览器厂商。 ECMAScript 规范定义了 JavaScript 如何一步一步的进化、发展。我们平时敲下的每一行 JS 代码,可能都出自 ECMAScript 规范,比如 ...
  26. js的技巧Number.isFinite(12); // true; 其他类型都为falseMath.trunc方法用于去除一个数(正负都可以)的小数部分,返回整数部分。console.log(Math.trunc(3.1));// 兼容性写法// Math.trunc = Math.trunc || function(x) ...
  27. GitLab 也开始国家封锁?部分职位对中国、俄罗斯关闭,引社区热议 机器之心报道 参与:张倩、杜伟 今年7月份,一位克里米亚的GitHub用户披露,他的账户受到了GitHub的限制。随后,GitHub宣布,他们已经开始限制克里米亚、古巴、朝鲜、伊朗和叙利亚等被美国贸易制裁的国家的账户。不少人惊呼,“程序员也有国界了”。不过,在GitHub的这次风波中,中国用户并没有...
  28. Vue2.X和Vue3.0数据响应原理变化 defineProperty 定义对象的属性,只不过属性里的get和set实现了响应式。 常用: value属性值 get set writeable 是否可写 enumrable 可遍历 Vue从改变一个数据到发生改变的过程 Vue2.X数据响应原理 创建页面,实现延时2s修改对象的值。 <!DOCTYPE html> <html> &l...
  29. vue学习笔记-遗留问题记录 Node.js是什么?对node.js的理解 官网解释:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 这是一种通过JavaScript语言开发web服务端的东西 Node 是一个服务器程序。但是,基础 Node 产品肯定不 像 Apache 或 Tomcat node.js有非阻塞,事件驱动I/O等特性,从而让高并发(high concurrency)在...
  30. 如何写出干净整洁的JavaScript 这是一篇翻译+摘录的笔记!原文: github.com/ryanmcdermo…      变量 使用有意义和可理解的变量名 bad: const yyyymmdstr = moment().format("YYYY/MM/DD");复制代码 good: const currentDate = moment().format("YYYY/MM/DD");复制代码 使用具有解释性的变量 ...
  31. vue-router原理到最佳实践 本文是vue-router系列。这里从浏览器到vue-router原理到最佳实践都会有详细的讲解。由于篇幅较长,建议可以选择感兴趣的目录看。 先了解了浏览器的 history 原理,才能更好的结合 vue-router 源码一步步了解它的实现。如果这块已经有了解可以直接跳过。 pushState/replaceState/popstate 解析 vue-router ...
  32. 现代 JavaScript 教程 —— 条件运算符:if 和 '?' 有时我们需要根据不同条件执行不同的操作。 我们可以使用 if 语句和条件运算符 ? (也称为“问号”运算符)来实现。 "if" 语句 if(...) 语句计算括号里的条件表达式,如果计算结果是 true ,就会执行对应的代码块。 例如: let year = prompt('In which year was ECMAScript-2015 specification p...
  33. Promise的进化史 同步行为与异步行为之间的对偶是计算机科学中的一个基本概念,尤其是在单线程事件循环模型(如JavaScript)中。面对高延迟操作,异步行为不再需要针对更高的计算吞吐量进行优化。如果在计算完成时仍然可以运行其他指令并且仍保持稳定的系统,那么这样做是实用的。 更重要的是,异步操作不一定是计算密集型操作或高延迟...
  34. 使用 JS 及 React Hook 时需要注意过时闭包的坑(文中有解决方法)上个月自己花了 1300 买了阿里的服务器来学习 node 及对应的框架,在 11 号之前它们有做活动,1300 的配置现在一年只要 86 元,三年只要229元,真心觉得很划算了,可以点击下面链接进行参与:
  35. 这应该是最大的react组件了吧?jquery那个年代过来的人,组件化带来的感受是非常赞的,大家都知道,react项目是由很多小的组件组合构成的,小组件又组合成大组件,大组件组合成项目级别的组件,那组件也有大小,有生命周期,那么下面的 <App...
  36. Web安全之初识XSS同源(协议、host(域名或IP地址,如果是IP地址则看作一个根域名)、端口号相同)策略限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。
  37. 深入理解 JavaScript 回调函数JavaScript回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信,在阅读本文之后,你将能够克服以前使用回调方法遇到的所有障碍。
  38. 10 个常问的 JS 面试题上个月自己花了 1300 买了阿里的服务器来学习 node 及对应的框架,在 11 号之前它们有做活动,1300 的配置现在一年只要 86 元,三年只要229元,真心觉得很划算了,可以点击下面链接进行参与:
  39. webpack系统学习之路——基础篇 前言 用vue-cli脚手架自动生成项目,里面的webpack配置苦涩难懂,于是下定决心想要系统学习webpack,写下此文来记录学习过程。 一. webpack主要是做什么的? 首先,webpack是前端流行的模块打包工具,使前端项目可以面向对象开发(模块化),与Node.js模块不同,webpack模块可以用多种方式表达它们的依赖关系。以...
  40. Vue、MVVM、MVC、双向绑定 【模型】指的是后端传递的数据。 【视图】指的是所看到的⻚面。 【视图模型】mvvm模式的核⼼,它是连接view和model的桥梁梁。 它有两个⽅方向: 1、是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的⻚面。实现的方式是:数据绑定。 2、是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据...
  41. 使用 HooX 管理 React 状态的若干个好处HooX  是一个基于 hook 的轻量级的 React 状态管理工具。使用它可方便的管理 React 应用的全局状态,概念简单,完美支持 TS。
  42. js 经常会被问的 面试题 表头 和原数据是否指向同一对象 第一层数据为基本数据类型 原数据中包含子对象 赋值 是 改变会使原数据一同改变 改变会使原数据一同改变 浅拷贝 否 改变不会使原数据一同改变 改变会使原数据一同改变 深拷贝 否 改变不会使原数...
  43. Vue 3 对 Web 应用性能的改进有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面...
  44. WebP 可用性探测 webp 是目前 Web 比较流行的解决方案,相对于 Jpeg/png, 基于 VP8 的压缩,有着非常不错的压缩率。 WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index 比较基础的方法,还是检测...
  45. 重磅微软发布 Visual Studio Online:Web 版 VS Code + 云开发环境 今天(北京时间 2019 年 11 月 4 日),在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online 公开预览版! 今天发布的 Visual Studio Online 与五月份发布的 Visual Studio Code Remote Development 可以说是微软今年在开发工具领域最重磅的两个新产品了。 概览 Visual Studio On...
  46. 封装vue插件,读懂这遍文章就够了 麻不烧的Github 配合着 源码 ,用心看完这遍文章,你便领悟了封装的精髓,麻雀虽小,五脏俱全。 前记 业务代码之外的代码,我想称之为 增值代码 。 什么意思? 作为一个程序员,你应该除了完成领导安排的任务,你还应该有一些自己的时间,用来“玩”一些比较有意思的事情。 当现有框架、库满...
  47. 快看,前端开发者都收藏了这几张图表 Git命令 在日常工作中,经常会用到Git操作,但是对于新人来讲,刚上来对Git很陌生,操作起来也很懵逼,主要针对刚开始接触Git的新人,掌握常用的命令是必要的,因此黑叔就分享一张指令图方便大家学习与记忆。 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) R...
  48. 35 道咱们必须要清楚的 React 面试题上个月自己花了 1300 买了阿里的服务器来学习 node 及对应的框架,在 11 号之前它们有做活动,1300 的配置现在一年只要 86 元,三年只要229元,真心觉得很划算了,可以点击下面链接进行参与:
  49. 妈妈:我会写Vue-CLI插件了 引用官方的一段话: CLI 插件是一个可以为 @vue/cli 项目添加额外特性的 npm 包。它应该始终包含一个作为其主要导出,且可选的包含一个和一个。 通常我们需要将自己的一些配置/公用组件抽出来,以供各个项目使用,在其他使用 cli 创建的工程可以使用 vue add oview 的方式自动引入。 二、Vue-cli 插件目录结构 ...
  50. Promise: 给我一个承诺,我还你一个承诺 为何产生promise? 在 Promise 出现以前,我们处理一个异步网络请求,需求大概是这样:我们需要根据第一个网络请求的结果,再去执行第二个网络请求,再根据第二个网络请求的结果去执行第三个请求~,需求是永无止境的,于是乎出现了如下代码: 请求1(function(){ // 一些其他操作 请求2(function(请求1结果){ ...
  51. 深入理解ES6 Modules当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。
  52. 【Dmitri Pavlutin】用简单的JavaScript的代码捕获XMLHttpRequest 译者:道奇 作者:Dmitri Pavlutin 原文: Catch the XMLHttpRequest in Plain JavaScript 当编写 Chrome 扩展时,有时我需要捕获 JavaScript 应用程序启动和结束 XMLHttpRequest (XHR) 时的事件,但是因为注入到 web 页面上下文的脚本不会修改原始的应用程序,这件事就很难做到,因为纯XHR本身也不会...
  53. web前端面试题-jQuery篇(持续更新...) 1,JQuery的源码看过吗?能不能简单概况一下它的实现原理? jquery源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window对象参数,可以使window对象作为局部变量使用,好处是当jquery中访问window对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快的访问window对象。同样...
  54. ES6 Promise实战笔试题ES6 Promise练习 俗话说得好,一动不动是王八,上一篇文章学习了那么久Promise,是时候大显身手了! 基础题 题一 {代码...} 解析:Promise 构造函数是同步执行的,promise.then 中的函数是异步执行的。 运行结果...
  55. CSS3多级下拉菜单 弹性展开下拉动画源码 互联网的那些破事的微博视频
  56. 纯CSS3圆形面包屑菜单 有展开动画源码 互联网的那些破事的微博视频
  57. 在JS中实践函数式编程【3】 -- 状态 函数式编程第三话~ 上次介绍了一些简单的概念,这次我们研究一下状态。 文章如果有什么不对的地方欢迎在评论区批评指正。 状态 上次说到什么是一等函数 什么是高阶函数以及纯函数。那接下来我们来研究一下函数式编程中 ,纯函数到底是如何帮助我们的。 首先我们要知道一个词: 状态。 前端的小伙伴一定对状态这个词...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

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