20190811 前端开发周报-前端开发博客

vue+vscode断点调试详解；基于 HTML5 WebGL 的加油站 3D 可视化监控；Vue.js 在复杂信息流场景下的最佳实践；vue在混合开发中应用的思考；你可能不知道的前端小技巧；JS中轻松遍历对象属性的几种方式；vue跨域方案指北；webpack4从零搭建vue项目

vue+vscode断点调试详解非开箱即用，仅作好奇心满足、复杂项目中自定义断点配置、下个项目中不求人不百度立即断点调试涉及面较宽，需要一定经验，且各处均不会太深入(我也菜) 如果你到处搜索但始终解决不了: vscode无法连接上页面、提示未验证断点(灰空心圆)、断点漂移乱飞到其他行、断点实际中断时所在位置不对、单步跳过执行时去到…
基于 HTML5 WebGL 的加油站 3D 可视化监控前言随着数字化，工业互联网，物联网的发展，我国加油站正向有人值守，无人操作，远程控制的方向发展，传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式，即采用数据采集与监控系统 SCADA。SCADA 系统的推广使用，大大提高了我国加油站的监控效率，本文所讲的则是通过对加油站的可视化建模，结合…
Vue.js 在复杂信息流场景下的最佳实践至此,我们的「Vue.js 在复杂信息流场景下的最佳实践」所需要的组件都已经给出来了,接下来就简单讲一下为什么要这么做。需求是千遍万化的,一个组件无…
vue在混合开发中应用的思考我目前在做的一个项目，前端这块虽然说使用的是CS架构，但其实是 C# 提供了一层 Chrome 内核来运行app的。也就是混合开发的一种。现在的工作是将以前的 jquery 一把梭的开发模式转移到 vue 上来，这就带来了 vue 在混合开发中应用的思考。二、混合开发像 Android , WPF 和 IOS 等等这些原生（或桌面）应用…
你可能不知道的前端小技巧这篇文章主要记录一些我在开发工作中踩过的一些坑或者新学到的一些知识。主要分成‘事件’，‘浏览器调试小技巧’，‘其他‘三部分。==============================一.事件===========================1.先来看一个有…
JS中轻松遍历对象属性的几种方式Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。如果对象的键-值都不可枚举，那么将返回由键组成的数组。
vue跨域方案指北跨域是指违背了浏览器同源策略的限制简单的说，我们通常使用的请求工具都是基于XMLHttpRequest对象构建的，它是严格遵守同源策略的，所以当需要跨域时，基于它的工具就无法工作了，我们需要一些额外的手段来解决这个问题本文主要对已知的几种跨域方案进行实践和总结一、jsonp jsonp虽然不是官方的跨域方案，但…
webpack4从零搭建vue项目新建一个项目文件夹 npm init -y 初始化package.json 安装webpack依赖包 npm install –save-dev webpack webpack-cli webpack-dev-server devServer: { contentBase: path.join(__dirname, ‘./dist’), host: ‘localhost’, // 可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去…
从零开始，采用Vue的思想，开发一个自己的JS框架（三）：update和diff 本章节我们的主题是update和diff，这一章节可能理论部分会比较多。在开始这一块内容前，我觉得有必要先大致看一下Vue和React实现这一部分的流程的：update->diff->patch->updateDOM。在开始更新后，会进行diff算法的比对，比对后会生成一个patch补丁包，然后再根据这个补丁包进行DOM的更新。补丁包中会通过id（…
js 面试官想了解你有多理解call,apply,bind?函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this 关键字密切相关，相当一部分人对它们的理解还是比较浅显，所谓js基础扎实，绕不开这些基础常用的API，这次让我们来彻底掌握它…
2019 谷歌 I/O 大会上提出的 JavaScript 新特性，你错过了吗？本文总结了 2019 年谷歌 I/O 大会上 Mathias 和 Sathya 提出来的 JavaScript 新规范功能。本文从对线程认识的简要刷新、事件循环、关于事件循环的常见问题和错误认识三个不同层面进行说明，进一步挖掘了 Node 的核心。正则表达式 lookbehind 正则表达式（ RegEx 或正则表达式）在任何语言里都是强大的功能。…
前端硬核面试专题之 HTML 24 问1. 前言本文讲解前端面试的 HTML 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。笔者技术博客首发地址 GitHub，欢…
vue项目中使用百度地图(vue-baidu-map)在使用vue做项目的时候，有用到百度地图，使用了vue-baidu-map插件，包括拾取位置坐标，搜索位置等
JS中函数式编程基本原理简介在做了一些研究之后，我发现了函数式编程的概念，比如不变性和纯函数。这些概念使你能够构建无副作用的函数，因此更容易维护具有其他优点的系统。
Vue2.x全家桶的基础知识点整理再此说明：这篇文章写的很粗糙，这都是我在学习Vue全家桶时写的学习代码，这麽粗那为什么还要写，因为我现在的公司在使用React栈，不太使用Vue，我不想再学习React的时候忘记了Vue，所以想隔段时间就拿出来看看，然后再优化这篇文章，因为这篇文章很基础，技术大佬请点击返回，不用浪费时间。任何人，没有本人允…
[LeetCode] 7. 整数反转：JavaScript 解法之溢出判断你真的考虑全面了吗？题目链接： leetcode-cn.com/problems/re… 方法一：数学方法看到整数反转这个题，最先联想到先对数值取绝对值，然后除十取余以对整数进行反转，之后再考虑是否需要取负数以及数值范围问题。 /** * @param {number} x * @return {number} */ var reverse = function(x) { let result = 0; let value =…
vue生成canvas海报图一个通过 css 属性画 canvas 图片的轻量级的 vue 组件(A lightweight vue components use canvas draw image by css properties.)
从js讲解时间复杂度和空间复杂度今天有同事在检查代码的时候，由于函数写的性能不是很好，被打回去重构了，细思极恐，今天和大家分享一篇用js讲解的时间复杂度和空间复杂度的博客
vue中的nextTick js的执行是单线程，基于事件循环（event loop），事件循环大致分为以下几个步骤：所有的任务都会被放到调用栈（call-stack）等待主线程（main thread）执行, 主线程的执行过程就是一个 tick 。 JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出…
浏览器大战与 JavaScript 的诞生 “只要应用能用 JavaScript 编写，那么最后它就会用 JavaScript 编写。”——Atwood 定律，出自 Jeff Atwood 的一篇题为 “最小权力原理” 的博客文章，2007 年 7 月 17 日浏览器大战在 Android 设备或 iPhone 流行之前，浏览器大战的战场是桌面计算机平台。众多公司投入了数十亿美元投身这场战役，而他们的出发点就…
vue移动端项目中使用fastclick及遇上的issue1、在vue项目中安装fastclick插件 {代码…} 2、在main.js中引入并绑定到body {代码…} 3、在项目中安装fastclick成功后测试会遇到以下问题： os input点击不灵敏解决方法：vue项目中使用fastclick时ios input…
Babel 你太美。。 Babel 的本意是 “通天塔”。西方神话故事里，以前的人语言相同，决定建立有个能直达上天的塔，神后面惧怕人们语言相通就打乱它，让他们不能明白对方的意思，并把他们分散到各地。为了解决上古时代浏览器对新语法不支持、不兼容情况下。发明了 Babel ，能够将 ES6 代码转为 ES5 代码，从而在现有环境执行。安装环境…
详解Vue服务端渲染所谓服务端渲染就是将代码的渲染交给服务器，服务器将渲染好的html字符串返回给客户端，再由客户端进行显示。
Nodejs监听日志文件的变化最近有在做日志文件的分析，其中有一个需求：A服务器项目需要用Nodejs监听日志文件的变化，当项目产生了新的日志信息，将新的部分通过socket传输到B服务器项目。socket暂时不做分析。这个需求很简单，通过分析我们开始撸码吧。在撸码的过程中还能巩固所学Nodejs的API，何乐而不为呢？所用的API fs.watchFile() …
TypeScript内置对象内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。
webpack打包原理和基本配置 webpack实际上是一个静态模块打包工具 webpack 处理项目时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。打包原理识别入口文件通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进…
基于 vue-skeleton-webpack-plugin 的骨架屏实战目前正在做的项目，登录是需要跳转到别人的页面的，导致重定向很多，需要优化一下白屏时间，所以就用到了骨架屏，但是这次用的骨架屏不是自动生成的，还是自己敲的样式，一步步来吧，先从简单的用起。先上效果图：什么是骨架屏骨架屏，英文 Skeleton screen ，是指在页面开始渲染之前的白屏时间内…
（译文）JavaScript中的执行上下文和执行栈本文将深入探讨JavaScript中最重要的基础知识之一：执行上下文。通过对此篇文章的阅读，对以下几个方面的知识你将会有更加清晰的认识：解释器的执行机制为何函数和变量可以在声明前使用以及它们的值究竟是如何确定的什么是执行上下文？当代码在JS中运行时，代码的执行环境非常重要，JavaScript中…
Nuxt.js实战和配置前段时间刚好公司有项目使用了Nuxt.js来搭建，而刚好在公司内部做了个分享，稍微再整理一下发出来。本文比较适合初用Nuxt.js的同学，主要讲下搭建过程中做的一些配置。建议初次使用Nuxt.js的同学先过一遍官方文档，再回头看下我这篇文章。一、为什么要用Nuxt.js 原因其实不用多说，就是利用Nuxt.js的服务端渲染能…
超简单实现web音频可视化这几天想给自己的博客做个音乐播放器,收藏和分享喜欢的音乐,用来在 coding 的时候后台播放,但是想了想除了做个后台之外,前端的东西能做的太少了,于是想到为什么不能做个炫酷歌曲音频可视化呢? 主要思路获取音频接口,得到音频数据查阅 Mozilla 找到,web 的 audio API,可以生成音频对象,通过这一接口可以对其操作,…
NodeJs 【加强版】实现跨域WebSocket 即时通讯原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
给大家介绍一个自己开发的JavaScript工具库大家好。今天很高兴能向大家介绍一个全新的JavaScript工具库。它的名字是 webstorage-proxy.js 。这也是我第一次开发JavaScript工具库，期间遇到不少问题，当然更多的是收获。下面由我来为大家分享下这个js库的由来和使用，以及开发过程遇到的问题和总结的经验吧。 WebStorageProxy简介引入webstorage-proxy.js，w…
WebRTC：一个视频聊天的简单例子在前面的章节中，已经对WebRTC相关的重要知识点进行了介绍，包括涉及的网络协议、会话描述协议、如何进行网络穿透等，剩下的就是WebRTC的API了。
恕我直言，90% 的应用场景都不需要用 WebAssembly 本文阐述了 WebAssembly 诞生的背景，并从实践案例中分析了 WebAssembly 到底带来了多少性能提升。背景：从 JavaScript 说起 JavaScript 占据着统治地位，不管是公开还是私有的项目、任何组织、世界任何地区，JavaScript 都是第一。 -GitHub 2018 年度报告随着 JavaScript 的快速发展，目前…
深入解析 Node.js 事件循环工作机制本文从对线程、事件循环、事件循环常见的问题和错误上分别进行说明，进一步探索了 Node 的核心工作原理。每当人们谈论 Node.js 时，都会出现很多问题，比如它究竟是什么、这项技术有什么用、它是否有未来等等。让我们尝试讨论第一部分。回答这个问题最简单的方法是列出 Node 在技术上的许多定义，如： …
深入理解 call, apply 和 bind（JS）作者：一像素链接：https://www.cnblogs.com/onepixel/p/6034307.html 在JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向，从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解，并列出几个经典应用场景。…
常见数据结构和Javascript实现总结做前端的同学不少都是自学成才或者半路出家，计算机基础的知识比较薄弱，尤其是数据结构和算法这块，所以今天整理了一下常见的数据结构和对应的Javascript的实现，希望能帮助大家完善这方面的知识体系。
检验原生JS功底的时候到了–纯JS实现贪食蛇前言以前读书学习C语言的时候，总是想着要完成贪食蛇这款游戏，但是那时候我的编程基础和编程思维还不够扎实和成熟，所以导致怎么折腾都写不出来，但是现在工作了，就想着要完成读书时候的小心愿，就开始动手写了，写着写着，就还真是写出来了，哈哈，看来我也是成长了不少。。。贪食蛇这款游戏，相信大家一定都不…
JavaScript变量定义和作用域的可视化指南（入门级）我们常讨论var，let和const之间的作用域的差异。但更多的时候，我看到不少初学者仍然在尝试着理解这个观点。我认为这可能是因为这个概念很少被可视化。让我们一起来看一看。并不是所有的作用域看起来都是一样的。注意：我并不建议大家死记作用域变量定义和每种类型的作用域的值可见性规则。相反，你们可以试着找…
Vuestic Admin：免费与美妙 Vue.js 管理模板 English | 简体中文 | 日本語 Vuestic Admin 免费与美妙Vue.js管理模板包括38以上个定制用户界面组件由Epicmax开发。由Vasili Savitski设计演示版 | 文档安装首先确定ni安装所有的先决条件： Node.js (>=8.9…
前端硬核面试专题之 CSS 55 问前言本文讲解 55 道前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。笔者技术博客首发地址 GitHub，…
CSS 是如何影响浏览器元素在文档中的排列之前在项目的过程中遇到了一个问题，某个div希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了z-index也没有效果，不知道什么原因，因此找了一下CSS相关资料，解决了这个问题的同时，也学习了很多知识，特此和大家分享一下。屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中，x为水…
js函数this理解？手写apply、call、bind就够了函数的内部属性，this引用的是函数据以执行的环境对象。也就是说函数的this会指向调用函数的执行环境。
js中的二叉树以及二叉搜索树的实现及应用接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树，有树干，树枝，在程序中树是一种数据结构，对于存储需要快速查找的数据非有用，它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构：）和树…
React Native 性能优化指北 React Native性能优化指北译注：本文并没有详细的介绍具体的性能优化做法，作者给出的是一系列方法，需要我们自己根据实际情况，去采纳有用的一些点。原文链接： https://blog.usejournal.com/getting-started-optimizing-a-react-native-app-1d7507c2d849 过去这一年，我都在持续地对一个业…
React Hooks 入门React Hook 是React16.8提出来的一个新特性，其意义就在于我们可以让函数组件变得跟类组件一样有能力管理自己的状态，这意味着我们以后写的所有组件都可以是Function，对于初学者来说降低了学习成本（压根不用管t…
nodejs selenium自动登录并且更新pages 上次文章留了个尾巴，免费版的码云gitee pages更新文件后，不会自动重新部署，只有pro版才支持。于是思考怎么自动更新网站。 travis部署github和gitee码云没想到又一番折腾开始:sob: 思路为了自动更新gitee pages，需要模拟用户登录后点击pages页面的“更新”按钮。有2种方式：抓包看登录、…
七个即将列入规范的JavaScript提案功能，以后肯定有用得到的今天看到一个文章，说node12&chrome中7个新的提案功能。如果在这里发表了这个文章有侵权嫌疑，请告知删除此文我看了下，有几个肯定用的到，甚至还有 ?. ，玩ruby的同学是不是觉得很熟悉( &. )。以下是看到的文章的原文。 JavaScript(或ECMA script)是一种不断发展的语言，有许多关于如何更好发…
Vue.js 在复杂信息流场景下的实践经常做业务的前端同学肯定遇到过这样的业务场景：常见的 hybird 页面常见的 UGC 类的 PC 网页这类页面都会承载着多个信息流列表，本文就针对这类复杂信息流页面进行梳理，给出我在做了无数次这类页面后的最佳实践总结。你可以直接戳这个地址查看最终 demo 效果（请在手机模式…
为什么会出现React Hooks?原文：[链接] 译者：前端技术小哥当你要学习一个新事物的时候，你应该做的第一件事就是问自己两个问题 1、为什么会存在这个东西? 2、这东西能解决什么问题? 如果你从来没有对这两个问题都给出一个令人信服的答案…
【源码解析】vue-create-api作者黄轶在 README.md 中这样介绍的，一个能够让 Vue 组件通过 API 方式调用的插件。( vue-create-api 源码地址 ) 安装使用目前提供两种安装，通过 npm install vue-create-api , 或者引入js静态资源文件。在 README.md 中提供了使用示例，如下： import CreateAPI from ‘vue-create-api’ Vue.use(CreateAPI) V…
公网搭建 GitLab 安全拾遗在公网搭建的 GitLab 频频遇到安全挑战，然而其实只需要做一两个简单的动作，维护成本就能够大大降低，并且还能避免未被许可的内容，被搜索引擎爬虫暴露的到处都是。本篇文章，我们就来聊聊公网搭建的 GitLab 代码仓库的安全小细节。写在前面公网搭建 GitLab ，常见的攻击面主要…
如何实现 React Table 固定列、固定表头前段时间在研究并实现了如何实现表格的固定列（fixed column）功能，这里记录了思路和细节表格控件比较复杂，应用场景也很多，需要各种数据展示、统计、操作等特性
webpack chunk相关分享前端页面效果越来越酷炫、功能越来越复杂而前端工程师们为了更方便的开发提高开发效率进行了一系列de探索模块化思想的提出啊将复杂的程序分割成更小的文件这些年优秀的框架层出不穷react vue angular es6这种在javascript基础上拓展的新的语法规范 less sass css处理器等等等所有的事物都是具有双面性的有利有…
AntdSite – 一个基于Ant Design和GatsbyJs的文档生成器AntdSite(Ant Design Of Site) 是一个基于Ant Design，由GatsbyJs驱动的一个网站生成器 (你可以完全不会这两项技术，只需要会 markdown 的基础知识，然后简单配置，就能搭建一个网站。当然，如果你会这两项技术那…
用纯 JavaScript 撸一个 MVC 程序我想用 model-view-controller 架构模式在纯 JavaScript 中写一个简单的程序，于是我这样做了。希望它可以帮你理解 MVC，因为当你刚开始接触它时，它是一个难以理解的概念。
《页面可视化搭建工具技术要点》页面可视化搭建工具, 是互联网公司中常见的运营工具, 实现了运营人员快速生成和发布页面, 提升页面上线效率; 且无需开发人员介入, 节省开发人力。（by 陈韩杰）
基于golang的koa: 一个基于中间件的web框架goa koajs 相信绝大部分使用nodejs的开发者都知道 koa ,甚至每天都在跟koa打交道。 goa 最近因工作需要从nodejs转到go，因此开发了一个koa for golang的web框架–goa。几乎一样的语法，一样基于中间件。 github地址： goa demo: package main import ( "fmt" "time" "github…
玩转webpack之loader开发前言 webpack提倡一切皆模块，所有类型的文件都可以经过文件加载器处理变成我们可加载的模块，那么这个文件加载器便是loader。那么我们如何开发一个webpack loader呢，让我们一起探索探索吧~ 一、loader执行顺序在开发loader之前，我们先了解一下webpack loader的执行顺序。 webpack是支持loader的链式调用的，即…
Fastjson 安全漏洞原理简析近期爆出的fastjson低版本（<=1.2.47）的安全漏洞，在修复上线之后简单的对其原理做下分析。开篇前先说下这次漏洞的修复方案跟测试相关的内容： 1. 方案一：升级 fastjson 的版本，最新版本是1.2.582. 方案二：使用其它序列化技术如： fastxml jackson，gson，时间成本较大，建议先修复问题，后续作为…