20181110 前端开发周报

你所不知道的 CSS 阴影技巧与细节;vue-源码剖析-双向绑定;2018你成长了么?一份给你的前端技术清单;js复杂判断的更优雅写法;手把手教你写一份优质的前端技术简历;JavaScript常用八种继承方案;使用vue2实现带地区编号和名称的省市县三级联动效果;一次 Node.js 性能优化总结

  1. 你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法。 最近一个新的项目,CSS-Inspiration,挖掘了其他很多有关 CSS 阴影的点子,是
  2. vue-源码剖析-双向绑定 项目中vue比较多,大概知道实现,最近翻了一下双向绑定的代码,这里写一下阅读后的理解。 项目目录 拉到vue的代码之后,首先来看一下项目目录,因为本文讲的是双向绑定,所以这里主要看双向绑定这块的代码。 入口 从入口开始:src/core/index.js
  3. 2018你成长了么?一份给你的前端技术清单记得年初的时候我给自己制定了一个学习计划,现在回顾来看完成度还不错。但仍有些遗憾,一些技术点没有时间去好好学习。
  4. js复杂判断的更优雅写法 前提 我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你
  5. 手把手教你写一份优质的前端技术简历不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简…
  6. JavaScript常用八种继承方案更新:在常用七种继承方案的基础之上增加了ES6的类继承,所以现在变成八种啦,欢迎加高级前端进阶群一起学习(文末)。
  7. 使用vue2实现带地区编号和名称的省市县三级联动效果 我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。 查看演示 准备数据源 我们的省市区县的数据源来自本站文章 《基于Vue2的简易的省市区县三级联动组件》 中的districts.js,感谢 v…
  8. 一次 Node.js 性能优化总结 很少总结 Node.Js 相关的调试以及优化技巧,正好最近在做性能调优并取得了不错的效果,借此机会总结和分享一下 Teambition 是一款实时协同的跨平台应用,相关的业务接口也是处于读多写少的场景,因此主要的性能瓶颈也是出现在接口平均响应速度慢、不稳定等方面,此次我将结合 Teambition 实际业务从以下几个维度来回…
  9. vue项目上传Github预览最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅。
  10. 使用HTML5 IndexDB存储图像和文件 有一天,我们写了关于如何在localStorage中保存图像和文件的文章,它是关于我们今天可用的实用主义。 然而,localStorage有一些性能影响 – 我们将在稍后的博客中讨论这个问题 – 并且未来期望的方法是使用IndexedDB。 在这里,我将向您介绍如何在IndexedDB中存储图像和文件,然后通过ObjectURL呈现它们。 本文是翻译…
  11. 前端实现文字跑马灯的三种方式最近写了一个文字跑马灯的项目需求,刚开始用js写,能够完成需求。后面想着换种方式(分别是html和css)来实现同一个需求,以减少性能消耗。
  12. JavaScript:对Object对象的一些常用操作总结3.目标对象o1自身也发生了改变,假如不想让o1改变,可以把三个对象合并到一个空的对象中,操作如下:
  13. 「译」写好JavaScript条件语句的5条守则 原文地址:5 Tips to Write Better Conditionals in JavaScript 原文作者:ecelyn Yeen(@jecelynyeen) 译文出自:阿里云翻译小组 译文链接:github.com/dawn-teams/… 译者
  14. 基于Vue-cli 快速搭建项目 plugins插件,可以再项目中buildwebpack.base.conf.js第12行看到这个入口文件是…基于vue-cli快速构建 Vue是近两年来比较火的一个前端框架(渐进式框…
  15. ES6浅析之路一(个人理解ES6就是对ES5的BUG修改和升级)废话不多说今天要探讨的是 var与letECMAScript 6 入门 作者:阮一峰 下面是个人总结:let不允许在相同作用域内,重复声明同一个变量。lef 特点是块级作用域 先来看一下ES5…
  16. 还不打算去认识一下webpack?随我来,去看看webpack!(为时未晚)============》第一版(较浅显的知识,懂得可忽略本文)
  17. 面试官问:能否模拟实现JS的new操作符 用过 Vuejs 的同学都知道,需要用 new 操作符来实例化。 new Vue({ el: ‘#app’, mounted(){}, }); 那么面试官可能会问是否想过 new 到底做了什么,怎么模拟实现呢。 附上之前写文章写过的一段话:已经有很多模拟实现 new 操作符的文章,为什么自己还要写一遍呢。学习就好比是座大山…
  18. 100行代码实现一个vue分页组件 今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。所有代码的源码可以再github上下载的到:下载地址 先来看一下实现效果: 点击查看效果 整体思路 我们先看一下使用到的文件的目录: 我们在pageCompon
  19. 关于javascript的原型和原型链,看我就够了(一)关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看要了解原型和原型链,我们得先从对象说起
  20. 前端开发如何包装可重用的JavaScript代码 在日常工作中,你可能写过很多JavaScript代码,有些基础性的功能,甚至那些需要重复使用的业务功能,总不愿意重复再写上一遍。 如果是通过复制的方式来达到重用目的话,暂不说复制来复制去容易出错,一旦使用该功能的业务达到上十个之多时,任何一个重用的基础功能出现BUG,都要在各个业务同步修复,费时费力,最后把…
  21. 数据可视化:浅谈热力图如何在前端实现 作者 个推开发工程师甄鑫 当我们需要用更直观有效的形式来展现各类大数据信息时,热力图无疑是一种很好的方式。作为一种密度图,热力图一般使用具备显著颜色差异的方式来呈现数据效果,热力图中亮色一般代表事件发生频率较高或事物分布密度较大,暗色则反之。值得一提的是,热力
  22. CSS基础:block,inline和inline-blockcss的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。
  23. 从一道前端面试题谈起 本文作者:刘观宇,360奇舞团高级前端工程师、技术经理,曾参加360导航、360影视、360金融、360游戏等多个大型前端项目。关注W3C标准、IOT、人工智能与机器学习的最新进展,W3C CSS工作组成员。 人生无根蒂,飘如陌上尘。分散逐风转,此已非常身。落地为兄弟,何必骨肉亲!得欢当作乐,斗酒聚比邻。盛年不重来,…
  24. React.memo介绍React.memo之前,先了解一下React.Component和React.PureComponent。
  25. WEB站点性能优化实践 编辑推荐: 本文来自于博客园,本文主要对Web站点的性能将实施一个完整的优化流程,希望对您的学习有帮助。 进行优化前,关键是剖析当前的web性能,找到性能瓶颈,从而确定最需改进的地方;如果精力有限,首先将精力放在能明显提升性能的改进点上; 《高性能网站建设指南》提出了一个性能…
  26. HTML5游戏开发(五):飞机大战之让所有元素动起来 《HTML5游戏开发》系列文章的目的有:一、以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以非常轻量;三、egret相比PIXI.js和spritejs文档更成熟、友好;四、学习从0打造高效的开发工作流。 HTML5游戏开发(一):3分钟创建一个hello world HTML5游戏开发(…
  27. 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧 很多前端开发者认为, Vuex 和 Redux 是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的。但是通常 Redux 是用于解决工程性问题的,用于分离业务与视图,让结构更加清晰,从而达到易于维护的目的。也就是 Flux (这里我之前翻译的Flux深度解读) 架构所解决的问题。但是绝大多数时候,大家只是想…
  28. electron-vue模仿网易云桌面应用体验 像官网说的那样,electron-vue就是基于 vue 来构造 electron 应用程序的样板代码。electron-vue开发起来就和vue一样,只是如果有特殊的需求需要修改应用的话就要用到electron相关的api. electron Electron是由Github开发,用HTML,CSS和JavaScript来 构建跨平台桌面应用程序 的一个开源库。 Electron通过将Chromium…
  29. React 16.7.0-alpha hooks 之整体预览 转载于免费视频网 www.rails365.net 之前我们介绍了使用hooks的原因,在开始介绍api之前,现在我们先来整体的预览下这些api。 从上篇的介绍可以知道,Hook是向后兼容的,有react开发经验的你看起来会更顺畅。 是一个快节奏的概述。如果你
  30. 使用 Proload/Prefetch 优化你的应用 原文地址 衡量网站的性能的指标有很多,其中有项重要的指标就是网站的首屏时间,为此前端工程师们都是绞尽脑汁想尽办法进行优化自己的应用,诸如像服务端渲染,懒加载,CDN 加速,ServiceWorker 等等方法,今天介绍的 preload/prefetc
  31. 在 Chrome 70 中体验 WebAssembly 线程 V8 已经为 WebAssembly 引擎中的线程实现了必要的支持,可通过 Origin Trial 获得。

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

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


关注我

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

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

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