javascript

简单粗暴而又不失优雅地在vue项目中使用monaco

monaco-editor是一款直接在vscode中使用的编辑器,其强大之处就不用多说了。

然而其本身并未提供直接在vue中打包使用的机制,虽然有vue-monaco-editor,但其本身是基于react的移植版,而且很久未更新,不知道有多少坑,不敢用。

然而好处是monaco-editor直接提供了在浏览器以script调用的形式,那么我基于此进行改造即可。

大概思路如下:

提供加载方法,在调用前以script的形式动态加载资源,完成后暴露,供后续复用

再次......

请求速度快的时候出现loading,而较快时不出现

请求速度快的时候出现loading,而较快时不出现

这是两年前我刚入职不久后收到的一个需求,恰逢近日有人问起,特此记录分享。

需求场景描述

通常在发起请求加载数据时,会在页面上出现 loading 的动画,让用户知道正在加载数据,而不是网站出了什么问题,反正是挺常见且常用的手段。

通常的 loading 效果都是有一些动画的,如构造近似的进度条、转圈圈等,通常这个loading效果在最终移除的时候会有一个渐隐的效果,这就导致了一个“弊端” —— 给用户看起来,加了 loading......

c++学习笔记 const 和 function

const// const.cpp: 定义控制台应用程序的入口点。

//

#include "stdafx.h"

#include <iostream>

using namespace std;

void output1(int a, int b);

void output2(const int &a, const int &b);

int main()

{

// 1 const base

int const a = 1;

const i......

带你开发一个二维周视图日历

即之前实现了一个月视图日历,我们今天来实现一个二维周视图的日历。

以下进行分析其中的关键部分。

结构准备

不同之处在于其在日历的基础上还有一个分类轴,用于展示不同的类目,主要用于一周内的日程安排、会议安排等。

二维则和之前单独的有所不同,二维日历再切换日期时不用全部重新渲染,分类是不用变的,仅仅改变显示的日期即可。

而且由于是二维的,插入的内容必定是同时属于一个分类和一个时间段的,内容肯定是可以跨越时间(即日期轴)的,因此不能直接将插入的内容像开始的日历一样直接放置......

带你开发一个日历控件

日历控件多的不胜枚举,为什么我们还要再造一个轮子呢?

因为大多数日历控件都是用于选择日期的,有种需求是要在日历上展示各种各样的内容,这样的日历控件较少,而且试用下来并不满意。

因此就再造一个轮子,现在带你一起基于使用之前完成的组件机制来开发一个日历控件。

需求

简单把需求整理如下:

月视图

支持在日历中每一天中插入任意的内容

相关点击事件

获取日历当前视图的开始和结束日期

获取设置选中的日期

实现分析

首先我们拿系统中自带的日历观察一下,看看......

网页中文本朗读功能开发实现分享

前几天完成了一个需求,在网页中完成鼠标指向哪里,就用语音读出所指的文本。如果是按钮、链接、文本输入框,则还还要给出是什么的提醒。同时针对大段的文本,不能整段的去读,要按照标点符号进行断句处理。

重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。

标签朗读

这个很简单了,只用根据当前是什么标签,给出提示即可。

// 标签朗读文本

var tagTextConfig = {

'a': '链接',

'input[text]'......

实现一套自定义事件机制

事件机制为我们的web开发提供了极大的方便,使得我们能在任意时候指定在什么操作时做什么操作、执行什么样的代码。

如点击事件,用户点击时触发;keydown、keyup事件,键盘按下、键盘弹起时触发;还有上传控件中,文件加入前事件,上传完成后事件。

由于在恰当的时机会有相应的事件触发,我们能为这些事件指定相应的处理函数,就能在原本的流程中插入各种各样的个性化操作和处理,使得整个流程变得更加丰富。

诸如click、blur、focus等事件是原本的dom就直接提供的原生事件,......

JavaScript排序,不只是冒泡

做编程,排序是个必然的需求。前端也不例外,虽然不多,但是你肯定会遇到。

不过说到排序,最容易想到的就是冒泡排序,选择排序,插入排序了。

冒泡排序

依次比较相邻的两个元素,如果后一个小于前一个,则交换,这样从头到尾一次,就将最大的放到了末尾。

从头到尾再来一次,由于每进行一轮,最后的都已经是最大的了,因此后一轮需要比较次数可以比上一次少一个。虽然你还是可以让他从头到尾来比较,但是后面的比较是没有意义的无用功,为了效率,你应该对代码进行优化。

图片演示如下: