20200604 前端开发日报

精读JS系列(9b) Promise — 回调地狱、Promise构造器;JavaScript的padStart()和padEnd()格式化字符串使用技巧;小小试水—npm上传自己的vue组件;使用Vue全家桶+Node.js搭建的小型全栈项目;websocket+nodejs实现聊天室;基于promise和原生ajax写axios源码;Nodejs 中 ES Modules 入门使用讲解;js每天一个小技巧-变量和函数提升

  1. 精读JS系列(9b) Promise — 回调地狱、Promise构造器

    看一下进阶时间线: 看到梦想之前,我只想到了无限长的距离…… 首先解释一下这张时间线,它的起点就是 入门完成 ,所以自然会从 印象最深的概念 开始入手——即 异步 这里。所以较复杂的知识已经在之前搞完了,现在就是比较简单的了。 本文将简单的介绍一下 Promise 以及 promisify 的方法,不涉及 底…

  2. JavaScript的padStart()和padEnd()格式化字符串使用技巧

    几天前,我正在使用JavaScript构建倒数计时器,因此我需要格式化秒和毫秒,我希望秒始终是2位数的长度,而毫秒总是3位数的长度,换句话说,我希望 1 秒显示为 01,1 毫秒显示为 001。

  3. 小小试水—npm上传自己的vue组件

    注册npm账号 搭建一个vue项目 新建packages文件夹 修改vue.config.js配置 修改package.json配置 搭建一个vue项目 可以查看我的文章搭建一个vue3/4项目 目录如下: ├── node_modules/ # 依赖包; ├── public/ # 静态资源,不经过打包; │ ├── favicon.ico …

  4. 使用Vue全家桶+Node.js搭建的小型全栈项目

    项目运行 # 克隆到本地 git clone git@github.com:Hanxueqing/Douban-Movie.git # 安装依赖 npm install # 开启本地服务器localhost:8080 yarn serve # 发布环境 yarn build 项目开发 1、安装vue-cli3脚手架 现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境…

  5. websocket+nodejs实现聊天室

    传统http协议,是基于请求和响应的,无法直接做到客户端向客户端发送消息。 websocket协议是基于tcp的一种新的网络协议。实现了浏览器与服务器全双工通信。全双工:客户端可以主动给服务器发送消息,服务器也可以主动给客户端发送消息。 websocket是一种持久协议,http是非持久的 传统http协议实现即使聊天,必须通过aja…

  6. 基于promise和原生ajax写axios源码

    代码要写在一个私有作用域中(闭包),防止变量污染,用window.xxx=xxx的方式向外暴露使用的方法axios,axios.get|options|delete|head|post|put方法要挂载到方法实例上,还有defaults(默认的配置)和interceptors(拦截器),通过整理默认config和自定义的config结合得到最后的config,通过这个配置结合原生的ajax实现axios 代码 …

  7. Nodejs 中 ES Modules 入门使用讲解

    2020-05-26 Nodejs v12.17.0 LTS 版发布,去掉 –experimental-modules 标志。 虽然已在最新的 LTS v12.17.0 中支持,但是目前仍处于 Stability: 1 – Experimental 实验阶段,如果是在生产环境使用该功能,还应保持谨慎,如果在测试环境可以安装 n install v12.17.0 进行尝试。 删除标志也是将 ESM 变为稳定性而…

  8. js每天一个小技巧-变量和函数提升

    首先,先丢出来一道题: var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 复制代码 如果我们不了解 javascript 中的变量提升和函数声明提升,那么我们的答案肯定是 1。 那么正确的答案是什么呢? 我们首先把这段代码还原: var foo = 1; function bar(){ …

  9. 了不起的 tsconfig.json 指南

    在 TypeScript 开发中,tsconfig.json 是个不可或缺的配置文件,它是我们在 TS 项目中最常见的配置文件,那么你真的了解这个文件吗?它里面都有哪些优秀配置?如何配置一个合理的 tsconfig.json 文件?本文将全面…

  10. Vue项目中常用的一些第三方库

    stylus 一种css预处理器,可以更加直观的编写css代码,减少不必要的格式 下载: npm install stylus 复制代码 使用: 在style标签中加上 lang="stylus"来使用stylus 样式不再需要大括号,而是用缩进来代替 可以省略冒号,用空格代替 不再需要分号来结尾 在style标签中添加scope属性…

  11. JavaScript重构技巧-降低函数复杂度

    点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

  12. circom 及 snarkjs 入门教程

    本教程是circom 和 snarkjs 最经典的入门文章 在本教程里将指导您创建第一个零知识zkSnark电路。 它将介绍各种编写电路的技术,并向您展示如何创建证明并在以太坊上进行链外和链上验证。 1. 安装工具 1.1 先决条件 需要在电脑中安装 Node.js ,Node.js 的最新的稳定版本(或8.12.0)可以正常工作。 不过,…

  13. 记一次JavaScript数组扁平化学习

    在写项目的时候遇到了多级目录的树状结构,需要将这些嵌套的数组转换成只有一层的数组进行展示,因而有了这次数组扁平化常用方法的学习总结,在此记录。 什么是数组扁平化? 数组扁平化是指将多维数组转换为一维数组,即将内部嵌套着别的数组的数组提炼成没有嵌套的一维数组。举个栗子: // 原数组: var array = [1,…

  14. 关于Vue Loading chunk {n} failed的一些思考

    关于Vue Loading chunk {n} failed的一些思考 更新时间:2020-06-02 14:52:43 0x1 问题 Loading chunk {n} failed 测试偶尔会出现这个问题,遂提出一个 bug ,从 bug 字面意思来看,有一个 js 的块加载失败了。丢失了一个 ${domain}/js/chunk-${hash}.js 。 为什么会丢失? 为什么会偶发? …

  15. VS Code 调试完全攻略(5):基于浏览器的 React 应用

    这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。我们将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。它超级强大,同时又很容易,所以在调试 CRA 和 React 程序时没有理由不…

  16. 截取网页或屏幕快照插件-html2canvas

    html2canvas是一个截取网页或屏幕快照插件。通过读取DOM和元素的不同样式,将当前页面呈现为画布图像。一般在需要将h5页面生成海报的时候用。html2canvas库使用Promises,如果浏览器不支持Promises,可以先加载一个es6-promise的补丁。之前雷雪松的博客中介绍过HTML转图片的JS插件-rasterizeHTML.js。今天雷雪松给大家分…

  17. 10+个很酷的Vue.js组件,模板和实验示例

    众所周知,Vue.js 组件是Vue创建自定义元素的重要功能之一,同时,模板可帮助你避免从头开始创建网页设计。总之,这些工具对于希望其开发过程更快,更高效的任何Web开发人员都是必不可少的。 此外,在过去的几年中,Vue.js 变得非常流行,许多企业将其添加到他们的技术栈中。该框架的优点是它具有内置的数据…

  18. 重温JavaScript中内置Date属性

    在一个阴雨绵绵的早上,正在和基友们讨论昨晚的多人运动应该团战谁背锅的问题。这时接到两个需求: 1、针对移动端写一个显示未来7天的日历 2、当用户查看一场会议时,根据用户访问的时间端不同,做出相应的指令。通俗点就是判断时间差,当前访问时间与会议开始时间之间的差。(以分钟为基础单位) 两个需求都有涉及…

  19. 超简单的Vue响应式系统原理解释

    所谓Vue.js的响应式系统也就是指,在修改数据模型的时候,视图会自动变化,而用户不需要像命令式编程那样再手动去操作视图的变化。用高大上的说法就是: 使用订阅者模式,达成声明式编程的目的 。 Vue.js的响应式系统非常适合用订阅者模式的原因就在于,每次在修改数据的时候,对应通知到使用到该数据的组件,就实现…

  20. 一个你不知道但可能会需要的 Vue 插件

    Vue.js 是一个容易上手的 web 应用框架,我们能够用它去开发交互式前端应用程序。 这篇文章将会介绍一些你不知道,但是你也许想要添加到应用中的与 Vue 相关的软件包。 Vue-Dummy 我们在开发应用程序时,可以用 vue-dummy 软件包来添加虚拟文本,这样我们就不用担心自己生成文本了,我们还可以用它来添加占位符图…

  21. 一次性讲明白vue插槽slot

    vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢? 我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需…

  22. 实现基于Vue的面包屑导航+链接可跳转组件

    简单的来说,面包屑导航的作用就是告诉用户他们在网站中的位置,方便用户确定下一步去留,对于用户来说这是很好的体验。 静态路由-面包屑导航 需要手动配置路由和菜单。 项目路由如下: const routes = [ { path: ‘/home1’, name: ‘home1’, meta: { breadID: ‘0’ } }, { path: ‘/hom…

  23. 使用js实现自动化构建皮卡丘

    使用css实现了皮卡丘后,我开始想有没有一种办法能够动态的实现皮卡丘,有了这个想法后,就开始查相关资料和博客,发现还真有不少,于是我就通过他们的代码以及自己的理解实现了动态的皮卡丘。预览图如下 实现动态皮卡丘 在开始之前我们需要想一个问题,如何才能动态的展示页面呢?使用js内置的setInterva…

  24. 你不知道的JS系列——你所忽略的细节

    parseInt(string, radix) radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。 eg: parseInt(’10’, 2); // 2 1*2^1 + 0*…

  25. 循序渐进VUE+Element 前端应用开发(6)— 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框、多文本框、下拉列表,以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用,使得我们对如何利用Element组件有一个大概的认识。 1、列表界面和其…

更多内容请关注公众号【前端开发博客】每日更新


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流