js
关注
分享
扫一扫
今天又懒得加班
本人很懒，很菜
展开
-
taro 支持less或者stylus增加全局变量和mixins
作者感觉挺强的,给了starhttps://github.com/Binbiubiubiu/taro-plugin-style-resource安装 taro-plugin-style-resourcenpm i taro-plugin-style-resource# yarnyarn add taro-plugin-style-resource使用插件/config/index.jsconst path = require("path");// 示例, 如果你...原创 2022-04-05 13:11:33 · 2080 阅读 · 0 评论 -
滑块验证码 拼图凹槽和滑块的实现
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &...转载 2022-03-05 10:15:48 · 320 阅读 · 0 评论 -
微信公众号H5分享的坑
1. 先注册js api白名单jsApiList:[ 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']2. wx.updateTimelineShareData 和 wx.updateAppMessageShar.原创 2021-09-10 17:21:24 · 775 阅读 · 1 评论 -
FIFO-Cache
class Cache { constructor (limit = 5) { this.limit = limit this.map = {} this.keys = [] } set (key,value) { let map = this.map let keys = this.keys if (!Object.prototype.hasOwnProperty.call(.原创 2021-07-22 09:24:35 · 371 阅读 · 0 评论 -
如何在浏览器获取摄像机画面和语言
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> &l.原创 2021-01-26 17:57:08 · 175 阅读 · 0 评论 -
javascript 设计模式笔记(二)
this的指向1.作为对象的方法调用。当函数作为对象的方法被调用时，this指向该对象：var obj = { a:1, getA:function(){ alert( this === obj); // 输出: true alert( this.a ); // 输出: 1 }}obj.getA();2.作...原创 2020-05-04 18:25:03 · 207 阅读 · 0 评论 -
javascript 设计模式笔记(一)
实现一个Object.create()Object.create = Object.create || function(obj){ var F = function(){}; F.prototype = obj; return new F()}1.所有的数据都是对象。事实上，JavaScript中的根对象是Object.prototype对象。Ob...原创 2020-05-04 17:58:31 · 176 阅读 · 0 评论 -
github项目 规范 提交和 持续集成
安装 commitlintnpm install --save-dev @commitlint/{cli,config-conventional}echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.jsnpm install --save-...原创 2020-04-29 00:24:03 · 414 阅读 · 0 评论 -
docker mysql nestjs
version: '3'services: db: image: mysql:latest container_name: mysql command: [ '--default-authentication-plugin=mysql_native_password', '--character-set-server=utf8mb4'...原创 2020-04-18 20:15:12 · 485 阅读 · 0 评论 -
git 提交规范(害怕)
提交规范建议提交规范：比如：fix(首页模块)：修复弹窗JS Bug。type表示动作，可分为：fix: 修复 xxx Bugfeat: 新增xxx功能test：调试xxx功能style: 变更xxx 代码格式或注释docs：变更xxx文档refactor：重构xxx功能或方法scope表示 影响范围，可分为：模块类库方法…subject表示...原创 2020-03-03 09:48:41 · 140 阅读 · 0 评论 -
树形结构和数组结构互相转换
树形转数组思路： 一个数组把父节点和子节点都塞入一个一维数组中 const treeToArray = (tree) => { let result = [] const merge = (tree, childName = "children") => { result.push(tree) tree[childName].forEa...原创 2019-12-18 22:23:53 · 633 阅读 · 0 评论 -
svelte 学习记录(三)
自定义指令use:pannable 自定义指令给指定元素绑定拖动事件// pannable.jsexport function pannable(node) { let x; let y; function handleMousedown(event) { x = event.clientX; y = event.clientY; node.dispatchEve...原创 2019-12-16 22:07:30 · 845 阅读 · 0 评论 -
svelte 学习记录(二)
状态管理状态管理主要使用svelte/store 这个目录writable 声明一个可以obsevable的对象const count = writable(0);初始化 值通过update 更新 类似react中setState通过set 直接更新值通过subscribe监听值得变化 。会返回一个unsubscribe函数，配合onDestory 取消监听$coun...原创 2019-12-16 16:03:03 · 917 阅读 · 0 评论 -
Vue 插件如何编写
代码的书写规则如上import Component from './component'let componentObj={}const install = function(Vue) { Vue.directive('ComponentName', Component)}if (typeof window !== 'undefined' && window....原创 2019-12-16 09:09:35 · 289 阅读 · 0 评论 -
svelte 学习记录(一)
svtelte 是一款更小、更轻量的框架，比现在的三大框架都更轻量，但是应用不广泛。之中的利弊可以移步知乎等论坛https://www.zhihu.com/question/53150351Hello world和vue 比较类似，他也有自己独特的 .svelte 后缀的文件app.svelte<h1>Hello world!</h1>这个文件会...原创 2019-12-16 09:09:21 · 1376 阅读 · 0 评论 -
videojs 项目简单实践
最近做大屏需要调用萤石的视频流资源后台请求萤石那块时候，需要注意输出码率 需要选择国际标准码 选择HLS（HTML5播放器，优先选择）、rtmp (FLASH 播放器，浏览器后续真不打算支持了FLASH)前端代码（其实官网都有，伸手党的福音）vue版本 ：https://docs.videojs.com/tutorial-vue.htmlreact版本 ：https://d...原创 2019-10-26 10:35:22 · 1176 阅读 · 0 评论 -
ffmpeg + alfg/nginx 做rtmp 推流
1.docker 安装 nginx做 rtmp服务器docker pull alfg/nginx-rtmpdocker run -it -p 1935:1935 -p 8080:80 --rm alfg/nginx-rtmp2.ffmepg 把mp4 文件做视频推流ffmpeg -re -stream_loop -1 -i 002.mp4 -f flv rtmp://12...原创 2019-10-16 22:22:20 · 1868 阅读 · 0 评论 -
Webpack4学习笔记（一）——基本使用
这是一个关于Webpack4的文章系列，其中包含以下文章:Webpack4学习笔记（一）——基本使用 Webpack4学习笔记（二）——代码分割（单入口） Webpack4学习笔记（三）——代码分割（多入口） Webpack4学习笔记（四）——CSS处理 Webpack4学习笔记（五）——分离production和development环境 Webpack4学习笔记（六）——Webp...转载 2019-04-20 22:58:51 · 212 阅读 · 0 评论 -
移动端适配rem,vw
以下方案 只是摘录网上一些大神的博客, 不依赖,修改灵活方便.方案一 rem原文地址:https://www.cnblogs.com/leinov/p/5209456.htmlmeta设置<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">适配代码...转载 2019-07-06 14:42:27 · 275 阅读 · 0 评论 -
gulp 学习1(一)
安装$ npm install --global gulp-cli$ npm install --save-dev gulp具体新建项目步骤:https://gulpjs.com/docs/en/getting-started/quick-start配置文件文件名称 gulpfile.js (或者Gulpfile.js)如果需要不同模块化打包原创 2019-07-19 17:25:41 · 239 阅读 · 0 评论 -
youtube 字幕视频搬运
环境准备FFmpeg www.downsub.com.com(kxsw) www.youtube.com(废话+kxsw)下载视频利用火狐浏览器的Youtube 插件(Easy Youtube Video Downloader Express)下载字幕www.downsub.com.com 这个网站 复制链接地址 就可以下载到想要的srt 字幕文件100:00:0...原创 2020-03-18 18:32:14 · 1568 阅读 · 0 评论 -
有趣的面试题系列(一)
1.使用setTimeout实现setInterval的功能转载自:https://blog.csdn.net/jameszhufu/article/details/81774431timeFuction();function timeFunction(){ var timer = setTimeOut(function(){ timeFuction...原创 2019-09-16 19:38:22 · 955 阅读 · 0 评论 -
有趣的面试题（二）
1.add(1, 2, 3)与add(1)(2)(3)的写法function add(x,y){ var sum = x; if(y){ return (sum + y); }else{ var add1 = function(z){ return (sum + z); } return add1; }}var add2 = add(1)(2);cons...原创 2019-09-18 23:45:28 · 176 阅读 · 0 评论 -
简易的实现vue双向绑定
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 具体实现步骤，感兴趣的可以看看:当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty ...转载 2019-06-05 09:23:37 · 246 阅读 · 0 评论 -
用CSS绘制最常见的40种形状和图形
转载自http://www.webhek.com/post/40-css-shapes.html今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。Square(正方形)#square { width: 100px; height: 10...转载 2019-06-16 19:42:49 · 1251 阅读 · 0 评论 -
前端应该会的函数(转载)
1、如何实现一个 LazyMan实现一个LazyMan，可以按照以下方式调用:LazyMan(“Hank”)输出:Hi! This is Hank!LazyMan(“Hank”).sleep(10).eat(“dinner”)输出Hi! This is Hank!//等待10秒..Wake up after 10Eat dinner~LazyMan(“Hank”).eat...转载 2019-06-08 23:32:47 · 625 阅读 · 0 评论 -
Webpack4学习笔记（五）——分离production和development环境
这是一个关于Webpack4的文章系列，其中包含以下文章:Webpack4学习笔记（一）——基本使用 Webpack4学习笔记（二）——代码分割（单入口） Webpack4学习笔记（三）——代码分割（多入口） Webpack4学习笔记（四）——CSS处理 Webpack4学习笔记（五）——分离production和development环境 Webpack4学习笔记（六）——Webp...转载 2019-04-20 23:08:26 · 788 阅读 · 0 评论 -
Webpack4学习笔记（四）——CSS处理
这是一个关于Webpack4的文章系列，其中包含以下文章:Webpack4学习笔记（一）——基本使用 Webpack4学习笔记（二）——代码分割（单入口） Webpack4学习笔记（三）——代码分割（多入口） Webpack4学习笔记（四）——CSS处理 Webpack4学习笔记（五）——分离production和development环境 Webpack4学习笔记（六）——Webp...转载 2019-04-20 23:07:35 · 204 阅读 · 0 评论 -
Webpack4学习笔记（三）——代码分割（多入口）
这是一个关于Webpack4的文章系列，其中包含以下文章:Webpack4学习笔记（一）——基本使用 Webpack4学习笔记（二）——代码分割（单入口） Webpack4学习笔记（三）——代码分割（多入口） Webpack4学习笔记（四）——CSS处理 Webpack4学习笔记（五）——分离production和development环境 Webpack4学习笔记（六）——Webp...转载 2019-04-20 23:04:53 · 478 阅读 · 0 评论 -
Webpack4学习笔记（二）——代码分割（单入口）
这是一个关于Webpack4的文章系列，其中包含以下文章:Webpack4学习笔记（一）——基本使用 Webpack4学习笔记（二）——代码分割（单入口） Webpack4学习笔记（三）——代码分割（多入口） Webpack4学习笔记（四）——CSS处理 Webpack4学习笔记（五）——分离production和development环境 Webpack4学习笔记（六）——Webp...转载 2019-04-20 23:00:00 · 609 阅读 · 0 评论 -
浏览器禁用缩放
document.body.style.zoom = "100%"; document.addEventListener( "keydown", function(event) { if ( (event.ctrlKey === true || event.metaKey === true) && ...原创 2019-04-16 11:46:15 · 1922 阅读 · 0 评论 -
浏览器通知push.js 工具（实用）
现在网站推送消息什么的似乎各大网站都支持了。多亏了HTML5 中的 JavaScript Web Notification API 允许桌面和移动浏览器显示包含自定义内容的通知。JavaScript Web Notification API 现在与大多数现代浏览器兼容，我们已经看到它在许多网站和应用程序中实现。https://developer.mozilla.org/zh-CN/do...转载 2019-03-28 20:04:15 · 6306 阅读 · 4 评论 -
clientX、offsetX、screenX、pageX、x的区别
1.clientX,clientY 点击位置距离当前body可是化区域的x,y坐标2.pageX，pageY 对于整个页面来说，包括了被卷去的body部分的长度3.screenX，screenY 点击位置距离电脑屏幕的x,y坐标4. offsetX,offsetY 相对于父容器的x,y坐标5. X，Y 和c...原创 2019-04-07 18:51:07 · 170 阅读 · 0 评论 -
前端 好用的插件随记（持续更新）
web工具1.scrollReveal.js – 让页面滚动显示动画JS官网：https://scrollrevealjs.org/github地址：https://github.com/scrollreveal/scrollreveal好的博客：https://blog.csdn.net/weixin_39801446/article/details/821432962.pu...原创 2019-03-08 13:06:47 · 1221 阅读 · 1 评论 -
防抖和节流函数
防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。// 防抖function debounce(fn, wait) { var timeout = null; return function() { if(timeout !== nul...转载 2019-03-02 19:17:05 · 118 阅读 · 0 评论 -
Webpack4学习笔记（六）——Webpack4+VueJS2项目搭建
这是一个关于Webpack4的文章系列，其中包含以下文章:Webpack4学习笔记（一）——基本使用 Webpack4学习笔记（二）——代码分割（单入口） Webpack4学习笔记（三）——代码分割（多入口） Webpack4学习笔记（四）——CSS处理 Webpack4学习笔记（五）——分离production和development环境 Webpack4学习笔记（六）——Webp...转载 2019-04-20 23:09:05 · 172 阅读 · 0 评论 -
原型,原型连,构造方法之间关系(转载)
学习笔记https://www.cnblogs.com/libin-1/p/5820550.html转载 2019-04-27 12:43:25 · 132 阅读 · 0 评论 -
pm2 的配置文件
简介PM2是一个带有负载均衡功能的Node应用的进程管理！内建负载均衡（使用Node cluster 集群模块）可以在后台运行可以0秒停机重载，（可以理解为不需要停机重启，在用户愉快的浏览页面时我们已经程序更新了）控制台检测日志管理热重载…相关配置{ "apps": { "name": "wuwu", ...转载 2019-04-29 23:04:23 · 558 阅读 · 0 评论 -
判断JS数据类型的四种方法
在 ECMAScript 规范中，共定义了 7 种数据类型，分为 基本类型 和 引用类型 两大类，如下所示：基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object基本类型也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈中，即按值访问。引用类型也称为复杂类型，由于其值...原创 2020-06-09 14:44:53 · 229 阅读 · 0 评论 -
Web Audio API入门
转载:https://www.html5rocks.com/en/tutorials/webaudio/intro/在HTML5<audio>元素之前，需要使用Flash或其他插件来打破网络的沉默。虽然网络上的音频不再需要插件，但音频标签为实现复杂的游戏和交互式应用程序带来了重大限制。Web Audio API是一种高级JavaScript API，用于处理和合成Web应用程...转载 2019-05-23 23:43:28 · 6359 阅读 · 0 评论