CFXIXI工作室首页
CF西西的博客 | javascript

如何给元素样式增加动画

30. 十一月 2016
举例: transition: opacity .4s; 针对opacity增加一个0.4秒的补间动画。 .index_more_pop .mask { position: absolute; z-index: 999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); opacity: 0; transition: opacity .4s;}.index_more_pop .enter { opacity: 1; transform: translate(0, 0);}.index_more_pop ul { position: fixed; bottom: 0; display: block; width: 100%; z-index: 9999; transform: translate(0, 100%); transition: transform .4s;}

javascript

NPM淘宝镜像

30. 十一月 2016
http://www.thinksaas.cn/topics/0/400/400616.html

javascript

正则表达式示例

14. 十一月 2016
假设希望截取特定数字 /TTJJ\/(\d{1}\.\d{1}\.\d{1})/假设希望排除TTJJ ([^TTJJ\/]+)$

javascript

underscore源码分析

4. 六月 2016
underscore源码分析 https://github.com/hanzichi/underscore-analysis  

javascript

如何在Javascript中获取字典类型的Key和Value值

2. 六月 2016
看一个简单的示例: for (prop in items) { var itemKey = prop; var itemValue = items[prop]; } prop 字段 即字典类的的Key值,而items[prop]可以获得Value值。

javascript

Ios日期截取

18. 十二月 2015
var arr = resultLogin["time"].split(/[- :]/),dt = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);

javascript

React编译jsx方法

28. 十一月 2015
**JSX文件编译:**安装nodejs(话说这个是必装的啊),npm install -g react-tools  执行命令:jsx -w -x jsx myreact/ static/hello/src/buildjsx -w -x jsx vendor/ vendor_build在主目录下(hello-react-backbone)下执行-w 是观察文件修改,并自动重新生产js文件到指定的目录下-x 文件扩展名的处理,默认是jsmyreact/    目录是jsx文件的目录, static/hello/src/build 是生产js文件目录ps:你要想在define作用域内直接使用JSXTransformer.js,请确定能其引入作用域中,我看到github上有人用requirejs做了插件处理,可以直接使用JSXTransformer.js编译Jsx文件,不过最好还是编辑成js文件吧,别老想着让自己认识,你得让机器认识这些代码才行啊。。。可参考此处:         **有做组件分离哦**参考:react-backbone的TodoMVC

javascript

控制Iscroll5的滑动速度

12. 十一月 2015
options.deceleration 滚动动量减速越大越快,建议不大于0.01 数字越大滑动越慢

javascript

关于游览器浮层被拖动问题(元素冒泡到系统事件)

11. 十一月 2015
可以参考将touchmove事件禁掉  阻止冒泡到游览器触发不该触发的事件 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

javascript

Javascript判断时间对象是星期几

14. 十月 2015
/*判断传入时间类型是星期几*/numOfWeek:function(dateObj){ /*0 为星期日 1 为星期一 2 为星期二 3 为星期三 4 为星期四 5 为星期五 6 为星期六*/var num = dateObj.getDay(); switch(num) { case 0: return "星期日"; break; case 1: return "星期一"; break; case 2: return "星期二"; break; case 3: return "星期三"; break; case 4: return "星期四"; break; case 5: return "星期五"; break; case 6: return "星期六"; break; }},

javascript

Javascript数组去重的方法

