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

用Rxjs改写的的ajax函数--返回promise对象

代码如下:

Javascript代码
  1. function aj(url , type="GET" , data="json"){  
  2.     var final = Rx.Observable.fromPromise(  
  3.         $.ajax({  
  4.         type: type,  
  5.         url: url,  
  6.         dataType: data  
  7.         })  
  8.         .promise()  
  9.     );  
  10.     return final;  
  11. var aaa = aj("shopData/test.json");//把ajax结果赋给aaa,并做下一步处理 

这段代码使用了rx.js及jquery3的库,目前为止,似乎还只有jquery支持在ajax返回promise对象,我到mui论坛提了问,答复mui.ajax暂不支持promise对象。可见promise对象还未普遍使用

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3928
改编自淘宝的lib-flexible,页面宽度任意变化。这种方式的优点是适合于团队协作,量出尺寸就可以做绝对定位。请点击:http://contactu.cn/2016/lib-flexible/
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1633

用到和准备学习的一些新工具

  • - 装一个json序列化插件--https://chrome.google.com/webstore/category/apps?hl=zh-cn
  • - 总监推荐使用的github管理工具:sourceTree,官网可直接安装中文版,接下来学习使用
  • - 总监推荐使用的leanCloud,可用于生成后端API接口数据,已经注册帐号,准备试用
  • - 2016年刚推出的微信开发者工具---已经安装,但发现做CSS调试真机时,还是手续比较麻烦,因此对于普通的调试,还是用.css?id=***的老方法,只有一些实在需要精确调试,一定要看到CSS代码对应效果的地方,再使用这个。http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1589

 以下代码实测无用。可能是针对比较老版本的微信浏览器而言的。

 

XML/HTML代码
  1. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
  2. <meta http-equiv="Pragma" content="no-cache" />  
  3. <meta http-equiv="Expires" content="0" />  

 

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

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 | 查看次数: 1611

在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 | 查看次数: 9609

 我当前面临的问题是,当一个页面,引用了几十个外部的插件库时,有时候仅凭插件名称,并不知道页面中的一个函数调用,是引用的哪一个库文件。因此要借助一些调试手段,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 | 查看次数: 4890

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

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

查看更多...

Tags: swiper

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

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

红线标记处均为字体,可选中,交互起来,比图片方便太多了。
解决思路就是将体积巨大的中文字库,取子集,只包涵要使用的那部分文字,因此体积就很小了(包含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 | 查看次数: 2044

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 | 查看次数: 3657

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

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

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

查看更多...

Tags: 微信游戏

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

简单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 | 查看次数: 2064

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

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

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

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

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

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

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

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

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

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