看了一道nodejs的测试题,我也是醉了

貌似和nodejs也没有太大关系,把过程写下来…… 题目: 将其中的base64解码,得到一个网址:https://raw.githubusercontent.com/wdongxv/jstest/master/test.js 访问网址,得到一串压缩过的代码,拷贝到本地(test.js),格式化下,node test.js 然后又得到了另外的代码: 直接得到的代码 node test.js后得到的代码: 看到console.log了,看下结果,setTimeout的闭包里引用的i和i2分别是4和3,3个不同的闭包3次相加 value1 = 12 value2 = 9, i3 是每次循环是i的值分别是 123,so,value3=6 等等,说好的联系方式呢?我是不是忽略了什么?终于,找到了答案(只是不是我找到的),test.js里面,有这么几个单词:

grunt学习小记

按照昨天预想的,将grunt看了一下,对于grunt有了一个了解了,下面分享一个grunt下使用uglify的示例吧,其他人的代码(原网址),代码如下(注意代码中的目录结构,推荐去原文看下): 最后,说下参考资料: http://gruntjs.com/ (英文) http://www.gruntjs.org/ (中文) https://github.com/gruntjs/grunt-contrib-uglify (github)

nodejs利用imagemin压缩图片

再来一个压缩图片的,用nodejs来执行的……不知是不是我使用的有问题,感觉压缩率不高……(代码switch处写的不够好,有好建议的望告知下) 附上imagemin的github地址:https://github.com/imagemin/imagemin 直接上代码,代码写的不好,欢迎指导! 自己鼓捣完了,明天开始看grunt…… 最后附上一个今天帮同事看的一个问题:IOS webview长按文本区域显示文字放大镜,选择指定区域的网页内容,包括文字和图片,执行复制,粘贴等的链接文章,点击这里,简单点来说就是给body或指定元素设置-webkit-touch-callout:none ;和-webkit-user-select:none ;这两个属性。

nodejs调用uglify-js和clean-css压缩文件

昨天弄了一个批处理的,没将uglify和clean-css合并在一起,今天来一个用nodejs写的,本人nodejs属于自学阶段,写的不好,请见谅! 环境同样需要先全局安装nodejs、uglify-js、clean-css,然后添加下NODE_PATH=”你的node_modules所在的目录”的环境变量(windows下)。 最后奉上代码: 使用方法,命令行输入node compress.js ,compress.js为拷贝上述代码后,新建的js文件名,当然你也可以用其他的名字,当然,执行命令前,你先要到文件所在的目录下。

uglify和cleancss的bat文件

网上找了一个uglify的批处理文件,就仿照着写了一个cleancss的(其实就是简单地替换了下关键位置),下面是批处理文件的代码: 备注:需要先安装node,然后在用npm全局安装uglify-js和cleanCss。 uglify的批处理文件(JSFOLDER是需要压缩的文件目录,替换成自己的,cleancss同理) cleanCss的批处理文件 将上面的代码拷入到一个新建的txt文件,然后将后缀名修改为bat就是批处理文件了,双击就可以运行了。 原本想要把这两个写在一个批处理文件上,结果发现了一个问题,for循环直接退出了,也就是说echo done!还有后面的pause & exit 根本没有运行。这直接造成无法在一个for后面再加一个for…… 查了下,造成上面问题的原因和for没有本身关系,因为去掉uglifyjs %%~fa -m -o %%~fa(cleancss -o %%~fa %%~fa)后,就是完全正常的…… 至于具体是什么原因造成的,暂时还不清楚,若是你知道,欢迎告知,在此多谢了!

IE将返回的JSON当做文件下载

