20190829 前端开发日报

Rollup.js是什么?;Javascript并发模型和事件循环;Vue – 路由守卫(路由的生命周期);学习React应该具备的JavaScript基础知识;前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【下篇】;后会无期之jshttp解析(2);前端实现打印图像功能;vue父子组件通信高级用法

  1. Rollup.js是什么? Rollup 是前端模块化的一个打包工具,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。 Rollup 对代码模块可以使用新的标准化格式,如:ES6,而不是先前的解决方案,如:CommonJS 和 AMD。 Rollup 被广泛用于 Javascript libraries 的打包 Quick Start rollup-starter-lib rol...
  2. Javascript并发模型和事件循环 函数调用形成一个栈帧 function foo(b) { var a = 10; return a + b + 11; } function bar(x) { var y = 3; return foo(x * y); } console.log(bar(7)); // 42 复制代码 当调用bar时,创建了第一个帧,帧中包含了bar的参数和局部变量 当bar中调用foo时,第二个帧就被创建,并被压到第一个帧之...
  3. Vue - 路由守卫(路由的生命周期) 路由守卫是什么? 官方解释: “导航”表示路由正在发生改变。正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 简单的说,导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程,这个大的过程...
  4. 学习React应该具备的JavaScript基础知识 React是众多主流JavaScript框架之一,如果想要较好的掌握React,那么对于JavaScript方面的知识还是非常重要的。但在很多开发者眼里反而顾此失彼,觉得掌握了JavaScript框架就可以无敌,事实上并非如此,至少web发展至今,HTMLCSS和JavaScript还是Web三大基石。只有更好的掌握这些基础,在平时的工作中才能游刃有余。在...
  5. 前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【下篇】最近一些跨平台技术,React-native和flutter之类的,比较火。但是,我还是不准备把它们放进来,因为那是为做App而生,我想把Electron这个桌面端跨平台的技术放进来。理由是什么,后面说
  6. 后会无期之jshttp解析(2) 从小到大都是优,你让我怎么从良 昨天解读了 fresh 这个库,我们了解了服务器是如何对比文件是否更新了,其中用到了etag,那么今天我们就趁热打铁,了解下etag是怎么生成的,同样是来自jshttp的 ETag 库。 ETag ETag是干什么的,这里摘读下MDN的官方解释 如果给定URL中的资源更改,则一定要生成新的Etag值。 ...
  7. 前端实现打印图像功能 前提:后台返回是绘制医用心电波形报告的数据,前端通过Canvas在网页上绘制再进行打印并生成PDF文档! 一.  尝试LODOP打印插件 之前前端表单打印功能有使用过LODOP打印插件,需安装相应的LODOP的打印软件,lodop的使用方法2种。第一种方式是通过收集前端标签内容元素成对象 var   htmlstr= $("#ECGR...
  8. vue父子组件通信高级用法vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。
  9. javascript异步解决方案 回调函数可以解决存在的异步问题,但回调函数分为,同步与异步: 1.2 回调函数可以解决异步问题 callback 回调函数本身是我们约定俗成的一种叫法,我们定义它,但是并不会自己去执行它,它最终被其他人执行了。 ==优点==:比较容易理解; ==缺点==:1.高耦合,维护困难,回调地狱;2.每个任...
  10. 来自 Vue 3.0 的 Composition API 尝鲜 前段时间,Vue 官方释出了 Composition API RFC 的文档,我也在收到消息的第一时间上手尝鲜。 虽然 Vue 3.0 尚未发布,但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。 本文示例的代码: ...
  11. 前端培训-中级阶段(13、15)- web网络攻击、CSP内容安全策略(2019-08-29期)前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(...
  12. TypeScript类型声明书写 本文总结一下TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题。如果你遇到类型声明不会写的时候,多看看 lodash 的声明,因为 lodash 对数据进行各种变形操作,所以你能遇到的,都有参考示例。 基本类型 // 变量 const num: number = 1; c...
  13. Nodejs调试的各种姿势对于绝大部分前端人员,对JavaScript的调试更多停留在浏览器中,类似console.log和debugger,但这种方式对代码侵入性较高,甚至需要刷新页面或重启编译器。转向服务端后,没有浏览器界面,如果仅停留在原来的调试...
  14. 理解js模块化规范CommonJs、AMD、CMD、ES6 模块化就是把系统分离成独立功能的方法,这样我们需要什么功能,就加载什么功能 每个模块都是独立的,良好设计的模块会尽量与外部的代码撇清关系,以便于独立对其进行改进和维护 可以重复利用,而不用经常复制自己之前写过的代码 高内聚,低耦合 模块化主要解决两个问题,"命名冲突"、"文件依...
  15. Babel 7.5新特性之动态引入和F#管道 管道操作符提议还在第一阶段的开发中,同时也意味着其规范还在定义中。Babel 从 7.3.0 版本已经支持了管道的变形 Smart ,以及 7.0.0-beta 版本以来的 minimal 变形,并且现在又有了新的 F# 变形。 F# 的变形不同于已经存在的 smart 变形,为何呢?与之前的话题引用( topic references )的概念相比,我们将...
  16. 基于 Laravel + Swoole + Vue 搭建实时在线聊天室(三):后台 WebSocket 服务器实现 今天我们继续聊天室项目后台功能的开发,现在,后端数据库已经就绪,基于 API Token 的用户认证功能已经实现,接下来,我们来实现聊天室功能的核心 —— WebSocket 服务器相关业务逻辑的实现。 创建 WebSocketHandler 首先我们在 app/Services 目录下创建用于处理 WebSocket 通信的 WebSocketHandler.php ,并初始化 ...
  17. 探索javascript -> async、await在讲async之前,先简单的提一下promise。首先,先来纠正一下很多人普遍的错误观点 --> 'promise是异步的', 看代码:
  18. 深入理解webpack的chunkId对线上缓存的思考 想必经常使用基于webpack打包工具的框架的同学们,无论是使用React还是Vue在性能优化上使用最多的应该是分包策略(按需加载)。按需加载的方式使我们的每一个bundle变的更小,在每一个单页中只需要引入当前页所使用到的JavaScript代码,从而提高了代码的加载速度。但是,由于webpack目前版本自身的原因分包策略虽然可以...
  19. 学习 Node.js,第 14 单元:迁移到 Cloudant 数据库即服务 在 Node.js 学习路径的前几个单元中,您使用以下两个本地数据库安装设置了"购物清单"应用程序:SQLite3 和MongoDB。在当前的技术环境下,了解如何针对云端扩展 Node.js 应用程序也很重要。大多数企业都转而采用云存储,因为服务器托管成本高昂,而且可能会导致可用性问题。通过使用云计算,您只要为所需的云服...
  20. 前端数据可视化--间断圆环图实现最近用了一个多月的时间完成了一个数据可视化大屏,大概的效果是这个样子的,当然这只是三屏中的其中一屏,我会用几篇文章分别介绍各个点的实现方式和一些相应的知识点。
  21. 【Ts重构Vue】00-Ts重构Vue概要 本科机械设计制造及其自动化,16年稀里糊涂的进了一家干变厂,17年自学了大半年,18年正式跨行来到前端。工作中主要写业务代码,很少涉及造轮子工作,一直希望能够提高编程能力。恰好,公司业务栈以vue为主,理解它的逻辑,相信对今后肯定会有帮助。于是就有了使用ts重构vue的冲动。更甚者,希望能够参与到开源社区的建...
  22. 【Ts重构Vue】01-如何创建虚拟节点 React/Vue都用到了虚拟DOM,为什么要使用虚拟DOM?如何定义(创建)虚拟dom呢?虚拟DOM如何映射为真实DOM? 为什么要使用虚拟节点? 将下列代码拷贝至浏览器中运行: let d = document.createElement('div') for(let key in d) console.log(key) 复制代码 我们会发现,真实dom上有非常多的属性,通过自定义虚拟dom能...
  23. 用 NodeJS 重命名系统文件幸运的是 Node.js 的文件系统 (Fs) 核心模块实现了内置的方法,可以通过 fs.renam() 和 fs.renameSync() 方法来给文件一个新名字。
  24. Vue的编码技巧与规范使用 当我们完成项目的构建,进入开发阶段的时候,除了你需要了解框架本身的知识点外,我们还需要提前掌握一些项目的编码技巧与规范,在根源上解决之后因编码缺陷而导致的项目维护困难、性能下降等常见问题,为项目多人开发提供编码的一致性。 本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量,并会结合代...
  25. git远程仓库小记好在这个世界上有个叫GitHub的神奇的网站,从名字就可以看出,这个网站就是提供Git仓库托管服务的,所以,只要注册一个GitHub账号,就可以免费获得Git远程仓库。
  26. ES6 新特性之Generator实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部...
  27. React基础(三)前面两篇文章简单地介绍了 React 中的 JSX 语法、状态组件、绑定事件、设置 state 等基本操作,这篇文章将继续通过一些实例介绍 React 中的基础知识点生命周期
  28. 算法修炼之Javascript版剑指Offer - 数字在排序数组中出现的次数 1. 题目描述 统计一个数字在排序数组中出现的次数。 2. 解题思路 题目说是排序数组,所以可以使用“二分查找”的思想。 一种思路是查找到指定数字,然后向前向后遍历,复杂度是 O(N)。 另一种是不需要遍历所有的数字,只需要找到数字在数组中的左右边界即可,做差即可得到出现次数。 3. 代码 /** * 寻找指定数字的...
  29. Arcgis For JavaScript——求两个几何要素的相交值 在最近的项目中,客户要求根据所选地图的斑块求取该斑块所跨省份的面积对比,经过具体分析要用到GIS中拓扑的相交来求出相交部分确定面积 首先我们来看下Arcgis For Js Api中是怎么求两个几何要素的交集的 方式一:`客户端的geometryEngine` 引用的模块 : "esri/geometry/geometryEngine" 具体使...
  30. ( 第三篇 )仿写'Vue生态'系列___"'枚举'与'双向绑定'"( 第三篇 )仿写'Vue生态'系列___" '枚举' 与 '双向绑定' " 本次任务 对'遍历'这个名词进行死磕. 对defineProperty进行分析. 实现cc_vue的数据双向绑定. 为下一篇 Proxy 代替 defineProperty 做预热. 一. 'forEach...
  31. vue递归组件实战之简单树形控件1、递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2、树形控件基本结构及样式 {代码...} 3、组件目录及数据结构 目录结构vue-tree VueTree....
  32. webpack之插件html webpack plugin 动态生成html文件并自动引入js文件 静态文件无需加载js或css文件,通过设置入口文件可以将js文件自动添加进去,而相关的css文件在js中导入 同时修改生成的js文件命名规则,利用hash码命名js文件 没有改动时可以让浏览器缓存内容,当有改动重新部署后可以让浏览器缓存失效 安装 cnpm install html...
  33. 前端构建演变之路和webpack基本概念 我们编写的css和js代码运行在浏览器,可以直接在控制台的sources查看,如果不对代码进行压缩打包,代码的逻辑就很容易被别人看到,这对我们项目是非常不利的。 原始时代 找在线的打包代码网站上传代码,对代码进行压缩打包之后,再下载下来,放进我们的项目里面,可谓是异常艰辛。 ant + YUI tool YUI tool是07年左...
  34. JS中的循环结构 while循环: 语法 : while (expression) { code... } 执行规则: 先对expression(表达式)做判定,如果为真,进入循环执行code,再判定…… 如果为假,就不会进入。 注: 如果expression第一次判定为假,则不会进入循环 注: 一定要在code部分修改expression中的内容,以期有朝一日表达式为假。否则...

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

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

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