也是好久不写博客了,确实懒了;想想应该把node.js的东西写完整比较好,在抽时间吧;

这几天在做阿里巴巴的一个页面展示,里面设计到了一些js的问题,中途也遇到了一些幼稚的问题,

算是简单记录一下,以备查看

一、jquery 插件

里面涉及到了 滚动条的拖动以及图片左右切换时的联动问题,用到了jquey ui的简单操作以及slidesJS插件;

为什么最终用到了jquery ui 和 slidesJS,因为个人觉得里面提供的api方法和事件,比较不错,例如:

jquery ui 关于slider:

         $( "#slider" ).slider({
animate: false,
orientation: "horizontal",
range: false,
step:10,
min:0,
max:100,
value: 20,
start:function(event,ui){
// console.log(ui.value);
},
stop:function(event,ui){
// console.log(ui.value);
},
change:function(event,ui){
//console.log(ui.value); }, });

slidesJS

         $('#slides').slidesjs({
width: 940,
height: 528,
start:1,
navigation: true,
callback: {
loaded: function(number) {
// Use your browser console to view log
console.log('SlidesJS: Loaded with slide #' + number); 11 // Show start slide in log
$('#slidesjs-log .slidesjs-slide-number').text(number);
},
start: function(number) {
// Use your browser console to view log
console.log('SlidesJS: Start Animation on slide #' + number);
},
complete: function(number) {
// Use your browser console to view log
console.log('SlidesJS: Animation Complete. Current slide is #' + number); // Change slide number on animation complete
$('#slidesjs-log .slidesjs-slide-number').text(number);
}
}
});

这里就不详细介绍了,具体可参考官网api说明

http://www.slidesjs.com/

http://api.jqueryui.com/slider/

当然,对于滑动条和左右按钮实现联动,是用了jquery ui slider中的change事件,

当触发change事件时,实现左右按钮的触发,可是怎么判断到底是左按钮还是右按钮呢,

后面想了想,其实是没有办法判断当change的时候,触发的是左还是右,

但是,用sliderJS的时候,它会生成一个类似幻灯片张数的数字,点击第几张跳转到第几张的东西(当然可以设置不显示)

所以,当滑动条滑动change的时候,根据当前的value值,进行相应判断触动第几张按钮的事件,

从而实现了滑动条和左右按钮的联动

二、js函数的默认值以及event.target的兼容

也遇到了js function 参数默认值的问题,记得以前也遇到过此类问题,所以这次小小记录一下

 function foo(option1,option2){
// todo
} function foo(option1='foo',option1){
//todo
} // 此种定义参数默认值的方式错误 function foo(option1,option2,...){
option1=arguments[0] ? arguments[0] : 'foo';
option2=arguments[1] ? arguments[1] : 'foo1';
...
} function foo(option1,option2,...){
option1=arguments[0] || 'foo';
option2=arguments[1] || 'foo1';
...
} function foo(){
option1=arguments[0] ? arguments[0] : 'foo';
option2=arguments[1] ? arguments[1] : 'foo1';
...
} function foo(){
option1=arguments[0] || 'foo';
option2=arguments[1] || 'foo1';
...
}

所以,js中默认有个arguments的数组来保持参数的一一对应,当然函数中,不加参数也是正确的,

arguments会自动检测传递过来的参数,所以后两者方法也是正确的

关于event.target,其实自己以前也知道,只是这次也没有太多的解决

event.target 的firefox等标准浏览器支持的,而IE浏览器相对应的是event.srcElement

所以好的兼容写法是

 var obj=event.srcElement ? event.srcElement : event.target;

 //event.target以及event.srcElement还有很多可用属性

 event.target.id
event.target.text
event.target.name
event.target.parentNode.id
event.target.ChildNode[i].id event.srcElement.id
event.srcElement.tagName
event.srcElement.type
event.srcElement.value
event.srcElement.name
event.srcElement.className
event.srcElement.parentElement.id
event.srcElement.getattribute
event.srcElement.firstChild
event.srcElement.firstChild
event.srcElement.children[i]
event.srcElement.ChildNode[i]

三、ajax的一些问题以及jquery1.9 live替代方法on

其实,最头疼的问题,还是ajax的问题;

本来对方已经提供了得到数据的接口,

可是ajax请求过去就会涉及到跨域问题(本地不在接口域名下,也未提供相应的测试host配置等),但接口的结果返回,并未考虑跨域

所以只能想了一个,默认ajax得到了数据,然后根据数据的格式进行js代码的逻辑实现;

实现完毕后,恢复ajax的代码,交付客户,运行,大体上还行,都可以正常运行,但是在IE浏览器中,就是不行,提供未定义;

因为ajax success后,把结果赋值给变量,现在提示变量未定义,而且只有IE是这样,这就郁闷了,因为在本地无任何问题;

而且调试也很麻烦,必须改动代码,服务器上让对方替换文件,再看效果

对于这种 服务器上有问题,本地不能复现,不能本地调试,服务器无权限的问题,最是纠结了

后面经过和兄弟讨论,觉得是否是js全局变量的问题,而且还提供了一种想法 - 代理实现  ,这样就可以实现了和服务器一样的环境,也方便了调试

其实代理就是:本地域名后台写个请求,请求对方接口地址,得到数据,然后本地ajax请求本地后台文件得到数据,这样就没有了跨域的问题;

果真,试过之后,就可以实现了真实的服务器环境,方便了调试;

但是问题还是没有解决,优化代码后,服务器上还是相同的问题,这就纳闷了,

本地经过代理得到数据没有问题,可不经过代理,在正式环境,就得不到数据,

一时想不明白这两点不同在哪里,自己本地只是实现了一个代理转发的功能,其他都是一样的

于是,就是一下午的纠结。。。

终于,在对方接口编写者无意说到一个编码的问题,因为我们也在沟通,刚开始我没注意,后面终于明白了怎么回事

为什么其他浏览器都能得到数据,在IE浏览器中,就是undefined呢(也已经到success了,只是undefined)

我看到了这样一篇文章,http://www.cnblogs.com/aNd1coder/archive/2012/12/22/2829172.html

终于明白了,是原始接口返回数据的编码和ajax 请求参数过去的参数编码不一致,导致了在IE中就是undefined的结果,

而经过一个本地的代理,代理的文件编码以及数据、参数的编码是一致的,所以本地是没有问题的

 

 $.ajax({
url:'xxx',
type:'GET',
cache:false,
contentType:'text/html; charset=utf-8;', //统一前后端编码为utf-8防止ie下返回undefined
success:function (result) {}
}); //contentType,发送信息至服务器时内容编码类型。默认值适合大多数情况。
//不用设置contentType也行,确保请求url的编码一致也行

这真是一个大大的坑。。。

最后,关于jquery1.9之后,就废弃了live方法,代替的是on方法

  $("#div a").live('click',function(){

  })

  //替代成

  $("#div").on('click','a',function(){

  })

  //或者

  $(document).on('click','#div a',function(){

  })

具体可参考http://jquery.com/upgrade-guide/1.9/#live-removed

 

工作记录(1)- js问题的更多相关文章

  1. 工作记录:JS正则表达式 angularjs ng-if ng-show ng-switch

    用了一下JS 正则表达式判断密码,很简单 学习了angularjs的ng-if ng-show ng-switch的区别并使用 https://www.cnblogs.com/54td/p/59743 ...

  2. 工作记录(JS向textarea添加固定内容、通过固定字符将字符串分割为数组)

    第一个是在 textarea 输入框中添加固定的内容. 代码如下: <textarea id="text" cols="30" rows="10 ...

  3. [工作记录] Android OpenGL ES: non-square texture - continue

    previous: [工作记录] Android OpenGL ES 2.0: square texture not supported on some device recently I found ...

  4. MySQL跨表更新字段 工作记录

    工作中遇到两表查询,从user表中获取用户唯一id字段 写入到另外一张qiuzu表中的uid字段中; 二者可以关联起来的只有用户的手机号码tel字段; 了解需求后数据量稍多,不可能一个一个的手动修改 ...

  5. 最近的linux工作记录

    最近的linux工作记录 最近公司走了一些同事,部分服务器交到了我的手里,总结一些常用的操作 注:大写的字符串一般是用来占位,需要替换 创建账户和使用密钥对登陆 1,账户系列 useradd 选项 用 ...

  6. 工作记录 - OBB的解决方案

    之前关于OBB的内容: Android上使用native IO 最近工作中的问题笔记 工作记录[续] android OBB 自从用了Java来mount OBB, 再也没有遇到挂载的问题. 但最近在 ...

  7. 工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox

    原文:工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox 1. 背景 因为最近在使用wpf开发桌面端应用,在查看页面需要把TextBox和Combox等控件设置为只读的.原本是个很简 ...

  8. 图书馆管理系统程序+全套开发文档(系统计划书,系统使用说明,测试报告,UML分析与设计,工作记录)

    图书馆管理系统程序+全套开发文档(系统计划书,系统使用说明,测试报告,UML分析与设计,工作记录): https://download.csdn.net/download/qq_39932172/11 ...

  9. 国产mcu理论数据评估工作记录

    目录 前言 简要工作记录 前言 时间:20210315 主要记录这两天对国内各IC厂商的 MCU 了解记录. 大环境,ST 厂商 MCU 疯狂涨价,国内 MCU 也越来越完善,还便宜.同时,全球缺晶圆 ...

  10. 深入浏览器工作原理和JS引擎(V8引擎为例)

    浏览器工作原理和JS引擎 1.浏览器工作原理 在浏览器中输入查找内容,浏览器是怎样将页面加载出来的?以及JavaScript代码在浏览器中是如何被执行的? 大概流程可观察以下图: 首先,用户在浏览器搜 ...

随机推荐

  1. [HBase]mem store flusher 流程

  2. CVE-2012-1876Microsoft Internet Explorer Col元素远程代码执行漏洞分析

    Microsoft Internet Explorer是微软Windows操作系统中默认捆绑的WEB浏览器.         Microsoft Internet Explorer 6至9版本中存在漏 ...

  3. OA项目Ioc DI(二)

    依赖注入:属性和构造函数的注入 一个简单的Demo: IUserInfoDal接口: public interface IUserInfoDal { void Show(); string Name ...

  4. 拉格朗日(Lagrange)插值算法

    拉格朗日插值(Lagrange interpolation)是一种多项式插值方法,指插值条件中不出现被插函数导数值,过n+1个样点,满足如下图的插值条件的多项式.也叫做拉格朗日公式.  这里以拉格朗日 ...

  5. MemSQL Start[c]UP 2.0 - Round 1 E - Three strings 广义后缀自动机

    E - Three strings 将三个串加进去,看每个节点在三个串中分别出现了多少次. #include<bits/stdc++.h> #define LL long long #de ...

  6. Android应用程序签名打包(AS)

    使用Android studio对Android应用签名步骤: 第一步: 第二步: 第三步: 第四步: 数字证书创建完成后,点击OK----->点击Next------>Finish. 注 ...

  7. Ionic Js三:下拉刷新

    在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actions ...

  8. Linux 服务器上Redis安装和配置

    1.下载安装redis 在Linux服务器上,命令行执行以下命令(cd ./usr local/src 一般源码放在这里(推荐源码安装)) wget http://download.redis.io/ ...

  9. ref:关于JAVA中一些安全漏洞示例说明及如何规避方法代码示例总结分享

    ref:http://www.xwood.net/_site_domain_/_root/5870/5874/t_c268166.html 标签:安全,漏洞,健壮,java,SQL注入,SS及CSRF ...

  10. java 代码中设置 临时 环境变量

    System.setProperty("hadoop.home.dir", "D:\\software\\software_install\\dev_install\\h ...