由于本人对后端不了解,此问题描述的若不准确,其中用词有错,就请见谅了。 前些日子,后台开发的一个项目出现了题目描述的问题,网上搜了下,有人说修改Content-Type为text/html就可以了,参考文章见这里: http://www.oschina.net/question/223750_123703,其实类似的回答有很多,自己搜下也可以。 可是,按照上面说的,我们遇到的问题没有解决,又找到了这样一篇文章:http://blog.csdn.net/tanguang_honesty/article/details/12782523,后端人员在开发时用到了@ResponseBody这么一个东西,而这个东西是令我们按照上面进行修改后仍不成功的罪魁祸首,造成了我们设置的Content-Type无效了,具体的看上面文章。 进一步知道问题了,又开始寻找,结果找到了下面这么一个解决方法: The fastest way to fix issue with dojo fileUploader and IE8 it’s just adding “produces = “text/html; charset=utf-8″” to your controller like this: 参考文章:http://stackoverflow.com/questions/9176115/file-upload-issue-in-ie8/14879073#148790 后面还遇到了些问题,由于后台人员取图片用的是contenttype,造成IE解析出现了错误,于是他们改用了其他方式取图片类型,由于这一块我不太了解,在此就简单一提,若是有人遇到,可以查下java取图片类型的其他方式,若是没遇到,我就送上一句“恭喜!”

我是如何初体验uglifyjs压缩JS的(转载)

原文地址:http://www.zhangxinxu.com/wordpress/2013/01/uglifyjs-compress-js/ 以下是内容的粗减版,想了解详情的见原文。 1、node安装uglifyjs。 2、运行uglifyjs压缩文件 3、批处理压缩 新建一个txt文档,任意命名,将上面的代码粘贴进去,修改JSFOLDER后面的文件夹目录为你自己的,然后把.txt后缀改成.bat就可以啦!然后双击就可以批量使用uglifyjs压缩JS文件啦!

电脑重置IP与sublime的格式化工具

1、做web端,测试时,有些时候需要模拟断网的环境,或者是网络慢的环境,对于这种情况fiddler是一种选择,但不了解且没有装fiddler的人,对于断网其实有一种非常简单的方式,ipconfig/release和ipconfig/renew就足够了,前者是释放当前的IP等的设置,后者是重新获取IP等设置,操作就是需要断网的时候,ctrl+r,输入cmd(或者在开始下方的输入框输入cmd)回车,在打开的cmd窗口输入ipconfig/release,回车,测试完成,想要重连网络了,在再cmd里输入ipconfig/renew,回车,一切就都OK了。不是什么特别好的方法,但远比拔插网线来的方便些。 2、sublime有很多非常实用的插件,这里介绍两款,一个是Pretty JSON,从名字可以看出来,是JSON的格式化工具,其实线上类似的工具很多,但本地有的话更方便。安装完成后使用也很方便,直接快捷键ctrl+alt+f(之前是ctrl+alt+j,不知道为什么就变成ctrl+alt+f了)就可以了,前提是,你要保存成JSON文件格式啊。另外一个是JsFormat,快捷键是ctrl+alt+f。 3、最后附上之前写的sublime安装插件方法的文章,地址:http://www.duanzhihe.com/817.html,以及查看sublime已安装插件列表的方法:Preferences→Package Control→List Package,里面还有些其他的,感兴趣的也可以自己看下。  

三天工作小记

