20190517 前端开发日报-前端开发博客

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

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