SyraTi.ICU

霧雨魔法店 下属

发表于 更新于 本文字数： 139 阅读时长 ≈ 1 分钟

###有3个页面 a,b,c
如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c

1: b->c 是通过window.location.replace(“..xx/c”) 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面（最开始的页面）

2: b->c是通过window.location.href(“..xx/c”) 此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的是b页面

两者的区别: 两者后退时所回退的页面不一样

发表于 更新于 本文字数： 74 阅读时长 ≈ 1 分钟

项目中遇到如下需求

1
2
3
4
5
6
7
8
<body>
	<!-- top 盒子内容为内部撑开 -->
	<div class="top">
		<!-- 未知高度的一些元素 -->
	</div>
	<!-- 目标盒子 需要自动填满屏幕剩余高度-->
	<div class="target"></div>
</body>

解决方案

1
2
3
4
5
6
7
8
9
10
11
body,html{
	height:100%;
	width:100%;
}
body{
	display:flex;
	flex-direction: column
}
.target{
	flex:1;
}

发表于 更新于 本文字数： 42 阅读时长 ≈ 1 分钟

在each代码块内不能使用break和continue,要实现break和continue的功能的话，要使用return true/false

1
2
3
4
$(DOM).each(function(index,el){
	return false; //break 
	return true; //continue 
}

发表于 更新于 本文字数： 94 阅读时长 ≈ 1 分钟

code 问题代码

1
2
3
4
5
6
7
8
function test() {
    for (var i = 0; i < 5; ++i) {
        setTimeout(function() {
            console.log("index is :", i);
        }, 1000);
    }
}
test();

output 问题输出

1
2
3
4
5
index is : 5
index is : 5
index is : 5
index is : 5
index is : 5

solution 使用自执行函数

1
2
3
4
5
6
7
8
9
10
function test() {
    for (var i = 0; i < 5; ++i) {
        (function(i){
	        setTimeout(function() {
	            console.log("index is :", i);
	        }, 1000)
        })(i);
    }
}
test();

output 正确输出

1
2
3
4
5
index is : 0
index is : 1
index is : 2
index is : 3
index is : 4

发表于 更新于 本文字数： 360 阅读时长 ≈ 1 分钟

原文链接 https://segmentfault.com/a/1190000009308553

那，首先通过URL.createObjectURL(file)从file对象直接取得了图片的地址

前面就不详细说了，开始压缩咯 ( ´ ▽ ` )ﾉ

噢，有个注意点:

每次调用createObjectURL的时候，一个新的URL对象就被创建了，即使是同一个file对象，也会创建一个新对URL对象，所以，为了最佳性能和内存使用，当不再需要这个对象的时候要URL.revokeObjectURL()释放它。

开始压缩

阅读全文 »

发表于 更新于 本文字数： 92 阅读时长 ≈ 1 分钟

需要先触发touchstart事件（旧版本需要先触发mousedown事件）

1
2
mui.trigger($('.mui-tab-item').eq(1)[0],'touchstart');
mui.trigger($('.mui-tab-item').eq(1)[0],'tap')

源代码尚未研究 以上为解决方案

2018-3-30 PS: 发现好像只要改一下mui-active就行了？（扶额）

2018-4-25 PS: 最简单的方式是改变item和切换目标的mui-active

发表于 更新于 本文字数： 477 阅读时长 ≈ 2 分钟

requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。

设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

requestAnimationFrame使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。

requestID = window.requestAnimationFrame(callback);
阅读全文 »

发表于 更新于 本文字数： 458 阅读时长 ≈ 2 分钟

根据浏览器的保护规则，跨域的时候我们创建的sessionId是不会被浏览器保存下来的，这样，当我们在进行跨域访问的时候，我们的sessionId就不会被保存下来，也就是说，每一次的请求，服务器就会以为是一个新的人，而不是同一个人，为了解决这样的办法，下面这种方法可以解决这种跨域的办法。

阅读全文 »

发表于 更新于 本文字数： 490 阅读时长 ≈ 2 分钟

现在发现的问题

通过js绑定的input[type=file] change事件只能触发一次

原因

该问题并不是由change事件失效造成的，而是ajaxFileUpload插件造成的，它会把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下

除了重新绑定以外，如果是使用$fileInput.trigger('click') 方式，失效原因是$fileInput仍指向旧元素，替代方案分为以下两步

  1. 首先将ajaxFileUpload源码中$(oldElement).clone()（有些版本中为jQuery(oldElement).clone()）改为$(oldElement).clone(true) 这样可以在复制元素的同时复制事件
  2. 将$fileInput.trigger('click') 改为 $('#id').trigger('click')对保证新元素进行trigger而不是旧元素

如果你想要知道具体原因，请往下看

阅读全文 »