这两天写代码碰到了几个比较不明所云的问题,其实也不是这两天才遇到的,只是这两天相对有时间,所以好好看了下。 1、在webview下,用document.documentElement.clientHeight计算屏幕可视区域的高度,结果发现了一个问题,偶尔会出现计算不准的情况,摸索中发现,提交表单,跳转到的页面才会出现这个问题。找到规律,就找解决问题的方法,测试发现加延迟能够降低偶发概率,但仍旧会发生。有人说这是由于webview未加载完成造成的,由于一些限制,没有去常识。由于要找求页面的高度,所以查了几个相关属性。 window.screen.height,//屏幕高度(测试chrome发现包含浏览器的页面tab栏、地址栏、工具栏等等); window.screen.availHeight, //可用高度(测试下,比height高了40,有些不明所以的感觉); document.documentElement.clientHeight ,//可视区域的高度; document.body.clientHeight,//文档的高度; 由于最终都没能找到解决方法,采取了一个不是方法的方法,由于初次进入站点时取得的值是正确的,所以在那次将其存入到了localStorage里面,然后每次从localStorage里面去取。 2、webview,存在tab切换,tab切换动态ajax取数据,隐藏之前的dom,show当前tab信息,插入到dom里面,结果造成某些低端机下,插入的dom并不显示,但可以点击。why?第一反应,这是浏览器渲染时出现的问题,但怎么解决呢?想了想,将show的动作放到了插入dom节点后,基本上解决了问题,但又引发了另外一个问题,快速进行tab切换,由于ajax是异步的,所以造成show的展示乱了。解决方式是加一个flag,记录当前tab的,若是ajax请求后返回来的不属于当前tab请求的,不进行任何的操作。 3、看下下面的代码 在一个前端技术交流群看到这段代码,当时愣了下,没搞懂这样做的意思,后来发现是我想多了,看到代码我的关注点直接放在了伪类上面,忽视了最前面的*,没意识到它才是这段代码最重要的地方。上面代码是让所有的元素都使用 border-box ,并且包括 伪类 before, after 。并不是特殊的定义它们俩。before,after 默认的display 是 inline, 但难免有人会把它变成 block 来用,这时候统一box-sizing 会好操作一些。经过测试,如上代码对于伪元素after和before同样适用。 通过这个例子,其实说明了一件事,有些时候我们关注的东西并不是重点,它之外才真正是我们需要注意的。 最后附上一个看到的文章————————Window及document对象的区别 转自:http://www.cnblogs.com/bxzz/p/4184274.html 内容如下: 一、Window对象 ————————————————– ——————- 对象属性 window //窗户自身 window.self //引用本窗户window=window.self window.name //为窗户命名 window.defaultStatus //设定窗户状态栏信息 window.location //URL地址,配备布置这个属性可以打开新的页面 ————————————————– ——————- 对象方法 window.alert(“text”) //提示信息会话框window.confirm(“text”) //确认会话框 window.prompt(“text”) //要求键盘输入会话框 window.setIntervel(“action”,time) //每一隔指定的时间(毫秒)就执行一次操作 window.clearInterval() //清除时间配备布置作用就是终止轮回 window.setTimeout(action,time) //隔了指定的时间(毫秒)执行一次操作 window.open() //打开新的窗户 window.close() //关闭窗户 ————————————————– ——————- 成员对象 window.event window.document //见document对象详解 window.history window.screen window.navigator window.external ————————————————– ——————- window.history对象 window.history.length //浏览过的页面数 history.back() //撤退退却 history.forward() //进步 history.go(i) //前进或头退到历史记录的第i个页面 //i>0进步,i<0撤退退却 ————————————————– ——————- window.screen对象 window.screen.width //屏幕宽度 window.screen.height //屏幕高度 window.screen.colorDepth //屏幕色深 window.screen.availWidth //可用宽度 window.screen.availHeight //可用高度(除去任务栏的高度) ————————————————– ——————- window.external对象 window.external.AddFavorite(“地址”,”标题” ) //把网站新增到保藏夹 ————————————————– ——————- window.navigator对象 window.navigator.appCodeName //浏览器代码名 window.navigator.appName //浏览器步伐名 window.navigator.appMinorVersion //浏览器补钉版本 window.navigator.cpuClass //cpu类型 x86 window.navigator.platform //操作体系类型 win32 window.navigator.plugins window.navigator.opsProfile window.navigator.userProfile window.navigator.systemLanguage //客户体系语言 zh-cn简体中文 window.navigator.userLanguage //用户语言,同上 window.navigator.appVersion //浏览器版本(包括 体系版本) window.navigator.userAgent window.navigator.onLine //用户否在线 window.navigator.cookieEnabled //浏览器是否撑持cookie window.navigator.mimeTypes ================================================== 二、document对象 对象属性: document.title //设置文档标题等价于HTML的 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 document.vlinkColor //已点击过的链接颜色 document.URL //设置URL属性从而在同一窗口打开另一网页 document.fileCreatedDate //文件建立日期,只读属性 document.fileModifiedDate //文件修改日期,只读属性 document.fileSize //文件大小,只读属性 document.cookie //设置和读出cookie document.charset //设置字符集 简体中文:gb2312 —————————- 常用对象方法 document.write() //动态向页面写入内容 document_createElement_x_x(Tag) //创建一个html标签对象 document.getElementById_x_x(ID) //获得指定ID值的对象 […]

