837927397@QQ.COM-CSDN博客

控制灯的开关，关 -> 弱灯 ->强灯 ->关灯循环，这里使用状态模式来设计，省去了大量的if else判断，并且方便宜以后扩展其它状态。直接上代码：// 灯函数const light = function(){ this.ruo = new ruo(this) this.qiang = new qiang(this) this.guan = new guan(this) this.btn = document.createElement('button')...

2022-05-17 16:35:08 240

原创 js设计模式——策略模式

以验证对象属性为例，直接上代码// 创建策略const DICT = { isEmpty:(...args) => { const [v, msg] = args if(v === '') { console.log(msg) throw new Error(msg) } }, minLength:(...args) => { const [v,len, msg] = args if(v.length <

2022-05-16 17:35:53 220

原创 vue页面关闭beforeunload的使用

浏览器关闭前事件beforeunload

2022-05-13 16:53:59 979

原创 js设计模式——单例模式

只能创建一个实例对象，如果已创建，则不进行创建，通过闭包实现，直接上代码//核实方法，检查RES是否创建var x = function(fn){ var res = null; return function(o){ return res || (res = new fn(o)) }}//构造函数function createLogin(user) { this.name = user.name; this.password = user.password;}let

2022-02-24 05:15:41 390

原创 JS设计模式——工厂模式

有一个商店，出售商品，我们提取出商品的公共属性，名称，价格，库存，作为父类。得以下代码：function createProduct(name,price,count){ //创建商品，有名称，价格，数量属睡 this.name = name; this.price = price; this.count = count;}createProduct.prototype.sale = function(){ alert(`我是${this.name}，我的售价是${this.price}

2022-02-22 22:39:06 106

原创 webpack5插件开发

做了一个测试，在输入之前在资源后面加了一句代码。测试可执行class myPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('emit', function (compilation, call) { console.log("生成资源到 output 目录之前") for (let i in compilation.assets) {

2022-01-28 16:11:26 1056

原创 JS自定义监听事件

a.js文件内容const eventName = new CustomEvent('myevent',{})//确保主线程执行完毕后执行此代码，确保监听的注册完成后才来执行setTimeout(function(){ document.dispatchEvent(eventName)},0)index.html<script type="text/javascript" src="a.js"></script><script>docum

2021-11-12 15:36:36 939

原创 replaceState pushState,location.hash 比较

window.history.replaceStete('index','','#/index')// 替换当前URL, 不会在history的历史记录中添加记录，不会触发hashchange监听window.history.pushState('index','','#/index')// 替换当前URL, 会在history的历史记录中添加记录，不会触发hashchange监听location.hasn='#/index'//替换当前URL, 会在history的.

2021-11-12 15:26:52 267

原创 webpack5打包CSS时删除多余的JS文件

//js文件文件名 css-entry-plugin-plusclass CssEntryPluginPlus{ apply(compiler){ compiler.hooks.emit.tapAsync('CssEntryPluginPlus',(compilation,cb) => { for(ley key in compilation.assets) { key.endsWith('.js') ? dele.

2021-09-15 15:56:32 371

原创 VUE3 setup学习记录

2021-08-10 20:05:19 152

原创 Node定时调用package.json中script命令

const child_process = require('child_process');//stdio子进程的标准输入输出配置,'inherit'：通过相应的标准输入输出流传入/传出父进程const child = child_process.spawn('npm',['run','build'],{stdio:'inherit'})child.on('close',code => { //执行完成})...

2021-08-03 15:11:01 741

原创 input只能输入整数或小数后两位

利用input的oninput事件配合正则表达式，下面的是只允许1到 3位整数，或1到3整数和最多两位小数<input oninput="value=value.match(/^(\d){1,3}\.(\d){0,2}}|^(\d){1,3}/g) || '' " />如果对你有帮助，那就点个赞吧！...

2021-07-14 09:40:56 628

原创 webpack4 plugin 利用插件更改输出资源内容

插件 index.js：const pluginName = 'myTestPlugin';class myTestPlugin { apply(compiler) { compiler.hooks.emit.tapAsync(pluginName, (compilation, cb) => { //可遍历出所有的资源名 for (var filename in compilation.assets) {

2021-07-11 16:21:25 851

原创抽奖CSS布局之grid

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <style type="text/css"> body{ backg...

2021-06-30 17:29:25 156

原创 vue render函数使用

函数式组件// render.jsexport default { name: 'componentName', functinal: true, props: { options: { type: String, default: '' } }, render(h,context) { return ( <div>aaaa

2021-04-21 20:56:37 222

原创 VUE中如何判断组件是否存在

try { require('../aaaa.vue') //不能用import，因为不会被catch捕捉 //下面是存在的逻辑} catch(err) {//下面是不存在的逻辑}

2021-04-11 17:50:34 2816

原创 VUE页面引导插件vue-introjs使用记录

一，安装 npm i intro.js npm i vue-introjs二，全局引入CSSimport 'intro.js/introjs.css'三，模板中使用<template> <div v-intro="'提示文本'" v-intro-position="'top'" v-intro-tooltip-class="'tipclass'" <!--提示框CSS,注意，这里的tipclass.

2021-03-10 10:49:28 900

原创 javascript数据类型判断Object.prototype.toString.call()

// 数据类型判断Object.prototype.toString.call(1)"[object Number]"Object.prototype.toString.call('1')"[object String]"Object.prototype.toString.call(true)"[object Boolean]"Object.prototype.toString.call([])"[object Array]"Object.prototype.toString..

2020-12-13 13:57:29 114

原创前端批量引入文件荚中的文件 require.context

const example = require.context('./example',false,/\w+\.(vue)$/)example.keys().forEach(item => { console.log('example下的所有vue文件', item) // item 相对路径， console.log(example(item).default) // example(item).default 组件，});取出同级目录example下的（不包含文件荚里的）所.

2020-11-20 17:59:29 524

原创 VUE $attrs与$listeners

主要用于上下级（非父子）组件的传参与事件调用，VUE 2.4及以上版本使用父组件代码：<template> <div> <aa :username="username" :userage="userage" @ccc="aaaa"></aa> </div></template><script>import aa from "./a.vue"export default {

2020-11-19 17:32:52 109

原创 async函数处理await的reject回调

function a() { return new Promise((resolve,reject) => { setTimeout(() => { reject("vvvv") }, 1000) }) } async function b() { let z = await a().catch(e => { alert(e) }) if (!z) return //继续您的操作 } b()上面是方法一.

2020-10-15 19:30:24 1794

空空如也

空空如也