20190613 前端开发日报

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

  1. 玩转 JavaScript 面试:何为闭包? 原文地址 Medium - Master the JavaScript Interview: What is a Closure? 坦白的讲,不掌握闭包这个知识点的话你是不会在 JavaScript 这条路上走太远的。你不仅要掌握闭包的机制是什么,还要知道闭包的重要性在哪,同时能轻松的写出几个可行的闭包用例。 闭包在 JavaScript 中经常用来进行对象数据私有化,在事件...
  2. vuecli3 vant rem 移动端框架方案 描述 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 帮你做好的配置有 vuecli3.0 多环境开发 axios封装 rem适配方案 生产环境cdn优化首屏加速 babel低版本浏览器兼容 环境发布脚本 ... 可以上手直接写代码 多环境开发 之前写过一个多...
  3. 初学NodeJS(三)在nodeJS中有模块的概念,类似于C语言中的头文件,都是函数库。灵活运用模块可以非常便捷的操作后端操作前端。而在nodeJS中引入模块要使用require();这里举例几个常用的模块。
  4. JS 数据类型,数据类型的判断,类型转换 参考文章: js 深拷贝 vs 浅拷贝 Java​Script 数据类型和数据结构 -- MDN InterviewMap -yck 数据类型 JS中分为七种数据类型,七种内置类型又分为两大类型: 6种基本类型 和 Object 1.基本类型 基本类型主要是: Undefined 、 Boolean 、 String 、 Number 、 Null 、 Symbol (ECMAScri...
  5. 重学Es6 Promise Promise 是异步编程的一种解决方案,比传统的回调更加合理而其人强大。 Promise,简单来说,是一个容器,里面存放着某个未来才会结束的事件的结果。Promise是一个对象,用来获取异步操作的消息。 Promise有以下两个特点: 1 对象状态不受外界影响。 有三种状态:Pending(进行中),Fulfilled(已成功),Rejected(...
  6. react + koa2打造点餐系统第一次写文章,用作个人记录和分享交流,不好之处还请谅解。因本人喜爱吃都城(健康),在公司叫的外卖都是都城,然后越来越多人跟着我点,而且每次都是我去统计人数,每个人点餐详情,我都是通过企业微信最后汇总...
  7. webpack 四个核心概念之Entry因为webpack是基于nodejs的一款工具,所以在学习过程中涉及到的nodejs知识也会进行解释进行发散性拓展。webpack中文文档
  8. sortable.js——Vue 数据更新问题 在一个需求中,我需要实现一个拖拽的功能,其中我使用了 sortable.js 去实现,但我发现我拖拽之后的数据并没有渲染在页面上。 简而言之,举个例子,原先的数组是 ,拖拽之后,变成了 ,但在视图上并没有显现,这不经让我疑惑不解,开始了以下问题的探索,在此记录一下 Vue 的数组更新问题 看到...
  9. 用 Vue 开发自己的 Chrome 扩展程序浏览器扩展程序是可以修改和增强 web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。
  10. TypeScript 学习总结 基础数据类型(一) 写在前面 : 因为typescript文档个人感觉并不友善(概念过于杂乱,示例代码有错误~)。所以个人学习笔记总结,并不涉及typescript各种历史和一些什么javascript超集啊之类的介绍。 想学习typescript的朋友可以快速扫两眼,入个门~ 基础数据类型: 首先typescript的十二种基础数据类型: 布尔类型(boolean) 数字类型...
  11. vue的事件冒泡先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡,如果属性浏览器原理的同学就知道,页面是由文档流(...
  12. Flutter部件内部状态管理小结(实现Vue的v-model) Table of Contents generated with DocToc Flutter部件内部状态管理 Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能。 widget 基础 widget(部件) 如 React 里万物皆组件, Jav...
  13. 使用CSS创建一个炫酷的球体动画效果我最近看到了一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍。 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade,我...
  14. Clean Code之JavaScript代码示例译者按: 简洁的代码可以避免写出过多的BUG。 原文: JavaScript Clean Code - Best Practices 译者: Fundebug 本文采用意译,版权归原作者所有 引文 作为一个开发者,如果你关心代码质量,除了需要认真测试代码能...
  15. 跨浏览器的javascript事件和对象的封装 将一个函数赋值给一个事件处理程序属性 事件流:冒泡阶段 使用: 1、为元素增加事件: let btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(this.id); } 复制代码 2、删除事件: let btn = document.getElementById("myBtn"); btn.onclick = null; 复制代码 D...
  16. React 新特性讲解及实例(一)本节主要讲解以下几个新的特性: Context ContextType lazy Suspense 错误边界(Error boundaries) momo 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! Context 定义:Context 提供了一种方式...
  17. vue.js中如何导出Excel表格有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为:
  18. 尤雨溪: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...
  19. JavaScript中的Number 前言 由于 JavaScript 是个动态弱类型语言,入门也比较简单,所以刚开始大家不是那么关心类型的细节。今天这篇文章来说一说 JavaScript 中的 Number 。 定点数和浮点数 我在原码,反码和补码 这篇文章中介绍了关于计算机中如何存储和计算整数。不过我们的现实需求中显然不止又整数,小数的计算可能才是更加...
  20. 8 个实用的 JavaScript 技巧 每种编程语言都它独特的技巧。其中很多都是为开发人员所熟知的,但其中一些相当的 hackish。在这边篇文章中,我将向你展示一些我觉得有用的技巧。其中一些我在实践中使用过,而另一些则是解决老问题的新方法。Enjoy! 1. 确保数组的长度 不知道你是否遇见过这样的情况,在处理网格结构的时候,如果原始数据每行的长度...
  21. 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 类型的意思是当前对象未定义,适用于下面几种情况 变...
  22. 【豆瓣评分8.5!世界顶级黑客写的这本Web安全指南一定要看《Web之困:现代Web应用安全指南》】于网络技术日趋成熟,黑客们也将注意力从以往对网络服务器的攻击逐步转移到了对Web应用的攻击。对于web攻击也是非常简单的,随着各大企业对安全的重视,Web安全也就越来越重要了。详见

    现代Web应用安全指南》
  23. javascript内存模型 下面显示了内存的生命周期,在内存分配阶段js引擎将内存分为栈、堆、池三种结构(严格来说池也属于栈内存,这里为了直观分开写),还有一个程序运行时需要的内存;在内存使用阶段引擎会将特定结构的数据做一些优化处理;在内存释放回收阶段通过特定的算法高效的进行内存释放。 1.1栈内存 栈是一种先进后出的...
  24. nodejs 使用 xlsx 实现导入导出 xlsx工具npm地址: https://www.npmjs.com/package/xlsx 生成excel(导出) 将数据导出成excel方法,下面介绍两种方式,一种是将数组数据导出成excel,一种是将JSON数据导出成excel,都非常简单 const xlsx = require('xlsx'); let arrayData = , , , ['wa...
  25. 谈谈JavaScript中的function constructor和prototype的建立 在上一篇文章中我们说明了如何通过函数构造式(function constructor)搭配关键字new来建立对象,但其实这样只讲了一半,在这篇我们会补齐另一半,说明function constructor如何用来设定该对象的原型(prototype)。 在JavaScript中的函数也是一种对象,其中包含一些属性像是该函数的名称( Name )和该函数的内容(...
  26. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值 在了解虚拟DOM前,先来了解DOM的一个对象属性—— DocumentFragment 。 在一次操作中,需要频繁操作DOM时,就可以先将要改变的节点附在 DocumentFragment 上,之后再将该对象渲染到DOM中,改方法只对DOM进行了一次操作,可以显著提高性能。 但是该方法只适用于局部操作,而在真实的项目中,需要的不仅仅是 Docume...
  27. 手牵手,带你用原生js实现放大镜特效(一): 学习该特效需要掌握client、offset系列的知识,否则会有点混乱,可以看我之前写的文章 精讲-offset系列、scroll系列、client系列~ ,再来学习该文章,这样会好很多哦~ 实现原理: 首先布局上,很明显要准备两个基本的容器,一个small,一个big,还要准备两张完全相同的图片,但是尺寸不同,每个容器中放入相应大小的...
  28. 前端实现axios以表单方式上传文件,优化上传速度 最近在开发过程中,遇到的需要是需要上传高清图片,必须原图上传。由于在移动端应用,上传网络问题有很大的坑。当初的方案是直接采用将文件转化为 base64 ,再进行上传,由于文件转化为 base64 后,文件大小会增加30%。又导致上传压力,影响用户体验。最终采取了以 formData 形式进行上传,也就是 File 上传文件。以这种...
  29. 开发Vue插件四种方式 在日常开发中,可能只需要一两个插件就可以完成对系统开发需要。如果引入整个组件库,最后打包项目体积比较大。例如 element-ui 中的 message 提示组件等。下面会在 vuejs 官网提供的插件建议,根据四种方法开发四类不同的 vuejs 插件 插件 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有...
  30. Vue后台管理系统用户认证封装 在使用vue技术栈开发各类管理系统时,经常需要相同的开发目录架设。在日常开发中,整理了一套自己的开发目录。主要包括 vuejs 、 vue-router 、 vuex 、 axios 等常用类库。 开发依赖 "vuex": "^3.1.0", "babel-polyfill": "^6.26.0", "element-ui": "...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20190613 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190613.html)