移动端Web系列4 — meta

在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识。 meta 标签包含了 HTTP 标题信息(http-equiv) 和页面描述信息(name)。 http-equiv: 该枚举的属性定义,可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。 最常见的大概属于Content-Type了,设置编码类型。如 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> H5中可以简化为 <meta charset=”utf-8″> http-equiv常见还有其它如下等(合理使用可增加 SEO 收录)。 Content-Language : 设置网页语言 Refresh : 指定时间刷新页面 set-cookie : 设定页面 cookie 过期时间 last-modified : 页面最后生成时间 expires : 设置 cache 过期时间 cache-control : 设置文档的缓存机制 … name: 该属性定义了文档级元数据的名称。用于对应网页内容,便于搜索引擎查找分类,如 keywords, description; 也可以使用浏览器厂商自定义的 meta, 如 viewport; 移动端特有属性 viewport 可视区域的定义,如屏幕缩放等。告诉浏览器如何规范的渲染网页。 <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″> format-detection 对电话号码的识别 <meta name=”format-detection” content=”telphone=no” /> IOS私有属性 apple-mobile-web-app-capable 启用 webapp 模式, 会隐藏工具栏和菜单栏,和其它配合使用。 <meta name=”apple-mobile-web-app-capable” content=”yes” /> apple-mobile-web-app-status-bar-style 在webapp模式下,改变顶部状态条的颜色。 <meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> default(白色,默认) | black(黑色) | black-translucent(半透明) 注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度, Retina 屏幕为 40px )。 webapp对应的Link标签 apple-touch-icon 在webapp下,指定放置主屏幕上 icon 文件路径; <link rel=”apple-touch-icon” href=”touch-icon-iphone.png”> <link rel=”apple-touch-icon” sizes=”76×76″ href=”touch-icon-ipad.png”> <link rel=”apple-touch-icon” sizes=”120×120″ href=”touch-icon-iphone-retina.png”> <link rel=”apple-touch-icon” sizes=”152×152″ href=”touch-icon-ipad-retina.png”> 默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2; 如没有一致尺寸的图标,会优先选择比推荐尺寸大,但是最接近推荐尺寸的图标。 ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png apple-touch-startup-image 在 webapp 下,设置启动时候的界面; <link rel=”apple-touch-startup-image” href=”/startup.png” /> 不支持 size 属性,可以使用 media query 来控制。iphone 和 touch 上,图片大小必须是 230*480 px,只支持竖屏; 其它meta <!– 启用360浏览器的极速模式(webkit) –> <meta name=”renderer” content=”webkit”> <!– 避免IE使用兼容模式 –> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!– 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 –> <meta name=”HandheldFriendly” […]

iscroll5移动端textarea焦点无法blur,上拉不回去

移动端的问题真是比PC端多啊,上面的问题说的详细下,有两点,一个是textarea无法失去焦点,即便是已经点击其他地方了(不知道这是我这边的个例,由于某个事件未禁止造成的,还是大家普遍存在),另外一个是,input和textarea获得焦点后,虚拟键盘出来,整个页面被顶了上去,且需要滚动的元素无法再下拉回来。经过chrome调试,发现是整个页面上移了。 说了现象,说解决方案吧,代码如下: 代码的大体思路是iscroll开始滚动时判断,若是当前有元素获得焦点,取消焦点,并且将页面至于最初的0,0。 对于上述代码,指鹤也不确定是否会引起其他问题,若是您在使用时发现问题,欢迎提出,若是有更好的解决方案,麻烦告知,多谢了!

IE8下select无法自适应撑开

