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

用vscode开发vue应用；面试官：自己搭建过vue开发环境吗？；JavaScript 面试知识点合集；2919面试 JS十大排序算法与14种去重算法；ES6之promise原理；一个无名前端的10年前端路；前端美术课；Vue-CLI and Leaflet（2）：地图基本操作（放大，缩小，平移，定位等）

用vscode开发vue应用现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一个前端工程师，单引号双引号乱用，一段有分号一段没有分号，有的地方有逗号有的地方没有逗号，空格回车都对不齐，…
面试官：自己搭建过vue开发环境吗？前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli 脚手架生成的项目架构，然后 npm run install 安装依赖， npm run serve 启动项目然后就开始写业务代码了。但是对项目里的 webpack 封装和配置了解的不清楚，容易导致出问题不知如何解决，…
JavaScript 面试知识点合集 Why put the tag in the last of HTML file? Putting the script tag in the last can reduce the delay time, users won’t wait a long time to open the webpage. Because the render direction is from top to bottom. How many data types does JavaScript have? Js have 7 data type in total, they are 6 pr…
2919面试 JS十大排序算法与14种去重算法第一部分：数组排序图片名词解释： n: 数据规模 k:“桶”的个数 In-place: 占用常数内存，不占用额外内存 Out-place: 占用额外内存 1. sort排序法（1）简单数组的简单排序 var arrSimple=new Array(1,8,7,6); arrSimple.sort(); console.log(arrSimple.join()) ;复制代码（2）简单数组的自定…
ES6之promise原理 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数更强大，避免了层层回调。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，现在原生提供Promise对象！ Promise使用： // … some code const promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolv…
一个无名前端的10年前端路 “Know your strengths, use them wisely and one man can be worth ten thousand.” – Little Finger “知道你的长处，并善加利用，一人就可当万人。”——小指头也许是自己的关注点变了，也许是跟自己年纪相仿的同行都成了行业大牛，最近时常看到一些前端大佬的总结分享，例如《工作10年谈谈XXX》、《在阿里做了五年技…
前端美术课【班长】：起立！【同学】：老师好！【老师】：大家好，我是新来的前端美术老师，codexu！复制代码同学们应该都学习过或听说过 canvas ，这都不重要，你们以为我要教你们 canvas 的 api 吗？不，这太蠢了，请出今天主角二维绘图引擎 —— ZRender ，如果你听说过大名鼎鼎的 ECharts ，我们今天说的 ZRender 就…
Vue-CLI and Leaflet（2）：地图基本操作（放大，缩小，平移，定位等）接着上一篇文章。地图加载成功之后，接下来要开始对对地图的常见功能的实现，一个地图的基本功能包括: 地图显示，平移，放大，缩小，定位等功能。二、实现思路 1）平移通常 WebGIS 中地图平移是最为基本且常用的功能，地图会默认开启平移功能。通常情况下都不需要开发者自己去实现平移…
【前端性能优化】vue性能优化一、template v-show，v-if 用哪个？第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if ，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show ，不频繁切换的使用 v-if ，这里要说的优化点在于减少页面中 dom 总数，我比较倾向于使用 v-…
2019 JavaScript面试题详解（基础+进阶）这篇文章我是以一本书的形式讲述给朋友们的，通篇文章采用叙事的手法进行书写，同时将知识点涉及到的面试题呈现给大家；本篇内容包括： JS 基础一、二，ES6，JS进阶，异步编程等等，望大家批评指正。 JS 基础知识点及常考面试题（一） JS 对于每位前端开发都是必备技能，在小册中我们也会有多个章节去讲述这部分的…
Git工作流规范 Beta正确的 Git workflow 规范，可以适当的减少杂乱提交，形成清晰美观的提交记录树。并方便对于每次新功能的Code Review。
前端路由的原理和实现现在基本都是单页面应用，现在单页面应用能够模拟多页面应用的效果，归功于其前端路由机制。现在前端路由有两种形式： Hash模式如：xxx.xx.com/#/hash，这种方式可以实现刷新跳转，不需要后端进行配合，主要是得益于haschange事件，当锚点哈希改变时，就会调用haschange函数， haschange模拟实现 (function(…
JS中的null和undefined,undefined为啥用void 0代替? 某天,在看某位同学的js代码,代码中发现了一个奇怪的东西 void 0 ,虽然第一眼看不懂这是什么东西,但是根据上下文,这里应该是想判断是否等于undefined,为什么要这样写的,有什么渊源吗?顺便就把undefined和null都拿出来复习了一下. 介绍 undefined和null是js中类型七种数据类型,这两种数据的区别是 und…
关于Vue.use()详解相信很多人在用Vue使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？答案因为 axios 没有 install。什么意思呢？接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件，看完之后…
浅谈JS原型 JS原型学习笔记，如有错误，还请留言~~ 全局对象window 什么是原型 JS中一切皆为对象？全局对象window 在谈window之前，试想一个简单的问题，打开浏览器在控制台输入 console.log("Hello"); 并按下回车键，我们理所应当看到了控制台给我们返回的结果 Hello ,那么， console.log() 这个方…
令最新JS-XLSX支持样式的改造方法背景最近五一小长假，统一处理下之前开源的 Layui导出插件 lay-excel 反馈的部分问题，这个插件核心使用的是经过改造的 protobi/js-xlsx，支持设置样式但是不支持诸如导出文件压缩、边距设置等功能，还存在很多BUG，效率也不高。为解决这些问题，博主开始着手改造最新 JS-XLSX 让其支持样式设置，断点调试再…
关于JS引擎优化的理解之前在网上断续地了解过JS引擎对JS源代码的优化过程，但都不是特别明白，最近阅读Mathias Bynens（V8作者之一）的关于JS引擎的优化原理的博文后觉得相对来说是讲得最明白易懂的，让我用最简单的方式对这个问题有了自己的理解。这篇笔记是我对这个问题的个人理解的简单总结。原文已经写得足够明白足够好了，我是希望…
vue-router路由基础效果类似掘金导航, 导航切换 1.1 引入路由文件 <script src="./vue-router.js"></script> 复制代码 1.2 准备路由需要的组件 var index = Vue.component(‘index’,{ template:'<div>首页</div>’ }) var productType = Vue.component(‘product…
手摸手教你封装跨项目复用的 Vue 组件在前端项目的开发中，往往会根据业务需求，沉淀出一些项目内的UI组件/功能模块（以下通称组件）等；这些组件初期只在同一个项目中被维护，并被该项目中的不同页面或模块复用，此时的组件逐步被完善，是一个只聚焦于功能和健壮性的成长期。随着业务的发展，原来的项目可能不得不产生裂变，变成几个相似但各有不同…
3分钟了解vue数据劫持的原理目的: 了解Object.defineProperty如何实现数据劫持阅读时间: 3 分钟大致原理是这样的：定义一个监听函数，对对象的每一个属性进行监听通过Object.defineProperty对监听的每一个属性设置get 和 set 方法。对对象实行监听对对象内嵌对象进行处理对数组对象进行处理 1. 先定义一个…
JavaScript 太糟糕，JVM 有妙招虽然 JavaScript 凭借其简洁性、交互性等优势横扫了各大编程语言榜单，但是一直以来， JavaScript 应用程序的工具链极其复杂，引发不少开发者吐槽，在此，我们是否有更好的解决方案将其替代？接下来，本文中将分享几个 JVM 的替代方案，希望对大家有所裨益。作者 | Renato Athaydes 译者 | …
用 TypeScript 开发 Node.js 程序当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。
Promise实现的基本原理（二）距离我上次写的那篇 Promise实现的基本原理（一）有十几天了（太懒了），这篇我想写Promise是如何实现串联调用then，解决回调地狱的。虽然说《深入理解ES6》这本书把Promise用法讲得很详细，但是自己理解起来还是有很多疑问（我好想上一篇也是这么说的）。参考链接： JavaScript Promises … In Wick…
JS数据类型转换与内存模型内存分为RAM和ROM。RAM是随机存取存储器，用户可读可写，计算机断电后，存储在RAM的信息将被删除。RAM具体分为SRAM(Static RAM)和DRAM(Dynamic RAM)。我们现在所说的内存一般指的都是DRAM，SRAM速度更快，但是容量相对于其他类型内存而言也会小一些，并且价格也较为昂贵。一般SRAM作为CPU和DRAM之间的缓存(cache)。ROM…
【Javascript】深入理解this作用域问题《javascript高级程序设计》中有说到: this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象调用时，this等于那个对象。不过，匿名函数具有全局性，因此this对象同常指向window 针对于匿名函数this具有全局性的观点仍是有争议的，可参考 www.zhihu.com/question/…
重学 html の meta 标签网页元数据，常用于定义网页的编码、说明、关键字、修改日期及其他信息。这些数据服务于浏览器、搜索引擎等。
#前端技术#【可能是最全的前端动效库汇总】详见：开源前端动效库汇总，或许有你喜欢的。（作者：宫秋）收集日期为2019-02-28，“★”代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。文件大小：55.2 kB. B
LeetCode 之 JavaScript 解答第98题 —— 验证二叉搜索树 Time：2019/4/24 Title: Vaildata Binary Search Tree Difficulty: Medium Author: 小鹿题目：Vaildata Binary Search Tree（验证二叉搜索树） Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as follows: The left subtree of a no…
JavaScript数据结构之-队列队列遵循 FIFO，先进先出原则的一组有序集合。队列在尾部添加元素，在顶部删除元素。在现实中最常见的队列就是排队。先排队的先服务。（请大家文明排队，不要插队。）创建队列实现包含以下方法的Queue类 enqueue(element(s)):向队列尾部添加一个（或多个）元素。 dequeue():移…
微服务调用为啥用 RPC 框架，http 不更简单吗？背景在一次的面试交谈中，聊到业务实现的技术架构。不管系统大小，一般都是微服务的架构，所以就产生了一个问题，为什么服务之间调用，选择用RPC，http 不也能实现服务之间的通信吗？怎么不用呢？或者 RPC 比 http 好在哪里？什么是RPC 提到RPC（Remote Procedure Call），就躲不开提到分布…
JS不再百度系列-字符串的基本操作这篇记录的是我常用的字符串操作。本文全部内容来自 MDN。完整的可以看这个 MDN JS String 注意： js的所有字符串方法均不会修改原字符串 String.prototype和Array.prototype中都有的方法 concat 返回值：新的拼接好的字符串 eg： a = "a" a.concat( )…
基于 HTML5 结合工业互联网的智能飞机控制从互联网+的概念一出来，就瞬间吸引了各行各业的能人志士，想要在这个领域分上一杯羹。现在传统工业生产行业运用互联网+的概念偏多，但是在大众创业万众创新的背景下，“互联网＋”涌出了层出不穷的“玩法”，智慧城市、隧道交通、智慧园区、工业生产，甚至是这次要说的智能飞机！异地协同制造的范围，目前多局限于主机制造…
Javascript 基础之原型和原型链每个函数都有 prototype 对象属性，除了 Function.prototype.bind() ，它指向原型。每个对象都有 __proto__ 对象，它指向创建这个对象的构造函数的原型。其实这个属性指向了 ] ，但是 ] 是内部属性，我们访问不到，所以用 __proto__ 来访问。对象可以通过 __proto__ 来寻找部署…
Node.js 会永远只是慢的 Golang 吗？ Node.js 会永远只是慢的 Golang 吗？这篇文章展示的 Node.js 新扩展将颠覆这种情况你似乎总是不可避免地听到下一个据称更快的所谓 Node.js “Web 框架”。是的，我们都知道 Express 很慢，但是存在另一个 “Web 框架”能真正提升 I/O 性能吗？答案是否定的，除了避免 Express 的运行开销外，这些新框架在 I/O 性能上…
基于TensorFlow.js的JavaScript机器学习虽然python或r编程语言有一个相对容易的学习曲线，但是Web开发人员更喜欢在他们舒适的javascript区域内做事情。目前来看，node.js已经开始向每个领域应用javascript，在这一大趋势下我们需要理解并使用JS进行机器…
JS常用正则表达式备忘录正则表达式或“regex”用于匹配字符串的各个部分下面是我创建正则表达式的备忘单。匹配正则使用 .test() 方法 {代码…} 匹配多个模式使用操作符号 | {代码…} 忽略大小写使用i标志表示忽略大小写 {代码…} …
JavaScript中的async/await 异步的 JavaScript 从未如何简单！过去段时间，我们使用回调。然后，我们使用 promises 。现在，我们有了异步功能函数。异步函数能够使得（我们）编写异步JavaScript更加容易，但是，它自带一套陷阱，对初学者很不友好。在这个由两部分组成的文章中，我想分享下你需要了解的有关异步函数的内容。【PS:另一部分暂…
Javascript 中继承汇总在阅读《Javascript高级程序设计》后的一些感想，顺便记录自己的学习，也希望能帮助到人，这就是我的初衷了。如文中有任何问题，也希望大家指正，以免误人子弟。关于js的继承，我感觉更多的是一种探索得到的结果。因为像Java，C++ 等都是有明确的 class 定义类。但是在 Javascript 中的类和函数是无法区分的，我们似…
vue中利用simplemde实现markdown编辑器（增加图片上传功能）最近在搭个人博客网站，需要一个markdown编辑器，来进行博客的编写看了网上的教程，决定使用simplemde以为可以直接能拿来用的不过实际运用的时候发现还是有要完善的地方比如令人头疼的图片上传
从零开始构建自己的vue组件库之——button篇= =首先目前vue.js成熟的框架已有很多，各种框架之间的特性、风格、完善度也参差不齐，有时候做项目选框架就成了一个难以抉择的问题，因为一个项目要经过很多版本的迭代、很多需求的变更和增加，有时候甚至是无限…
从零实现一个 Webpack Plugin Plugins expose the full potential of the webpack engine to third-party developers. ———– Webpack 相比于 loaders，plugin 更加的灵活，因为它能够接触到 webpack 编译器和编译核心。这就使得 plugin 可以通过一些 hook 函数来拦截 webpack 的执行，甚至你可以运行一个子编译器和 loader 串联，像 Min…
理解JavaScript概念系列–异步任务什么是JavaScript异步？为什么要实现JavaScript异步？怎么实现JavaScript异步？ JavaScript异步原理是什么？最近权利的游戏第八季已经开播两集了，权游迷们看完第二集的时候不知道有没有这样一种体会，想象一下如果你是剧中的一位人物，在与异鬼大军大战前夜你会想什么或者你会做些什么事？不得不说…
我的打包我做主：浅析前端构建作者介绍：Marsboy，现就职于腾讯游戏增值服务部，负责AMS游戏营销平台的前端开发工作。 1 webpack 1.1 webpack是啥 webpack是一个工具，是一个致力于做前端构建的工具。简单的理解：webpack就是一个模块打包机器，它可以将前端的js代码(不管ES6/ES7)、引用的css资源、图片资源、字体资源等各种资源进行打包整…
【轻知识】Go入门学习整理——第四节web开发，http请求处理流程、一个简单的名单录入先从 hello world开始关于web的开发知识，其实绕不过astaxie（beego作者）写的《build-web-application-with-golang》。我开发公司的beego项目之前看了一遍，现在再次拜读。用http服务要引入net/http包。我们看下那个启动http服务的方法是哪个。 func ListenAndServe(addr string, handler Handler) erro…
数据可视化的十种优秀JavaScript图表库【51CTO.com快译】如今，随着我们身体各类数据的指数级增长，人们需要接受的信息量越来越大，系统必须处理的难度也是越来越高。而这些正是我们需要通过交互式图表和仪表盘，来实现数据可视化的根本原因。在大幅节省用户的时间和精力的同时，此类可视化方式不但需要能够对数据进行分析与解读，而且应当能够基于海量数据做…
JavaScript之常见算法排序冒泡排序冒泡排序即从头到尾依次比较相邻两数的大小，不符合顺序则交换位置，一直循环直到排序完成；但方便程序编写的做法是，从第一个到最后一个数，每个数分别与排在后面每个数进行比较和交换位置； // 输入值 arr 为需要排序的数组 // 后面的代码类似 function bubbleSort(arr) { for (let i = 0; i <…
Vue+Express实现登录,注销对Vue全家桶有基本的认知. 用有node环境了解express 一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口前端向后端敏感接口发送ajax 后端进行session验证,并返回信息前端axios拦截返回信息,根据返回信息进行操作进行页面切换页面切换,触发vue-rout…
JavaScript 简史：从网景到框架 | 技术头条【CSDN 编者按】从上世纪 90 年代中期发行以来，JavaScript 就已经成为最流行的 Web 开发语言之一了。尽管 JavaScript 最初只是一个浏览器脚本语言，但是近几年，我们已经能够明显看到它在不断地演变：在桌面端、移动设备和服务端 Web App 领域都有所发展。 “任何能够用 JavaScript 实现的应用系统，最终都必将用 Java…
浏览器中的JavaScript：文档对象模型与 DOM 操作JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言，它对于网页操作非常有用。在本文中，我们将看到可以用哪些手段来修改 HTML 文档和交互。
基于虚拟DOM(Snabbdom)的迷你React原文链接原文写于 2015-07-31，虽然时间比较久远，但是对于我们理解虚拟 DOM 和 view 层之间的关系还是有很积极的作用的。
关于CSS中的背景属性background简述像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。
前端开发中遇到的一些问题—-持续更新解决：全局添加样式-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
了解 JavaScript 函数式编程 – 柯里化 curry 就是咖喱一样美好的工具性的拌料让我们的函数更加的易用耦合性低。 curry 的概念很简单：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。你可以一次性地调用 curry 函数，也可以每次只传一个参数分多次调用。 var add = function(x) { return function(y) { ret…
前端战五渣学JavaScript——前端数据存储我们都知道，作为一名前端开发，或多或少在开发的过程中因为各种各样的需求，需要在前端存储一些数据，比如登录验证，可能会用到cookie，或者localStorage存储token，然后请求手动带上。所以我们很需要搞清楚前端存储有哪些方法，以及我们该如何去使用这些我们已经司空见惯的单词（Cookie、sessionStorage和localStorage…
V8 团队给 JavaScript 开发者关于代码缓存的建议代码缓存（也被称为字节码缓存）是浏览器的一个重要优化。它通过缓存解析+编译后的结果来提升高频访问网站的启动速度。大多主流浏览器都实现了代码缓存，Chrome 也不例外。事实上，关于 Chrome 和 V8 缓存编译后代码的实现，之前我们已经写文章也做过演讲。在这篇文章中，我们将为那些想要更好的利用代码缓存来提…
详解 HTTP 与 TCP 中 Keep-Alive 机制的区别点击上方”田守枝的技术博客”，关注我 keepalive已经不是什么新鲜的概念了，HTTP协议中有keep-alive的概念，TCP协议中也有keep-alive的概念。二者的作用是不同的。本文将详细的介绍http中的keep-alive，介绍tomcat在server端是如何对keep-alive进行处理，以及jdk对http协议中keep-alive的支持。同时会详细介绍tc…
每日一题(开开森森学前端之常见笔试题) 把 1 到 1000 所有数字拆成单个的,所以用字符数组接收拿字符数组所有元素和 9 比较相等自增 1.获取 1 到 1000 的所有数字 2.把获取的所有数据转成字符串 3.定义计数器 count=0 ; 把使用indexOf去判断字符串里是否含有9，如果包含就自增 count 计数器 5.打印最终 co…
JS中this的绑定规则我们明白每个函数的 this 是在调用时被绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。在理解 this 的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就…
每日一题(开开森森学前端之变量与函数) 大家好，今天我们来看一下js中的变量与函数提升相关知识点为什么有变量提升 js和其他语言一样，都要经历编译和执行阶段。而js在编译阶段的时候，会搜集所有的变量声明并且提前声明变量，而不会改变其他语句的顺序，因此，在编译阶段的时候，第一步就已经执行了，而第二步则是在执行阶段执行到该语句的时候才执行。 …
webpack简介与常用配置之插件写在前面，近期有想法整理一下前端工程化相关的知识，就先从打包工具开始吧；今天带来的是webpack相关的一些常用插件配置，后期有时间话，也会出一些比较轻量级的打包工具的配置 gulp, rullup…相对于webpack学…