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

玩转 JavaScript 面试：何为闭包？；vuecli3 vant rem 移动端框架方案；初学NodeJS（三）；JS 数据类型，数据类型的判断，类型转换；重学Es6 Promise；react + koa2打造点餐系统；webpack 四个核心概念之Entry；sortable.js——Vue 数据更新问题

玩转 JavaScript 面试：何为闭包？原文地址 Medium – Master the JavaScript Interview: What is a Closure? 坦白的讲，不掌握闭包这个知识点的话你是不会在 JavaScript 这条路上走太远的。你不仅要掌握闭包的机制是什么，还要知道闭包的重要性在哪，同时能轻松的写出几个可行的闭包用例。闭包在 JavaScript 中经常用来进行对象数据私有化，在事件…
vuecli3 vant rem 移动端框架方案描述基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架帮你做好的配置有 vuecli3.0 多环境开发 axios封装 rem适配方案生产环境cdn优化首屏加速 babel低版本浏览器兼容环境发布脚本 … 可以上手直接写代码多环境开发之前写过一个多…
初学NodeJS（三）在nodeJS中有模块的概念，类似于C语言中的头文件，都是函数库。灵活运用模块可以非常便捷的操作后端操作前端。而在nodeJS中引入模块要使用require();这里举例几个常用的模块。
JS 数据类型，数据类型的判断，类型转换参考文章： js 深拷贝 vs 浅拷贝 JavaScript 数据类型和数据结构 — MDN InterviewMap -yck 数据类型 JS中分为七种数据类型，七种内置类型又分为两大类型： 6种基本类型和 Object 1.基本类型基本类型主要是： Undefined 、 Boolean 、 String 、 Number 、 Null 、 Symbol (ECMAScri…
重学Es6 Promise Promise 是异步编程的一种解决方案，比传统的回调更加合理而其人强大。 Promise，简单来说，是一个容器，里面存放着某个未来才会结束的事件的结果。Promise是一个对象，用来获取异步操作的消息。 Promise有以下两个特点： 1 对象状态不受外界影响。有三种状态：Pending（进行中），Fulfilled（已成功），Rejected（…
react + koa2打造点餐系统第一次写文章，用作个人记录和分享交流，不好之处还请谅解。因本人喜爱吃都城(健康)，在公司叫的外卖都是都城，然后越来越多人跟着我点，而且每次都是我去统计人数，每个人点餐详情，我都是通过企业微信最后汇总…
webpack 四个核心概念之Entry因为webpack是基于nodejs的一款工具，所以在学习过程中涉及到的nodejs知识也会进行解释进行发散性拓展。webpack中文文档
sortable.js——Vue 数据更新问题在一个需求中，我需要实现一个拖拽的功能，其中我使用了 sortable.js 去实现，但我发现我拖拽之后的数据并没有渲染在页面上。简而言之，举个例子，原先的数组是，拖拽之后，变成了，但在视图上并没有显现，这不经让我疑惑不解，开始了以下问题的探索，在此记录一下 Vue 的数组更新问题看到…
用 Vue 开发自己的 Chrome 扩展程序浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。
TypeScript 学习总结基础数据类型（一）写在前面：因为typescript文档个人感觉并不友善(概念过于杂乱，示例代码有错误~)。所以个人学习笔记总结，并不涉及typescript各种历史和一些什么javascript超集啊之类的介绍。想学习typescript的朋友可以快速扫两眼，入个门~ 基础数据类型: 首先typescript的十二种基础数据类型：布尔类型（boolean）数字类型…
vue的事件冒泡先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡，如果属性浏览器原理的同学就知道，页面是由文档流（…
Flutter部件内部状态管理小结（实现Vue的v-model） Table of Contents generated with DocToc Flutter部件内部状态管理 Flutter部件内部状态管理本文是 Flutter 部件内部状态管理的小结，从部件的基础开始，到部件的状态管理，并且在过程中实现一个类似 Vue 的 v-model 的功能。 widget 基础 widget（部件）如 React 里万物皆组件， Jav…
使用CSS创建一个炫酷的球体动画效果我最近看到了一个纯CSS实现的球体动画效果：经过研究上面的效果实现起来大致可以分为五个步骤，下面就来一一介绍。 1.使用Jade和SCSS生成一个圆圈创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade，我…
Clean Code之JavaScript代码示例译者按：简洁的代码可以避免写出过多的BUG。原文: JavaScript Clean Code – Best Practices 译者: Fundebug 本文采用意译，版权归原作者所有引文作为一个开发者，如果你关心代码质量，除了需要认真测试代码能…
跨浏览器的javascript事件和对象的封装将一个函数赋值给一个事件处理程序属性事件流：冒泡阶段使用： 1、为元素增加事件： let btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(this.id); } 复制代码 2、删除事件： let btn = document.getElementById("myBtn"); btn.onclick = null; 复制代码 D…
React 新特性讲解及实例(一)本节主要讲解以下几个新的特性： Context ContextType lazy Suspense 错误边界（Error boundaries） momo 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ Context 定义：Context 提供了一种方式…
vue.js中如何导出Excel表格有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为：
尤雨溪：Vue Function-based API RFC 译注：这是 3.0 最重要的 RFC，因此特意翻译成中文。概要将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。基本例子 import { value, computed, watch, onMounted } from ‘vue’ const App = { template: ` <div> <span>count is {{ count }}</span…
JavaScript中的Number 前言由于 JavaScript 是个动态弱类型语言，入门也比较简单，所以刚开始大家不是那么关心类型的细节。今天这篇文章来说一说 JavaScript 中的 Number 。定点数和浮点数我在原码，反码和补码这篇文章中介绍了关于计算机中如何存储和计算整数。不过我们的现实需求中显然不止又整数，小数的计算可能才是更加…
8 个实用的 JavaScript 技巧每种编程语言都它独特的技巧。其中很多都是为开发人员所熟知的，但其中一些相当的 hackish。在这边篇文章中，我将向你展示一些我觉得有用的技巧。其中一些我在实践中使用过，而另一些则是解决老问题的新方法。Enjoy！ 1. 确保数组的长度不知道你是否遇见过这样的情况，在处理网格结构的时候，如果原始数据每行的长度…
javascript-undefined-description 先看一个例子： var a; console.log(a);//undefined console.log(typeof(a)); //undefined javascript中的数据类型包括 undefined ， null , boolean , number , string , boolean 六种类型(ECMAScript 2015) undefined 小结 undefined 类型的意思是当前对象未定义,适用于下面几种情况变…
【豆瓣评分8.5！世界顶级黑客写的这本Web安全指南一定要看《Web之困：现代Web应用安全指南》】于网络技术日趋成熟，黑客们也将注意力从以往对网络服务器的攻击逐步转移到了对Web应用的攻击。对于web攻击也是非常简单的，随着各大企业对安全的重视，Web安全也就越来越重要了。详见
javascript内存模型下面显示了内存的生命周期，在内存分配阶段js引擎将内存分为栈、堆、池三种结构(严格来说池也属于栈内存,这里为了直观分开写)，还有一个程序运行时需要的内存；在内存使用阶段引擎会将特定结构的数据做一些优化处理；在内存释放回收阶段通过特定的算法高效的进行内存释放。 1.1栈内存栈是一种先进后出的…
nodejs 使用 xlsx 实现导入导出 xlsx工具npm地址： https://www.npmjs.com/package/xlsx 生成excel（导出）将数据导出成excel方法，下面介绍两种方式，一种是将数组数据导出成excel，一种是将json数据导出成excel，都非常简单 const xlsx = require(‘xlsx’); let arrayData = , , , [‘wa…
谈谈JavaScript中的function constructor和prototype的建立在上一篇文章中我们说明了如何通过函数构造式（function constructor）搭配关键字new来建立对象，但其实这样只讲了一半，在这篇我们会补齐另一半，说明function constructor如何用来设定该对象的原型（prototype）。在JavaScript中的函数也是一种对象，其中包含一些属性像是该函数的名称（ Name ）和该函数的内容（…
谈谈Vue/React中的虚拟DOM(vDOM)与Key值在了解虚拟DOM前，先来了解DOM的一个对象属性—— DocumentFragment 。在一次操作中，需要频繁操作DOM时，就可以先将要改变的节点附在 DocumentFragment 上，之后再将该对象渲染到DOM中，改方法只对DOM进行了一次操作，可以显著提高性能。但是该方法只适用于局部操作，而在真实的项目中，需要的不仅仅是 Docume…
手牵手，带你用原生js实现放大镜特效（一）：学习该特效需要掌握client、offset系列的知识，否则会有点混乱，可以看我之前写的文章精讲-offset系列、scroll系列、client系列~ ，再来学习该文章，这样会好很多哦~ 实现原理：首先布局上，很明显要准备两个基本的容器，一个small,一个big,还要准备两张完全相同的图片，但是尺寸不同，每个容器中放入相应大小的…
前端实现axios以表单方式上传文件，优化上传速度最近在开发过程中，遇到的需要是需要上传高清图片，必须原图上传。由于在移动端应用，上传网络问题有很大的坑。当初的方案是直接采用将文件转化为 base64 ，再进行上传，由于文件转化为 base64 后，文件大小会增加30%。又导致上传压力，影响用户体验。最终采取了以 formData 形式进行上传，也就是 File 上传文件。以这种…
开发Vue插件四种方式在日常开发中，可能只需要一两个插件就可以完成对系统开发需要。如果引入整个组件库，最后打包项目体积比较大。例如 element-ui 中的 message 提示组件等。下面会在 vuejs 官网提供的插件建议，根据四种方法开发四类不同的 vuejs 插件插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有…
Vue后台管理系统用户认证封装在使用vue技术栈开发各类管理系统时，经常需要相同的开发目录架设。在日常开发中，整理了一套自己的开发目录。主要包括 vuejs 、 vue-router 、 vuex 、 axios 等常用类库。开发依赖 "vuex": "^3.1.0", "babel-polyfill": "^6.26.0", "element-ui": "…