js
文章平均质量分 82
Kinghiee
Front-end Developer
展开
-
Layui源码解读之use函数(模块加载)
立即执行函数中做的事情是,把 string 和 function 类型的参数转为字符串数组形式并返回给 apps ,数组中是layui要加载的模块。会先判断当前环境中是否已经引入 jquery,如果引入就遍历要加载的模块(apps),找到要加载的模块名为 jquery 的,然后删除。获取加载的模块 URL。如果是内置模块, 则按照 dir 参数拼接模块路径, 否则如果是扩展模块, 则判断模块路径值是否以 {/} 开头, 如果路径值是 {/} 开头, 则模块路径即为后面紧跟的字符。原创 2023-06-02 10:00:25 · 6517 阅读 · 0 评论 -
Layui源码解读之define函数
exports函数中执行模块注册和存储回调函数,其中setApp函数通过 layui[app] = exports 语句把导出的内容挂在到全局中,并且使用 config.status[app] = true 语句表示该模块已经被加载。当你声明了上述的一个模块后,你就可以在外部使用了,demo 就会注册到 layui 对象下,即可通过 var demo = layui.demo 去得到该模块接口。callback函数执行时,首先判断 factory 函数是否为函数,为函数时执行 factory 函数。原创 2023-05-30 10:34:04 · 1547 阅读 · 0 评论 -
Javascript 桥接设计模式
更多优质文章查看。原创 2023-01-01 14:29:25 · 1106 阅读 · 1 评论 -
js 回到顶部逻辑实现和elementUI源码解析
大家或多或少都会遇到“回到顶部”这样的需求,在此分享这个技术点以及可能遇到的问题。再分析element源码。回到顶部关键技术点在backTopClickHandle函数中在该函数中,首先判断当前是否存在定时器,如果有下面步骤不执行。否则获取滚动条高度, 启动定时器,在定时器中计算出当前滑动速度,并计算出当前滚动条高度。最后如果滚动条高度小于等于0,清除定时器。在backTopClickHandle函数中有两点需要特别注意scrollTop的位置在setInterval(() => {…})内,效果图原创 2022-11-16 16:46:17 · 1742 阅读 · 0 评论 -
Vue packages version mismatch: - vue@2.7.12 - vue-server-renderer@2.7.11 This may cause things to
如果项目中有package-lock文件时,使用npm shrinkwrap 则把package-lock更换为npm-shrinkwrap文件,并且npm-shrinkwrap。为了解决问题,首先通过传统的把清除npm缓存、node_modules删除、package-lock.json文件删除都是无效,最要命的是这个项目是3年前的项目,把node_modules删除后,再次下载报依赖错误,看来这种方法不可行,于是恢复了之前的状态。官网对npm-shrinkwrap.json文件的解释如下。原创 2022-10-13 17:40:06 · 4957 阅读 · 3 评论 -
Selenium: The ChromeDriver could not be found on the current PATH
在源码中找到 locateSynchronously()函数并进行debug发现原来是。当时反复确认自己的代码和环境变量配置无误后,就直接看源码了。安装官网提示的安装步骤进行安装并开始启动时报如下错误。所以解决方案时重启电脑或者重启node即可。...原创 2022-08-31 17:37:06 · 1219 阅读 · 0 评论 -
Layui源码解读之device函数(获取浏览器信息)
一、device 函数 // 设备信息 Layui.prototype.device = function(key){ var agent = navigator.userAgent.toLowerCase(); // 获取 ua ① // 获取版本号 var getVersion = function(label){ var exp = new RegExp(label + '/([\^\\s\\_\原创 2022-04-24 11:17:05 · 3786 阅读 · 1 评论 -
Layui源码解读之img函数(图片预加载)
一、img 函数 Layui.prototype.img = function(url, callback, error){ var img = new Image(); // 创建 img img.src = url ; // 赋值 url // complete 更多内容查看 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/complete原创 2022-04-21 10:27:43 · 2235 阅读 · 0 评论 -
Layui源码解读之each函数(迭代器模式)
一、each函数 源码 // 遍历 (内部迭代) Layui.prototype.each = function (obj, fn) { var key; var that = this; var callFn = function (key, obj) { // 回调函数 return fn.call(obj[key], key, obj[key]); }; // fn 不为 fun原创 2022-04-17 17:15:39 · 4463 阅读 · 0 评论 -
Vue 通过localStorage使用字符串数组队列实现全局搜索功能(从需求到实现 超详细!!)
一、需求1.使用浏览器localStorage,开发网站全局搜索功能。2.搜索历史不超10条,超过10条依次覆盖时间最久的历史搜索记录3.新输入的搜索记录,下次input不输入内容focus时应该展示在第一条。4.新输入的搜索记录回车搜索后,如果之前历史搜索记录中存在,下次input不输入内容focus时这把这条记录放置历史记录展示页面最上面第一条5.input 在输入内容时不展示搜索记录6. 搜索记录不能有重复值7. 一键清除大致开发思维: 使用数组队列来存储历史记原创 2021-08-14 12:01:04 · 912 阅读 · 6 评论 -
js 阻止弹出层底部页面滑动
注:代码可能和其他博客相似,毕竟原理都是一样的。一、源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹出层底部不能滑动</title> <原创 2021-01-09 21:07:26 · 1812 阅读 · 8 评论 -
js 使用setInterval函数做计时器时,防止一秒钟内多次点击和计数加快现象(内涵单例模式重写)
一、效果图二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://lib.baomitu.com/vue/2.6.12/vue.js"></script> <style> html,body{ padding: 0; marg原创 2020-12-13 11:33:08 · 1512 阅读 · 0 评论 -
js前端 发送post请求中 http中 query string paramter、form data和request playload的区别
前话:今天在调试API接口的时候,要求发送post请求,请求API地址格式如下http:xxxxx.com/api?param1=value1¶m2=value2。当开始请求的时候返回的结果一直报错,报错如下报错:Required String parameter ‘userName’ is not present后来发现是把参数写到form data中了,所以报错。所以就来提一下post请求中query string paramter、form data和request playlo原创 2020-12-04 08:50:46 · 8367 阅读 · 2 评论 -
vue 音乐播放器之歌词解析和滚动(js源码)
效果图注:歌词和图片来源于网络总体思路①:请求歌词资源②:解析歌词,生成html代码③:html代码插入歌词显示的区域④:监听歌曲播放进度,通过id选择器选中正在播放的歌词添加样式⑤:判断条件是否滚动⑥:歌曲播放完毕清除样式,滚动到顶部①:请求歌词资源 init() { //请求资源 this.axios.get("/dataJson/musicList.json").then(response => { let { data, status }原创 2020-11-09 09:30:29 · 3658 阅读 · 0 评论 -
threeJS 自定义路径曲线(CatmullRomCurve3)
一、效果图二、案例中用到的重要函数或设置this.curve = new THREE.CatmullRomCurve3( [① //起点 new THREE.Vector3(-10, 0, 10), //中间节点 new THREE.Vector3(-5,10,-10), new THREE.Vector3(2, 5, -5), //终点 new THREE.Vector3(10, 0, 10),原创 2020-07-30 20:07:51 · 10921 阅读 · 0 评论 -
threeJS 物体贴花
官方案例一、效果二、总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器 创建status、OrbitControls和gui⑤ 添加监听函数页面架构<template> <div class="box3"></div></template><script></script><style></style>导入文件,创建变量和函数 import * as T原创 2020-07-30 09:52:51 · 1151 阅读 · 0 评论 -
threeJS 裁剪物体
一、效果图二、案例中用到的重要函数分析 new THREE.MeshLambertMaterial({ color:new THREE.Color().setHSL(Math.random(),0.5,0.5),① side:THREE.DoubleSide,② clippingPlanes:this.planes,③ clipIntersection:true④ })this.renderer.localClippingEnabl原创 2020-07-28 18:28:30 · 4529 阅读 · 2 评论 -
谜之走向——this指向
一、目录(一):this指向常见误区(二):this到底是什么(三):this指向四条绑定规则①:默认绑定②:隐式绑定③:显示绑定④:new绑定(四):this指向的优先级及其判断(五):特殊例子二、 内容(一):this指向常见误区①:指向自己本身因为this本身英文的含义,很多初学者会把this理解为指向函数自身比如下面例子var count=2; function foo(){ let count=1; console.log(this.count); }原创 2020-07-09 09:19:33 · 266 阅读 · 1 评论 -
vue+layui简简单单实现流加载(触底加载、懒加载)
layui官网教程请访问 流加载代码html <div class="card_section" id="card_section"> </div>less样式//卡片样式 .card_section{ padding: 1vw 2vw; //box-shadow: 0 -2px 3px -1px rgba...原创 2020-04-20 16:59:32 · 1206 阅读 · 0 评论 -
jquery pagination.js实现分页(promise封装ajax)
效果图步骤一、引入文件 <script src="js/jquery.pagination.js"></script>二、初始化设置function page_init(totle_Page_Count) {//totle_Page_Coun为你请求网站给你返回的总页数 let page=$('#pager').paginate({ ...原创 2020-04-07 11:51:49 · 281 阅读 · 0 评论 -
promise 封装jquery ajax并调用
封装代码function ajax(param){ return new Promise(function(resolve, reject){//返回Promise对象 $.ajax({ url: param.url, type:param.type||"GET", async:param.async...原创 2020-04-02 20:48:04 · 1266 阅读 · 0 评论 -
JS——字符串的特殊转换
今天说一下字符串的特殊转换一:数值型字符串和数字相乘是number型let n1="4";let n2=n1*40;console.log(typeof n1);console.log(typeof n2);console.log(n2);二:数值型字符串转化为number可以自乘1let n1="4";let n2=n1*1;console.log(typeof n1);...原创 2020-02-10 10:36:59 · 635 阅读 · 0 评论 -
JS-7种IIFE写法
IIFE(Immediately Invoked Function Expressions)叫做立即执行表达式,顾名思义,该表达式一被创建就立即执行。1.对返回结果不进行处理(function(形参){ 函数体内容})(实参);例子(function (temp1,temp2) { console.log(temp1+temp2)})(1,2);效果图2.对返回...原创 2020-02-03 20:59:16 · 1194 阅读 · 0 评论