Huang-ioi-CSDN博客

原创前端常用设计模式

观察者模式是一种设计模式，它建立了对象之间的一对多依赖关系，当一个对象状态发生改变时，其依赖的所有对象都会收到通知并自动更新。策略模式的优点在于可以根据需要动态地切换和应用不同的策略，使得算法的选择与使用者分离，提高代码的灵活性和可扩展性。原型模式可以在前端开发中用于创建可复制的对象，例如在原型对象上定义一些通用的方法或属性，然后通过克隆来创建具有相同行为的新对象。这样，组件不直接依赖于具体的数据服务类，而是依赖于抽象的接口，从而减少了组件与具体实现的耦合，提高了代码的灵活性和可测试性。

2023-06-23 09:17:33 594

原创几句话说明白 javaScript的执行机制

几句话说明白JavaScript的执行机制，看透同步异步的本质

2023-05-15 17:51:28 126 1

原创标签使用的严谨很重要

ios移动端中自定一下拉弹窗不显示，on click点击事件没效果。

2023-02-22 15:55:59 142

原创 Array 最全面的总结，从基础到奇技淫巧

文章包含关于数组的最全面知识点，数组常规需求的最简洁写法，以及关于数组的常见算法。

2023-02-20 14:22:56 257

原创 uni-app 日期选择组件单日/日期范围选择

先看效果单日选择多日选择组件<template> <view v-show="value" class="calendar-body"> <view class="title-name"> {{title}} <text class="iconfont icon-close-bold" @click="close()"></text> </view> <view v-i

2021-04-25 10:28:32 4702 2

原创 uni-app 表情、键盘切换输入组件

组件内容<template> <view v-if="showInputEmoji" class="icon-img-emoji"> <view class="pop_pinglun" :style="{bottom: keyHeight + 'px'}"> <view class="mask" @click="showInputEmoji = false"></view> <view class="warp" @tap

2021-03-23 14:39:51 4445 7

原创 rrweb + vue用户屏幕行为录制

• npm install rrweb -S• npm install rrweb-player -S这里我使用的是 PHP + mysql 接收数据保存录屏数据的字段最好使用 longtext 类型录屏数据一般比较大<template> <el-card shadow="never" class="aui-card--fill"> <div class="rrweb-create"> <el-button @click="c

2021-02-23 15:37:52 2923 3

原创 ThreeJs+vue3.0 加载obj/dae3D模型

3D模型下载地址 https://www.3dxy.com/3dmodel/pt-7.html<template> <div> <div id="container"></div> </div></template><script>import * as Three from 'Three'import { OrbitControls } from 'three/examples/jsm/c.

2021-01-20 11:09:19 2602

原创 ThreeJS + vue3.0 实现粒子波浪

