20181010 前端开发日报

webpack4.0 入门实践;尤雨溪:Vue 3.0 计划;Vue解析–如何应对面试官提问;前端每日实战 2018 年 9 月份项目汇总(共 26 个项目);掘金 AMA:有赞前端技术负责人– 施德来,你有什么问题想问我?;全面改革:解读vue3.0的变化;基于vue2.0的活动倒计时组件countdown;WebGL之3D地球

  1. webpack4.0 入门实践 webpack 可以看做是模块打包机:他做的事情是,分析你的项目结构,找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言( Scss 、 TypeScript 等),将其打包为合适的格式以供浏览器使用 构建就是把源代码转换成发布到线上可执行的 JavaScript 、CSS、HTML 代码,包括以下内容: 代码转换 : T…
  2. 尤雨溪:Vue 3.0 计划 原文:Plans for the Next Iteration of Vue.js 作者:Evan You(尤雨溪) 发表时间:Sep 30, 2018 译者:西楼听雨 发表时间: 2018/10/5 (转载请注明出处) 展开原文 Last week a
  3. Vue解析–如何应对面试官提问 近期不断面试中,面试官都会提一些关于Vue相关的源码和“全家桶”之类的问题。那么针对这些提问,我们应该如何更好应答呢?在这里我把对Vue的理解整理出来供大家来参考。 1.Vue是什么? Vue是一套构建用户界面的渐进式框架,也是一个非常典型的 MVVM 的程序结构(model-view-viewmodel)。 官方用语: Vue (读音 /…
  4. 前端每日实战 2018 年 9 月份项目汇总(共 26 个项目)过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个…
  5. 掘金 AMA:有赞前端技术负责人– 施德来,你有什么问题想问我? 掘金 AMA(ask me anything) 是掘金沸点的一个话题,掘金团队会邀请一位技术大牛通过「你问我答」的形式回答你的问题,让大家在技术、工作、生活方面有所成长。 AMA 嘉宾 掘金 AMA 第九期嘉宾是 有赞前端技术负责人– 施德来。 个人知
  6. 全面改革:解读vue3.0的变化 9月30日,尤雨溪在medium个人博客上发布了vue3.0的开发思路,国内有翻译的版本,见文章最后的参考链接。3.0带了了很大的变化,他讲了一些改进的思路以及整个开发流程的规划。 vue3.0的改进思路 vue最主要的特点就是响应式机制、模板、以及对象式的组
  7. 基于vue2.0的活动倒计时组件countdown 这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数。 查看演示 下载源码 安装 npm install vue2-countdown –save 使用组件 首先在模板部分添加: <template> <div> <count-down v-on:start_call…
  8. WebGL之3D地球 看了饿了么小小倩老师的canvas作品,心血来潮,学着做了个3D地球,也算是入坑WebGL了吧。之前有用过原生的canvas画2D的图形,这次则是用了Three.js和stats.js的3D框架,边学边练手,效果还算比较满意…毕竟第一次接触WebGL Talk is cheap show the code! github项目源码地址: github.com/FightingHao… 项目…
  9. vue写一个炫酷的日历组件 项目: 公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期
  10. 函数式编程能干什么(二)– 用 Rx.js 写个抛物线动画 昨天在掘金看到一篇文章,内容是用原生 JS 写抛物线动画。看完觉得挺有趣,很适合用 Rx.js 来重现,于是有了这篇文章。 本文默认你已经掌握了 Rx.js 的基本概念和操作。若你还没掌握,推荐先看一些入门资料。 动画的本质就是页面元素随着时间的持续,在特定时间点改变自身在页面中的坐标位置。这个很适合用响应式…
  11. 2018 年如何写一个现代的 JavaScript 库 我写过一些开源项目,在开源方面有一些经验,最近看到了阮老师的微博(好吧确实是几年前看到的了),深有感触,现在一个开源项目涉及的东西确实挺多的,特别是对于新手来说非常不友好 最近我写了一个jslib-base,旨在从多方面快速帮大家搭建一个标准的js库,本文将以jslib-base为例,介绍写一个开源库的知…
  12. 2020年如何写一个现代的JavaScript库我写过一些开源项目,在开源方面有一些经验,最近开到了阮老师的微博,深有感触,现在一个开源项目涉及的东西确实挺多的,特别是对于新手来说非常不友好
  13. Promise晋级—完全吃透 Promise晋级,需要的全部都在这 主要内容: promise基本实现原理 promise 使用中难点(链式调用,API基本上返回都是一个新Promise,及参数传递) promise 对异常处理 promise 简单实现及规范 参考: ​ 30分钟,让你彻底明白Promise原理 ​ 阮一峰ES6入门 ​ JavaScript Promi…
  14. JS数组方法总览及遍历方法耗时统计 国庆7天假,6天加班,苦涩。 因为对数组的处理方法有些还是有点模糊,因此这里整理汇总一下,方便日后自己查阅。 01、push(value)将value添加到数组的最后,返回数组长度(改变原数组) // Base let a = [1, 2, 3, 4,
  15. 如何使用 JavaScript ES6 有条件地构造对象 在不同来源之间移动用户生成的数据,通常需要检查特定字段是否具有值,基于这些数据构建输出。这篇文章将会教你如何使用 JavaScript ES6 特性更简洁地完成这件事。 自Sanity.io(我工作的地方)赞助Syntax 以来,我一直在 CLIs 和 Express, and Serverless functions 处理播客 RSS-feeds。这包含处理和构建包含大量字…
  16. 一步一步读懂JS继承模式 JavaScript作为一种弱类型编程语言被广泛使用于前端的各种技术中,由于JS中并没有“类”的概念,所以js的OOP特性一直没有得到足够的重视,而且有相当一部分使用js的项目中采用的都是面向过程的编程方式。但是随着项目规模的不断扩大,代码量的不断增加,这种方式会让我们编写很多重复的、无用的代码,并使得项目的扩展性、…
  17. 实现前端弹簧动效 弹簧动效是IOS系统原生自带的一个效果,如在iPhone上面的照片点开大图的展示效果就是一个弹簧动画,如下图所示:它有一个弹闪的过程,一大一小交替缩放就像一个弹簧在弹动一样,而不是以往那种简单的线性变大。如果使用CSS的animation-timing-fun
  18. TradingView + WebSocket 实时推送 K 线脱坑指南 前两天公司领导居然提到我的博客,说我最近懒了,不更新了…… 趁放假,赶紧更新一轮……等等,什么时候这变成工作了? 1. TradingView 是个啥 今天咱们说个比较特别的——TradingView,这是一个专业的图表库,专门做 K 线图的,而 K 线图是股票、基金等交易所必备的一样东西。项目本身是免费的,但并不开源,官方提供…
  19. 为什么说 ReasonReact 是编写 React 的最佳方式? 作者|David Kopal 译者|无明 使用 React 开发用户界面是一件很酷的事情,但我们能让它变得更酷、更好吗?要让它变得更好,我们首先需要找出它存在的问题。那么,React 作为 JavaScript 库还存在哪些问题? React 最初并不是为 JavaScript 而开发 如果你仔细看一下 React,你会发现,它的…
  20. Vue中的作用域CSS和CSS模块的差异 现代Web开发中的CSS离完美还差得远,这并不奇怪。现在,项目通常是相当的复杂的,而CSS样式又是全局性的,所以到最后总是极容易地发生样式冲突: 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 。 为了减轻CSS存在的主要痛点,我们在项目中普遍采用 BEM 的方法来。不过这只能解决CSS问题中的一小部分。 对我…
  21. 浅析Vue源码(一)—— 造物创世 声明:英文注解为尤雨溪大神原著,中文为本人理解翻译。水平有限若理解有误请以原著为准,望指正,见谅哈~ 要是觉得还不错,快给我个star,快点这里 github Vue 项目的起源,其实是源于对Vue进行实例化: new Vue({ el: …, data: …, …. }) 复制代码 那么在这次实例化的过程中,究竟发生了哪些行为…
  22. 8102年如何写一个现代的JavaScript库 我写过一些开源项目,在开源方面有一些经验,最近开到了阮老师的微博,深有感触,现在一个开源项目涉及的东西确实挺多的,特别是对于新手来说非常不友好 最近我写了一个jslib-base,旨在从多方面快速帮大家搭建一个标准的js库,本文将已jslib-base为例,
  23. 前端路由浅析 前端路由浅析 很多传播活动开发过程中经常需要制作一些单页应用。基于种种不可抗原因不能使用Vue、React等框架进行开发,所以每次开发时都会当场制作/copy前人的路由代码。 10月传播活动中因为时间充裕,便自己实现了简单的路由,以后活动如果需要使用可以继续基于此进行开发。 何为路由 狭义上的路由指根据…
  24. redux-saga源码解析 Redux-saga是redux应用的又一个副作用模型。可以用来替换redux-thunk中间件。 redux-saga 抽象出 Effect (影响, 例如等待action、发出action、fetch数据等等),便于组合与测试。 我想在分析redux-sa
  25. 深入学习 Node.js Buffer 友情提示:本文篇幅较长,可根据实际需要,进行选择性阅读。另外,对源码感兴趣的小伙伴,建议采用阅读和调试相结合的方式,进行源码学习。详细的调试方式,请参考 Debugging Node.js Apps 文章。 预备知识 ArrayBuffer ArrayBuffer 对象用来表示 通用的、固定长度的 原始二进制数据缓冲区。 ArrayBuffer 不…
  26. 高级 Angular 组件模式 (7)因为父组件会提供所有相关的 UI 元素(比如这里的 button),所以 toggle 组件的开发者可能无法满足组件使用者的一些附加需求,比如,在一个自定义的开关控制元素上增加 aria 属性。
  27. Js Lens: 安全地读取和更新深度嵌套的object Js Lens is a tiny library that help you accessing and updating deep nested object safely with functional features(immutability and
  28. nestjs后端开发实战(一)——依赖注入js单线程和无阻塞io让它在处理高并发时有着得天独厚的优势,node应运而生,从此js进入到后端开发的行列。但是目前js在后端开发领域,并没有得到广泛和深度的应用。原因可能有这几点:
  29. 理解 JSON Web Tokens (JWT) 的 5 个简单步骤 原文链接:medium.com/vandium-sof… 在本文中,将解释JSON Web Tokens(JWT)的基本原理以及使用原因。 JWT 是确保应用程序信任和安全的重要部分。 JWT 允许以安全的方式表示诸如用户数据之类的声明。 为了解释 JWT
  30. html dom 转化成图片踩坑记(canvas toDataURL)需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存。 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在github上的星星数分别是 dom-to-image 4k ⭐…

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

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


关注我

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

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

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