BlogMind

一、技术概述前端实现即时通讯的主要技术方案包括： 传统轮询（Polling） 长轮询（Long Polling） WebSocket Server-Sent Events (SSE) Socket.IO 二、具体实现1. 传统轮询1234567891011121314151617181920212223242526272829303132333435class Polling { constructor(url, interval = 3000) { this.url = url; this.interval = interval; this.timer = null; } start() { this.timer = setInterval(async () => { try { const response = await fetch(this.url); const data = await response.json(); ...

一、代码层面优化1. 数据层面1.1 合理使用 v-show 和 v-if123456789// 频繁切换用 v-show<template> <div v-show="isShow">频繁切换的内容</div></template>// 条件渲染用 v-if<template> <div v-if="isAdmin">管理员菜单</div></template> 1.2 使用 computed 代替 methods123456789101112131415export default { // 不推荐 methods: { getFullName() { return this.firstName + ' ' + this.lastName; } }, // 推荐 computed: { fullName() { ...

一、从历史说起Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解 石器时代 文明时代 工业革命时代 百花齐放时代 石器时代石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网 最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时的Google（1998年） 文明时代ASP，JSP大家应该都不会太陌生，最早出现于 2005 年左右，先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性，类似于下面这样，其实就是Java + HTML `<%@ page language=”java” contentType=”text/html; charset=utf-8”    pageEncoding=”utf-8”%>      JSP ...

一、是什么BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象 其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率 浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。区别如下： 二、windowBom的核心对象是window，它表示浏览器的一个实例 在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象 因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法 12345678var name = 'js每日一题';function lookName(){ alert(this.name);}console.log(window.name); //js每日一题lookName(); //js每日一题window.lookName(); //js每日一题 关于窗口控制方法如下： ...

一、作用call 、apply 、bind 作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向 那么什么情况下需要改变this的指向呢？下面举个例子 123456789var name = "lucy";var obj = { name: "martin", say: function () { console.log(this.name); }};obj.say(); // martin，this 指向 obj 对象setTimeout(obj.say,0); // lucy，this 指向 window 对象 从上面可以看到，正常情况say方法输出martin 但是我们把say放在setTimeout方法中，在定时器中是作为回调函数来执行的，因此回到主栈执行时是在全局执行上下文的环境中执行的，这时候this指向window，所以输出lucy 我们实际需要的是this指向obj对象，这时候就需要该改变this指向了 1setTimeout(obj. ...

一、操作方法数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会 下面对数组常用的操作方法做一个归纳 增下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响 push() unshift() splice() concat() push()push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度 123let colors = []; // 创建一个数组let count = colors.push("red", "green"); // 推入两项console.log(count) // 2 unshift()unshift()在数组开头添加任意多个值，然后返回新的数组长度 123let colors = new Array(); // 创建一个数组let count = colors.unshift("red", "green"); // 从数组开头推入两项alert(count); // 2 splice ...

一、前言微信小程序为电商类小程序，提供了非常完善、优秀、安全的支付功能 在小程序内可调用微信的API完成支付功能，方便、快捷 场景如下图所示： 用户通过分享或扫描二维码进入商户小程序，用户选择购买，完成选购流程 调起微信支付控件，用户开始输入支付密码 密码验证通过，支付成功。商户后台得到支付成功的通知 返回商户小程序，显示购买成功 微信支付公众号下发支付凭证 二、流程以电商小程序为例 支付流程图如下所示： 具体的做法： 打开某小程序，点击直接下单 wx.login获取用户临时登录凭证code，发送到后端服务器换取openId 在下单时，小程序需要将购买的商品Id，商品数量，以及用户的openId传送到服务器 服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息 小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付 接下来的一些列操作都是由用户来操作 ...

一、是什么AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面 流程图如下： 下面举个例子： 领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作 Ajax请求数据流程与”领导想找小李汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，领导相当于浏览器，响应数据相当于小李 浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作 二、实现过程实现 Ajax 异步交互需要服务器逻辑进行配合，需要完成以下步骤： 创建 Ajax 的核心对象 XMLHttpRequest 对象 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接 构建请 ...

一、等于操作符等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回 true 前面文章，我们提到在JavaScript中存在隐式转换。等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等 遵循以下规则： 如果任一操作数是布尔值，则将其转换为数值再比较是否相等 1let result1 = (true == 1); // true 如果一个操作数是字符串，另一个操作数是数值，则尝试将字符串转换为数值，再比较是否相等 1let result1 = ("55" == 55); // true 如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf() 方法取得其原始值，再根据前面的规则进行比较 12let obj = {valueOf:function(){return 1}}let result1 = (obj == 1); // true null 和undefined相等 1let result1 = (null == undefined ...

一、背景在中大型的公司里，人员的分工非常仔细，一般会有不同岗位角色的员工同时参与同一个小程序项目。为此，小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作 以往我们在开发完网页之后，需要把网页的代码和资源放在服务器上，让用户通过互联网来访问 在小程序的平台里，开发者完成开发之后，需要在开发者工具提交小程序的代码包，然后在小程序后台发布小程序 二、流程关于发布的流程，主要分成了三个部分： 上传代码 提交审核 发布版本 上传代码在开发者工具中，可以点击代码上传功能： 然后就可以填写版本信息： 然后点击上传，编译器则会提示上传代码成功 提交审核代码上传完毕，就可以登陆微信公众号的官网首页，点击【开发管理】，查看应用详情： 提交审核过程需要填写审核信息，如下图： 提交审核成功之后如下图： 发布版本当审核通过之后，即可提交发布 发布成功之后则如下： 三、扩展上述是最简单的小程序代码发布的流程，通常的流程如下： 代码管理服务器上新建分支 开发测试新需求 测试完成后，将本地分支合并到 master 分支 拉取 master 分 ...