20190825 前端开发日报

大规模应用TypeScript「2019 JSConf -Brie Bunge」(上);checkValidity等form原生JS验证方法和属性详细介绍;让CSS flex布局最后一行列表左对齐的N种方法;Web 字体 font-family 再探秘;【Javascript】探究bind()的作用及实现原理;Vue源码之Vue实例初始化;什么是 JavaScript 基础;Vuex源码探究

  1. 大规模应用TypeScript「2019 JSConf -Brie Bunge」(上) 这是一个由simviso团队进行的关于Airbnb大规模应用TypeScript分享的翻译文档,分享者是Airbnb的高级前端开发Brie Bunge 视频链接: 大规模应用TypeScript「2019 JSConf -Brie Bunge」(上) 或点击文章底部阅读原文观看视频 视频翻译文字版权归 simviso所有,未经授权,请勿转载!!! 本次参与翻译人…
  2. checkValidity等form原生JS验证方法和属性详细介绍 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8895 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、先从form内置验证的外部表现说起 说起form内置验证,很多人想到的是设置 required 这样的HTML属性,然后表单提交的时候出现这样的提示效果: …
  3. 让CSS flex布局最后一行列表左对齐的N种方法 很实用的最后一行列表左对齐的实现方式,不需要 js 哦~
  4. Web 字体 font-family 再探秘 你需要知道的 font-family。
  5. 【Javascript】探究bind()的作用及实现原理 bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用。 我们来看1个demo var module = { x: 42, getX: function() { return this.x; } } module.getX.prototype.sayHi = function(name){ return ‘I am ‘ + name } va…
  6. Vue源码之Vue实例初始化这一节主要记录一下:Vue 的初始化过程 以下正式开始: Vue官网的生命周期图示表 重点说一下 new Vue()后的初始化阶段,也就是created之前发生了什么。 initLifecycle 阶段 {代码…} 接下来是initEvents 阶段 {…
  7. 什么是 JavaScript 基础 作为面试官,我们经常考察候选人的 JavaScript 基础,从而决定是否录用这个人。那么对于一个开发者,哪些东西算JavaScript基础,什么叫做基础好呢? 注意:这里不会关注 API 或者语法层面的东西。这并不代表 API 或者语法不重要,相反,作为 JavaScript 开发者,最基本的能力就是能跟进到最新的 ES 规范。 数据类型 …
  8. Vuex源码探究 之前在项目中有使用过Vuex做状态管理器,但是一直没有了解Vuex的工作原理。鉴于学习一门技术必须掌握其原理的基础,今天我们来探究下Vuex的源码,解开Vuex神秘的面纱。 Vuex 官方github仓库地址 我们将仓库克隆到本地: git clone https://github.com/vuejs/vuex 复制代码 Vuex源码存放在src目录中,包含以下内…
  9. nuxt.js初识 欢迎各位观众老爷来提bug 需求 闲来无事,抽空玩玩,以备不时之需(其实是考虑了下官网的seo以及首页渲染太慢问题) 1.不使用脚手架工具新建项目(因为官网项目已经做好了) 下面跟着我按顺序走 1.日常三步走 1.mkdir xxxx 2.cd xxxx 3.touch package.json 复制代码 2.编写 package.json 文件 //一定是…
  10. 利用 Redis 解决 NodeJS 中 Session 存储问题 我之前写过一篇文章, 深入剖析了 Cookie 和 Session 两者之间的的前因后果 ,能够加深你对 HTTP 如何维持会话状态这个过程的理解 其中有一个非常重要的点就是,我们服务端的 Session 要存储在哪?今天我们就来次存储 Session的 最佳实践 Session 的存储方案 存储在 Cookie 中 在 Cookie 中存储 Session 是我们…
  11. W3C Web 游戏技术研讨会总结报告 来自游戏厂商、游戏引擎开发者、游戏开发者、游戏渠道分发商和设备制造商的技术分享者和参会者一起讨论如何用新的游戏技术去完善 Web 开放平台。
  12. Node.js爬虫获取天气与每日问候 安装node.js,同时安装好依赖: npm install request –save // http请求库 npm install cheerio –save // 分析html工具 npm install express –save // nodejs web框架 复制代码 获取墨迹天气 地址示例: 东莞 tianqi.moji.com/weather/chi… 广州 tianqi.moji.com/weather/chi… 深圳 tianqi.moji.com/…
  13. AST 与前端工程化实战 本文将通过 AST 与前端工程化的实战向大家展示 AST 的强大以及重要性。
  14. 从TypeScript中的类中派生接口大多数面向对象编程语言都鼓励编程到接口的模式。 TypeScript 当然支持这一点,你可以创建一个或多个接口,然后再定义生成这个接口实例的类(或工厂)。
  15. 12种开源Web安全扫描程序Arachni是一款基于Ruby框架构建的高性能安全扫描程序,适用于现代Web应用程序。它可用于Mac,Windows和Linux的便携式二进制文件
  16. 面向前端工程师的Nodejs入门手册(二) 继上一篇介绍了基于Nodejs的http服务和文件操作的内容后,本篇内容主要介绍前端工程师在日常工作中较少接触到的TCP相关知识内容,从Nodejs的TCP模块入手,通过实例看看TCP是怎么一回事。 tcp是什么? tcp是一种面向连接的、可靠的、基于字节流的传输层通信协议,TCP层是位于IP层之上,应用层之下的中间层。与我们接…
  17. 从 React 编程到 “好莱坞” 概念 Reactive Programming(响应式编程)已经不是一个新东西了。关于 Reactive 其实是一个泛化的概念,由于很抽象,一些理论性的介绍很容易把人带到沟里去,包括一些语言框架在实现上也会使用不同的一些概念。 按照 维基百科的解释: reactive programming is a declarative programming p…
  18. 加载速度提升 15%,携程对 RN 新一代 JS 引擎 Hermes 的调研 作者简介 储贻锋,携程无线平台研发部基础框架组资深Android研发,目前主要负责CRN Android端和携程Android基础架构的维护与开发工作。 引言 Facebook在ChainReact2019大会上正式推出了新一代JavaScript执行引擎Hermes。Hermes是个轻量级的JS引擎,专门对Android上运行Rea…
  19. 来听 Janus 作者与资深 WebRTC 工程师分享 WebRTC 应用开发中的那些坑 RTC 大会作为 RTC 技术的布道会议,WebRTC 始终是我们布道推广的开源技术之一。我们历年曾邀请《WebRTC 权威指南》的作者,后来我们也将它翻译成了中文出版。在去年,我们还邀请了 Google WebRTC 的产品经理来分享 WebRTC 1.0 标准。但无奈WebRTC的编译部署、服务器部署策略、回声消除、降噪、网络抗丢包等始终是很多开…
  20. Vue中的虚拟DOM及diff算法 为什么出现: 浏览器解析一个html大致分为五步:创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting。每次对真实dom进行操作的时候,浏览器都会从构建dom树开始从头到尾执行一遍流程。真实的dom操作代价昂贵,操作频繁还会引起页面卡顿影响用户体验, 虚拟dom就是为了解决…
  21. 5个 JS 解构有趣的用途为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 1. 交换变量 通常交换两个变量的方法需要一个额外的临时变量,来看看例子: {代码…} temp是一个临时…
  22. canvas之转盘抽奖由于业务需要所以开发了两个版本抽奖,dom和canvas,不过editor.js部分只能替换图片,没有功能逻辑。
  23. 这些不常用的Web API真的有用吗? 别问,问就是有用 本文列举了一些列比较不常见的 Web API ,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。 以下案例能配动图的我尽量去配了,以免内容枯草乏味,但是如果内容有误,也请大家亲喷或者纠正:ok_hand: 方法列表 querySelector (元素向下查询,返回一个) querySelectorAll (元素向下…
  24. 探究 React Work Loop 原理 “为了让 React 在检测到数据变化需要重新渲染界面的时候不会阻塞浏览器主线程,从而让用户交互体验更流畅,React 团队提出了 Work Loop 的概念,将任务拆分成小的模块,在每一个任务完成后都检测是否当前有优先级更高的任务,有则优先执行优先级更高的任务,没有则继续执行下一个任务。”
  25. 进入 CSS3 动画我最近有机会深入研究一些CSS3动画。 我使用了像animate.css这样的库,用javascript完成了动画,但从未做过任何自定义的CSS3工作 原文
  26. 记一次webpack打包导致的事故 上个星期十二点半同事反馈说我们有个页面出了问题,那天我很早睡了,然后后来是我的leader在一点半被电话call醒,帮我把当天下午的版本回滚了。。。 bug排查 然后第二天醒来,看到那些记录。。唉,心情复杂。 来到公司之后就开始排查bug了 这个bug真的还是比较隐蔽,查了一上午,发现是和一个vendor有关,从vend…
  27. 【FE TIKU 前端面试题库】性能优化本文首发 [链接] 1 DNS 预解析 DNS 解析也是需要时间的,可以通过预解析的方式来预先获得域名所对应的 IP {代码…} 2 缓存 缓存对于前端性能优化来说是个很重要的点,良好的缓存策略可以降低资源的重复加载提高…
  28. 【webpack】指南 webpack 最出色的功能之一就是,除了 JavaScript ,还可以** 通过 loader 引入任何其他类型的文件 **。 webpack.config.js 配置如下: const path = require(‘path’); module.exports = { entry: ‘./src/index.js’, output: { filename: ‘bundle.js’, path: path.resolve(__dirname, ‘dis…

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

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


关注我

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

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

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