JS中的 new 关键字做了什么?

new 运算符 创建 一个用户定义的 对象类型 的实例或 具有构造函数的内置对象 的实例。

完整的了解 new 运算符你可能还需要了解一下 面向对象思想 以及 原型链,可以简单查看这篇笔记 👉 原型链! __proto__ 与 prototype

如果快速的了解 new 关键字按照MDN的文档描述来说就是:

  1. new关键字会创建一个空的简单JavaScript对象(即 {});
  2. 链接该对象(设置该对象的 constructor)到另一个对象 (绑定原型);
  3. 步骤1 新创建的对象作为 this 的上下文 ;
  4. 如果该函数没有返回对象,则返回 this

可以简单理解成 new 关键字帮我们处理了书写构造函数时一些固定的步骤

阅读全文

微信小程序学习日记 L05 获取用户资料

在实际业务场景中,最常接触到的就是拉取微信登陆了,但单纯的一个点击按钮直接微信登录的需要获取多少微信权限呢?

最少的需要使用到1个微信开放接口:wx.login
如果需要获取用户头像和昵称,需要调用 wx.getUserProfile 方法 (wx.getUserInfo 已调整【尾声#1】),并且需要在绑定在按钮上 ,并会唤起授权提示;
如果需要获取用户手机号信息,需要在按钮上绑定 getPhoneNumber 事件。

一般来说非敏感信息可以直接调用,含有敏感信息的接口需要绑定在按钮上,在用户自行操作之后才可以调用。

阅读全文

ES6 中的数组拓展方法 flat() & flatMap()

之前有使用过 flat() 方法,但是一直不知道 flatMap() 方法,在使用 map() 方法组装集合的时候,在组装完成之后还要链式调用一下 flat(),如果可以知道 flatMap() 代码还能精简一点,也方便递归返回的数组内容。

本来是上个月发现的,但隔了一个月才有时间写,已经想不起来当时怎么发现的 flatMap() 这个方法了…
就直接跳过前置场景,直接开始聊这两个扩展方法吧。

阅读全文

VueJS 的过滤器 filter API

一直没有怎么用过 Vue 的 过滤器 API,都是直接用 AntD Pro 当中提供的数字千分格式化、时间格式化之类的,没有自己去声明过,主要是因为 Array.prototype.filter 的先入为主,一直把 vue.filter 理解成为了筛选,而不是过滤器。

其实,vue.filter 是借鉴了 Linux 当中的 Pipe 符号 (|) 来处理数据 ,然后借用了 filter 这个名字:

利用 Linux 所提供的管道符 “|” 将两个命令隔开,管道符左边命令的输出就会作为管道符右边命令的输入

其实我觉得如果直接用 pipe 来命名其实就更好理解了,但是也许是因为前端圈子接触到 pipe 的人并不多,使用 filter 这个熟悉的单词可能更加容易让大众接受。

使用起来确实很方便,用 | 符号分隔就行,会按照 从前往后的顺序 依次 传入过滤器,然后返回转换后的值。

等到后来再遇到适合的场景想起来使用 filter ,但又因为项目的历史原因没有去使用,因为自己都是局部使用 computed计算方法调用返回 来处理(也是Vue3所推荐的替代过滤器的方式

阅读全文

微信小程序学习日记 L04 网络请求

在小程序中发送网络请求,需要使用微信提供的API,提供了5种:

  • 普通 HTTPS 请求(wx.request
  • 上传文件(wx.uploadFile
  • 下载文件(wx.downloadFile)
  • WebSocket 通信(wx.connectSocket
  • UDP 通信(wx.createUDPSocket

一般项目中使用频率最高的是 wx.requestwx.uploadFile

需要注意的是,小程序只可以跟指定的域名进行网络通信,需要事先设置通讯域名(服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置)。

可以查看 配置流程 了解一下具体注意项。

阅读全文

CSS 选择器权重和优先级

群里突然又聊到了CSS样式的权重,这个话题每隔一段时间就会出现一次,但是每次都去搜索找选择器权重的文章分享有点太麻烦了,
主要是配图,想要找到自己记忆里的那张图真的很麻烦😂,所以还是自己整理一篇,以后直接分享自己的笔记就好了。
其实权重计算这个东西不麻烦,就是分 4 类:

  1. inlineStyle: 行内样式
  2. #ID: ID选择器
  3. .Class: 类,属性和伪类选择器
  4. Element: 元素和伪类元素选择器

简单的权重比较 inline style > ID > Class > Element > * 这个应该不需要说了吧,主要是多个选择器混合使用时计算的问题。

阅读全文

微信小程序学习日记 L03 生命周期

一开始按照 Vue 的思路下来,会认为生命周期很重要,需要完整的看一遍,但是其实整个小程序开发完之后,生命周期的概念其实并不是很重要,
大概分成 小程序 的生命周期 和 页面/组件 的生命周期。
这些生命周期函数中 主要就是使用 onShowonLoad 两个,用来获取和设置初始参数,发起请求等等。
其它的几个回调函数其实很少有用到,但是还是聊一聊吧。

阅读全文

微信小程序学习日记 L02 路由跳转

以前一直都是写的 Vue,所以在刚接触小程序的时候会疑惑,小程序是否也有和 Vue 一样有路由表,但是看完开放文档之后发现没有路由表,就很疑惑。
那小程序怎么去做页面跳转的呢?

首先,虽然小程序没有路由表,但是在全局配置文件(app.json)中有 pages 信息

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的文件进行处理。

阅读全文

微信小程序学习日记 L01 目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page
刚刚接触到小程序,使用 微信开发者工具 新建完项目之后,会有一个这样的初始结构:

├─pages
│  ├─index
│  │     index.js
│  │     index.json
│  │     index.wxml
│  │     index.wxss
│  │      
│  └─logs
│        logs.js
│        logs.json
│        logs.wxml
│        logs.wxss
│          
├─utils
│     util.js
├─ app.js
├─ app.json
├─ app.wxss
├─ project.config.json
└─ sitemap.json
阅读全文

微信小程序学习开发日记 L00

发现我安装小程序开发者工具是18年的事情了,那个时候还没有开始学 vue,算是开始填早几年立的一个 📌Flag 吧。

当时是想给我们的烘焙工作室的公众号做一个配套的营销工具,所以在18年底有去了解,只不过后来只做了一个展示型网站 岁礼气球派对,后来又改版了好几次现在主营是派对布置,好了有点扯远了。

填坑的动力主要是业务驱动,因为现在正好有这个任务安排,在回顾2020也大概提到了。所以今天先开始概括一下没有开发过小程序的前端,对于小程序的一些疑问。

阅读全文