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

ES6之promise原理；2019 JavaScript面试题详解（基础+进阶）；前端路由的原理和实现；vue-router路由基础；Vue-CLI and Leaflet（2）：地图基本操作（放大，缩小，平移，定位等）；JS中的null和undefined,undefined为啥用void 0代替?；手摸手教你封装跨项目复用的 Vue 组件；vue中利用simplemde实现markdown编辑器（增加图片上传功能）

ES6之promise原理 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数更强大，避免了层层回调。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，现在原生提供Promise对象！ Promise使用： // … some code const promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolv…
2019 JavaScript面试题详解（基础+进阶）这篇文章我是以一本书的形式讲述给朋友们的，通篇文章采用叙事的手法进行书写，同时将知识点涉及到的面试题呈现给大家；本篇内容包括： JS 基础一、二，ES6，JS进阶，异步编程等等，望大家批评指正。 JS 基础知识点及常考面试题（一） JS 对于每位前端开发都是必备技能，在小册中我们也会有多个章节去讲述这部分的…
前端路由的原理和实现现在基本都是单页面应用，现在单页面应用能够模拟多页面应用的效果，归功于其前端路由机制。现在前端路由有两种形式： Hash模式如：xxx.xx.com/#/hash，这种方式可以实现刷新跳转，不需要后端进行配合，主要是得益于haschange事件，当锚点哈希改变时，就会调用haschange函数， haschange模拟实现 (function(…
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-CLI and Leaflet（2）：地图基本操作（放大，缩小，平移，定位等）接着上一篇文章。地图加载成功之后，接下来要开始对对地图的常见功能的实现，一个地图的基本功能包括: 地图显示，平移，放大，缩小，定位等功能。二、实现思路 1）平移通常 WebGIS 中地图平移是最为基本且常用的功能，地图会默认开启平移功能。通常情况下都不需要开发者自己去实现平移…
JS中的null和undefined,undefined为啥用void 0代替? 某天,在看某位同学的js代码,代码中发现了一个奇怪的东西 void 0 ,虽然第一眼看不懂这是什么东西,但是根据上下文,这里应该是想判断是否等于undefined,为什么要这样写的,有什么渊源吗?顺便就把undefined和null都拿出来复习了一下. 介绍 undefined和null是js中类型七种数据类型,这两种数据的区别是 und…
手摸手教你封装跨项目复用的 Vue 组件在前端项目的开发中，往往会根据业务需求，沉淀出一些项目内的UI组件/功能模块（以下通称组件）等；这些组件初期只在同一个项目中被维护，并被该项目中的不同页面或模块复用，此时的组件逐步被完善，是一个只聚焦于功能和健壮性的成长期。随着业务的发展，原来的项目可能不得不产生裂变，变成几个相似但各有不同…
vue中利用simplemde实现markdown编辑器（增加图片上传功能）最近在搭个人博客网站，需要一个markdown编辑器，来进行博客的编写看了网上的教程，决定使用simplemde以为可以直接能拿来用的不过实际运用的时候发现还是有要完善的地方比如令人头疼的图片上传
webpack简介与常用配置之插件写在前面，近期有想法整理一下前端工程化相关的知识，就先从打包工具开始吧；今天带来的是webpack相关的一些常用插件配置，后期有时间话，也会出一些比较轻量级的打包工具的配置 gulp, rullup…相对于webpack学…
理解JavaScript概念系列–异步任务什么是JavaScript异步？为什么要实现JavaScript异步？怎么实现JavaScript异步？ JavaScript异步原理是什么？最近权利的游戏第八季已经开播两集了，权游迷们看完第二集的时候不知道有没有这样一种体会，想象一下如果你是剧中的一位人物，在与异鬼大军大战前夜你会想什么或者你会做些什么事？不得不说…
#前端技术#【可能是最全的前端动效库汇总】详见：开源前端动效库汇总，或许有你喜欢的。（作者：宫秋）收集日期为2019-02-28，“★”代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。文件大小：55.2 kB. B
基于TensorFlow.js的JavaScript机器学习虽然python或r编程语言有一个相对容易的学习曲线，但是Web开发人员更喜欢在他们舒适的javascript区域内做事情。目前来看，node.js已经开始向每个领域应用javascript，在这一大趋势下我们需要理解并使用JS进行机器…
JS中this的绑定规则我们明白每个函数的 this 是在调用时被绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。在理解 this 的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就…
TCP Connection Reuse on HTTP/1.1 and 2.0I saw the introduction of http/2.0 in developers.google.com. However, I feel confused about the request and response multiplexing. So I decided to make a demo or an example for better understanding.
如何管理多个 Github 账号的 ssh key?通常我们有使用 Github、Gitlab，当 Github 或 Gitlab 下有多个账号，你会发现你的 ssh key 不够用了，因为站点会给你个提示：
Angular-多级配置搞事情啦上一篇文章写到： input组件的方式，可以扩展为依靠服务在业务模块中进行配置，以达到每个模块所用的同一个公共组件拥有不同的交互。但经过具体实践发现，在惰性加载模块进行配置是可行的；在急性加载模块配置是会出事的！结合官网的这篇文档可以一窥究竟： Angular – 多级依赖注入器，可以从“元素注入器”读…
vue项目中如何在外部js文件中直接调用vue实例——比如说this一般我们都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue实例），但是在实际开发中，我们往往会引入外部的js文件使用this，这个this就会指向window，并不是我们期待的vue实例，那么就需要…
11个React Native 组件库和 Javascript 数据可视化库超过 10k stars 和 1k fork，NativeBase 是一个广受欢迎的 UI 组件库，它为 React native 提供了几十个跨平台组件。当使用 NativeBase 时，你可以使用任何现成的本地第三方库，并且项目本身围绕着它提供了丰富的…
Angular-3种创建动态内容的方式写在最前，本文提到的“模板”都是ng-template；假设的模态组件也只是实现模态内容；为了缩减文章的篇幅，只保留了重要的部分。完整的例子在线上。在开发过程中，难免会遇到公共组件需要Input模板或input组件的时候，以增加公共组件交互或展示的灵活性。题外话：input组件的方式，可以扩展为依靠服务在业务模块中…
大话 WebSocket 与 “尬聊” 的实现一、聊聊 WebSocket 从HTML5技术流行至今，WebSocket已经有非常广泛的应用：在线游戏，提供实时的操作交互体验社交平台，与好友实时的私信对话新闻动态，获得感兴趣的主题信息推送 … 这些场景，都需…
手写一个webpack插件webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。Tapable暴露出…
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境 gulp + gulp-better-rollup + rollup 构建 ES6 开发环境关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack 、 rollup 和 browserify 三个，Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此，Gulp 构建 ES6 开发环境的方案有很多，例如：webpack-stream、rol…