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

Sorry，会JS真的了不起真的可以为所欲为；前端战五渣学JavaScript——防抖、节流和rAF；利用nodejs搭建 https 代理服务器并实现中间人攻击；nextTick 在 vue 2.5 和 vue 2.6 之间有什么不同；没有废话的vue高级进阶( 二 ) 8种组件通信详解；【进阶 6-1 期】JavaScript 高阶函数浅析；用最少的代码手工实现一个Promise，5分钟看懂；简单理解JavaScript原型链

Sorry，会JS真的了不起真的可以为所欲为相信每一个想要学习前端的人对于前端三剑客html+css+js都不会陌生，这些可以说是一个前端的标配，而在前端的世界里，没有什么是JavaScript实现不了的，你真的了解js吗？一个优秀的前端怎么能够不会JS？为了让大家在学习JS的路上少走弯路我特意给大家准备了价值 3880元的高端课程大礼包。 1、html+css…
前端战五渣学JavaScript——防抖、节流和rAF 看了《JavaScript高级程序设计》和网上的一些博客，感觉对函数节流和函数防抖的概念是反的，以下我写的关于防抖和节流的概念取决于多数人的概念吧，并且基于伦敦前端工程师David Corbacho的客座文章。文章写的很好，并且有对应的代码可以操作，更容易理解。其实我觉得叫什么不重要，这个方法叫节流还是这个方法叫防抖，…
利用nodejs搭建 https 代理服务器并实现中间人攻击虽然提到了中间人攻击，但这不是一篇安全类文章，要通过中间人修改https内容，必须客户端信任中间人提供的证书。我做这么一个工作，最原始的需求，是为了解决公司内网环境下 npm 包安装的问题，简单点讲，就是切换仓库和依赖镜像源。常用的 cnpm 也提供镜像功能，也能解决包依赖的硬编码地址问题，但是不支持 lockfil…
nextTick 在 vue 2.5 和 vue 2.6 之间有什么不同我们知道对于 Vue 来说，从数据变化到执行 DOM 更新，这个过程是异步的，发生在下一个 tick 里。它会创建一个更新队列 queue ，队列中维护着各个属性的 watcher ，在需要时执行、更新它们。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 Vue.nextTick() …
没有废话的vue高级进阶( 二 ) 8种组件通信详解 vue组件通信的重要性无需多言。。。但是你肯定没有全部掌握，所以这第二篇文章应运而生 props和$emit props父传子，$emit子传父，看下边代码，清澈的像少女的眼眸。。。emmm Vue.component(‘child’,{ data(){ return { mymessage:this.message } }, …
【进阶 6-1 期】JavaScript 高阶函数浅析戳蓝字「高级前端进阶」关注我们哦！本期开始介绍 JavaScript 中的高阶函数，在 JavaScript 中，函数是一种特殊类型的对象，它们是 Function objects。那什么是高阶函数呢？本节将通过高阶函数的定义来展开介绍。高阶函数高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足下…
用最少的代码手工实现一个Promise，5分钟看懂 Promise 采用面向对象的方式封装了回调函数，可以将回调金字塔改为平行的链式写法，优雅的解决了回调地狱,ES7带来了异步的终级解决方案async/await，可以用写同步代码的方式编写异步代码，而Promise正是async/await的基石。 Promise 是一种设计模式，也是规范，历史上曾经出现过Promise A/Promise A+/Promise B/Promis…
简单理解JavaScript原型链什么是原型 ? 我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象，这个对象就是我们常说的原型对象，每一个对象都会从原型“继承”属性和方法。什么是原型链 ? 一个由有限个原型对象组成的用来实现继承和共享属性的对象链。打个通俗的比方，可以把原型链理解成一个家族…
Promise 源码解析写promise的时候，发现自己应用了树，链表，前度遍历等方法，觉得对于部分想了解promise机制，并且加深数据结构学习的同学有些许帮助，决定写一篇文章分享出来。不过文笔实在堪忧，没有耐心看下去的同学，可以直接看源码。源码地址 . promise的状态是什么时候变化的 ? 1:通过new Promise()生成的promise的状态变化…
前端Vue：函数式组件 { functional: true, // Props 是可选的 props: { // … }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // … } } 复制代码组件需要的一切都是通过 context 参数传递，它是一个包含如下字段的对象： props: 提供所有prop的对…
Vue奇淫技巧1、转发请求config — index.js — module.exports — dev — proxyTable
12个提升你javascript能力的概念 javascript 是一门复杂的语言。如果你是一名 javascript 开发者，理解它的一些基础概念是很重要的。本文选取了 12 个 JS 开发者应该掌握的概念，但不代表 JS 开发者需要了解的全部内容。注意：我会在 github 仓库 JS Tips & Tidbits 上持续更新这个列表，如果有兴趣欢迎 star。 1. 值 VS 引用理解 jav…
vue权限问题解决方案最近一直在忙着一个用vue来做的权限管理的项目，其实在此之前，我也研究过vue的权限如何实现，并且也为之写过一篇博客，但当真正应用在项目中的时候，还是发现了许多问题，所以此篇也会就着我在项目中遇到的一些问题，拿出来和大家分享一下，当然示例代码还是我的github仓库中的 ant-design-vue-ms 。权限问题解决思…
js实现继承的方法以及优缺点 ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针 …
原生JavaScript实现造日历轮子在日常开发中，大多数都是在和框架打交道，久而久之便遗忘了原生JS的感觉，个人感觉中原生JS基础还是很重要的，所以最近就利用了空余时间造一个轮子出来，虽然以我的水平造出来的轮子质量还是不太可靠的，但是我觉得用来练练手还是不错的，哈哈！！ So, Let’s begin! 本人博客： http://39.96.59.11/#/index.html …
基于 WebGL 的 HTML5 3D SCADA 主站系统这个例子的初衷是模拟服务器与客户端的通信，我把整个需求简化变成了今天的这个例子。3D 的模拟一般需要鹰眼来辅助的，这样找产品以及整个空间的概括会比较明确，在这个例子中我也加了，这篇文章算是我对这次项目的一个总结吧。例子链接： www.hightopo.com/demo/3DEdge… 本文动图：代码实现进…
前端模拟用户的复制操作用户在浏览网页的过程中，执行复制操作的场景是非常多的，例如：复制链接地址、复制分享文案等等。而前端通过模拟用户的复制操作，可以减少操作的步骤，进而优化用户体验。复制操作主要分为以下两部分：选中文本：对应用户通过鼠标或者触屏选中文本的操作。操作系统剪贴板：对应用户按下 Ctrl（comma…
手把手带你使用 typescript 实现一个 axios 库（一）注：本教程基于慕课网黄大神的课程进行的整理源码地址前言本人是个工作一年多的前端小菜鸟，热爱写代码，喜欢分享。近期在学习黄大神的课程，就想着写博客来记录一下，一方面加深自己的理解，一方面分享出来给需要的人需求分析我们要做的是用 typescript 来重构 axios，so 你需要先熟悉axios…
《分享 8 个有趣且实用的 API》在日常开发中总是和各种 API 打交道，我们名为前端工程师实为 API 调用工程师。这篇文章我就分享 8 个有趣的 API，你若通过阅读这篇文章对前端增加一点点的乐趣，对我来说也是一种鼓励。（by 小生方勤）
双向通信之websocket 定义一个API,用以在网页浏览器和服务器之间建立socket连接,这个连接是持久的,两边可以在任意时间开始发送数据 HTML5开始提供的一种浏览器和服务器之间进行全双工通讯的网络技术属于应用层协议,基于TCP,并复用http的握手通信优点支持双向通信,实时性强更好的二进制支持 …
babel-runtime和babel-polyfill的介绍和使用 Babel默认只转换新的JavaScript 语法，而不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。如果想使用这些新的对象和方法，则需要为当前环境提供一个polyfill。 babel-polyfill 目前最常…
JS 下载/导出 csv、excel、txt 、img等文件的方法总结会打开一个新窗口，开始下载后会自动关闭新窗口。Safair 下载后没有关闭新窗口。 Chrome、IE、Safair支持，貌似火狐不支持 1.2 window.location=url 在当前窗口下载 Chrome、Safair支持 1.3 iframe function downloadByIframe (url) { try { const iframe = document.createEleme…
前端工程化思考与实践随着业务不断发展，产品规模不断壮大。越来越多应用建立起立，业务逻辑各有不同且日趋复杂，团队人员越发庞大，代码维护成本越来越高。不断实践并不断思考，前端开发其实就是要推动前端工程化。日常开发中，我们为什么需要前端工程化？ webpack、npm、gulp等它们有什么关系？有多种构建工具，比如np…
CSS 搞怪的 text-decoration今天在改一个项目的时候却遇到了一个莫名其妙的属性：text-decoration，这个属性，其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了，通常会用在移除超链接的底线、或一些特殊强调的效果里头，但是这…
第五课时: Vuex状态管理,state&getter然后在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:
JS中的偏函数和柯里化
手写一个简易的Webpack 鲁迅说: 当我们会用一样东西的时候，就要适当地去了解一下这个东西是怎么运转的。一. 什么是Webpack webpack的介绍二. 写一个简单的Webpack 1. 看一下Webpack的流程图当然我不可能实现全部功能, 因为能力有限, 我只挑几个重要的实现 2. 准备工作创建两个项目, 一个为项目 juejin-…
ES6—箭头函数（5）1.传统的javascript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function () {},这至少会出现两个问题，ES6箭头函数都圆满解决了它，
快速上手BootstrapVueVue.js 是一个流行的 JavaScript 库，用于在短时间内开发原型。这包括用户界面、前端应用、静态网页和本机移动应用。它以易用的语法和简单的数据绑定功能而闻名。
Vue-router基础篇 vue-router是我们在使用vue的过程之中常常会使用路由导航工具，由vue官方提供给我们的。下面就让我们在项目之中来进行学习和了解。创建项目：通过使用vue ui我们可以很轻松的对项目进行创建，这是vue在3.x版本之后为我们提供的一套便捷的工具。选择依赖的时候记得勾选vue-router就好了，vue脚手架会为我们自动的为…
使用这些 CSS 属性选择器来提高前端开发效率属性选择器非常神奇。它们可以使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中，我们将讨论它们是如何运行的…
CSS团队协作规范用户可以自行设定自己的浏览器，例如Android手机可以设定显示字体大小，写死的高度会让字体相互重叠。
《页面可视化搭建工具技术要点》页面可视化搭建工具, 是互联网公司中常见的运营工具, 实现了运营人员快速生成和发布页面, 提升页面上线效率; 且无需开发人员介入, 节省开发人力。（by 陈韩杰）
Angular学习资料Angular是一款面向企业级应用开发的前端框架，掌握好Angular相关技术，有助于我们提升开发效率，编写高质量的前端代码。
函数式的ReactReact 是现在最流行的 JavaScript 库之一。使用 React 可以非常轻松地创建 Web 用户交互界面。它的成功有很多因素，但也许其中一个因素是清晰有效的编程方法。
"" 转 Int，{} 转 List，还有什么奇葩的 JSON 要容错？一. 序前几天写了一篇，关于利用 GSON 在 JSON 序列化和反序列化之间，数据容错的文章。最简单的利用@SerializedName注解来配置多个不同 JSON Key 值，或者再使用@Expose来配置一些例外的情况。更复杂一些的数据，可以使用 TypeAdapter 来解决，TypeAdapter 可以说是一颗 GSON 解析 JSON 的银弹，所有复杂数…
vue-cli@3.0 使用及配置说明使用vue-cli3已经有相当一段时间了，一直没怎么去注意其中的配置，所以趁着这段时间总结下应用过程中的一些经验，本文是从安装到开发使用的一个过程讲解，也可以说是新手向的文章，文字有点多，请耐心观看。（一）安装： 1、下载安装node: 登陆node官网并选择自己合适的node版本进行安装； 2、安装vue-cli脚手…