DarinZanya的博客

本文介绍了在Vue中实现元素拖拽功能的两种方式：自定义指令(Vue.directive())和插件(Vue.use())。重点讲解了通过自定义指令实现拖拽的完整流程：1)创建可配置的draggable指令，支持边界限制、拖拽句柄等特性；2)注册指令；3)使用指令。代码实现包含完整的交互逻辑和边界处理，并支持动态配置更新。相比插件方式，自定义指令更适合单一功能的快速实现，而插件更适合复杂场景。该方案通过transform实现平滑拖拽，并提供了完善的清理机制。

摘要：本文介绍了一种前端生成并下载audio/webm音频文件的方法。通过MediaRecorder API访问麦克风录制音频，将音频数据保存为Blob对象后，使用URL.createObjectURL()生成下载链接。代码示例展示了完整的实现流程，包括开始/停止录音按钮控制、音频数据处理和自动下载功能，解决了测试用音频文件获取不便的问题。该方法无需后端支持，纯前端即可实现音频录制和下载。

【代码】前端代码优化之布尔条件判断太长的处理。

webpack中的 require.context() 函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。

npm 及 package.json 简介

Next.js快速入门

前端如何锁定项目的node和pnpm版本

webpack是什么定义 webpack是一个JavaScript应用程序的静态模块打包器。它会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less，ES6等），将其转换和打包为合适的格式供浏览器使用。工作原理 把项目当作一个整体，通过一个给定的主文件（如：main.js），Webpack将从这个文件开始找到你的项目所...

浏览器内核是什么？浏览器内核主要分成两部分：渲染引擎和JS引擎，因为JS引擎的逐渐独立，故通常浏览器内核是指渲染引擎。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。浏览器内核（渲染引擎）有什么用？负责取得网页的内容，整理讯息，以及计算网页的显示方式，然后会输出至显示器或打印机。 浏览器内核不同，对于网页的语法解释会有不同，所以渲染的效果也不相同。 所有网页浏...

前端模块化之JS中的三种模块规范AMD规范思想 异步加载所需模块，然后在回调函数中执行主逻辑。设计目的 1.实现JS文件的异步加载，避免网页因加载时间过长而失去响应； 2.管理模块之间的依赖性，便于代码的编写和维护；代表 RequireJS示例//a.jsdefine(function(){ console.log('a.js'执行); return...

Linux安装mongodb及mongodb的远程连接本文主要介绍Linux系统 - centOS通过yum安装mongodb和mongodb的远程连接配置仓库文件针对MongoDB版本为3.6的：# vim /etc/yum.repos.d/mongodb-org-3.6.repo复制以下代码到文件中[mongodb-org-3.6]name=Mon...

通过user-agent判断用户是用QQ、微信还是支付宝打开链接或二维码function is_weixn_qq(){var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger") { return "weixin";} else if (ua.match(/...

NodeJS搭建项目的简单配置与数据库连接主要内容如下：加载exprss模块创建app应用加载模板处理设置静态文件托管加载数据库模块离线写博客处理post请求Cookie设置加载exprss模块var express = require('express');创建app应用 (相当于NodeJS Http.createServer();)代码块...

一、原理1. 定义：JavaScript”预解析”，可以理解为把变量或函数预先解析到它们被使用的环境中。2. 通俗点讲，即认为浏览器在正式运行JavaScript代码前，第一步，会预先根据关键字var、function等，来查找一些需要被解析的东西，例如：var a = 1; function test(){ alert(2); }; 第二步，给这些需要被解析的东西提前赋值，其中包括：⑴ 所有的变...

Highcharts绘图在项目中的一些简单运用

JavaScript一些字符串和数组的操作方法

JQuery常用操作归纳

起因：本人在做slider滑块插件的过程中，遇到双击滑块后，默认为鼠标选中行为，导致拖拽功能无法正常使用。经过：以下为插件的截图：说明：因截图不能截取鼠标，故使用手绘图片代替。即拖拽滑块时，双击鼠标，出现如图所示情况。猜测：Chrome浏览器对双击事件默认为选中行为。解决方案：禁止用户选中网页上的内容，使用onselectstart，例如 为元素加上onsele

CSS中有个box-sizing的属性，特别有意思：定义：box-sizing: content-box|border-box|inherit; 解释：box-sizing主要用来规定元素宽高。①content-box  -  默认属性    CSS2.1规定的宽度高度行为，宽度和高度分别到元素的内容为止，而内边距和边框不计算在内；    也就是说，你使用content-box

滚动插件的使用之jQuery Marquee简介：jQuery Marquee是一款基于 jQuery 的滚动插件，类似于 HTML 的 marquee 标签，但在marquee的基础上新增了许多可控功能。它可以应用于多种 Web 元素，包括文字、图片、表单等元素，同时它可以设置不同的滚动方向（上下左右）、滚动速度、无缝滚动等等，并且支持CSS3。安装使用参数及配置演示一、安装npm安装

在Linux/CentOS 7上安装Node.js下载解压重命名配置测试附录一、Linux下载node.js选择要安装的目录（本地安装的软件和其他文件一般放在/usr/local目录下）# cd /usr/local 下载# wget http://cdn.npm.taobao.org/dist/node/v8.9.3/node-v