js技巧
js技巧
蓝格子.
这个作者很懒,什么都没留下…
展开
-
gulp构建工具的基本使用
gulp是前端自动化打包构建工具,基于流格式的打包构建工具官网:https://www.gulpjs.com.cn/安装:node环境gulp:全局安装: npm install gulp -g局部安装:npm install gulp --save-dev准备工作1.gulpfile.js2.初始化 package.json (npm init)常用插件gulp-concat : 合并文件(js/css)gulp-uglify : 压缩js文件gu原创 2022-05-12 20:12:00 · 618 阅读 · 0 评论 -
chrome插件开发基础以及如何防止劫持
谷歌浏览器插件,可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能:捕捉特定网页的内容,捕捉HTTP报文,捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为,与别的站点通信,修改网页内容……开发文档(360翻译的):https://open.chrome.360.cn/extension_dev/overview.html开发流程比较简单:打开开发者模式,加载扩展程序创建manifest.json文件此处指写了一部分常用的,详细的请查看文档{ "manifes原创 2022-03-26 17:34:31 · 2124 阅读 · 0 评论 -
js小技巧和常见问题总结----2022-3-3更新
本篇文章是我平时工作中遇到的一些常见问题以及一些小技巧,可能比较简单,但是比较实用,记录一下,也是方便后续查找1.判断一个方法是否存在function funExists(funName){ try{ if(typeof eval(funName)=="undefined"){return false;} if(typeof eval(funName)=="function"){return true;} }catch(原创 2022-01-20 14:18:58 · 686 阅读 · 0 评论 -
常用网页交互效果插件
现在前端要想写出让用户体验很好的网站页面,可不仅仅是写静态页面这么简单,这个时候页面上的交互效果就很重要了,这能让用户体验更好。而现在前端能够实现的交互效果也是越来越炫酷,也越来越复杂。但是这些特效背后的形成机制却始终简洁优雅。下面就介绍几个js插件库。1.swiper.js(最常见的轮播插件)Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话...原创 2020-02-27 17:22:38 · 1258 阅读 · 0 评论 -
解决因为循环插入数据而导致内存不足及页面卡顿问题
最近公司做了一个类似于360软件管家的软件,但是只限于我们公司的软件。我跟一个比我大十岁的大神一起开发,压力好大。本来都已经上线了,可是大佬又发现了一个bug,就是同时点几个打开,一键安装,页面就会有时候卡死,同时搜索也会有几秒的延迟。最后层层定位,定位是我页面上js的问题。这种循环插入操作会导致内存不足,页面需要响应很久,甚至崩溃我也不知道我怎么这么蠢会这样写。而正确写法应该是只插入一...原创 2020-02-27 17:41:45 · 905 阅读 · 0 评论 -
部分样式兼容ie8
相信大家在平常的工作中偶尔会需要做样式兼容ie8吧,ie8确实恶心,但是有的时候没有办法,这里小弟我总结了部分样式如何兼容ie8,供大家参考。使用条件注释hack兼容 ie81.透明度opacity兼容ie8opacity:0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);2.圆角兼容ie8position:...原创 2020-02-27 18:14:28 · 269 阅读 · 0 评论 -
页面底部自适应:页面高度不足时,在底部显示;页面高度超出时,随页面滚动
有的时候一个页面内容高度不够,底部则需要在页面的最下方,内容足够的时候,页面和底部也随之滚动解决方案html<div class="index"> <div class="container"> <!-- 你的页面内容 --> </div> <div class="foot"> <!-- 需要自适应...原创 2020-02-28 10:49:41 · 1032 阅读 · 0 评论 -
json数据根据某一个相同的字段值进行分类
在我们处理json数据中经常会遇见数据分类问题,比如根据type值相同的分为一类,这个时候我们应该怎么做呢?下面就是自己封装的一个方法来进行分类:// 处理json数据方法,根据g_style分类function dataDeal(data) { var listArr = []; data.forEach(function(el,index){ for(var...原创 2020-03-02 18:46:19 · 2513 阅读 · 0 评论 -
call和apply的作用与区别以及用法
call和apply都属于Function.protoytpe的方法,每一个function都有这两个属性而他们的作用是一样的:都是改变this指向区别则在于:传参方式不一样,call参数是逐个传入,apply则是传递数组在团队开发时,为了提高工作效率则会用到。员工Afunction sit (c,sitColor){ this.c = c; this.sitColor = sitC...原创 2020-03-05 17:30:30 · 443 阅读 · 0 评论 -
部分浏览器网站图片不显示问题(图片命名和广告过滤)
有的时候写网站,有的图片在部分浏览器下是不会显示的,被浏览器当成广告过滤掉了。原因是什么呢?那就是有的浏览器可能会将以"ad"命名的文件、id或class当做广告过滤掉或屏蔽。所以给图片或盒子命名的时候尽量不要用‘ad’,或者带有ad...原创 2020-03-17 10:54:58 · 557 阅读 · 0 评论 -
jq图片查看插件
Viewer.js 是一款强大的图片查看器1、引入文件<link rel="stylesheet" href="css/viewer.min.css"><script src="js/jquery.min.js"></script><script src="js/viewer.min.js"></script>2、HTML&...原创 2020-04-07 10:20:03 · 259 阅读 · 0 评论 -
日期控件与省市县控件的使用
jeDate日期控件 -(原生JS版)jeDate V6.5.0 是一款原生JS开发的 不依赖任何第三方库 大众化的日期控件api文档地址:[http://www.jemui.com/uidoc/jedate.html](http://www.jemui.com/uidoc/jedate. html)浏览器兼容,下面是我们的主要兼容目标1、IE8 或者 IE8以上 (Windows), IE8以下浏览器不兼容2、Safari (Mac) 苹果浏览器3、Chrome (Windows, Mac,原创 2020-09-17 17:48:39 · 262 阅读 · 0 评论 -
input框输入验证及样式修改
输入大小写字母、数字、下划线:<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 输入小写字母、数字、下划线:<input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 输入数字和点<input type="text" onkeyup="value=value.rep原创 2020-10-15 11:46:08 · 813 阅读 · 0 评论 -
jq搜索关键字高亮显示
在我们平时做项目经常会遇到关键字需要高亮显示的情况,算了 不编了,写不下去了,直接看代码吧 var searchText = keyword;//获取你输入的关键字; var regExp = new RegExp(searchText, "g");//创建正则表达式 $(".searchListBox .prolist-title a").each(function()//遍历文字; { var html = $(this).ht原创 2020-10-29 17:08:40 · 1033 阅读 · 0 评论 -
js--文件字节大小转换--大小排序--时间排序
文件字节转换为B,KB,MB,GB // 计算文件大小 limit:传入的文件字节大小 changSzie: (limit) => { var size = ""; if(limit < 0.1 * 1024){ if(limit < 0.1 * 100){ size = 0; } else{ size = limit.toFixed(2) + "B" //小于0.1KB,则转化成B原创 2020-10-30 10:54:07 · 508 阅读 · 0 评论 -
js简单的模糊搜索
直接看代码// 搜索模糊查询 list:列表 ,keyWord:搜索关键字 searh:(list, keyWord)=>{ var reg = new RegExp((keyWord).toUpperCase().replace(/\s/g,"")); var arr = []; for (var i = 0; i < list.length; i++) { 如果需要加另外条件可以在下面加 if (reg.test(list[i].原创 2020-10-30 11:01:10 · 339 阅读 · 0 评论 -
构造函数中的this与jq中的this冲突解决方法
通常我们写构造函数都是这样写// 文件构造函数 业务类function File(json,popupWindowShow,recordFilePath){ //这里的this是指向构造函数本身 this._json = json; //客户端传入的数据 this.popupWindowShow = popupWindowShow; this.recordFilePath = recordFilePath;}// 获取用户设置信息File.prototype.getUser原创 2020-10-30 11:20:10 · 347 阅读 · 0 评论 -
js根据后台返回的数据生成excel并下载
模拟后台数据var _json = [ { dd_id:2020110201, d_code:"88888888888888888888888" }, { dd_id:2020110202, d_code:"99999999999999999999999" }, { dd_id:2020110203,原创 2020-11-02 17:16:11 · 1308 阅读 · 4 评论 -
iframe的基本使用
当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢?父页面获取子页面中的变量与方法: <iframe id="file_iframe" name="file_iframe" src="" frameborder="0" style=" width:300px;height: 200px;"></iframe>window.par原创 2020-11-13 11:24:47 · 692 阅读 · 0 评论 -
js base64加密与解密
方法:var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function(e) { var t = ""; var n, r, i, s, o, u, a; var f = 0; e = Base64._utf8_encode(e原创 2020-11-25 15:44:46 · 460 阅读 · 0 评论 -
grunt构建工具的基本使用
grunt,JavaScript 世界的构建工具,官网是这样评价的,https://www.gruntjs.net/grunt一个前端构建工具,有资源压缩,代码检查,文件合并等功能可以看着官网的文档进行学习一、环境配置grunt是基于nodejs的,所以需要一个 nodejs 环境首先要保证grunt命令可以使用,所以要先使用npm安装对应CLInpm install -g grunt-cli二、使用方法在使用grunt之前,我们需要在项目根目录下创建pakage.json和Gruntfi原创 2021-03-04 21:14:58 · 523 阅读 · 2 评论 -
js模块化之requireJs的基本使用
官网文档:https://requirejs.org/什么是require.jsRequireJS的目标是鼓励代码的模块化,它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。为什么要使用require.js平时我们写js脚本的时候,javascript代码直接扔在script标签里面就完事了,反正代码不多,交互简单,逻辑不难,和HTML混在一起也未尝不可,后来交互越来越复杂,代码越多越多原创 2021-03-12 15:37:58 · 627 阅读 · 1 评论 -
js验证一张网络图片是否存在
记录:function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image() ImgObj.src = imgurl ImgObj.onload = function(res) { resolve(res) } ImgObj.onerror = functi原创 2021-03-19 15:48:49 · 347 阅读 · 0 评论 -
puppeteer的使用,网页转长图和pdf
最近做网页转换成长图和pdf的功能,一开始准备canvas做转长图的功能,在当前网页操作是可行的,但是需求是需要可以截其他网站,想法是用iframe展示网站再进行截图,但是这是行不通的,一个跨域的问题就要搞死人,更何况就算截出来效果也是不是很好的,pdf功能还实现不了,最终是决定用puppeteerPuppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行Puppeteer 是 Node.js 工具引擎Puppeteer 提供了一原创 2021-03-19 16:20:20 · 1049 阅读 · 0 评论 -
在线表格编辑插件handsontable使用
记录:handsontable,在线表格编辑插件地址:https://github.com/handsontable/handsontable效果:使用:<link rel="stylesheet" href="/static/jsConversion/chartTool/css/jquery.handsontable.full.css"><script src="/static/jsConversion/chartTool/js/jquery.handsontable.ful原创 2021-06-24 18:15:26 · 841 阅读 · 0 评论 -
echarts旭日图数据重构处理
网上对于旭日图的数据结构处理资料很少,所以自己记录一下。首先看旭日图需要的数据结构:// 旭日图 { name: '淘宝', children: [ { name: '女装', children:[ { name:'上衣', value:22 }, { name:'裙子', value:12 },原创 2021-06-29 15:42:49 · 852 阅读 · 3 评论 -
storage跨页面监听事件
两个不同页面,操作其中一个页面,另外一个页面上需要实时发生改变如图:A和B是两个不同的页面,编辑A,点击添加,B页面内容也需要发生改变利用localstorage中的监听B页面打开A页面,操作A页面时,点击添加,存储一个值,监听的也是这个值:A页面:localStorage.setItem("addSpeechItem",new Date().getTime())B页面:function storageChange(key,fn,value){//key为要存储的名字,fn为触发stor原创 2021-11-12 17:57:11 · 1001 阅读 · 0 评论 -
js标签转为文本显示
假如:var str = '<img />广东第一猛男'<div class="weige"></div>需要将str插入到weige中,正常情况是这个字符串是不会显示的,但是需求是需要显示这个的方法://标签转为文本显示 function htmlencode(str) { str = str.replace(/&/gi, '&'); str = str.replace(/</g, '<');原创 2021-11-22 19:50:05 · 1781 阅读 · 0 评论