工作记录(1)- js问题
也是好久不写博客了,确实懒了;想想应该把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问题的更多相关文章
- 工作记录:JS正则表达式 angularjs ng-if ng-show ng-switch
用了一下JS 正则表达式判断密码,很简单 学习了angularjs的ng-if ng-show ng-switch的区别并使用 https://www.cnblogs.com/54td/p/59743 ...
- 工作记录(JS向textarea添加固定内容、通过固定字符将字符串分割为数组)
第一个是在 textarea 输入框中添加固定的内容. 代码如下: <textarea id="text" cols="30" rows="10 ...
- [工作记录] Android OpenGL ES: non-square texture - continue
previous: [工作记录] Android OpenGL ES 2.0: square texture not supported on some device recently I found ...
- MySQL跨表更新字段 工作记录
工作中遇到两表查询,从user表中获取用户唯一id字段 写入到另外一张qiuzu表中的uid字段中; 二者可以关联起来的只有用户的手机号码tel字段; 了解需求后数据量稍多,不可能一个一个的手动修改 ...
- 最近的linux工作记录
最近的linux工作记录 最近公司走了一些同事,部分服务器交到了我的手里,总结一些常用的操作 注:大写的字符串一般是用来占位,需要替换 创建账户和使用密钥对登陆 1,账户系列 useradd 选项 用 ...
- 工作记录 - OBB的解决方案
之前关于OBB的内容: Android上使用native IO 最近工作中的问题笔记 工作记录[续] android OBB 自从用了Java来mount OBB, 再也没有遇到挂载的问题. 但最近在 ...
- 工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox
原文:工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox 1. 背景 因为最近在使用wpf开发桌面端应用,在查看页面需要把TextBox和Combox等控件设置为只读的.原本是个很简 ...
- 图书馆管理系统程序+全套开发文档(系统计划书,系统使用说明,测试报告,UML分析与设计,工作记录)
图书馆管理系统程序+全套开发文档(系统计划书,系统使用说明,测试报告,UML分析与设计,工作记录): https://download.csdn.net/download/qq_39932172/11 ...
- 国产mcu理论数据评估工作记录
目录 前言 简要工作记录 前言 时间:20210315 主要记录这两天对国内各IC厂商的 MCU 了解记录. 大环境,ST 厂商 MCU 疯狂涨价,国内 MCU 也越来越完善,还便宜.同时,全球缺晶圆 ...
- 深入浏览器工作原理和JS引擎(V8引擎为例)
浏览器工作原理和JS引擎 1.浏览器工作原理 在浏览器中输入查找内容,浏览器是怎样将页面加载出来的?以及JavaScript代码在浏览器中是如何被执行的? 大概流程可观察以下图: 首先,用户在浏览器搜 ...
随机推荐
- MyEclipse中Source not found的问题
1.问题描述 在MyEclipse中想查看源码,结果显示:Source not found ......(大概的意思就是找不到源码包) 2.解决方案 下载相应版本的apache-tomcat-8.5. ...
- SQLAlchemy-介绍安装
一:概述 SQLAlchemy的SQL工具包和对象关系映射是一个全面的工具集,用来处理数据库和Python. 它有几个不同的功能领域,可以单独使用或组合使用. 所示的主要组件,组件依赖关系组织成层: ...
- shell中的特殊符号总结
在shell中常用的特殊符号罗列如下: # ; ;; . , / \\ 'string'| ! $ ${} $? $$ $* \"string\"* ** ...
- echarts一些笔记
console.log(); 浏览器显示 $.ajax({ url : "ajax/echartWelcome.action", type : "post", ...
- SQL语句添加删除修改字段[sql server 2000/2005]
用SQL语句添加删除修改字段1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME ...
- Zookeeper介绍及安装部署
本节内容: Zookeeper介绍 Zookeeper特点 Zookeeper应用场景 用到了Zookeeper的一些系统 Zookeeper集群安装部署 一.Zookeeper介绍 是一个针对大型分 ...
- Redis数据类型之Set(四)
前言:set类似于数学上面的集合概念,包含的元素无序,不能重复,能进行交.并.差操作. 一.内部原理 set数据结构,也是随着元素数目的多少而变化.当set中添加 ...
- Linux 的软件安装目录
Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /usr:系统级的目录,可以理解为C:/Windows/,/usr/lib理解为C:/Windows/System32. / ...
- 一文搞定 Mybatis 的应用
Mybatis 介绍 Mybatis 是一个开源的持久层框架,原来叫 ibatis ,它对 jdbc 操作数据库的过程进行了封装,使开发者只需要关注 SQL 本身,而不需要花费精力去处理例如注册驱动. ...
- Oracle 默认的几个登陆用户名和密码
默认用户有这么几个,system,sys,scott,hr ,一般scott 和hr 作为你的练习用户.system的默认密码是 manager sys的默认密码是 change_on_install ...