js原生知识案例
js原生实现的一些常用功能
风清云淡_A
知识在于积累,成功在于坚持
展开
-
原生js中的防抖节流笔记
防抖,单位时间内,频繁触发,只执行最后一次。原创 2024-08-23 17:14:18 · 242 阅读 · 0 评论 -
原生js中的深浅拷贝笔记
深浅拷贝,是我们在处理数据中一定会遇到的问题,浅拷贝是引用地址的拷贝,主要是针对object类型,新数据和原始数据会相互影响。深拷贝是值的拷贝,是单独一个内存空间,不会互相影响。原创 2024-08-23 15:00:29 · 206 阅读 · 0 评论 -
es6基础(1)----let/const详细研究
它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内{}有效。原创 2023-07-19 10:05:51 · 142 阅读 · 0 评论 -
腾讯地图的签名校验报错的解决方法---vue-jsonp
换了种使用腾讯地图的方式,不设置域名白名单,直接使用get请求的jsonp方式,遇到了一些问题,现在记录下来,点击地图用经纬度换取地址信息。最后就能,拿取到地址了。原创 2022-09-28 18:24:48 · 2604 阅读 · 0 评论 -
js数组里面的重复对象的去重,合并不同的属性的处理方法
重复数组的过滤去重,并且合并不同的属性,比较抽象!具体的看下面的数据格式var arr = [ { data: [ { xh: '1', name: '张三', value: '1360', postion: [{ d: '上海' }] }, { xh: '2', name: '李四', value: '1120', postion: [{ d: '广州' }] } ] },原创 2021-07-22 16:33:08 · 471 阅读 · 0 评论 -
es6-Proxy
Proxy可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写之前我们是这样的var obj = {}obj.name = 'shehui'接着我们访问该属性也得到了我们初始定义的数据,但是如果我们要在获取obj.name的时候返回"oh!shehui",加上前缀修饰,这个时候我们...原创 2019-06-28 10:57:08 · 913 阅读 · 0 评论 -
es6基础(2)--promise的深度解析
Promise已经深入到前端开发中的各个环节了,异步操作,api接口请求避免不了!Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大!原创 2023-07-19 16:22:39 · 243 阅读 · 0 评论 -
vue3.0封装dropdown下拉菜单
vue3.0出来已经有段时间的了,也与必要开始研究它了!先看下我们要实现的效果很常见的展开显示菜单项的内容,在vue3.0里面怎么开发,这里样式我们用的是bootstrap的默认样式思路一: <DropDown :title="'退出'" :list="menuLists" />思路二: <drop-down :title="'退出'"> <drop-dowm-item>新建文章</drop-down-item> <dro原创 2021-07-10 23:50:23 · 3567 阅读 · 6 评论 -
webpack 4.0+ react的项目搭建
很久没有使用过react项目了,今天要测试下多模块包的项目的打包配置,折腾了很久终于把项目架子搭建出来了,其实不难,主要就是各种版本的loader兼容性问题,版本太多了,处理起来有点乱!1.package.json文件,现在是版本是兼容好的{ "scripts": { "build": "webpack --config ./build/webpack.pro.config.js", "dev": "webpack-dev-server --inline --progress --c原创 2021-06-20 13:58:46 · 188 阅读 · 0 评论 -
js检测浏览器的类型,跳转到移动端的方法
小米官网判断移动端的方法 var userAgent = navigator.userAgent.toLowerCase(); if (/android|iphone|ipad|ipod|symbian|micromessenger/g.test(userAgent)) { window.location.href = "" || ('//m.mi.com/commodity/detail/'原创 2022-01-01 16:10:39 · 444 阅读 · 0 评论 -
js算法的深度优先遍历和广度优先遍历
深度优先遍历实现方式1//深度优先遍历方法let tree = { id: '1', title: '节点1', children: [ { id: '1-1', title: '节点1-1' }, { id: '1-2', title: '节点1-2', children: [{ id: '2', title: '节点2'原创 2022-04-13 15:44:22 · 4898 阅读 · 1 评论 -
原生js的设计莫之函数使用的几种方式
/* 单纯的函数方法的罗列写法 ,造成全局变量的污染*/ function checkName() { } function checkEmail() { } function checkPassWord() { } /* 放在一个对象下面,作为该对象的方法 */ var CheckObject = { checkName() { }, checkEmail() { },原创 2021-11-07 11:43:41 · 83 阅读 · 0 评论 -
原生js实现元素的运动的两种方法
首先来看下效果,点击按钮div开始运动html <input type="button" value="动起来" /> <div id="div1"></div>css #div1 { width: 100px; height: 100px; background-color: red; position: absolute; /* 物体运动必须要加绝对定位 .原创 2021-05-05 09:55:14 · 291 阅读 · 0 评论 -
原生js中的链模式学习笔记
这篇是在学原生js的链模式的笔记,思想借鉴的是jq,主要的笔记记录如下 <div id="demo"></div> <div id="test"></div> <script> var A = function () { } A.prototype = { length: 2, size() { return th原创 2021-11-08 22:18:07 · 302 阅读 · 0 评论 -
vue3.0+ts&&bootstrap封装可验证的输入框组件validateInput
接上面的一片文章,我们封装一个类似于elementui的表单控件,实现的效果:正常显示的验证为空时的报错提示验证格式不正确的报错下面继续沿用上一篇文章的封装思路二来实现这个效果form.vue// emailRules验证规则// title控件名// type 类型// v-model="modelValue" 在form组件获取validate-input 组件的值<form> {{ modelValue }} <validate-input原创 2021-07-11 12:07:15 · 661 阅读 · 2 评论 -
原生js 实现mac上的鼠标滑过图标的效果方法
原生js实现的鼠标滑过图标效果,实现起来比较简单,重点就是计算放大缩小的比例,看效果。原创 2022-11-26 12:44:29 · 333 阅读 · 0 评论 -
注册发布一个node模块
发布一个自己封装的node模块的方法,我这里注册的是fgm模块1.新建一个文件,以模块名字命名fgm2.fgm目录下面新建bin文件夹,在bin目录下面新建一个index.js文件#!/usr/bin/env nodeconsole.log('123')3.在fgm目录下执行npm init -y,修改bin属性下面的fgm对应的命令问路径,加上“bin'{ "na...原创 2019-06-21 16:16:43 · 134 阅读 · 0 评论 -
高级程序设计开发笔记4(单例模式入门到理解运用)
在vue,react的横行的时代,单例模式估计知道的人不多了,但是作为一个要成为高级高开的前端er,必须知道的单例模式这几点什么是单例模式单例模式是保证一个class类只有一个实例并提供一个访问它的全局访问点//版本1 var SingleTon = function (name) { this.name = name this.instance = null } SingleTon.proto原创 2021-09-05 16:41:36 · 163 阅读 · 0 评论 -
手写vue的双向绑定
姓名: <span id="spanName"></span> <br> <input type="text" id="iptName" />关键的js代码: let obj = { name: '' } let spanName = document.getElementById('spanName') let i...原创 2021-02-28 23:07:30 · 118 阅读 · 0 评论 -
js驼峰转连字符
vue源码的实现方式//驼峰转连字符 var r1 = /([a-z])([A-Z])/g; function parseToLink(str) { return str.replace(r1, function (_, g1, g2) { return g1 + '-' + g2.toLowerCase() }) }...原创 2019-11-10 20:42:01 · 318 阅读 · 0 评论 -
原生js中的代理模式的学习笔记
代理模式比较简单,主要的核心代码记录一下 ul { margin-bottom: 10px; overflow: hidden; width: 200px; } li { list-style: none; float: left; width: 20px; height: 20px;原创 2021-11-08 23:03:52 · 476 阅读 · 0 评论 -
算法函数式编程的几种基本方法
//找出数组中的最小值 let arr = [30, 34, 23, 45, 90, 10] //方法一 var findMinNums = function (arr) { let minNums = arr[0] for (var i = 1; i < arr.length; i++) { if (minNums > arr[i]) { .原创 2021-12-05 21:15:53 · 556 阅读 · 0 评论 -
js对象的比较
1.求a的值,什么情况下能满足这个条件表达式 let a = ? if (a == 1 && a == 2 && a == 3) { console.log(1) }答案: let a = { i: 0, toString() { return ++this.i } .原创 2021-02-28 22:31:26 · 73 阅读 · 0 评论 -
原生js制作苹果风格的图标滑入滑出的效果
要实现的效果是下面这样的,当鼠标滑倒图标上,离鼠标最近的图标放大显示,越远的则变化越小html <div id="div1"> <img src="./img/1.png" alt="" srcset="" /> <img src="./img/2.png" alt="" srcset="" /> <img src="./img/3.png" alt="" srcset="" /> <im..原创 2021-05-04 15:03:41 · 317 阅读 · 0 评论 -
一个无聊的面试题(2)
jq里面如何一次性删除多个class?jq里面删除类的内置方法:removeClass(),当然第一反应也是想到这个方法?然后面试的人就反问了,是不是要多次removeClass,被带到沟里去了。的确平时都只是用来删除单个class,比如当前激活的active,显示隐藏!今天查了下w3c这个api的具体使用方法用法描述写的很清楚了!小公司的面试问题都很偏门!应该是...原创 2019-07-25 11:05:45 · 170 阅读 · 0 评论 -
JS 中合并数组中的多个对象为一个的方法
var arrObj = [{a:1, b:2},{c:3, d:4},{e:5, f:6}];//mergedObj = {a:1, b:2, c:3, d:4, e:5, f:6}//es6的解决方式const arrObj = [{a: 1, b: 2}, {c: 3, d: 4}, {e: 5, f: 6}];console.log(arrObj.reduce(function(result, current) { return Object.assign(result, cu.原创 2020-06-15 13:11:09 · 1657 阅读 · 0 评论 -
再学javascript高级程序设计之对象
javascript红宝书关于对象、类与面向对象编程的重点230~290的重点知识对象的声明方式//第一种方法var person = new Object();person.name = "Gaofeng";person.age = 23;person.job = "web fronter";person.sayName = function () { console.log(this.name);};//第二种方法let person = { name: "gaofeng.原创 2021-08-01 22:43:04 · 65 阅读 · 0 评论 -
原生js乘法口诀的算法
效果图<div id="content1"></div>var res1 = ''; for (var i = 1; i < 10; i++) { for (var j = 1; j <= i; j++) { res1 += '<span>' + Math.min(i, j) + '*' + Math.max(i, j) + '=' + i * j + '</span>原创 2021-11-07 10:43:21 · 92 阅读 · 0 评论 -
原生js实现元素的圆周运动
我们想实现的需求是,div的圆周运动, //角度就是两边的夹角//1弧度所对应的概念圆的周长//Π⚪的弧度是2Π===360°//1°=Π/1801弧度=180°/ΠHTML代码 <div id="div1"></div>JS代码 window.onload = function () { var oDiv = document.getEle...原创 2021-05-04 15:52:31 · 433 阅读 · 0 评论 -
原生js实现轮播图。可前进可后退,可暂停,可自动播放
一直在用ui框架实现走马灯效果,对原生的实现基本都不怎么熟悉了,所以特地写了个js原生轮播的效果代码也很简单,不复杂,思路对上了就可以了 <div class="content" id="content"> <a href="javascript:;" id="prev"><</a> <a href="javascript:;" id="next">></a> <img src原创 2021-05-04 11:04:29 · 422 阅读 · 1 评论 -
javascript 设计模式之装饰者模式整理的一点记录
我所理解的装饰者模式,在不破坏原有函数或方法的内部结构下,并能增强原有函数或方法!js作为解释执行的语言,动态的改变对象的方法来新增功能是比较常见的,比如var obj = { name:'gaofeng', address:"广州市"}obj.address = obj.address +"天河区"console.log(obj.address) //广州市天河区上面就是我们最原始的增强对象方法的功能的操作假如说我们用js的构造函数来实现的话var Plane = funct原创 2021-07-14 00:19:03 · 95 阅读 · 0 评论 -
原生js中的数组使用的几种方法
//from()用于将 类数组结构转换为数组实例//第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个 length 属性 和可索引元素的结构//不是数组的转化为数组let arr = Array.from("Gaofeng");console.log(arr); //["G", "a", "o", "f", "e", "n", "g"];const m = new Map().set(1, 2);const b = new Map().set(1, 2).set(3, 4);c原创 2021-11-10 00:23:26 · 2770 阅读 · 0 评论 -
原生js中的null和undefinde的总结分析
1.两种都是js的基本类型,null类型的唯一值是null,undefined的唯一值就是undefined2.做判断的时候,两个都是false3.两者都等于自己4.null == undefined也是true5.但是他们的值类型又不一样6.数据转化的时候又不一样,null转为了0,undefined无法转换7.{} == {} false8.如何判断对象为空对象{}let a = null...原创 2021-11-07 10:10:19 · 207 阅读 · 0 评论 -
css3实现加载进度条的效果(二)
css3实现光效加载的进度条,下面来看实现方法! <div class="progress-bar orange shine"> <span id="blue"></span> </div>主要的css代码.progress-bar { width: 350px; background-color: #1a1a1a; height: 35px;原创 2021-08-02 23:32:04 · 325 阅读 · 0 评论 -
css3实现加载进度条的效果(一)
记录下css3学习中的有趣的地方,先看下我们的实现效果!很简单,但是需要有css设计思想才能做到,<div class="progress-bar blue stripes"> <span id="blue"></span> </div>这要的html就这两个黑色背景 body{ background: url("./bg.png") repeat; } .progres原创 2021-08-02 23:18:17 · 656 阅读 · 0 评论 -
webpack简易的实现
webpack是前端的一种打包工具,可以把所有的资源(图片,css,js)打包成js。模块式是把一个复杂的系统分解成多个模块方便统一管理命名空间已经满足不了现今的前端开发项目管理的需求- 命名空间可能会冲突,多个库可能会出现相同的命名空间- 无法合理的管理项目依赖和版本- 无法方便的控制依赖的加载顺序模块化的几种方式commonJS规范主要在nodejs体现的明...原创 2019-06-21 14:56:22 · 297 阅读 · 0 评论 -
原生js技巧点滴2-函数的柯里化
//函数的柯里化var curryFunc = function cf(fn){ //操作参数的方法 var args = Array.prototype.slice.call(arguments,1);//函数cf传递进来从第二个开始的参数 return function(){ var newArgs = args.concat(Array.prototype.slice...原创 2019-06-29 14:31:50 · 154 阅读 · 0 评论 -
一个js面试题引发的血案
function Foo() { getName = function () { console.log(1) } return this } Foo.getName = function () { console.log(2) } Foo.prototype.getName = function () { .原创 2021-02-27 16:00:59 · 99 阅读 · 0 评论 -
js设计模式之命令模式的一点整理记录
命令模式简单点说就是发送命令请求的不知道接收命令请求的是谁,也不知道接收请求的人会做什么!下面就拿个实例来分析分析:工程师1任务只需负责在页面上绘制3个按钮,这三个按钮负责什么功能他不关心!工程师2的任务是在按钮上赋予想要执行的业务功能,点击执行操作!此时工程师1只需要封装一个公用的操作方法,按钮和事件进行关联!其余的就交给工程师2去处理了,这样就实现了代码设计的松耦合!工程师2继续进行业务开发,按钮任务规划,假如说button1实现刷新,button2新增,button3删除功能,进行如下原创 2021-07-18 12:12:57 · 119 阅读 · 2 评论 -
记录一次npm包发布的正确姿势
输入用户名,密码,邮箱以及验证码。原创 2022-08-24 14:13:01 · 130 阅读 · 0 评论