18. 九月 2015
  /*方法一: 1,'1' 会被认为是相同的; 所有hash对象,如:{x;1},{y:1}会被认为是相同的 //10ms */ Array.prototype.unique=function(){ var newArr=[],obj={}; for(var i=0,len=this.length;i<len;i++){ if(!obj[this[i]]){ newArr.push(this[i]); obj[this[i]]=true; } } return newArr; } /*方法一改进版:所有hash对象,如:{x;1},{y:1}会被认为是相同的 //30ms*/ Array.prototype.unique=function(){ var newArr=[],obj={}; for(var i=0,len=this.length;i<len;i++){ if(!obj[typeof(this[i])+this[i]]){ newArr.push(this[i]); obj[typeof(this[i])+this[i]]=this[i]; } } return newArr; } /*方法二: 去重结果最好,但耗性能 //250ms*/ Array.prototype.unique=function(){ var newArr=this.concat(); for(var i=0,len=newArr.length;i<len;i++) { for(var j=i+1,len=newArr.length;j<len;j++) { //注意 === if(newArr[i]===newArr[j]) { newArr.splice(j,1); j--; } } } return newArr; } /*方法三: 不能去重hash对象 //25ms */ Array.prototype.unique = function(){ var newArr = []; //一个新的临时数组 for(var i = 0,len=this.length; i < len; i++){ if (newArr.indexOf(this[i]) == -1){ //如果当前数组的第i已经保存进了临时数组,那么跳过,否则把当前项push到临时数组里面 newArr.push(this[i]); } } return newArr; } var arr0=[11,21,221,13,24,"134","1",{x:1,y:1},{name:"pobaby",age:"12",hobby:"football"},{name:"pobaby1",age:"121",hobby:"football1"},{x:134},{y:132},{x:143},{y:3421},"神秘人物", "火柴人技巧格斗", "超音速战场", "小小辛打砖块", "火柴人技巧格斗", "加菲猫超人", "小小辛打砖块", "卑鄙的我2", "电流导线", "飞天手推车","神D秘人物", "火柴人S技巧格斗", "超音SD速战场", "小小SD辛打砖块", "火柴人SD技巧格斗", "加菲S猫超人", "小小DF辛打砖块", "卑鄙的FS我2", "电D流导线", "飞天SD手推车","神秘SD人物", "火柴人技D巧格斗", "超音ASD速战场", "小小辛打SAD砖块", "火柴人技SD巧格斗", "加菲FDS猫超人", "小小辛打SDF砖块", "卑鄙SDF的我2", "电流SDF导线", "飞天手DF推车","神秘SD人物", "火柴人技AS巧格斗", "超音速战FS场", "小小辛SDF打砖块", "火柴人SDF技巧格斗", "加菲SD猫超人",113,231,2221,123,234,"1334","21",{x:13,y:132},{name:"pobaby2",age:"122",hobby:"football2"},{name:"pobaby13",age:"1231",hobby:"football41"},{x:13544},{y:1352},{x:14543},{y:34521},"神秘人sd物", "火柴人技sd巧格斗", "超音速sd战场", "小小辛sd打砖块", "火柴人技巧gw格斗", "加菲猫ui超人", "小小辛yi打砖块", "卑鄙的yi我2", "电流yt导线", "飞天手ytui推车","神Dyu秘人物", "火yui柴人S技yui巧格斗", "超音SDyu速战场", "小小SD辛打砖uyi块", "火柴yui人SD技巧格斗", "加yui菲S猫超人", "小小DF辛打砖ui块", "卑鄙uyi的FS我2", "电D流导yui线", "飞天SD手推uyi车","神i秘SD人物", "火柴人技Dhk巧格斗", "超音ASD速战hk场", "小小辛打SAhkD砖块", "火柴人技SD巧ghk格斗", "加菲FDS猫k超人", "小小辛打SDF砖ytui块", "卑鄙SDF的yui我2", "电流SDyuF导线", "飞天手yuiDF推车","神iy秘SD人hk物", "火柴uyi人技AS巧格hk斗", "超音hg速战FS场", "小小辛SDF打砖hjk块", "火柴人SDF技hj巧格斗", "加菲SDhk猫超人" ]; /*十万个随机数据*/ var arr=[],num; for(var i = 0; i < 100000; i++){ num=Math.floor(Math.random()*50); arr.push(arr0[num]); } var t1= new Date().getTime(); console.log(t1); //开始时间 arr.unique(); //去重 var t2 = new Date().getTime(); console.log(t2); //结束时间 console.log(t2-t1);

javascript

针对iScroll 4 checkDOMChanges: true"属性 IScroll5中如何实现

16. 九月 2015
参考:https://groups.google.com/forum/#!topic/iscroll/vDOvdA89WGA 没有办法做实时的监听,用一个0.5秒的循环,动态检测滑轮的高度吧 var scrollerHeight = window.indexScroll.scrollerHeight; setInterval(function () { if ( scrollerHeight == window.indexScroll.scrollerHeight ) return; scrollerHeight = window.indexScroll.scrollerHeight; window.indexScroll.refresh(); }, 500);

javascript

阻止游览器滑动事件代码

14. 九月 2015
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

javascript

如何不用iscroll做页面回弹(缓冲)

14. 九月 2015
"overflow-y":"scroll", "-webkit-overflow-scrolling" : "touch"

javascript

如何格式化JSON生成漂亮的格式

7. 七月 2015
转自:http://stackoverflow.com/questions/2614862/how-can-i-beautify-json-programmatically The JSON.stringify method supported by many modern browsers (including IE8) can output a beautified JSON string: JSON.stringify(jsObj,null,"\t");// stringify with tabs inserted at each level JSON.stringify(jsObj,null,4);// stringify with 4 spaces at each level

javascript

使用 SourceMap 来进行压缩后的代码调试,以underscore为例(underscore.map由来)

6. 三月 2015
转自:http://ju.outofmemory.cn/entry/34885 JS发布后通常会经过压缩和混淆,所有代码被压缩成一行代码,如果发生错误,无法定位错误,SourceMap因此而生。说起SourceMap,不得不说说uglifyjs,uglifyjs是nodejs下一款优秀的JS压缩优化工具,支持SourceMap的生成。 一、uglifyjs的使用及SourceMap文件的生成方法1、安装nodejs:http://nodejs.org,windows下直接安装即可,安装好后自带npm.2、打开CMD,输入node -v查看,nodejs是否安装成功,如果成功会返回一个版本号。3、安装uglifyjs:执行命令:npm install uglify-js -g4、uglifyjs使用方法及API:https://github.com/mishoo/UglifyJS25、压缩JS并生成SourceMap文件 uglifyjs underscore.js --source-map underscore.js.map --source-map-root ./-m -c -o underscore-mini.js 会生成两个文件:underscore-mini.js(压缩文件)underscore.js.map(SourceMap文件) 二、用 SourceMap 调试有了SourceMap文件,放置underscore-mini.js同一目录,引用underscore-mini.js时,就可以调试,看到未压缩的代码 调试方法:打开chrome – F12(打开调试工具)- 调试工具右下角有一个设置,打开设置 – General – Enable source maps这样就打开了SourceMap调试功能。在Sources面板下,左侧展开,就能看到SourceMap解出来的未压缩文件,多个压缩文件都可以看到。 三、SourceMap的原理解析单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。 1、SourceMap基本结构如下: - version:Source map的版本,目前为3。- file:转换后的文件名。- sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。- sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。- names:转换前的所有变量名和属性名。- mappings:记录位置信息的字符串,下文详细介绍。 2、重点在于mappings的解码第一层是行对应,以分号(;)表示,每个分号对应一行代码;第二层是位置对应,以逗号(,)表示,每个逗号对应转换后源码的一个位置。第三层是位置转换,以VLQ编码表示,代表该位置对应的转换前的源码位置。 VLQ编码相关,请查询更多资料~~

javascript

js加密解密

8. 一月 2015
转自:http://www.cnblogs.com/mofish/archive/2012/02/25/2367858.html   1、base64加密   在页面中引入base64.js文件,调用方法为:     <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>base64加密</title><script type="text/javascript" src="base64.js"></script><script type="text/javascript"> var b = new Base64(); var str = b.encode("admin:admin"); alert("base64 encode:" + str);      //解密 str = b.decode(str); alert("base64 decode:" + str); </script> </head><body></body></html>   2、md5加密   在页面中引用md5.js文件,调用方法为    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>md5加密</title><script type="text/ecmascript" src="md5.js"></script><script type="text/javascript"> var hash = hex_md5("123dafd"); alert(hash)</script> </head><body></body></html>   3、sha1加密   据说这是最安全的加密   页面中引入sha1.js,调用方法为    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>sha1加密</title><script type="text/ecmascript" src="sha1.js"></script><script type="text/javascript"> var sha = hex_sha1('mima123465') alert(sha) </script> </head><body></body></html>   base64.js md5.js sha1.js

javascript

javascript如何截取url地址中的参数并保存为参数

8. 十二月 2014
    var pairs = location.hash.slice(1).split('&&'), param = {}; pairs.forEach(function (pair) { pair = pair.split('='); param[pair[0]] = decodeURIComponent(pair[1] || ''); }); param.goPage = param.goPage || "transferIndexView"; document.getElementById(param.goPage).style.display = "block";

javascript

Jquery 拓展一个点击按钮自动高亮的方法

24. 四月 2014
其实原理很简单,我们点击的时候我们给元素加上一个自定义的attr,加上后便会有有一个匹配的样式去自动适配背景,几秒后去掉该样式恢复原状 首先在自己的js中拓展一个方法hoverEl $.extend($.fn, { hoverEl:function(){ var _this = $(this); var _t = setTimeout(function(){ _this.attr("hover", "on"); }, 10); _this.attr("hoverTimeout", _t); setTimeout(function(){ clearTimeout( _this.attr("hoverTimeout") ); var _t = setTimeout(function(){ _this.removeAttr("hover"); }, 100); _this.attr("hoverTimeout", _t); },200); } }); 其次定义样式,当特定attr被加上时 li[hover=on]{ background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important; background-image: -webkit-linear-gradient(top, #4286F5, #194FDB)!important; color: white!important; cursor: pointer!important; } 调用示例: $(e.target).hoverEl();

javascript , ,

Javascript 堆栈跟踪

28. 三月 2014
Javascript 堆栈跟踪 https://github.com/stacktracejs/stacktrace.js

javascript

FullscreenOverlay全局菜单层效果

20. 二月 2014
      实现方法: 1.载入css文件: @charset "utf-8"; /* CSS Document */ .overlay-hugeinc.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .overlay-hugeinc { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } /* Effects */ .overlay-slidedown { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s; transition: transform 0.4s ease-in-out, visibility 0s 0.4s; } .overlay-slidedown.open { visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } /* Effects */ .overlay-corner { opacity: 0; visibility: hidden; -webkit-transform: translateY(50px) translateX(50px); transform: translateY(50px) translateX(50px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s; } .overlay-corner.open { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; } .overlay-scale { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; } .overlay-scale.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } .overlay-contentpush { background: rgba(153,204,51,1); visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s; } .overlay-contentpush.open { visibility: visible; -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .overlay-contentscale { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s; } .overlay-contentscale.open { visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .overlay { z-index: 1; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(153,204,51,0.9); } .overlay .overlay-close { width: 80px; height: 80px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; } .overlay-hugeinc nav { -webkit-perspective: 1200px; perspective: 1200px; } .overlay nav { text-align: center; position: relative; top: 50%; height: 60%; font-size: 54px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .overlay-hugeinc.open nav ul { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .overlay-hugeinc nav ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; } .overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 54px; } .overlay ul li a { font-weight: 300; display: block; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; } /* a { color: #99cc33; text-decoration: none; outline: none; }*/ 2.载入js文件 modernizr.custom.js 和 classie.js   操作的JS: /** * Created with JetBrains WebStorm. * User: ChenFeng * Date: 14-2-20 * Time: 上午10:14 * To change this template use File | Settings | File Templates. */ define(function(require, exports, module){ var common = require('../common'); var triggerBttn = document.getElementById( 'bbb' ), overlay = document.querySelector( 'div.overlay' ), closeBttn = overlay.querySelector( 'button.overlay-close' ); transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; common.toggleOverlay1=function(){ if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); var onEndTransitionFn = function( ev ) { if( support.transitions ) { if( ev.propertyName !== 'visibility' ) return; this.removeEventListener( transEndEventName, onEndTransitionFn ); } classie.remove( overlay, 'close' ); }; if( support.transitions ) { overlay.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); } }; /*triggerBttn.addEventListener( 'click', common.toggleOverlay1 ); closeBttn.addEventListener( 'click', common.toggleOverlay1 );*/ $("#bbb").hover().on("click",common.toggleOverlay1); $("div.overlay button.overlay-close").hover().on("click",common.toggleOverlay1); }); Html代码: <div class="overlay overlay-hugeinc"> <button type="button" class="overlay-close">Close</button> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div>   示例下载: plugin.rar (83.79 kb)

javascript

不用JQuery如何对元素绑定一个Click事件

20. 二月 2014
举个例子: 假设有一个id为bbb的元素 triggerBttn = document.getElementById( 'bbb' ) triggerBttn.addEventListener( 'click', function(){ alert(123); } );

javascript

backbones.localStorage清除数据方法

18. 二月 2014
将整个collection中的数据条目删除 weiboStore.each(function(model) { model.destroy(); } )

Backbones, javascript

javascript生成时间戳

19. 十一月 2013
+new Date()

javascript

javascript内嵌iframe刷新

16. 十一月 2013
document.getElementById("sinaLoginIframe").src = common.webWeiboLoginUrl;

javascript

javascript获得内嵌同域iframe的url

16. 十一月 2013
window.frames["sinaLoginIframe"].location.href;

javascript

jquery手机上的keyup事件的代替方案

16. 十一月 2013
使用input事件

javascript

更加好的使用javascript原生方法改变radio控件的选中值

30. 八月 2013
var _this=e.currentTarget; 复制代码 $(" li input.radio").removeAttr("checked"); _this.find("input.radio").attr("checked", "checked");* 复制代码 可以更好的替换为: _this.find("input.radio")[0].checked = true; 复制代码

javascript, JQuery

Javascript如何清除金额中的逗号

21. 八月 2013
Javascript如何清除金额中的,号 使用replace方法 示例: .replace(/\,/g,''));  

javascript

如何使用javascript设置dom的left属性

9. 八月 2013
参考:http://www.w3schools.com/jsref/prop_style_left.asp document.getElementById("b1").style.left="100px";

javascript

javascript如何将ask2码转成正常的中文

25. 七月 2013
javascript如何将将ask2码转成正常的中文:可以用decodeURIComponent方法   参考:http://blog.csdn.net/chengxuyuan20100425/article/details/8722125 Javascript URL 编码区别及转义字符处理 JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。 语法 escape(string) 参数描述 string 必需。要被转义或编码的字符串。 返回值 已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。 说明 该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。其他所有的字符都会被转义序列替换。   2 encodeURI()函数 定义和用法 encodeURI() 函数可把字符串作为 URI 进行编码。 语法 encodeURI(URIstring) 参数描述 URIstring 必需。一个字符串,含有 URI 或其他要编码的文本。 返回值 URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。 说明 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。 该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#   3 encodeURIComponent() 函数 定义和用法 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 语法 encodeURIComponent(URIstring) 参数描述 URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。 返回值 URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。 说明 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。 其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。 提示和注释 提示:请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。   4 总结:  通过对三个函数的分析,我们可以知道:escape()除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent(指请求参数)应当是最常用的,它可以讲参数中的中文、特殊字符进行转义,而不会影响整个URL。   5 示例: 1 escape() <script type="text/javascript"> document.write(escape("http://www.w3school.com.cn") + "<br />") document.write(escape("?!=()#%&")) </script> 输出: %3F%21%3D%28%29%23%25%26 2 encodeURI() <script type="text/javascript"> document.write(encodeURI("http://www.w3school.com.cn")+ "<br />") document.write(encodeURI("http://www.w3school.com.cn/My first/")) document.write(encodeURI(",/?:@&=+$#")) </script> 输出: http://www.w3school.com.cn http://www.w3school.com.cn/My%20first/ ,/?:@&=+$# 对整个URL进行编码,而URL的特定标识符不会被转码。 3 encodeURIComponent()  例1: <script type="text/javascript"> document.write(encodeURIComponent("http://www.w3school.com.cn")) document.write("<br />") document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/")) document.write("<br />") document.write(encodeURIComponent(",/?:@&=+$#")) </script 输出: http%3A%2F%2Fwww.w3school.com.cn http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F %2C%2F%3F%3A%40%26%3D%2B%24%23 例2: <script language="javascript">document.write(' <a href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+' "> 退出</a>');</script>  对URL中的参数进行编码,因为参数也是一个URL,如果不编码会影响整个URL的跳转。 URL中一些字符的特殊含义,基本编码规则: 1、空格换成加号(+)2、正斜杠(/)分隔目录和子目录3、问号(?)分隔URL和查询4、百分号(%)制定特殊字符5、#号指定书签6、&号分隔参数 转义字符的原因: 如果你的表单使用get方法提交,并且提交的参数中有“&”等特殊符的话,如果不做处理,在service端就会将&后面的作为另外一个参数来看待。例如表单的action为list.jsf?act=go&state=5则提交时通过request.getParameter可以分别取得act和state的值。如果你的本意是act='go&state=5'这个字符串,那么为了在服务端拿到act的准确值,你必须对&进行转义 url转义字符原理: 将这些特殊的字符转换成ASCII码,格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(16进制)码值。例如 空格的编码值是"%20"。 URL特殊符号及对应的十六进制值编码: 1. +  URL 中+号表示空格 %2B2. 空格 URL中的空格可以用+号或者编码 %203. /  分隔目录和子目录 %2F 4. ?  分隔实际的 URL 和参数 %3F 5. % 指定特殊字符 %25 6. # 表示书签 %23 7. & URL 中指定的参数间的分隔符 %26 8. = URL 中指定参数的值 %3D  

javascript

用Javascript计算屏幕高度

19. 七月 2013
简单的方法有: return document.height || document.body.scrollHeight;   如果想更加精确可以: var body = document.body, html = document.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight,html.clientHeight, html.scrollHeight, html.offsetHeight ); return height;

javascript

javascript try catch 遇错弹出语句

10. 七月 2013
catch(err) { var txt="(onTouchKnot)此页面存在一个错误。\n\n"; txt+="错误描述: " + err.description + "\n\n"; txt+="点击OK继续。\n\n"; alert(txt); }

javascript

如何使用javascript获得select的选中值

4. 七月 2013
How to get the selected value of dropdownlist using JavaScript? 参考:http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript <selectid="ddlViewBy"><optionvalue="1">test1</option><optionvalue="2"selected="selected">test2</option><optionvalue="3">test3</option></select> Running this code: var e = document.getElementById("ddlViewBy");var strUser = e.options[e.selectedIndex].value; Would make strUser be 2. If what you actually want is test2, then do this: var e = document.getElementById("ddlViewBy");var strUser = e.options[e.selectedIndex].text;

javascript

解决在Iphone中js譬如"2010-03-15 10:30:00"日期转换出错

1. 七月 2013
参考:http://stackoverflow.com/questions/5324178/javascript-date-parsing-on-iphone 举个例子:Date.parse("2010-03-15 10:30:00"); 发生了无效日期的错误(invalid date) 解决方案(使用split拆分):   var arr ="2010-03-15 10:30:00".split(/[- :]/), date =newDate(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]); console.log(date);

javascript

ie存储数据(使用userdata)

4. 六月 2013
ie存储数据(使用userdata) (new function () { if (window.localStorage) return; this.userData = null; this.name = location.hostname; //this.name = "wangye.org"; if (!this.userData) { try { this.userData = document.createElement('INPUT'); this.userData.type = "hidden"; this.userData.style.display = "none"; this.userData.addBehavior("#default#userData"); document.body.appendChild(this.userData); var expires = new Date(); expires.setDate(expires.getDate() + 365); this.userData.expires = expires.toUTCString(); window.userData = this; } catch (e) { } } this.setItem = function (key, value) { this.userData.load(this.name); this.userData.setAttribute(key, value); this.userData.save(this.name); }; this.getItem = function (key) { this.userData.load(this.name); return this.userData.getAttribute(key); }; this.removeItem = function (key) { this.userData.load(this.name); this.userData.removeAttribute(key); this.userData.save(this.name); }; }());

javascript

【Javascript】关于带锚点#号的url,location.href不跳转问题

31. 五月 2013
如果前缀url一样只是改变锚点的名字,游览器是不会执行跳转的,好的解决方案是使用: location.reload() 重新载入锚点改变后的url

javascript

如何使用 Spm2 压缩合并业务模块

21. 五月 2013
转自:http://chaoskeh.com/blog/how-to-build-seajs-business-module-by-spm2.html 引子 为了便于理解,先下个定义 标准模块是指 jQuey/underscore 这种不含具体业务逻辑的库 业务模块则相反,包含了网站的前端业务逻辑,比如处理表单校验、发送特定的 ajax 请求等等 Spm2 提供了对标准模块打包合并的支持,但是如果你想用它来打包业务模块的话,可能不太适合,为什么呢? 标准模块必须有版本号,但业务模块变动频繁,稍微改一下代码就要手工去改版本号,多痛苦啊 业务模块的“模块性”往往表现得没有那么强(业务模块常常是没有 exports 的),如果简单页面对应的少量 JS 也当做标准模块来处理,会觉得很别扭 标准模块要遵循 src/dist 这样的目录结构,让业务模块也遵循这个约定也很别扭 基于这些原因,我定义了一个针对业务模块的打包策略,并写了相应的 Spm2 插件来实现这个策略下面我先讲解一下这个策略 打包策略 目录结构 请看这个例子的代码 https://github.com/edokeh/spm-chaos-build-example这是一个简单的 web 项目,包含两个页面以及若干 JS 代码文件结构如下 ├─html <--- 这个目录存放 HTML │ ├─blogs │ └─users └─js <--- 这个目录存放 JS ├─example <--- 这个目录存放业务模块代码 │ ├─base │ ├─blogs │ └─users │ └─package.json ├─sea-modules <--- 这个是 SeaJS 标准模块的目录 │ ├─gallery │ └─seajs └─seajs-config.js <-- 整个项目的 seajs 配置文件 不管是否用 SeaJS ,这种结构还是很有代表性的,即 HTML 文件(或者 JSP/ Velocity)放在一个目录,而 JS 文件放在另外一个目录对于 JS 目录内部,我做了这样的约定 标准模块和 SeaJS 本身都放在一个目录下(也就是SeaJS 里 base 目录的概念) 为所有的业务模块单独建一个目录(目录名可以参考项目名称),不需要遵循 src/dist 的标准目录约定,但是需要一份 package.json 用于配置如何打包 SeaJS 的配置文件单独存放,不属于这两个目录 页面上要 use 业务模块时,通常是使用 普通绝对路径,比如 seajs.use('/js/example/blogs/index') 策略 请看: 在 sea-modules 目录下新建业务模块的同名目录 example 通过 package.json 获知哪些 JS 要打包(后面细讲),将这些文件合并压缩后放置到 sea-modules/example 目录下,并且保持相对路径不变 比如/js/example/blogs/index.js --> /js/sea-modules/example/blogs/index.js 取得这批新文件内容的 MD5 摘要,然后重命名原文件 比如 /js/sea-modules/example/blogs/index.js -->/js/sea-modules/example/blogs/index-6ae687466e603b80dea58976e6e93548.js 修改 SeaJS 的配置文件,将上一步的这种映射关系配置进去,参考如下 seajs.config({ map : [ ["users/index.js", "users/index-7719c30fc807868c70e9d78ac51e9baa.js"] ] }); OK,至此打包完成,这时候要使用打包后的业务模块时,得换用 顶级标识,比如 seajs.use('example/blogs/index') 可以看到,其实跟打包前的普通绝对路径有很强的关联,如果能有个开关自动切换就方便多了 所以我在打包的第4步中,还向 SeaJS 配置文件加了这么一句 seajs.production = true (对不起@lifesinger,借你的对象存个临时属性)那么我们页面上引用模块时,可以换成这样 seajs.use((seajs.production ? '' : '/js/') + 'example/users/index') 恩,这样打包后也不用手工再去改代码了,而且可以适用于任何的后端框架(Rails / PHP / Spring 等等) 策略的优点 稍微总结一下这个策略: 开发时,目录结构比较自然,或者说比较接近传统的方式,更容易被接受 不需要再为版本号烦恼,实际上这里使用了 MD5 来作为版本号 JS 文件的缓存配置非常简单,只需要为 /js/sea-modules 目录下所有的文件设置超长(比如100年)的 Expires 头即可,不用担心文件更新的问题,因为如果业务模块发生了改动,打包后的文件名字会不一样(内容 MD5 摘要) 只需要做一点修改(use 那段),整个打包的过程就可以全自动化了,打包完了之后不必再修改,而且对后端没有依赖 其实熟悉 Rails 的同学应该看出来了,这种策略跟 Assets Pipeline 类似,包括 MD5 文件名、开发/生产模式切换等等那么这套策略该怎么实现呢? 使用 spm-chaos-build 插件打包 我写了一个 Spm2 的插件能够自动完成上面的这个过程,首先需要安装好最新版的 NodeJS然后安装 Spm2 和这个插件 npm install spm -g npm install spm-chaos-build -g 接着配置一下 package.json ,这里与 Spm2 的配置规则基本一致,不过只需要 output 和 alias 两个项即可,参考如下 { "spm" : { "output" : [ "blogs/new.js", "users/index.js" ], "alias" : { "$" : "gallery/jquery/1.9.1/jquery", } } } Spm2 的 output 配置目前只能支持合并 相对标识 的模块,对于业务模块来说,有时候还是希望将 顶级标识 的模块也合并进来(Spm 1.x 里的 . 和 *)所以我做了一点扩展,还可以这样配置 "output" : { "relative" : [ // 只合并相对标识模块 "blogs/new.js", "users/index.js" ], "all" : [ // 合并相对标识和顶级标识的模块 "base/handlebars.js" ] }, 配置完之后,到 /js 目录下执行命令 cd js spm chaos-build example -C seajs-config.js 解释一下,example 是业务模块的目录名,-C 参数用于指定 SeaJS 的配置文件以便打包完之后修改此文件(上面第4步)如果你的标准模块目录不叫 sea-modules ,那么可以用 -O 参数自定义 spm chaos-build example -C seajs-config.js -O libs nginx gzip bonus 上面提到,你可以为 sea-modules 目录下所有文件设置超长的过期头,另外考虑到前端性能,你可能还希望启用 gzip在 nginx 里面配置 gzip 很简单,不过默认配置下这个压缩过程是动态实时的,需要消耗服务器资源所以 nginx 还提供一种预压缩的方式,即由服务器预先生成所有的 gzip 文件,浏览器请求时,直接返回这个压缩过的文件 我的插件也将这个压缩文件的过程集成了进来,通过 --gzip 参数可以开启 spm chaos-build example -C seajs-config.js -gzip current spm chaos-build example -C seajs-config.js -gzip all 传递 all 参数表示压缩 sea-modules 目录下所有文件,而 current 只压缩这次生成的业务模块文件执行后可以发现,目录下多了一堆 .gz 文件,比如 blogs/new-ce1fb85354fa9309a9ff5184e43a22d0.js.gz 然后配置下 nginx 即可,参考如下: location ~ ^/js/sea-modules { gzip_static on; expires 1y; add_header Cache-Control public; } 注意事项 有个小缺陷,必须使用 script 标签引入 SeaJS 配置文件,而不能使用 data-config ,因为必须让配置文件在 seajs.use 之前执行,参考 <script src="/js/sea-modules/seajs/2.0.0/sea.js"></script> <script src="/js/seajs-config.js"></script> <script> seajs.use((seajs.production ? '' : '/js/') + 'example/users/index'); </script> 中间处理模块 transport 的过程与 spm-build 略有不同,做了精简,会将 css/html 后缀的文件转换为模块并合并,但 css文件里面的@import 不会被处理 开发时 require 文本文件,需要引入 text 插件,而打包后就不需要了;开发时 require css 文件不需要插件,但打包后需要 style 插件支持。所以我现在这么配置 seajs.config({ plugins : seajs.production ? ['style'] : ['text'] });

javascript

JS对按钮增加回车提交数据效果

9. 五月 2013
绑定一个按钮,回车时提交数据,代码示例: $("#aaa").bind("keypress", function (e) { var e = event || e; var keyCode = e.keyCode || e.which; var isShift = e.shiftKey || (keyCode == 16) || false; if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) { $(this).fix_capslock(e); } else { $("div.rel", $(this).parent()).hide(); } if (keyCode == 13) { $(".submit").click(); } });

javascript

如何使用javascript获得img的height和width

26. 四月 2013
How to get image size (height & width) using javascript? 使用clientHeight 转自:http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript var img = document.getElementById('imageid'); //or however you get a handle to the IMG var width = img.clientWidth; var height = img.clientHeight;

javascript