分类: 前端研究预览模式: 普通 | 列表

ajax多信号逻辑的promise写法实现

ajax的这种多信号量情况经常遇上。比如:先从服务器得到一个信号变量A,如果A为真,再从服务器获取信号B,B为真,再......如果用传统的回调方式写,Ajax就是一大堆的callback堆叠,看得头疼,而且不好一层层用函数分开。

 解决这个问题,用到jQuery的deferred对象(参见阮一峰原文):$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

 我写了个简化后的例子: 

Javascript代码
  1. $.ajax("/api-a")  
  2.      .done(function(data){  
  3.           console.log("第1步完成");  
  4.   
  5.           // 如果第1步数据中的result允许,则第2步  
  6.           if(data.result){fun2(); }  
  7.      })  
  8.      .fail(function(){ console.log("第1步失败") });  
  9.   
  10. //第2步操作可以放到一个函数中,这样看起来代码更清晰  
  11. function fun2() {  
  12.      $.ajax("/api-b" )  
  13.           .done(function(data){  
  14.                console.log("第2步完成");  
  15.                console.log(data);  
  16.           })  
  17.           .fail(function(){ console.log("第2步失败") });  
  18. }  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 702

在vue.js的git上面提交的issue:

 
我在mui+vue.js构建一个slide-pic组件,图片数据用ajax方式获取,vm数据能获取到,dom也发生了相应的改变。但数据读入后,无法激活slide组件的滑动行为。
 
以下是我做的一些探索:
直接使用vue初始化数据(非ajax)可以激活滑动行为。
使用jquery的append方式,把数据结合到dom后,也可以激活。
我将mui的slide-pic组件换成另一个滑动图插件TouchSlide1.1后,同样的现象,用vm方式无法激活。
 
请问这是什么原因?到底是vue还是mui/TouchSlide 插件机制的问题。
 
XML/HTML代码
  1. 以下是无法激活滑动的主要代码:  
  2.   
  3. <div id="slider" class="mui-slider" >  
  4.      <div class="mui-slider-group">  
  5.        <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>  
  6.      </div>  
  7. </div>  
  8.   
  9. <script>  
  10. var vm = new Vue({  
  11.   el: '#slider',  
  12.   data: {list: [] }  
  13. });  
  14.   
  15.   
  16. // 读取图片slide  
  17. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  18.      success: function(data){  
  19.           vm.list = data.list;  
  20.           mui("#slider").slider({  
  21.                interval: 3000  
  22.           });  
  23.      }  
  24. });  
  25. </script>  
  26. ----------------------------------------------  
  27. 以下是可以成功激活的代码:  
  28.   
  29. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  30.      success: function(data){  
  31.           for (var i = 0; i < data.list.length; i++) {  
  32.                $(".mui-slider-group").append(  
  33.                     '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'  
  34.                );  
  35.           }  
  36.   
  37.           mui("#slider").slider({  
  38.                interval: 3000  
  39.           });  
  40.      }  
  41.   
  42. });  
  43.  
此问题由VUE及MUI的技术版主解答了,较常见,用nextTick就解决了
 
代码如下:
XML/HTML代码
  1. vm_slide.$nextTick(function () {  
  2.  // DOM 现在更新了  
  3.  mui("#slider").slider({  
  4.  interval: 3000  
  5.  });  
  6. })  
 

 

Tags: mui vue slider ajax

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3137

 我当前面临的问题是,当一个页面,引用了几十个外部的插件库时,有时候仅凭插件名称,并不知道页面中的一个函数调用,是引用的哪一个库文件。因此要借助一些调试手段,chrome调试器有如下一些手段:

 
  • 在调试器的network面板中,能看到本页面内所有的js外部引用,但仅为“引用”,这些js不一定被实际调用了。
  • 如果是查找一个dom对象的行为,比如click,可以直接在event listeners中查到js调用。
  • 注意这里有两个重要选项:
    Events Listeners的具体使用:
    ancestors(祖先元素)这个选项,是列出所有上级元素的事件,可以用来区别,是本身触发,还是父级元素触发
    framework listeners(框架事件),是选择,是否列出调用的js框架,如果未选中,会显示jquery.js为最终框架(一般我们不需要显示这个)
  • 最复杂的情况,如果与行为无关,本页中只有一个函数钩子(比如查找上图中的aaa()定义部分 ),咱们需要查找“在其它模块的函数定义”时,则需要一步步的摸着石头过河:
1、设置断点,使用source面板中的断点调试功能。
 
  • 当知道函数调用关系,可以设置断点时,使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
  • 当不知道调用关系,只能步进调试---找到函数入口,然后用f11单步运行,shift+f11为越过当前函数(当前函数仍会执行);
2、还要注意用"blackbox script"功能,把jquery等库文件“放入黑盒”,否则执行会在这些庞大的库文件中跑很久。

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2965

idangerous.swiper.js相关的学习笔记

前阵子几个项目都用到了swiper,使用过程中遇到的一些小问题,汇总下来供大家参考:

查看更多...

Tags: swiper

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1752

 最近的项目有用到特别中文字体,最终效果如下图:

红线标记处均为字体,可选中,交互起来,比图片方便太多了。
解决思路就是将体积巨大的中文字库,取子集,只包涵要使用的那部分文字,因此体积就很小了(包含100字左右的中文字,也只有50K左右,如下图:)。英文字库因为本身就小,就没必要再这么做了。
 
为了实现以上“取子集”的目标,实际要解决的问题:
1、把字库由TTF格式自动转化为woff、eot、svg等兼容格式,并放到相应路径下。
2、自动分析并提取网站中用到特殊字体的文字-----这一点很重要,否则每次还要去人工整理,很麻烦。
 
以上是理论解释,解决方式主要有两条途径:
1、通过网站,国内目前只有:http://www.youziku.com/这一个站。我之前转化成功过,但前阵子出现问题,目前正在恢复中。上传个性化字体,要提请站长人工审核。站长服务意识不错,就是很忙。
2、本地用软件转化。我找到了一个很好用的软件:font-spider(字蛛)
 
使用方法网上有详细介绍。需要用node.js的npm方式安装。安装成功后,转化就很方便了,基本步骤是:
1、原始字库文件,必须是ttf格式的,如果没有ttf,要自己想办法转化好。
2、写好html+Css---举例:h2{font-family: 'xzst';}注意尽量把font-family写在最前面
3、一句代码就转化成功,太方便了!转化过程如图:
从此再也不用图片去实现个性字体了!
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 915

HTML中实现逐帧动画的思路-用tweenMax

逐帧动画在FLASH中是很好实现的。但在HTML世界中,并没有一个很正统的方法。前两天看scrollmagic的示例文件,意外发现他用tweenMax实现的一个逐帧动画,把代码提炼出来做了以下这个DEMO:

 http://contactu.cn/2015/test_frame/

 

知道了这个思路,那么就可以用其它的方法,比如setinterval等函数来实现了。

用timelineMax之类的强大工具,更可以实现各种播放控制,比如正反放、快进等。还可以用来做那种“拖动控制轴来转动物体”等控制动画。

---总之,只要能实现“时间线与图像”的结合,接下来如何控制时间线,就是tween类框架的强项了。


谢谢谢佳浩同学用css的方式实现了这个效果,使逐帧的方式更加丰富,主要代码如下。

点评:js优势是可以自由控制时间线,比如各种播放控制、事件响应等。css方式优点是渲染快,简便,css定义方便。

XML/HTML代码
  1. .box{ width: 286px; height:222px; margin: 100px auto 0 ; animation: demo 1s infinite;}  
  2. @keyframes demo{  
  3.     0%{ background: url(img/1.png) center center no-repeat;}  
  4.     20%{ background: url(img/2.png) center center no-repeat;}  
  5.     40%{ background: url(img/3.png) center center no-repeat;}  
  6.     60%{ background: url(img/4.png) center center no-repeat;}  
  7.     80%{ background: url(img/5.png) center center no-repeat;}  
  8.     100%{ background: url(img/6.png) center center no-repeat;}  
  9. }  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2266

微信游戏300多套集合包-有偿分享

 从朋友那里得到的一套微信游戏资源包,需要者请往我支付宝上打50元并留言或写邮件给我(支付宝帐号258754@qq.com,杜**),我即告知网盘分享方式。

现在很多企业需要一些小游戏来丰富自己的微信平台,这套小游戏包,是非常超值的。
另外,我简单测试了一下,游戏基本可玩,但有些需要修改一下图片、资源路径等,对我来说不是啥大问题,有需要者也可以找我有偿修改..........

查看更多...

Tags: 微信游戏

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1195

简单css3-transform鼠标效果

 测试页地址:http://contactu.cn/2015/flower/trf.html

