20190517 前端开发日报

重学JavaScript深入理解系列(二);你所不知道的HTML5——语音合成;如何写出一个利于扩展的Vue路由配置;JavaScript之内存机制;JavaScript 中实现 sleep;web 指纹识别技术研究与优化实现;ES6 js装饰器decorator的使用 +webpack4.0配置decorator;vuex入门篇 — mutation和actio

  1. 重学JavaScript深入理解系列(二) 我们总是会在程序中定义一些函数和变量,之后会使用这些函数和变量来构建我们的系统。 然而,对于解释器来说,它又是如何以及从哪里找到这些数据的(函数,变量)?当引用一个对象的时候,在解释器内部又发生了什么? 我们大多数人都知道,变量和执行上下文是密切相关的: var a = 10; // 全局上下文中的变量 ...
  2. 你所不知道的HTML5——语音合成 听一下就会发现,播放出来的声音并不是预先录制好的音频资料,而是通过文字识别后合成的语音 请先戴上耳机,然后将下面的代码复制到chrome控制台中体验~ let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客"); window.speechSynthesis.speak(msg); 复制代码 看,前端实现语音合成并不难 今...
  3. 如何写出一个利于扩展的vue路由配置 从历往经验来看,开发一个新项目,往往在刚开始部署项目,到项目的正式交付,以及交付后的后续维护,功能增强等过程,都需要对项目的一些已有结构和逻辑进行调整。 因此,如果有些内容刚建项目时不考虑好未来的可扩展性,后续调整会很麻烦。 这里先来说,在vue项目中,如何写路由配置,更利于未来可扩展。 vue-rou...
  4. JavaScript之内存机制 执行栈,也叫调用栈,具有 LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。 首次运行JS代码时,会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用,引擎都会为该函数创建一个新的函数执行上下文并Push到当前执行栈的栈顶。 根据执行栈LIFO规则,当栈顶函数运行完成后,其对应的...
  5. JavaScript 中实现 sleep 来自推特上 Windows 故障分析的笑话 图片来源: me.me 推上看到的笑话,Windows 故障分析的实现。 然后想起来 JavaScript 中如何实现这个 sleep() 函数让代码暂停指定时间。 异步版本 借助 Promise 这事很好实现。 function sleep(time) { return new Promise(resolve => { setTimeout(() =>...
  6. Web 指纹识别技术研究与优化实现 *本文原创作者:Tide重剑无锋,本文属FreeBuf原创奖励计划,未经许可禁止转载 本文通过分析web指纹的检测对象、检测方法、检测原理及常用工具,设计了一个简易的指纹搜集脚本来协助发现新指纹,并提取了多个开源指纹识别工具的规则库并进行了规则重组,开发了一个简单快捷的指纹识别小工具TideFinger,并实...
  7. es6 js装饰器decorator的使用 +webpack4.0配置decorator 许多面向对象都有decorator(装饰器)函数,比如python中也可以用decorator函数来强化代码,decorator相当于一个高阶函数,接收一个函数,返回一个被装饰后的函数。 注: javascript中也有 decorator 相关的提案,只是目前node以及各浏览器中均不支持。只能通过安装babel插件来转换代码,插件名叫这个: transform-decor...
  8. vuex入门篇 -- mutation和actio 之前我们专门介绍了vuex之中的状态部分,state和getter。vuex之中有一张过程图,展示的是vuex按照flux结构来管理我们的状态,用户通过dispatch或者commit来进行内容修改的提交,vuex将会自动的按照action -> mutation -> state的形式来进行内容的变更管理和记录。所以本篇文章我们将会介绍学习,vuex之中的变更函...
  9. 一篇文章掌握 JavaScript 事件的使用 本文采用升级的方式,由最简单的事件概念到对于 DOM 事件的常见应用。 第一:什么是事件 事件不是一个需要严格定义的技术名词。简单理解,事件就是文档或浏览器窗口中发生的交互(或动作)。比如点击或拖动一个元素、文档加载完成、ajax 中的 onreadystatechange 事件等。 事件发生并不会导致后续行为,只有在事件...
  10. 自己搭建Vue + Vuex + Typescript 项目的使用 现在很多主流语言都是强类型的,而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后,将会在代码调试、重构等步骤节省很多时间。 比如说:函数在返回值的时候可能经过复杂的操作,那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后,直接就可以看到函数的返回值结构,将...
  11. 前端面试--性能优化首先我们需要通过 DNS(域名解析系统)将 URL 解析为对应的 IP 地址,然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接,随后我们向服务端抛出我们的 HTTP 请求,服务端处理完我们的请求之后,把目标数据...
  12. VUE双向绑定原理实践 近几年,前端框架层出不穷,在技术瞬息万变的时代里,关注JS语言本身,探究一些框架底层实现原理也许会让我们走得更深更远。下面是自己看vue源码的一些理解和实践,主要是对vue双向绑定原理和观察者模式做了一些实践,以v-model为例。 双向绑定原理解析 整个过程分为以下几步: 1. compile:vue对template模板中进...
  13. JavaScript对象不变性知多少 ES5开始所有的属性都有了属性描述符,以表示属性的一些特性。 我们可以通过Object.getOwnPropertyDescriptor(...)查看属性描述符。 let obj = {a: 'a'}; let descriptor = Object.getOwnPropertyDesciptor(obj, 'a'); //descriptor: {value: 'a', writable: true, enumerable: true, configurable: true} 复制代码 ...
  14. 浅谈 Node.js 在携程的应用 作者简介 潘斐斐,携程无线平台研发部高级研发工程师。2008年加入携程,目前负责携程Node.js技术栈的基础平台研发工作。 携程在2017年9月份正式上线了Node.js应用,本文主要介绍近两年Node.js技术栈在携程的应用和体系情况。 一、技术栈 1.1 应用部署 ...
  15. React + Antd + Mobx改进之前简单的todolist 使用react-app-rewired yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --save 复制代码 项目根目录新建config-overrides.js文件加入以下代码 const { override, addDecoratorsLegacy } = require('customize-cra'); module.exports = override( addDecoratorsLegacy()...
  16. Vue开发总结 及 一些最佳实践 (已更新)经框架选择验证对比 element,iview,ant-design-vue最终选择 ant-design-vue,传送门 [链接]
  17. WebAuthn:更简单更强大的 Web 认证方式 编者按:本文作者奇舞团前端开发工程师何文力,同时也是 W3C CSS 工作组成员。 W3C Credential Management API Credential Management API 是一套给提供给网站用于存储用户登陆信息的 API,简单地说可以作为一种自动账号密码填充的功能: navigator.credentials.store({  type:&nbsp...
  18. 前端中的事件循环eventloop机制我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如何进行输出的:
  19. 提高幸福感的 9 个 CSS 技巧》在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用,觉得挺高效实用,所以也就有了这篇文章。 (by 小生方勤)

    提高幸福感的 9 个 CSS 技巧
  20. webpack项目使用eslint建立代码规范 如果你还没有全局安装 eslint ,第一件事当然是安装 eslint npm i -g eslint 复制代码 2. 初始化 eslint eslint --init 复制代码 这个命令会生成一个 .eslintrc 的文件,有几种形式。选自己习惯的形式就行,我的生成的是一个 .eslintrc.js 文件,如下: module.exports = { "extends": &quo...
  21. webpack4手动搭建Vue开发环境实现todoList项目 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺...
  22. ES6—Async与异步编程(11)单线程是Javascript语言最本质的特性之一,Javascript引擎在运行js代码的时候,同一个时间只能执行单个任务。
  23. 前端培训-初级阶段-场景实战(2019-05-23)-移动端适配bug前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(...
  24. JavaScript算法题:查找数字在数组中的索引编写算法时,排序是一个非常重要的概念。它有各种各样的种类:冒泡排序、希尔排序、分块块排序,梳排序,鸡尾酒排序,侏儒排序 —— 这些可不是我瞎编的!
  25. 复习webpack4之Library打包 之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好...

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

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

原文:20190517 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190517.html)