![](https://img-blog.csdnimg.cn/20190424132933482.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Javascript使用技巧摸索
收集并记录实用的JS代码段、轮子代码
YooHoeh
热爱可抵岁月漫长
展开
-
将前端触摸事件完全映射到点击事件(移动端兼容)
在开发移动端项目经常会遇到电脑调试效果没问题,切换到移动端设备出现异常,比如在GIS或者轮播图(含有拖拽行为)等组件时,电脑开发可以正常执行拖拽事件,但到了移动设备会出现事件不被触发的情况,这里可以使用"elm-pep.js"这个库来实现全局事件映射,这里把贴出相关代码,供自己学习记录:<script> // 兼容ios触摸 var primaryTouchId = null; // 当前触摸事件target var mouseCapt原创 2021-09-17 14:41:25 · 1918 阅读 · 0 评论 -
前端经常要求的手写代码示例
callcontext 存在就使用 context,否则是 window使用 Object(context) 将 context 转换成对象,并通过 context.fn 将 this 指向 context循环参数,注意从 1 开始,第 0 个是上下文,后面才是我们需要的参数将参数字符串 push 进 args字符串和数组拼接时,数组会调用 toString 方法,这样可以实现将参数一个个传入,并通过 eval执行拿到结果返回前,删除掉 fnFunction.prototype.call转载 2020-08-31 15:00:46 · 253 阅读 · 0 评论 -
React Native添加自定义全局组件
在开发rnApp的时候想自己封装一个自定义的Toast组件,又不想在每个组件文件内单独引用,于是自己琢磨了一个方法将组件添加到全局。这里举例封装一个自定义的Toast组件,这个文件可以放在自己的公共组件文件夹下ToastTip.js/* * @Date: 2020-02-26 17:40:34 * @Description: 自己封装Toast提示 * @Author: YooHo...原创 2020-02-28 18:29:26 · 2369 阅读 · 3 评论 -
JS实现取任意类型的数组交集并集方法的思考
说到交并集避免不了判断类型是否相同,可能很多人都会想到ES6的Set类型,理所当然的认为可以用Set类型来达到取唯一。但其实没那么简单。下面参考网上的一些代码let a = new Set([1, 2, 3]);let b = new Set([3, 5, 2]); // 并集let unionSet = new Set([...a, ...b]);//[1,2,3,5]// ...原创 2019-11-09 18:32:08 · 270 阅读 · 0 评论 -
JS 可逆加密的一种实现
/* * 利用String对象的charCodeAt()方法和fromCharCode()方法对可用JSON.parse进行序列化的数据进行加密的数据加密解密 * Author: zhangji * Create: 2019.10.22 **/const Crypto = { //加密 encryption(data) { data = JSON.stringify(data...原创 2019-10-23 11:39:26 · 1451 阅读 · 0 评论 -
JavaScript——浏览器的重绘与回流
文章目录一、浏览器渲染过程?1.1 dom树结构,cssom,renderTree1.2 cssom和dom树怎么匹配结合成renderTree ?二、什么是重绘?回流(重排)?三、哪些情况会发生重绘,回流?四、如何减少回流,重绘?4.1 修改html元素中对应的class名,利用class替换样式4.2. csstext(利用cssText属性合并所有改变,然后一次性写入)4.3 displa...转载 2019-04-18 10:43:44 · 198 阅读 · 0 评论 -
JS立即执行函数的几种写法
立即执行函数是在函数被声明或者定义后马上执行,其思路就是在函数体后面直接添加括号,如果需要传递参数则直接写在这个括号里面。(function(x){console.log(x)}(1))这个结构中不支持箭头函数(function(x){console.log(x)})(1)这种方式也支持箭头函数,即:((x)=>{console.log(x)})(1) !functi...原创 2019-04-08 13:50:32 · 2906 阅读 · 0 评论 -
全功能轮播组件封装(详细注释)
在线演示:http://js.jirengu.com/ferojuvonu/2/edit?html,js,output<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d...原创 2019-04-02 14:18:57 · 314 阅读 · 0 评论 -
原生JS制作简易Tabs组件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equi...原创 2019-03-31 12:13:15 · 364 阅读 · 0 评论 -
JS简单实现分页显示
完整代码源码可以在这里下载1.在 HTML文件建立列表目标节点和翻页器目标节点<body><!--页面控制器 --> <div id="nav"></div> <!--列表显示 --> <div class="root" id="target"><原创 2018-12-12 18:06:26 · 8979 阅读 · 2 评论 -
JS简单实现滚动自动加载新内容(懒加载)
加载源// 这里存后台发来的数据var galleryList = [ { src: &quot;./images/1.jpeg&quot;, desc: &quot;11111&quot; }, { src: &quot;./images/1.jpeg&quot;, desc: &quot;11111&quot;原创 2018-12-12 13:58:38 · 7957 阅读 · 1 评论 -
JS将日期转为距现在的时间长度
最近在弄一个回忆网站,其中有个一板块类似于情侣空间的纪念日。照着弄了个类似的,效果如下:在处理过程中需要把时间戳转为Date()对象,然后与本地时间相减获得时间差,通过运算转换成对应的年月日时长,最后转换成对应的字符串。这里我将这一系列操作封装成一个dateConver()函数。下面给出源码。HTML部分<!--因为项目为纯页面文件没有涉及到数据库,所以这里将时间写在标签里--...原创 2018-11-19 21:50:34 · 4383 阅读 · 1 评论 -
axios简单理解
发起一个GET请求直接使用axios('/user')方法,axios()方法默认为GET方式axios(’/user/12345’);使用axios.get()方法,参数直接写以?key=value的形式,多个使用?key1=value1&amp;key2=value2axios.get('/user?key=value') .then(function (response...原创 2018-10-31 13:17:51 · 2516 阅读 · 0 评论 -
Javascript控制台打印Object对象
Javascript控制台打印Object对象做项目的时候遇到一个问题,在调试代码时需要打印对象来查看具体数值,想了各种方法也没有实现,最后查资料知道了可以使用JSON.stringify()将obj转为字符串后打印,再此记录。 const marks = () => ( this.props.station ? this.props.station.m...原创 2018-09-20 19:50:06 · 20758 阅读 · 2 评论 -
fetch添加超时时间
fetch添加超时时间其实为fetch添加超时时间很简单,需要用到Promise.race()方法.Promise.race() 方法将多个Promise包装成一个新的Promise实例.var p = Promise.race([p1,p2,p3]);上面的代码中,只要p1,p2,p3中有一个实例先改变状态,p的状态就跟着改变,而那个率先改变的Promise实例返回值就传递给...转载 2018-05-28 13:39:37 · 5823 阅读 · 0 评论 -
将中文姓名转为拼音英文名的一种实现
需要将中文名转为英文名,这里需要考虑到姓氏以及名字多音字选择,这里记录一下我实现的一种思路。以下代码均使用JS来进行说明。处理流程首先需要判断名字长度以及名字规范//中文名格式验证verifyName: function(str) { let re = /[^\u4e00-\u9fa5]/; const isChinese = str => !re.test(str);...原创 2019-10-11 19:00:47 · 8353 阅读 · 0 评论