<template> <div class="LatheBufferGeometry"> </div></template><script>import * as Three from 'Three'import Stats from 'stats-js'export default { name: 'LatheBufferGeometry', setup () { // FPS引入 const stats

2020-12-31 10:08:34 2326 3

原创 ThreeJS vue3.0 快速实现VR全景图

引用对应的扩展 import { OrbitControls } from‘three/examples/jsm/controls/OrbitControls’ 抗锯齿参数 antialias: true双面显示 side: Three.DoubleSide<template> <div class="Create"> </div></template><script>import * as Three from 'thre.

2020-12-29 15:11:15 5372 2

原创 ThreeJS vue3.0 立方体如此简单

vue3.0 引用 three.jscnpm install three -S在使用的页面 import * as Three from ‘three’使用three绘制最简单正方体<template> <div class="Create"> </div></template><script>import * as Three from 'three'export default { name: 'Create',

2020-12-29 15:07:43 1448

原创 vue3.0 admin 管理后台

使用 vue3.0 + element-plus 的vue3.0管理后台项目地址：https://gitee.com/wfHuang/vue3.0-element// 使用的组件"dependencies": { "core-js": "^3.6.5", "element-plus": "^1.0.1-alpha.19", "lodash": "^4.17.20", "register-service-worker": "^1.7.1", "vue": "^3.0.0.

2020-12-21 11:11:05 5775 1

原创第九天： arguments is not defined

我们在使用 arguments 的时候出现 arguments is not defined其原因常见的是因为没有注意 es6 箭头函数没有this 和 argumentsArray.prototype._push = (...value) => { for (let i = 0; i < arguments.length ; i++) { this[this.length] = arguments[i] return this.len.

2020-11-23 15:36:09 3019

原创第八天：ios new Date() 兼容问题

js20202014 new Date() 创建时间在IOS 系统中的兼容问题问题描述： new Date(‘yyyy-MM-dd’) 这个操作在ios中会报错问题所在： ios new Date() 操作的时候，时间格式必须是 yyyy/MM/dd getToDay(curDate) { // 兼容ios // 这里一般合理的处理方式就是将 ‘-’ 替换成 ‘/’ // 特别注意的是：curDate 这个值至少是包含 yyyy-MM-dd 年月日

2020-10-14 16:38:55 116

原创 uni-app 实际开发中遇到的坑

createCanvasContext 中的 ctx.draw() 失效问题描述let ctx = uni.createCanvasContext('myCanvas', _this);// 解析图片// 画图// 最后下面和这个不执行了ctx.draw(false, () => { // 描绘路径 // 下载图片})问题所在// 没有传入对应的thisctx.draw(false, () => { // 描绘路径 // 下载图片}

2020-06-30 12:10:49 984

原创第七天： uni-app 最实用的单点登录及权限验证

Uni-app20200519 uni-app 最实用的单点登录及权限验证登录方法/** * 登录 */ sumbit () { this.$http.post('/sys/User/login', this.dataForm).then(({ data: res }) => { // 存储token uni.setStorageSync('token', res.token) // 存储用户数据 this.$store.dis

2020-05-19 10:24:30 7317 3

原创第六天：超详情的vue锚点定位详解

Js20200422 vue自定义锚点定位<template> <div>  <div class="content"> <div> content-0 </div> <div> content...

2020-04-22 17:54:00 485

原创第五天：uni-app 封装请求拦截、响应拦截

Uni-app20200421 uni-app 封装请求拦截、响应拦截安装npm install uni-request --save封装方法import uniRequest from '../uni-request/index.js';import config from '../config/index.js' // 全局域名配置/** * 提供的方法有 * uniRe...

2020-04-21 10:08:28 12355 10

原创第四天：日常使用的正则判断

Javascript20200413 日常使用的正则判断/** * 判断是否是字母 * @param {Number} data */export const checkLetter = data => /^[a-zA-Z]+$/g.test(data)/** * 判断是否全部是小写字母 * @param {Number} data */export const...

2020-04-13 09:24:44 120

原创第三天：数组操作集合

Javascript今天没想起什么特别的骚操作，就总结一下数组的操作吧20200410 数组操作/** * 数组并集,只支持一维数组 * @param {Array} arrOne * @param {Array} arrTwo */export const arrAndSet = (arrOne, arrTwo) => { return arrOne.concat...

2020-04-10 16:45:30 152

原创第二天：vue全局导入组件，也是创建组价组件库的方式

我想写一篇专题博文，每天一个知识点第二天vue20200408 全局导入组件// 组件目录下新建一个index.js 文件// 这其实就是开发公共组件库的方式，以下为内容// 导入button组件import WButton from './Button'// 组件列表const components = [ WButton]// 定义 install 方法，...

2020-04-09 09:49:34 350

原创第一天：路由传值解耦

我想写一篇专题博文，每天一个知识点第一天vue20200408 路由传值解耦// 路由设置props{ path: '/url-id', name: 'url_id', component: () => import('@/views/modules/url/id'), meta: { title: '加载中···' }, props: (r...

2020-04-09 09:46:08 253

原创 2020 前端面试必问知识点

又到了一年一度金三银四，今年因为疫情的影响。机会也显得格外的少，根据自己这段时间面试的三家公司，还有面试别人的经历来总结了一下面试必问知识点我整理了一个思维导图提供原始思维导图文件还在继续整理中，有兴趣的可以在评论区留下你面试的考点...

2020-03-04 12:18:02 494 1

原创整理一下vue 移动端模板框架搭建

今天正好有机会，整理一下如何新建一个 vue 移动端模板框架vue create vue_h5回车Vue CLI v4.1.1? Please pick a preset: ee (router, vuex, babel) 单元测试 (node-sass, babel, router, vuex, eslint, unit-jest) 标准项目 (node-sass, ...

2019-12-27 15:51:04 2828

原创解决Cannot read property 'range' of null 错误

今天将模板项目 npm install 一直报 Cannot read property ‘range’ of null 也是很无奈多方排查 babel-eslint 高版本代码检测问题解决方式降低babel-eslint 的版本这个东西就不细说了，我就喜欢用最新的版本，于是乎继续排查问题问题所在 component: () => import(`@/vie...

2019-12-26 16:48:46 15906 15

原创 vue-cli3 eslint 配置规则参数

"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部...

2019-12-26 11:52:01 816

原创 vue php 前后台分离模板项目

这几天整理了一个完整的前后台分离项目前端 VUE 后台Thinkphp5 访问地址：http://118.31.226.151:1001/static/dist/ 账号: admin 密码：888888 （服务器异常的小，请轻轻访问，谁叫我穷~）项目简介：基础功能模块：登录、权限验证、用户管理、菜单管理、部门管理、角色管理、表格导入导出业务功能模块: ...

2019-12-18 19:22:29 1643 11

原创 JS 有些小数相加会多出很多位

JS 浮点运算有点 BUG 有些小数相加会自动多出很多位例如 39.7 + 24.2 = 63.900000000000006 9.7 + 4.2 = 13.899999999999999没有比这更坑的了只能有 toFixed(1) 截断一下...

2019-11-22 16:01:42 2113

原创表单验证手机号输入框

最近有点时间抠了一些细节，之前项目的表单验证比较奔放，比如H5手机号输入框，可以输入文字，移动端点击弹出来的键盘不是数字键盘，今天找了点时间优化一下先上最终效果这里主要是做了两点1、 input 的pattern 属性配合样式进行同步提示，在此处表现就是输入错误的时候输入框为红色，正确的时候为绿色2、还有就是直接限制不能输入字符，这一点可能途中提现不出来优化...

2019-09-23 17:00:01 6194

原创 vuex 存储状态刷新丢失问题优化

前言：之前做的都是整个项目的vuex 存储，一般处理方式就是在主文件写个方法重新拿数据，例如用户权限，刷新时重新请求后台接口，拿回来数据赋值给this.$store.state.参数名，现在的问题是，最近要做H5页面集成平台，有大量的state值，而且不是一个项目的，分模块的无法请求后台拿回最新状态，只能做本地存储，刷新时重新赋值给this.$store.state, 这里就...

2019-08-12 16:20:59 639

原创最简单的 Python Scrapy安装

安装 Scrapy 与安装其他Python包没有区别，同样使用如下命令来安装：pip install scrapy如果在命令行窗口中运行该命令，将会看到程序并不立即下载、安装 Scrapy，而是不断地下载大量第三方包。如果在命令行窗口中提示找不到 pip 命令，则也可以通过 python 命令运行 pip 模块来安装 Scrapy，例如python -m pip install ...

2019-07-05 13:56:20 598

原创 VUE 调用PC摄像头全浏览器可用

前几天项目有个需求人脸识别不想用flash这么恶心的组件所有查找了网上一下资料手撸了一个可用浏览器谷歌火狐 360 UC QQ 当然都是基于三大内核的（除了该死的IE都能用）这里要特别说明摄像头权限是浏览器比较高的权限需要本地地址上线需要https 域名 http 是没有用的不多说直接代码吧自己去看<template>...

2019-06-12 11:35:26 12768 17

原创 vue-cli3 axios去除预检请求OPTIONS 做请求代理

本地开发在 vue.config.js 配置代理proxy: { '/api': { target: 'https://easy-mock.com/mock/5cce946a3d417120b6186d75/data_demo', // 接口地址 secure: false, //https请求需要这个参数 changeOrigin: true, //是否...

2019-06-02 18:56:34 9587

原创 vue-cli3.x 组件es6 转es5 失败导致低版本浏览器报错

错误为Uncaught SyntaxError: Unexpected token ...这个问题网上看了很多解决方式都没发实现这个组件转化成ES5 这个坑爹的组件就是 vue-superslide 来看一下他入口文件的内容// 导入组件import superslide from './superslide'// import superSlide from "...

2019-05-20 18:28:05 7900 2

原创 vue-element-admin

基于vue element-UI 的一套后台模板UI框架 element-UI模拟数据 Easy Mock 网址 https://easy-mock.com已经集成的功能登录token验证菜单权限控制按钮权限控制顶部菜单-侧边导航联动项目地址 https://gitee.com/wfHuang/vue-element-amdin系统满足快速...

2019-04-23 11:28:19 815 1

原创 Eslint 配置规则

我的需求：想规范平时的代码风格如何把eslint 运用到一般页面开发中第一步全局安装 npm install eslint -g 第二步webstorm配置第三步配置.eslintrc 文件（项目的根目录下新建一个.eslintrc 文件，下面是我的配置文件）{ "env": { "browser": true, "node": t...

2019-03-05 15:41:20 2118

原创手机端键盘弹出遮住输入框处理

这个问题的处理方式有几种，这里我只说明比较实用的一种$("input").focus(function(){ $('body').attr('height','9999px') ; this.scrollIntoViewIfNeeded();}) ;$("input").blur(function(){ $('body').attr('height','auto') ;}) ...

2019-02-11 15:19:15 3383 1

原创 VUE CDN 引入文件单独使用出现初始化 {{}} 的情况

问题：最近某些原因单独使用VUE 文件写了一些页面初始化时会出现看到 {{}} 的情况解决方式：在最外层加一个 v-cloak CSS中加 [v-cloak] { display: none; } ...

2019-01-15 09:13:57 1446 4

原创 PHP+FFmpge+Nginx 搭建流媒体服务器

前言：这个服务主要用于一下项目里面的视屏在线预览。第一点下载FFmpge 网上很多，有很多说用 PHP-FFmpge 等其他的都是了一下很麻烦。这里我提供我用的链接：https://pan.baidu.com/s/1s2wjRKvtyaeua-e4NjuOlw 提取码：yns6 这里有一篇有参考价值的博客，其他的好像帮助不大参考这里我要说一下这个哥们，后面说...

2018-12-12 13:49:21 3572 2