昨天写代码时遇到了题目中的问题,查了下,据说是IE8下的一个bug,select渲染完成后,若是再插入新的option(用js插入),浏览器不会再对select进行重绘,造成了select无法被撑开,部分option的内容被截掉。IE9以后就正常(据说,因手上没有IE9,所以没有去验证)。 说了原因,怎么解决呢?指鹤想到了两个方法,一个是整个select直接进行插入,而不是先写一个<select>里面填一个默认的<option>,另外一种方式是强制浏览器进行重绘,也就是先hide再show出来,至于执行实际可以根据自己代码情况本身决定,如在插入option的代码后。

fullcalendar插件在ie8下无法渲染

IE8及以下是我最不愿去碰的浏览器,但出现大bug还是需要解的。 解决方案见:http://stackoverflow.com/questions/28111281/fullcalendar-v2-x-month-view-bug-on-ie8 若是不想知道怎么解的,可以直接点击这里下载修改后的fullcalendar.js,包含min与原始的,需要哪一个,直接替换下就可以了。

firefox display: -moz-box;父元素下img width 设置无效

再来一个,有关Firefox的bug,如题:firefox display: -moz-box;父元素下img width 设置无效。 如何解决呢?没有找到根据设置来解决的方法。 从测试几种现象来看,只有img的直系父元素被设置了display: -moz-box;才会出现问题,所以给在img和被设置为box的元素中间加一层,问题可以得到解决,只是加了一层无意义的标签。 有更好方案的请告知下,多谢了!

使用HTML5+Canvas调用IPHONE摄像头拍照并压缩处理

【用到的HTML5标签】 【等比缩放图片】 FileReader对象是用来解析file控件获取的本地图片地址的,具体介绍请百度一下。把解析好的地址设置给IMG标签的SRC属性,然后通过canvas对象把图片绘制; 在这过程中就有个等比缩放的算法,再用drawImage方法把图像画到canvas中。 【如何获取画好的图片数据传到后端处理】 通过 canvas.toDataURL(‘image/jpeg’,0.5)就可以获取到base64编码值,然后你就可以按照传统的POST或者AJAX方式处理了。 【让图片显示】 【后台处理方式】 根传统的上传图片不同,这时候后台需要用base64_decode解码 转自:林氏智造 » 使用HTML5+Canvas调用IPHONE摄像头拍照并压缩处理

input type number placeholder Firefox set style bug

今天做项目时遇到的问题,input的type设置为number后,placeholder的样式设置不生效,查了下,发现了如下文章,发现了原来这是Firefox的一个bug。 链接文章:http://stackoverflow.com/questions/23512846/inputtype-number-placeholder-color-in-ff29 顺带记录下定义placeholder的css样式

fieldset某些低端机下max-width百分比设置无效

做了两个多月的移动端,最大的感触是,移动端的兼容性问题远比PC端多得多,有些问题还很奇葩。哎,遇到问题就要想办法解决去了啊。 前些日子遇到了低端机下max-width无效的问题,调试查询后发现,还是有特定条件的,设置百分比无效,具体值就有效了,当时富文本传过来的是fieldset元素,修改为div就有效了。so…… google了下,发现了下面的一篇文章,点击这里,里面说明了些问题。 最后我是怎么解决这个问题的呢?比较笨的方法,用js将fieldset的max-width设置全部转成了具体数值。

HTML5的canvas时钟

代码: 代码来源:http://blog.163.com/hongshaoguoguo@126/blog/static/180469812012619114056536/ 推荐文章:http://www.17sucai.com/pins/tag/3778.html

IOS下localStorage失效

今天写代码时遇到了一个问题,公司的一台iphone4s测试下出问题了,查了后发现是localStorage失效造成的。最初将这个问题定位在了IOS版本上,因为一个IOS6.13和IOS7.11有问题,但另外一台,IOS7.12没有问题,最后发现原来不是,而是由于有问题的那两台开启了无痕浏览,我也是醉了。 由于这个问题,可能很多东西都需要重新考虑了,毕竟我们不能阻止用户无痕浏览啊。 下面是网上找的一段用来判断是否为隐私模式的代码,代码如下: 参考文章:http://blog.csdn.net/feniuben/article/details/21071467