20190429 前端开发日报

浅谈Web图像优化;前端错误监控 -【Vue】与【Sentry】的结合;TypeScript:一种思维方式;JavaScript系列之内存泄漏;没学过JavaScript也能看懂的闭包解释;Web 技巧 (04);2019前端最全面试题;Webpack原理简单讲解

  1. 浅谈Web图像优化 前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。 知其然,须知其所以然 图像优化的前提是需要了解图像的基
  2. 前端错误监控 -【Vue】与【Sentry】的结合 作为一个前端,你是不是经常遇到这样情况: 客户:为什么我这个页面看不到数据?? 我:(急忙打开网站),我这边数据显示正常! 客户:没有啊!我这边看不到! 我:(语无伦次),可我…我这边正常的呀 客户:BALABALA 相信各位前端er经常遇到这样的问题,明明自己本机打开一切正常,到了客户那边问题却一大堆…
  3. TypeScript:一种思维方式 TS 怎么影响了我的思考方式。
  4. JavaScript系列之内存泄漏 在程序运行过程中不再用到的内存,没有及时释放,会出现内存泄漏(memory leak),会造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 而内存泄漏是每个开发人员最终必须面对的问题。 即使使用内存管理语言,比如C语言有着 malloc() 和 free() 这种低级内存管理语言也有可能出现泄露内存的情…
  5. 没学过JavaScript也能看懂的闭包解释 有一句甚广的话,相信很多人都听过: 艺术源于生活又高于生活 ,意思是说艺术并不是凭空产生的,而是广大人民群众从日常生活中提炼出来的抽象表现。比如舞蹈,就是人们从具体劳动、生活、战争中抽象出来的肢体表达形式。而技术呢,也不是凭空产生的,也是源于生活,但是确是生活的低层次的抽象(或者叫模仿更加贴切)。…
  6. Web 技巧 (04) 大漠老师将围绕着 CSS 布局展开为你介绍各项技巧。
  7. 2019前端最全面试题项目地址 HTML问题 HTML5语义化 什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。 好处 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。 有利于SEO,搜索引擎根据标签来确定上下文和…
  8. Webpack原理简单讲解 webpack是JavaScript应用程序的静态模块打包器,webpack处理应用程序时,将递归构建一个依赖关系图,依赖图映射了项目中需要的每一个模块,并打包生成一个或多个bundle. 当在命令行运行指令 webpack 的时候,webpack将默认从当前目录下查找 webpack.config.js 文件 webpack的配置(webpack.config.js)中有四个核心概念需要…
  9. 如何选取合适的前端动效方案? 总结得挺全面的一份清单。
  10. 每日一题(开开森森学前端之Object系列) 大家好,本人来在掘金待了有3个多月了,决定跟随前端大佬们的步伐,故决定每天一题记录自己的成长轨迹,由于水平有限,对于文章中出现的问题还请大佬们指正。 今天要巩固的是Object常用方法 首先我们来看一下Object都有哪些常用方法呢 1.Object.assign(target, sources) 2.Object.entries() 3.Object.keys() 4.Obj…
  11. Webpack解读之loader 终于忙完了论文,可以愉快的开始学习了,重拾起重学前端、webpack以及Vue的源码解读作为入职前的复习吧。整个webpack系列将分成五个大的部分进行,以webpack4.0为文档进行解读,从简单的概念解读到最后的实现。 整个知识点涉及范围: loader 使用loader来预处理文件,把不同的静态资源(模块的结尾不是js…
  12. 如何让你的 CSS Grid 布局有良好的可访问性 CSS Grid 可能会有访问性不佳的问题,尤其是对于那些使用屏幕阅读器和仅使用键盘的用户。本篇教程将会帮助你避免此类问题。
  13. 《阿里云前端技术周刊》第二期作者:@也树 校对:@染陌 素材:@也树、@英布 《阿里云前端技术周刊》由阿里云智能商业中台体验技术团队整理编写。 知乎:阿里云中台前端/全栈团队专栏 Github:阿里云前端技术周刊 给我们投稿:传送门 参与交流…
  14. 你真的会用JS写Hello World么? 软件开发这个行业里面,有这么一句挺牛逼的话:“ 人生苦短,我用Python ”,虽然Python我会用,也确实发自内心地觉得,在言简意赅这条路上,它配得上这句话。但今天我就想用 JavaScript 向 python 叫叫板,比比更“ 短 ”。问题只有一个: 请使用 JavaScript 语言编写一个函数,返回 hello world…
  15. jQuery源码学习:异步操作–Callbacks jQuery封装了很多关于异步操作的方法,比如 $.ajax $.Deferred 等等,这些方法都是以Callbacks为基础开发的,Callbacks一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表,他可以管理一个列表,在你需要执行时候触发,触发时机由调用fire方法决定 了解API var cb = $.Callbacks(); cb.add(f…
  16. 到底JS柯里化在项目中怎么用? :有一定开发经验的前端人员 之前在很多文章里面看了柯里化的相关知识,大多举的例子都是实现累加累乘这些的函数,然后具体项目里面怎么用,实际场景很少提到,总感觉看完之后好像理解了,又好像没理解,可能主要还是没有一个实际的真实运用场景导致我们理解起来很困难,接下来我尝试写一些柯里化在项目中的…
  17. GSIL:近实时监控 GitHub 敏感信息泄露,并发送告警通知 GSIL(GitHub敏感信息泄露) English documents 近实时监控GitHub敏感信息泄露,并发送告警通知。 安装 仅在Python3下验证过 $ git clone https://github.com/FeeiCN/gsil.git $ cd gsil/ $ pip install -r requirements.txt 配置 gsi…
  18. javascript中json或数组深拷贝解决方法及实例 let arr = { a:1, b:2 } let arr2 = { …arr } arr.a = 1111 console.log(arr,arr2) 复制代码 2. Ojbect.assign(目标对象,源对象)–ES6 let arr = { a:1, b:2 } let arr2 = Object.assign({},arr) arr.a = 1111 console.log(arr,arr2) 复制代码 深拷贝多级(json,数组)包含只有一级 1.简单直接点的 JSON.pars…
  19. CSS scroll-snap 滚动事件停止及元素位置检测 “CSS Scroll Snap 是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何 JS 代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯 CSS 实现。”
  20. Facebook 怎样利用 CPU 资源的同时不影响 web server 的响应? 点击上方蓝色字关注我们~ introduce cpu.headroom knob to cpu controller From Song Liu<songliubraving-AT-fb.com> Date: Mon, 8 Apr 2019 14:45:32 -0700 https://lwn.net/Articles/785302/ Facebook的Song Liu提出一组patch,试图尽量利用CPU的计算…
  21. 常用JavaScript正则表达式汇编与示例 目前收集整理了21个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IP地址、 十六进制颜色、 日期、 微信号、车牌号、中文正则等。表单验证处理必备,赶紧收藏吧! 还会陆续加入新的正则进来,大家多提宝贵意见! 2 正则列表 2.1 用户…
  22. webpack 4迁移指南 webpack 4 出来也已经一年了,公司的老项目用的还是webpack3,也是时候该升级一波了。说实话webpack4还是有几点挺吸引我的,估计也是感受到了parcel的压力,4这个版本内置了很多默认配置。 迁移的坑 CommonsChunkPlugin 废除, webpack 4内置了optimization.splitChunks 和 runtimeChunk 进行代码拆分 Extrac…
  23. 从 JS 对象的内部原理来理解 this 关键字 JavaScript 是一种支持面向对象编程和动态绑定的多范式语言。动态绑定是一个非常强大的功能,它允许在运行时更改 JavaScript 代码的结构,但是这种强大的功能和它的灵活性将可能带来一些难以理解的问题,而这些问题主要集中在 this 关键字的行为上。 动态绑定 动态绑定是在运行时而不是编译时确定要调用的方法…
  24. JavaScript进阶之道 repo: github.com/alphardex/p… Python和JavaScript在笔者看来是很相似的语言,本文归纳了JavaScript的各种tricks,相对于之前的Python版。 两篇文章都读完,有没有发现它们的目录结构是一个样的呢XD 基本 模板字符串 let name = ‘alphardex’ `Ore wa ${name} desu, ${4 * 6} sai, gakusei desu.` //…
  25. 在Javascript中进行面向切面编程 面向切面编程(Aspect-oriented programming,AOP)是一种编程范式。做后端 Java web 的同学,特别是用过 Spring 的同学肯定对它非常熟悉。AOP 是 Spring 框架里面其中一个重要概念。可是在 Javascript 中,AOP 是一个经常被忽视的技术点。 场景 假设你现在有一个牛逼的日历弹窗,有一天,老板让你统计一下每天这个…
  26. JS笔记(15): 正则表达式 正则(Regular Expression):是一个 处理字符串 的规则 1)正则只能用来处理字符串 2)处理一般包含两方面: A: 正则匹配 :验证当前字符串是否符合某个规则 B: 正则捕获 :把一个字符串中符合规则的字符获取到 学习正…
  27. webpack-chain源码 vue-cli配置webpack github.com/neutrinojs/… git clone https://github.com/neutrinojs/webpack-chain.git 复制代码 知识准备 需要先预习 下列方法 ES6 Set ES6 Map ES6 Class includes reduce map forEach Object.keys Object.assign … 如果对这些知识生疏,点此学习 ( es6.ruanyifeng.com/#docs/class ) 把这些掌…
  28. 循序渐进理解TypeScript类型模式 TypeScript是微软推出的一个强类型JavaScript超集,具备了比JavaScript更严禁的类型定义,备受程序员喜爱的编辑器VSCode就是使用TypeScript写的,后面简称ts。 在使用js的时候,一个变量可以被任意赋值,而且不管你怎么写总是不会报错,这就意味着很多时候错误被埋藏在看似正常的代码中。不同于js的直接执行,ts代码必…
  29. [Javascript] Promise ES6 详细介绍 一 前言 本文主要对ES6的 Promise 进行一些入门级的介绍。要想学习一个知识点,肯定是从三个方面出发,what、why、how。下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what。那么什么是 Promise 呢? 以下是MDN对 Promise 的定义 译文:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完…

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

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


关注我

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

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

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