效果比较简单,一般基础都能写出。主要是考虑此类效果比较常用,我自己做了一下思路整理,以便于工作中快速调用

首先是把transition提炼成一个单独的class,这样调用时只要这样写就行了:

XML/HTML代码
  1. .trans  {transition: all 0.5s ease-in-out;}  
  2. .trans03{transition: all 0.3s ease-in-out;}  
  3. .trans08{transition: all 0.8s ease-in-out;}  
  4.   
  5. //调用时这样写  
  6. <div class="tit trans">变化稍慢<br />Y轴转动</div>  

接下是熟悉transform的emmet速写,不熟悉emmet的朋友请自行百度

XML/HTML代码
  1. trf  transform:;  
  2. trf:r  transform: rotate(angle);  
  3. trf:rx  transform: rotateX(angle);  
  4. trf:ry  transform: rotateY(angle);  
  5. trf:rz  transform: rotateZ(angle);  
  6. trf:sc  transform: scale(x, y);  
  7. trf:sc3  transform: scale3d(x, y, z);  
  8. trf:scx  transform: scaleX(x);  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1165

 基于bs版本: v3.3.4我做了一下定制,主要选择项如下:

定制后,主文件bootstrap.css由139K减少到102K

最后我决定所有的JS文件都不要了,连那仅有的三个勾都没选。

定制地址:http://v3.bootcss.com/customize/

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1469

六边形-蜂巢形-花瓣形导航菜单

 用于某广告公司的内页导航,在网上搜索了一下,好象没有类似的六边形导航,就自己做了一个。

最关键就是搞清六边形的坐标关系,用一张简图表述:

具体代码请移步此页面:http://www.contactu.cn/2015/flower/

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1197

测试FontAwesome对于IE8的兼容性

 FontAwesome是字体图标,网页中的小图标,可以不再用图片实现了,而且大小、颜色可以任意控制。

好处多多,详见:http://www.thinkcmf.com


这次主要的测试结论:

1、 FontAwesome可以脱离bootstrap运行;

2、发现FontAwesome在IE8下,可以看到!

3、不好消息--图标显示有时候出不来,要刷新一次才能看到,不知道原因,也可能是因为CDN引用太慢的原因。
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3433

 swiper.js是手机微场景制作中最常用的框架,功能强大,参数齐全。它在使用loop: true这样的参数时,滑动片将可以首尾连接,即可以循环地滑动场景。

 
但在DOM结构上,会用clone方式,在首尾各增加一个slide单元。跟任何的对象克隆一样,这会带来一些不可预知的问题,比如:
 
1、会将id=**的对象也克隆,使id不再是唯一的,造成控制问题。
2、swiper.activeIndex,即当前激活的滑片号,序列方式会有差别。与初始DOM的对应关系,可能使用swiper.activeLoopIndex更准确一些。此时一定要弄清activeIndex与activeLoopIndex这两个参数的区别,这样方可准确定位DOM对象。
 
 
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4607

应用于“图片数量多、体积大”页面的预加载,会给浏览者带来较好的用户体验,尤其是企业LOGO的提前显示,会让网站呈现出更完整的品牌形象。

 

点击查看DEMO页

 

优点:

1、未加载完成前,正式页面不显示。

2、自定义加载序列、自定义背景颜色变化、背景透明度。

3、参数灵活、调用较丰富,如以下3种加载画面方式。

4、站长dudu加入了时间线动画机制,可在加载原画面基础上,自定义更丰富的JS动画。

5、加载完毕后给出消息,方便自定义调用事件(如消隐掉加载动画、调用新的进场动画等)。

缺点:

- 进度计算,是以图片加载完成的张数(而不是字节数)来计算的,因此加载数字进程看上去不平均。

本测试范例使用的LOGO加载方式,加载过程中,调用了自定义“小光点向上飞行”的动画,为演示方便,只加载了2张大图,加载完成后,即撤去黑底,播放大图动画。

付费100元,可得到完整程序包,含技术文档,及得到站长技术支持。

本站长支付宝帐号:258754@qq.com

Tags: preloader jquery

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1451

经测试发现jquery 1.11.1都支持IE8,但jquery2就已经放弃了对IE6-7-8的支持。

因此我决定以后就用这个:
 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
 
顺便说一下,这个CDN地址包含的库超级多,比什么百度的、360的、新浪的都要多得多了,地址如下:
http://open.bootcss.com/
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2687