20190805 前端开发周报

js 的5个不良编码习惯,现在就改掉吧;提升开发幸福感的10条JS技巧;前端预渲染机制引入实践;我见过最好最详细的 JavaScript 关系的解释;面试必备的13道可以举一反三的Vue面试题;GitHub 开始阻止被制裁国的开发者使用;一周 GitHub 开源项目推荐:Flutter、人脸识别、架构……;Vue源码之响应式原理

  1. js 的5个不良编码习惯,现在就改掉吧为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 在阅读JavaScript代码时,你是否有过这种感觉 你几乎不明白代码的作用? 代码使用了很多 JavaScript …
  2. 提升开发幸福感的10条JS技巧 作者:陈大鱼头 github: KRISACHAN 鱼头总结一些能够提高开发效率的JS技巧,这些技巧很实用,觉得挺好,想推荐给大家,所以有了这篇文章。 生成随机UID const genUid = () => { var length = 20 var soupLength = genUid.soup_.length var id = [] for (var i = 0; i < length; i++) { …
  3. 前端预渲染机制引入实践 周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的 SSR 代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末….. 这篇文章就记录一下最后是怎么配置的 T.T 声明: 以下配置只保留有…
  4. 我见过最好最详细的 JavaScript 关系的解释 我无意在 Reddit 上找到了这个 JavaScript meme ,它是我见过最好的抽象。 你可以通过运行开发者工具来运行(图中)的每行代码来验证此关系的准确性。结果并不令人惊讶,但仍然令人失望。 当然,这个小实验触发了我的兴趣… 这是怎么发生的? 凭借经验,我学会了接受 JavaScript 这滑稽…
  5. 面试必备的13道可以举一反三的Vue面试题 Vue框架部分我们会涉及一些高频且有一定探讨价值的面试题,我们不会涉及一些非常初级的在官方文档就能查看的纯记忆性质的面试题,比如: vue常用的修饰符? vue-cli 工程常用的 npm 命令有哪些? vue中 keep-alive 组件的作用? 首先,上述类型的面试题在文档中可查,没有比官方文档更权威的答案了,其次这种问…
  6. GitHub 开始阻止被制裁国的开发者使用 上周五,国外新闻网站 ZDNet 发表了一篇报道GitHub与跟世界贸易摩擦国(例如中国、俄罗斯)的程序员关系的文章 —— GitHub starts blocking developers in countries facing US trade sanctions(GitHub 开始阻止被制裁国的开发者使用),具体内容如下: 如果你是在一个面临美国制裁的国家使用 GitHub 的在线服…
  7. 一周 GitHub 开源项目推荐:Flutter、人脸识别、架构…… 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 flustars:Flutter 常用工具类库 flustars 依赖于 Dart 常用工具类库 common_utils,以及对其他第三方库封装,致力于为大家分享简单易用工具类。 如果你有好的工具类欢迎 PR。目前…
  8. Vue源码之响应式原理 像Vue官网上面说的,vue是通过 Object.defineProperty 来侦测对象属性值的变化。 function defineReactive (obj, key, val) { let dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get () { return val }, …
  9. 前端动画专题(二):输入框特效本文来自「心谭博客」的《动画设计·输入框特效》,更多文章放在了Github欢迎交流和Star 特效一览 划线动态: 动态边框: 划线动态 效果图 原理和代码 :before 和 :after伪元素指定了一个元素文档树内容之前和之后…
  10. 数据结构与算法在前端领域的应用这是一个我即将做的一个《数据结构与算法在前端领域的应用》主题演讲的一个前菜。希望通过这个分享让大家认识到其实前端领域也有很多算法的,从而加深前端同学对算法的认识。如果大家对数据结构和算法感兴趣,欢…
  11. 可能会搞砸你的面试:你知道一个TCP连接上能发起多少个HTTP请求吗?本文由原作者松若章原创发布,作者主页:zhihu.com/people/hrsonion/posts,感谢原作者的无私分享。
  12. 前端必看的数据可视化入门指南这是一篇给大家提供数据可视化开发的入门指南,介绍了可视化要解决的问题和可以直接使用的工具,我将从下面几个方面给大家介绍,同时以阿里/蚂蚁的可视化团队和资源举例说明:
  13. 2019前端秋季社招面试经历总结(三年经验)7月份开放的简历,收到了蛮多询问和面试,算是招人旺季,需要跳槽的小伙伴抓住机会。一开始广泛看面试题,没抓住重点复习,有很多平时也没怎么用到,导致一开始面试的时候,问的问题看过,但是都记不清答得不太好…
  14. 你不知道的 console,让 JS 调试更简单 对于前端的各位工程师,肯定不会对console陌生,但是,你又能了解多少呢,今天就让小鹏来一窥大前世界。 Chrome控制台-开发者工具 windows按F12, MAC按Command + Option + C或Command + Option + J, 即可打开控制台 1. 向 Web 控制台输出一条消息 console.log(‘Hello world!’); console.info(‘Hello world!’); …
  15. 开源无国界「给 GitHub 的一封信」登上 GitHub 趋势榜榜首 前几天,有媒体报道:美国制裁地区 GitHub 帐号受限,个人页面直接 404。引发了热议。 刚刚,一个「给 GitHub 的一封信」的开源项目登上了 GitHub 趋势榜榜首! 开源无国界! 以下为「给 GitHub 的一封信」部分内容: GitHub 曾经是一个面向所有人的开放、自由的平台,但它现在却决定限制伊朗国籍的账户参与和成为…
  16. 阿里P7前端高级工程师,都需要掌握哪些技术栈? 大家都知道,阿里P7前端高级工程师,基本上是一线前端技术人能达到的最高职级,也是很多程序员追求的目标。达到年薪50W+股票的P7级别,不仅要具备优秀的编程能力,在系统设计能力和技术视野方面,也要有较深的积淀。 最近技术大牛 廖雪峰 邀请他一位在阿里做前端架构师的朋友,整理出一份xmind——“Web全栈架构师所需技…
  17. 本地离线预览 React/Vue 等开源工具官方文档网站外网访问组件库官方文档网站、React 官方等文档网站太慢,解决办法,是将他们克隆到本地预览,即可离线预览,速度也快。这是一个小技巧分享给大家。
  18. vscode扩展之根据Vue模板自动生成Scss结构 某次小组内开周会,提到开发效率的问题,有个小伙伴提到写新页面的时候, template 大概布局写完后,对着 template 结构写 scss 是件比较耗时耗力的事情,如果能作出一个自动依据 template 结构生成 scss 文件的 vscode 插件就好了 我当时也没在意,后来周会结束后觉得这事情可以做一下,于是抽空看了下 vscode 扩展…
  19. 今天,我明白了JS事件循环机制js是一门单线程的编程语言,也就是说js在处理任务的时候,所有任务只能在一个线程上排队被执行,那如果某一个任务耗时比较长呢?总不能等到它执行结束再去执行下一个。所以在线程之内,又被分为了两个队列:
  20. 新手写的Vue源码学习记录(渲染过程)在技术领域上更是如此, 比如: 类名头字母大写, promiseA+ 规范, DOM 标准, es 标准, 都是规矩, 是我们编码的规矩.
  21. javascript call方法的用处及原理 function a(){ console.log(this); } a(); a.call({name:"西瓜"}); 复制代码 可以看到,第一次 this 指向了 window ,第二次 this 指向了传入的对象; 那么在执行call方法的时候,内部做了什么处理呢? 先来看一个东西,或许就能明白 var a = { name:"西瓜", run:function()…
  22. Vue2.5+迁移至Typescript指南Javascript本身是动态弱类型的语言,这样的特点导致了Javascript代码中充斥着很多Uncaught TypeError的报错,给开发调试和线上代码稳定都带来了不小的负面影响。而Typescript提供了静态类型检查,使很多类型错误…
  23. 前端要知道的 RESTful API 架构风格 点击上方“做工程师不做码农”,并“置顶公众号” 第一时间接收我的随机文章 “ 前端程序员在开发完页面后总是要对接口的,跟后端联调有时候还占用蛮大的时间的,那么你了解你和后端对的接口都是什么风格吗,你们公司接口设计的如何,你使用愉快吗?下面介绍一种API架构风格,也是目…
  24. 基于 Laravel + Swoole + Vue 组件实现支持高并发的实时弹幕功能(下) 我们接着上篇教程来完成弹幕服务端以及客户端与服务端交互的开发,首先来实现服务端 WebSocket 服务器的编码。 WebSocket 服务器 我们参照之前的功能介绍教程 《在 Laravel 中集成 Swoole 实现 WebSocket 服务器》 实现这个用于弹幕功能的 WebSocket 服务器。 注:如果你还没有在 Laravel 项目中安装配置 Lara…
  25. 精读《Nodejs V12》Node12 与以往的版本不同,带来了许多重大升级,包括更多 V8 特性,Http 解析速度的提升,启动速度的提升,更好的诊断报告、内置堆分析工具,ESM 模块的更新等。
  26. 记一次 WebView 填坑过程:由换行符引发的血案 最近使用WebView掉坑了,然后艰难爬坑经历感触很深,写出来大家借鉴一下。 需求 我们有个网页需要用到很多js库,这些库比较大,而且基本上是不变的。为了提高性能,将这些网页和JS库放到本地,进行加载。变的数据从服务器获取,然后跟本地的HTML组装后显示。这种需求还是挺普遍的。 实现方式 由we…
  27. Vue中mixin和extend的区别和使用场景 Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景。 Mixin: 原理: 先来看看官网的介绍: 参数:{Object} mixin 用法: 混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入…
  28. Doka.js 找到利基市场每月 3 千美元 此文是一篇译文,也是「IndieMaker独立变现」人物志系列文章之一 原作者:Rik Schennink,Doka.js 创作者 原文:https://www.indiehackers.com/interview/how-i-capitalized-on-an-established-market-and-grew-to-3k-mo-3aa3037d0c Hello,你的背景是什么,你在做什么? Hi, 我是Rik Schennink…
  29. JS最新基本数据类型:BigIntBigInt数据类型的目的是比Number数据类型支持的范围更大的整数值。在对大整数执行数学运算时,以任意精度表示整数的能力尤为重要。使用BigInt,整数溢出将不再是问题。
  30. 前端动画专题(三):撩人的按钮特效本文来自「心谭博客」的《动画设计·按钮特效》,更多文章放在了Github欢迎交流和Star 特效一览 滑箱: 果冻: 脉冲: 闪光: 气泡: 滑箱特效 效果图 原理 因为 button 元素可以使用 before/after 伪元素,所以借…
  31. 150行Node.js实现的dns代理工具 工具地址: github.com/Yi-love/dns… 安装: npm install dns-proxy-server -g 这个我觉得应该还是挺实用的一个工具。开发过程中我们需要配置IP来访问测试环境域名。 使用电脑开发测试还好,直接使用 Switch hosts! , 修改域名IP即可访问特定IP的域名网站。 那么如何在手机上也尽可能容易的访问到测试环境…
  32. 回到基础:JavaScript APIJavaScript 有许多可用的 API,通常被定义为浏览器 API或第三方 API。我们来分别学习它们。
  33. webpack基本配置虽然一直在接触 webpack ,不过都是在项目开发时遇到问题去看看文档,并没有系统化地学习、消化。这篇文章将从 webapck 最基本的配置开始说起,直到成功打包一个简单的项目。分享给需要入门的小伙伴,也是留一个笔记
  34. 科普系列:如何解释什么是 Ajax? 前言 学妹这学期新开了一门课《Script及AJAX开发技术》,然而临近学期末,她突然跑来问我:到底什么是AJAX ?相信很多人(尤其是前端)在写代码的时候经常会用到AJAX技术,但是如果真要说出个所以然,可能还会有些困难。其实简单概括下,AJAX就是一种利用 JavaScript 向服务端发起请求,并获得服务端响应的技术…
  35. CSS实现8种炫酷按钮在各种UI组件库大行其道的今天,大家已经很少自己用CSS去实现一些效果了,久而久之CSS的水平也越来越退步,所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。
  36. 用JavaScript来计算两个图像的相似度最近看了阮一峰老师的相似图片搜索的原理(二),其中介绍了通过内容特征法来对比两个图片的相似性。 大致步骤: 把图片都缩放到50×50大小 转成灰度图片 利用”大津法”(Otsu’s method)确定阈值 通过阈值再对图片…
  37. Node.js 如何简洁优雅的访问 MySQL 数据库 一、前言 nodejs诞生以来出现了一大批的web框架如express koa2 egg等等,前端可以不再依赖后端可以自己控制服务端的逻辑。今天我们就来说说前端在nodejs中如何操作mysql数据库。 二、操作数据库 直接使用mysqljs,比如查询一个字段,代码逻辑看起来是很清晰的,但是仅查询一个字段就需要这么多代码实在是过于麻烦: …
  38. Node.js 高级进阶之 fs 文件模块学习文件操作是开发过程中并不可少的一部分。Node.js 中的 fs 模块是文件操作的封装,它提供了文件读取、写入、更名、删除、遍历目录、链接等 POSIX 文件系统操作。与其它模块不同的是,fs 模块中所有的操作都提供了…
  39. 2019 年大前端技术趋势分析 一晃眼 2019 年已过大半,年初信誓旦旦要学习新技能的小伙伴们立的 flag 都完成的怎样了?2019 年对于大前端技术领域而言变化不算太大,目前三大技术框架日趋成熟,短期内不大可能出现颠覆性的前端框架 (内心 OS:出了也学不动了)。 本文结合个人和团队经历对 2019 上半年做个技术总结,将各类技术框架 / 语言 / 工具…
  40. 关于css margin,你需要知道的一切当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周围的透明区域,它会将其他元素从盒子内容中推开。
  41. 如何招聘一名优秀的前端招聘肯定要有标准,这样我们才能更快的找到我们需要的人才。在近期的大量面试中,我觉得有4个方面是必不可少的。
  42. 学习 jQuery 源码整体架构,打造属于自己的 js 类库虽然现在基本不怎么使用jQuery了,但jQuery流行10多年的JS库,还是有必要学习它的源码的。也可以学着打造属于自己的js类库,求职面试时可以增色不少。
  43. 浅析 Nodejs 模块化 本文只讨论 CommonJS 规范,不涉及 ESM 我们知道 JavaScript 这门语言诞生之初主要是为了完成网页上表单的一些规则校验以及动画制作,所以布兰登.艾奇(Brendan Eich)只花了一周多就把 JavaScript 设计出来了。可以说 JavaScript 从出生开始就带着许多缺陷和缺点,这一点一直被其他语言的编程者所嘲笑。随着 BS 开发模…
  44. JavaScript 中 == 和 === 的区别1、 两个不同的基本数据类型: 如果两个基本数据类型(string、number)不同,会将它们转化为数据类型,再进行比较。例如:
  45. 理解JavaScript异步编程 JavaScript是单线程编程语言,这意味着同一时间只能发生一件事情。也就是说,JavaScript引擎只能在一个线程的同一时间里处理一个语句。 单线程语言简化了我们的编程,因为你不用担心并发问题,但这也意味着在执行像网络请求这样耗时的操作的时候,会堵塞主进程的进行。 想象着从一个API接口请求一些数据,在某些情况…
  46. 微前端 —— portal项目portal项目包括两个功能:         1. 路由分发与应用加载;         2. 抽离公共依赖;
  47. vuecli3开发环境下sourcemap在浏览器上查看源代码的问题老项目重构,vue脚手架更新至vue-cli3,经过一番配置后,发现跟之前的vue-cli2相比,调试的时候找到源代码的文件变得困难许多,如查看login.vue页面,出现一堆搜索结果:
  48. 前端面试每日3+1——第110天今天的知识点 (2019.08.04) —— 第110天 [html] 什么是svg?说说svg有什么运用场景? [css] 说说你对设备像素比的理解 [js] 请详细描述AJAX的工作原理 [软技能] 前端页面有哪三层构成?分别有什么作用? 项目地址…
  49. Golang和nodejs小比拼 ​ Golang和nodejs小比拼 这期呢,我们来比较一下,golang和nodejs。这两个都是后端比较热门的开发技术。发展的都非常快。 我们先来看一下golang, 这门技术是免费的,可编译的,开源的,面向通用开发的编程语言。这门语言有两位来自谷歌的专家Ken Thompson和Rob Pike所开发, 开…
  50. 处理 JS中 undefined 的 7 个技巧大约8年前,当原作者开始学习JS时,遇到了一个奇怪的情况,既存在undefined 的值,也存在表示空值的null。它们之间的明显区别是什么?它们似乎都定义了空值,而且,比较null == undefined的计算结果为true。
  51. JavaScript稀疏数组 稀疏数组 概念 在一些后端语言中,如 C,数组内的值通常被分配在一系列连续的内存地址上,但是在 js 中,某些数组内存则不是连续的,所谓 稀疏 ,顾名思义,不连续,存在一些空隙; 例如: var arr = new Array(3); console.log(arr); // (3) 通过以上方法创建数组,其中 Array(3) 中的参数…
  52. 手把手教你D2C,走向前端智能化这几年来 AI 来势汹汹,在部分领域应用也逐渐成熟。前端发展至今,我们也有许多成熟的前端解决方案代码,有大量的设计稿,我们是否能够结合智能化的能力将一个 Design 变成一个 Code (设计转代码,简称 D2C)来…
  53. 数据结构与算法在前端领域的应用(进阶)这是一个我即将做的一个《数据结构与算法在前端领域的应用》主题演讲的一个主菜。如果你对这部分内容比较生疏,可以看我的数据结构和算法在前端领域的应用(前菜)
  54. JavaScript数据结构——集合的实现与应用 与数学中的集合概念类似,集合由一组无序的元素组成,且集合中的每个元素都是唯一存在的。可以回顾一下中学数学中集合的概念,我们这里所要定义的集合也具有空集(即集合的内容为空)、交集、并集、差集、子集的特性。 在ES6中,原生的Set类已经实现了集合的全部特性,稍后我们会介绍它的用法。 我们使用JavaSctipt…
  55. 微前端 —— 理论篇基于spa类的单页应用,随着企业工程项目的体积越来越大,开发的功能越来越多,页面也越来越多,项目随之也变得越来越臃肿,维护起来十分困难,往往改一个logo,或者改一个小样式,都要将项目全部重新打包一遍,维…
  56. 前端进阶 & 面试必备,优质资源、好文整理分享前端技术日新月异,随着 大前端 的趋势,想要成为一名合格的前端工程师,需要学习掌握的东西更是宽泛。所以我们在寻求进阶的过程中,既要不断夯实前端基础,也要快速响应技术的更新迭代。闲话少说,这次给大家整…
  57. 30秒就能理解的 Javascript 代码片段 — Array篇之前翻译过一篇文章,《我喜欢的5个编程技巧》,里面的一个技巧是借鉴一个网站的代码片段,好奇的小手点下链接后,发现是一个有 47000 多star的仓库,30-seconds-of-code。
  58. JavaScript通过userAgent判断几个常用浏览器 通常在做h5页面的时候需要在微信、QQ、微博等生态内做一些引流的工作,但引流时受限于这些平台。比如上次的文章 《h5唤醒app实现以及注意点》 就是妥协的一个办法,那么常用的这几个浏览器的User Agent什么样呢?如何判断呢?今天就具体来看看这个问题。 User Agent定义 User Agent中文名为用户代理,简称 UA,它是…
  59. Webpack 打包后代码执行时机分析与优化 原文地址 代码执行时机将决定着是否能够正常执行,当依赖文件没加载完成就开始执行、使用对应模块,那么将会导致执行异常。这在“ 存在资源加载失败时,加载重试影响原来文件的执行顺序 ”的场景下尤为常见。 webpack 构建除了进行模块依赖管理,实际上,也天然地管理了 entry 与 chunk 多文件的执行时机,但缺少…
  60. 通过 OpenGL 理解前端渲染原理(一) 一、OpenGL OpenGL,是一套绘制3D图形的API,当然它也可以用来绘制2D的物体。OpenGL有一大套可以用来操作模型和图片的函数,通常编写OpenGL库的人是显卡的制造者。我们买的显卡都支持特定版本的OpenGL。 下图是用OpenGL做的旋转的立方体。 二、渲染原理 2.1 渲…

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流