20180831 前端开发日报

JavaScript逗号运算符知多少;Vue.js从Virtual DOM映射到真实DOM的过程;网页中添加特殊字体解决方案;写给前端工程师的 10 条实用原则;干货|前端程序员容易出错的基础知识;Vue.js异步更新及nextTick;Zeu.js:实时监控可视化组件库;vue-video-player,通过自定义按钮组件实现全屏切换效果

  1. JavaScript逗号运算符知多少 前不久看到一道挺有意思的题目,这次就围绕这个来写点东西~ 首先来看下这个东西~ var a = (1,2,3); console.log(a) 答案是什么?为什么?答对了么?第一次看到这个,会以为是报错,因为一直没见过这种写法,而且实际项目中几乎也没人这样写吧,也看不出有啥实际用途。结果这个出乎意料输出…
  2. Vue.js从Virtual DOM映射到真实DOM的过程 Virtual DOM的概念相信大家都不会陌生,Vritual DOM是相对与DOM(文档对象模型)来说的,MDN上关于DOM的定义:“DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内…
  3. 网页中添加特殊字体解决方案 前言 今天总结一下网页中添加特殊字体的解决方案。一个字体一般情况下很大,少则1-2M,一般是4-6M,大的字体十几兆的都有。加载在网页中会导致速度变得很慢,因此,你在网页中很少看到有用特殊字体的原因。今天主要总结一下网页中运用特殊字体的一些解决方案。 方案一:(针对有针对性的展示,死的文字) 目前市面…
  4. 写给前端工程师的 10 条实用原则 译者按: 牛人都说自己是站在巨人的肩膀上,我们也要善于学习他人的经验。 原文: 10 Things You Will Eventually Learn About JavaScript Projects 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 小编推荐:Fundeb…
  5. 干货|前端程序员容易出错的基础知识 web全栈是目前比较流行的语言,因为前端较其他语言相比,简单好学,而且现在的互联网公司几乎缺少不了web前端开发,行业的需求致使大量的人转型前端,对于刚学前端的人来讲,他们缺乏开发经验,在项目开发中容易出错,为了使大家少走弯路,小编综合一批前端程序员,收集了一些最常见的错误,供大家学习,避免掉坑。 …
  6. Vue.js异步更新及nextTick 前段时间在写项目时对nextTick的使用有一些疑惑。在查阅各种资料之后,在这里总结一下Vue.js异步更新的策略以及nextTick的用途和原理。如有总结错误的地方,欢迎指出! 本文将从以下3点进行总结: 为什么Vue.js要异步更新视图? JavaScript异步运行的机制是怎样的? 什么情况下要使用nextTick? 先看…
  7. Zeu.js:实时监控可视化组件库 Zeu.js is JavaScript library featuring a collection of prebuilt visualization components for building real-time TV dashboard, monitoring UI and IoT web interface. Installation From dist <script src=”zeu.min.js”></script> Quick Start Let’s build our fir…
  8. vue-video-player,通过自定义按钮组件实现全屏切换效果 最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示。 产品开发用的是 vue, 经同事介绍使用了 vue-video-player 视频播放插件,通过 demo案例很快实现了视频播放效果 &lt;video-player c
  9. HTTPS 安全最佳实践 HTTPS对于保护你的网站至关重要。但是你还需要避免许多陷阱 1. 没有混合内容 混合内容是指在你的HTTPS站点中不能通过HTTP加载资源了。浏览器会清晰显示你的网站是否容易混合内容,在浏览器网址一栏有图标。 如果曾经将http://网址硬编码到你网站,之后你又将网站迁移到HTTPS时就会出现这种情况。 首先使用http…
  10. JavaScript .filter() 方法全解析 .filter是一个内置的数组迭代方法,它接受一个“谓词(译者注: 指代一个过滤条件的函数)”,该“谓词”针对每个值进行调用,并返回一个符合该条件(“truthy值”)的数组。 上面那句话包含了很多信息,让我们来逐一解答一下。
  11. CSS魔法堂:稍稍深入伪类选择器过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理。
  12. 迭代器,生成器(generator)和Promise的“微妙”关系 需要Promise源码版的朋友:传送链接 本文主要讲述(iterator)和生成器*/yield之间的联系和各自的用法,以及生成器的高配版本async/await的使用。 大纲: 迭代器(iterator) 生成器 */yield 异步版生成器 async/
  13. Zeu.js 1.0.0 发布, 九大全新组件全面升级 Zeu.js 是一个 JavaScript 库,其中包含一系列预构建的可视化组件,用于构建实时 TV 仪表板,监控 UI 和物联网Web界面。 安装 From dist &lt;script src="zeu.min.js"&gt;&lt;/script&gt
  14. 重新认识vue之 refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。此时对 ref 的认识在于,元素属性写了 refs, 则可以通过 this.$refs 访问到该元素。其实ref 用在不同位置,访问到的东西是不…
  15. JavaScript fetch接口如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好)。因此,我写一篇关于fetch的文章,为了自己看着方便,毕竟工作中用到的也就是一些很基础的点而…
  16. ES6实践:Symbols及其使用 虽然ES2015已经引入了许多开发人员期待已久的语言特性,但还有一些新特性不太为人所知和理解,其好处也不太清楚——比如symbols。 symbol(符号)是一种新的原始数据类型,一个确保不会和其它符号冲突的唯一令牌。从这个意义上讲,你可以把符号看作是
  17. 图解JS执行机制 我们可以看出: js代码分为同步任务和异步任务。 同步任务会进入主线程,异步任务会进入Event Table(事件表),当事件表中的异步任务完成后会在Event Queue(事件队列)中注册回调函数。 主线程任务全部完成后,才会完成Event Queue中的任务。 js解析器会不断地重复检查主线程执行栈是否为空,然后重复…
  18. js实现 web页面的滚动条下拉时加载更多在手机上,数据列表的分页都是下拉到底部的时候会加载更多,但是,去年三月份的时候遇到了客户要求web页面也要下拉加载更多的需求,于是按照web页面在滚动条下拉时加载更多内容(个人项目经验)文中的代码实现了…
  19. 深入理解JSCore 编辑推荐: 本文来自网络,本文主要介绍让浏览器能够正常工作最核心的部分就是浏览器的内核,每个浏览器都有自己的内核,Safari的内核就是WebKit。 背景 动态化作为移动客户端技术的一个重要分支,一直是业界积极探索的方向。目前业界流行的动态化方案,如Facebook的React Native,阿里…
  20. Angular 开发学习 03 – TodoMVC 为了更方便学习 Angular 的开发,我们需要一个简单但又足够复杂的项目作为演示项目。这个演示项目具有一定的规范需求,但又不至于越俎代庖,以至于把基本的技术要求淹没在复杂的业务中。 TodoMVC 正是这样一个合适的示例项目。 TodoMVC 是一个开源 JavaScript 项目框架。不同于一个项目或者一个开发库,TodoMVC …
  21. vue状态管理之vuex(十六) vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用 父子组件通信时,我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系,或者一个状态需要共享给多个组件时,就会非常麻烦,数据也会相当难维护 …
  22. Promise实现原理(附源码) 本篇文章主要在于探究 Promise 的实现原理,带领大家一步一步实现一个 Promise , 不对其用法做说明,如果读者还对Promise的用法不了解,可以查看阮一峰老师的ES6 Promise教程。 接下来,带你一步一步实现一个 Promise 1. P
  23. WebGL 单通道wireframe渲染 如果要把一个对象的线框绘制出来,一般的方法是先绘制实体对象,然后通过gl.LINES的模式再绘制一遍模型,此时模型的线框就会被绘制出来。 gl.LINES的问题 此方法需要绘制两遍对象,因此会造成性能的损失。
  24. 《Web 推送通知》系列翻译 | 第三篇:订阅一个用户 原文地址:how-push-works 译文地址:订阅一个用户 译者:刘鹏 校对者:任家乐 张卓 第一步是从用户那里获取发送消息的权限,然后才能着手于 PushSubscription。 实现这一步的 Javascript API 是相当直接,所以让我们来一
  25. React Native Fetch封装那点事…每一门语言都离不开网络请求,有自己的一套Networking Api。React Native使用的是Fetch。 今天我们来谈谈与Fetch相关的一些事情。
  26. js 打包七牛文件并下载zip1:某些 web框架(比如 laravel) 会给 axios 配置上默认的请求头。在请求文件时需要去掉默认的请求头,同时设置Content-type 为’application/x-www-form-urlencoded; charset=UTF-8’, 否则会导致跨域。
  27. ReactNative仿某租车软件 关于React-Native 循例都要介绍下React-Native,下面简称RN。 RN是让你使用Javascript编写的原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。 中文文档 本文分为以下几点 搭建RN
  28. vue-cli 自动化测试 Nightwatch 详解 本文作者奇舞团前端开发工程师冯通 vue-cli 是我最喜欢的脚手架工具, 提供了很多开箱即用的功能, 每次新建一个项目, 我都会一路回车按下来, 唯独到这一步… Setup e2e tests with Nightwatch? 每到此处, 我都会无
  29. 前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并您可以在浏览器中手动执行的大多数操作都可以使用Puppeteer完成!生成页面的屏幕截图和PDF。抓取SPA并生成预渲染内容(即“SSR”)。自动化表单提交,UI测试,键盘输入等。创建最新的自动化测试环境。使用最新的Jav…

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

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


关注我

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

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

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