2014年4月18日星期五

source map 简介(翻译)

原文地址:

http://blog.teamtreehouse.com/introduction-source-maps?utm_source=CSS-Weekly&utm_campaign=Issue-91&utm_medium=email

翻译的不好,见谅。另注:关于文中提到的,这里有一篇中文的介绍

译文:

我们常常使用一个提升站点性能的办法,就是把js文件和css文件打包压缩。但是压缩以后如果我们要调试或者修改呢?那简直是恶梦。不过,现在有一种可以部分解决这个问题的方式,叫做Source Map,我们翻译成源码图吧。

Source Map可以把压缩的文件转换成压缩前的样子。这就意味着,你可以尽管压缩你的代码,然后还可以方便的调试源码。现在chrome和firefox浏览器的开发工具已经支持SourceMap了。

本文介绍SourceMap的工作原理和生成方法,我们只介绍js的sourcemap。

备注:firefox默认支持SourceMap,Chrome浏览器需要手动开启支持。设置方法:在chrome浏览器的控制面板里(settings),里面的常规选项卡里有Enable js sourcemap 和Enable css source map 两个选项,勾选即可。

Source Map 工作方式

顾名思义,源图由一大堆信息组成,把压缩的代码转换成阅读的原始代码。您可以指定一个不同的源映射。做法就是把压缩的代码中加入一句注释:

//# sourceMappingURL=/path/to/script.js.map

支持Source Map的js压缩工具会自动加入这句注释,浏览器只在开发工具打开的时候才会识这句注释并加载map文件(如果是chrome浏览器,则需要设置打开)。

map文件其实是一个json格式的文件,包含一些相关性的信息,示例如下:

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}

每个节点的含义如下:

  • version,版本号
  • file,文件名
  • sources,源码文件,支持多个
  • sourceRoot,源码目录
  • names,包含所有变量名、方法名等信息的列表,这是压缩时被替换掉的
  • mappings,一组base64编码的字符串

用UgilfyJS压缩工具生成map文件

UgilfyJS是一个优秀的压缩js的命令行工具,版本2以上的版本支持SourceMap,使用方式为:

uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m
  • --source-map – 输出的文件名.
  • --source-map-root – (optional) sourceRoot属性.
  • --source-map-url – (optional) url. //# sourceMappingURL=/path/to/script.js.map
  • --in-source-map – (optional) 源路径
  • --prefix or -p – (optional)从 sources 移除n 级路径 . 比如, -p 3 会移除三级路径, 比如 one/two/three/file.js 会变成 file.js. 使用-p relative会使用相对路径.

grunt 有个ugilfyJS插件,可参考对应文档使用。

Chrome Dev Tools查看的效果

The Sources Tab in Chrome Dev Tools

The Sources Tab in Chrome Dev Tools

(本人电脑可能是版本问题,并未出现对应的js)

TRY A DEMO

Firefox Developer Tools中查看效果

The Debugger Tab in the Firefox Developer Tools

The Debugger Tab in the Firefox Developer Tools

Firefox的开发工具的debugger可以看到,不过当你尝试的时候会发现只有当打开对应的js时才会出现内容,之前不会加载出来(或者说渲染出来).

TRY A DEMO

后记

Source Map允许程序员优化代码的同时又能够方便的调试源代码,着实是个好东西.

这篇文章压缩js用到了UglifyJS.如果你还没有用过UglifyJS优化你的网站,可以把这个工具加入你的工作流中。

介绍几个移动web开发调试工具

<p>移动web开发,最让人心烦的估计就是各平台下运行结果不一致的问题了,明明在电脑上调试的好好的,在手机上却错误,而且错的莫名其妙。咋办?

 

1、<a href="http://jsconsole.com/">http://jsconsole.com/</a>

 

最初,大家期望都不高,能把console.log输出出来就好了,当然,高版本iphone在safari中内置这个功能了,但其他手机呢?

 

这时候我们可以求助jsconsole.com,他其实提供了一个在线的服务,帮你来完成console.log的输出。你需要改什么?什么都不需要改。打开网页看看吧。

 

不多说,输入<span style="font-family: Menlo, consolas, monospace; font-size: 15px; line-height: 20px; white-space: pre-wrap;">:listen,然后就可以得到一个脚本地址的标签,把该标签贴进你的网页里面即可。</span>

 

<span style="font-family: Menlo, consolas, monospace; font-size: 15px; line-height: 20px; white-space: pre-wrap;">原理其实就是把页面中控制台输出的内容显示打你当前的网页上了,不错吧。</span>

 

<span style="font-family: Menlo, consolas, monospace; font-size: 15px; line-height: 20px; white-space: pre-wrap;">2、weinre</span>

 

<span style="font-family: Menlo, consolas, monospace;"><span style="font-size: 15px; line-height: 20px; white-space: pre-wrap;">有了输出结果,我们其实更不满足了,我还想想在pc上的浏览器那样,看dom的情况嘞,这个咋办?</span></span>

 

<span style="font-family: Menlo, consolas, monospace;"><span style="font-size: 15px; line-height: 20px; white-space: pre-wrap;">我们知道chrome等webkit浏览器底下有个开发工具,可以查看dom情况,脚本执行情况,比单纯的console.log输出强多了,得此工具,可以得天下乎。</span></span>

 

<span style="font-family: Menlo, consolas, monospace;"><span style="font-size: 15px; line-height: 20px; white-space: pre-wrap;">weinre就是这样一个强大的工具,原理是:在安装一个weinre的服务,其实就是一个提供api的网站,然后跟jsconsole中一样,把生成的一段代码加入到你的网页中去(也可以不加入,用收藏夹方式调试也可以)。然后这段脚本就把页面中所有的信息(webkit的)发到你的服务器,然后展示给你。这个脚本依赖webkit,所以现在支持webkit的浏览器。不过现在主流的移动端浏览器都是webkit的,ie和firefox嘛,还只占很小比例。</span></span>

 

<span style="font-family: Menlo, consolas, monospace;"><span style="font-size: 15px; line-height: 20px; white-space: pre-wrap;">weinre据说早期是java开发的,现在有nodejs版,使用可以参考以下文章:</span></span>

 

<a href="http://ju.outofmemory.cn/entry/1355">http://ju.outofmemory.cn/entry/1355</a>

 

(经测试,在chrome浏览器上正常,而ios7的safari中与某些脚本有冲突,会报错,不知道是不是nodejs版的weinre还没正式完成?)

 

3、firebug-lite

 

前面说到,weinre只支持webkit浏览器,其他浏览器我们咋处理哪?

 

做web开发的,一定想到firebug那近乎完美个的调试工具,想来做web开发这几年基本上没有离开过firebug,重装电脑第一个要装的浏览器是firefox,第一个要装的插件就是firebug啦。

 

不过之前一直没用过,把firebug-lite弄到手机浏览器上去。

 

其实很简单啦,跟前面的一个,把一段脚本嵌入到你的页面去就好了。

 

参考:<a href="https://getfirebug.com/firebuglite">https://getfirebug.com/firebuglite</a>

 

不过firebug这么强大的东东,在小小的浏览器窗口中施展的着实不甚自在。要是集weinre和firebug的种种优点于一身,哈哈。</p>

win8.1 Microsoft Smooth Streaming Client

做视频流的都知道苹果的hls视频流格式,其实微软也有一种流格式叫做Smooth Streaming。

hls在苹果的设备上可是默认支持的,不用安装什么解码器,直接浏览器打开就能播放,据说人家那是硬件解码,别的设备就得自己想办法了。

Smooth Streaming就没这么好运气了,即便在微软的windows8.1的操作系统中,微软也没能提供web版的Smooth Streaming播放器。只是win8 store App倒是提供了Smooth Streaming Client 的SDK。

今天我们讨论的重点就是这个播放器的sdk。

首先是播放器的主体:Playerframework:http://playerframework.codeplex.com/

这个播放器还算正常,但是怎么说呢。如果你是WinJS开发的App,总感觉多此一举,毕竟html5自带的播放器就可以播放视频,通过js扩展出的各种漂亮的播放器,都不比微软的差。

这个播放器呢,使用还算简单,不多说了。我们说他的Smooth Streaming Client SDK

这个sdk有两个版本:win8.1版 和 Win8版

好吧,我一直以为win8.1是win8的一个更新呢,原来可以认为是两个东西哦。

这里有一个关于html app中使用这东西的文档,不翻译了。

横向布局情况下,页面左右自适应文章内容的问题

自从平板出现后,页面左右布局的越来越多。尤其是看文章,估计都觉得翻书的体验很好用。css也适应变化,出现了许多新的属性(或者是之前就有,本人木有用过。。。)

需求

首先我们分析下大概的需求:

  • 1
    <div>
  • 2
        <p>....</p>
  • 3
    </div>

p标签中是详细内容,这里的内容可能会比较多,div就是其容器了。比如这个div宽度是320,高度是从头到底部,然后,就是在页面内容比较多的时候,在右面第二列显示余下内容。。。

这个需求在以前是很奇怪的,但在平板上这个需求就看起来很正常了。

css

我们找找对应的一些css写法:

column-count:这是指布局分几列;
column-fill:每一列的填充方式,auto是填满一列,再填下一列,balance是平均填充,就是没列的高度差不多一样。

实现

好了,知道了css如何使用,我们就可以动态控制页面的css来实现。实现方案呢,当然是先判断p标签的高度是不是高于容器div,然后。。。废话太多了,上代码吧(jquery):

  • 1
    function Auto(){
  • 2
        var width=320;
  • 3
         if($("div>p").height()>$("div").height())
  • 4
         {
  • 5
              var count=parseInt($(".description").css("column-count"));
  • 6
              if(isNaN(count))count=1;
  • 7
              count++;
  • 8
              $("div").width(320*count);
  • 9
              $("div").css("column-count",count);
  • 10
              $("div").css("-webkit-column-count",count);
  • 11
              $("div").css("-moz-column-count",count);
  • 12
              $("div").css("column-fill","auto");
  • 13
              if(count<3){
  • 14
                      Auto();
  • 15
              }                                
  • 16
         }
  • 17
         return false;
  • }

这是一个递归了,当然这里谨慎的设置了最多只支持三次递归。

a标签的click事件

我们有时候在div上加a标签,用以产生标准的类似按钮的鼠标效果,减少css代码。

但是加了click事件之后,发现由于事件冒泡,href的链接事件也会触发。

经测试,这个href有以下现象:

  • 如果href不填写,就没有鼠标效果。
  • href填为空白,则跳转到页面跟目录。
  • 使用href="#",这样页面就不会跳转。

写“#”是我们之前常常使用的方法。不过使用jqm或backbone的无刷新跳转的方式,就遇到麻烦了。这类框架支持不跳转页面而是通过"#home"这样的路径来记录页面浏览历史。

这时候我们可以在click事件中阻止冒泡即可防止出发href事件。

最简单的方法自然是:return false;

2013年9月16日星期一

Backbonejs集合的排序(正序/逆序)—–Backbonejs学习笔记

网页开发中经常遇到js排序的问题,这曾经是前端工程师最头疼的问题。不过使用Backbonejs的同学,还是有不少捷径可走的。 1、sortBy方法: var sortcollection=this.collection.sortBy(function(music){ return music.get("title").toLowerCase(); }); this.collection.reset(sortcollection); 直接sortBy并不能重新排序,必须手动触发reset方法。 2、comparator: this.collection.comparator = function(music) { return music.get("id");// }; 自动排序,号称每增加一个会自动排到正确的位置。不过我没有试验成功。 3、逆序reverse 话说reverse方法实际上是js数组标准的方法,在这里使用起来仍然很方便。 var sortcollection=this.collection.sortBy(function(music){ return music.get("title").toLowerCase(); }).reverse(); this.collection.reset(sortcollection); 之所以一开始并没有想到可以直接用,是因为collection在跟踪模式下显示并不是一个数组而是一个对象。   另外,在使用中发现,collection没有提供清空方法,而且reset时,页面已有的元素并没有被排序,而是重新渲染了一批新的经过排序的内容进来。我理解这是因为集合数据并不跟html的内容同步的原因,处理也蛮简单的,我们直接清空容器dom的html就可以了。



Backbonejs集合的排序(正序/逆序)—–Backbonejs学习笔记

2013年8月29日星期四

吐槽下腾讯的微云

最近网盘大战如火如荼,如今腾讯也加入了,而且出手不凡,10T! 不过,腾迅的微云web版本bug众多,如今又封锁了分享文件直接保存到微云空间里去的功能,那这10T空间如何填的满? 在我看来,腾讯此次看样子应该就是来捣乱的,说10T又不是10T,倒不如华为干脆无限来的痛快。 据说微云与qq及旋风整合的不错,也算是优势所在,只是这个10T的宣传,让大家关注在了容量上而已。 废话不多说,咱的网盘搜索已经及时更新,支持了微云的搜索,欢迎使用。



吐槽下腾讯的微云

2013年8月28日星期三

backbonejs中this的绑定问题—-backbonejs学习笔记

最近开始学习backbonejs。 学习中遇到的种种问题,以笔记形式记录在此。今天是第一篇笔记,记录比较零碎,勿怪。 view中的经常会发现this及其属性在不同的方法中不一致的问题,这是因为针对不同的方法,this指向的并不是本view。 解决方法也很简单: _.bindAll(this, 'render'); 这里假设要绑定的是render方法,如果要绑定多个的话,直接用逗号隔开即可_.bindAll(this, 'render','anotherfunction');。



backbonejs中this的绑定问题—-backbonejs学习笔记

2013年8月27日星期二

js中2个等号与3个等号的区别

首先,== equality 等同或称值相等,=== identity 恒等或称严格相等。 ==, 两边值类型不同的时候,要先进行类型转换,再比较。 ===,不做类型转换,类型不同的一定不等。 例:

  var a = 3;  var b = "3";     a==b 返回 true  a===b 返回 false  

因为a,b的类型不一样 ===用来进行严格的比较判断。

规则说明:

先说 ===,这个比较简单。下面的规则用来判断两个值是否===相等: 1、如果类型不同,就[不相等] 2、如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断) 3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。 4、如果两个值都是true,或者都是false,那么[相等]。 5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。 6、如果两个值都是null,或者都是undefined,那么[相等]。 再说 ==,根据以下规则: 1、如果两个值类型相同,进行 === 比较。 2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较: a、如果一个是null、一个是undefined,那么[相等]。 b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。 c、如果任一值是 true

具体区别:

1、对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进行“值”比较,两者结果一样

2、对于Array,Object等高级类型,==和===是没有区别的
进行"指针地址"比较
3、基础类型与高级类型,==和===是有区别的
1)对于==,将高级转化为基础类型,进行"值"比较
2)因为类型不同,===结果为false


js中2个等号与3个等号的区别

滚动页面到顶部的动画

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>    <script>  $(document).ready(function(){            // hide #back-top first          $("#back-top").hide();                    // fade in #back-top          $(function () {                  $(window).scroll(function () {                          if ($(this).scrollTop() > 100) {                                  $('#back-top').fadeIn();                          } else {                                  $('#back-top').fadeOut();                          }                  });                    // scroll body to 0px on click                  $('#back-top a').click(function () {                          $('body,html').animate({                                  scrollTop: 0                          }, 800);                          return false;                  });          });    });  </script>  


滚动页面到顶部的动画

js 正则替换一例

直接上例子
  function marktext(text) {  
      var re = new RegExp(key, "gi");  
      return text.replace(re, "<mark>$&</mark>");  
  },  
  function marktext(text) {  
      var re = new RegExp(key, "gi");  
      return text.replace(re, function (word) { return "<mark>" + word + "</mark>" });  
  },      这两个方法都是给指定不区分大小写的内容做mark标记的方法,功能一样,相比直接替换的优势就是不会改变被替换文字的大小写。第二个方法,使用起来更灵活。  


js 正则替换一例

判断网络是否连接(win8 app HTML&JS)

    var networkInfo = Windows.Networking.Connectivity.NetworkInformation;  //Retrieve the ConnectionProfile  var internetConnectionProfile = networkInfo.getInternetConnectionProfile();  //Pass the returned object to a function that accesses the connection data  var connectionProfileInfo = getConnectionProfileInfo(internetConnectionProfile);    


判断网络是否连接(win8 app HTML&JS)

JsonObject.Parse 接收json数组时的问题

访问twitter的信息,返回的结果是个数组:

  [  {  ...  },{  ...  }  ]  

结果在windowsRT的JsonObject.Parse时发现程序报错。经测试发现该方法Parse根是数组的json对象确实会出现问题,而且Json.Net的组件同样会发生问题。 既然直接Parse数组不成,把它拼成个对象呗:

  content = "{\"result\":"+ content+"}";  JsonObject jsonObject = JsonObject.Parse(content);  

OK了



JsonObject.Parse 接收json数组时的问题

db_adb.exe,国内杀毒厂商制造的新病毒

今天手机接上电脑时,系统报了一个错误,db_adb.exe的错误,感觉很奇怪,不知道什么原因,就上网搜索了一下。 结果发现这个东西是金山毒霸的一个进程,连接手机的时候要强制安装豌豆荚,估计是卸载豌豆荚引发的问题。 但是,我的电脑上没有安装金山毒霸啊!!! 于是在网上看了一些投诉,都是投诉这个病毒的。 而且不止在金山毒霸的软件中出现,在金山的多款软件中都有出现。 我的电脑上有安装金山的快盘软件,每次连接手机的时候,都会提示要安装豌豆荚,还要安装驱动,而且还自动下载驱动去了,最可笑的是竟然中兴的手机下载了个三星的驱动非要装,我说这金山的工程师们,你们是吃shi的么? 吃shi也就罢了,偏偏不该在哪儿有本事的地方挺本事,dbadb.exe这个进程死活杀不掉!到底人家是杀毒的,知道杀毒都咋使啥招儿,人家造的病毒,查不出杀不掉啊。结束进程啊,可以,你结束后,就变俩dbadb.exe了,玩用户没商量。 怎么办?卸载了事吧?快盘不用了!金山的啥都不想用了!金山这是想搞啥?看自己招牌够不够硬,砸砸试试?你又不姓马,还学人家化腾? 这么一个垃圾进程,360愣是没查出来,傻了吧,这个进程一旦启动,360的手机助手就连不上手机了,哈哈,你不想跟金山打架,他在背后搞你呢,为此我还差点放弃360的手机助手。在此,希望360也要升级下,这类流氓软件坚决要处理啊。



db_adb.exe,国内杀毒厂商制造的新病毒

记录一个chrome的HTML5离线存储api地址

这是未来会支持的chrome浏览器的离线存储api,叫SyncFileSystem API,现在正式版的chrome浏览器尚不支持,该api支持云端同步功能,同步到google网盘,不过,该api现在只是处于草稿状态,这里记录下地址。 https://sites.google.com/a/chromium.org/dev/developers/design-documents/extensions/proposed-changes/apis-under-development/syncfilesystem-api



记录一个chrome的HTML5离线存储api地址

一个奇怪的许可证WTFPL

发现一个特殊的许可证WTFPL

http://www.wtfpl.net/

不想翻译了,直接贴出来:

About the WTFPL

Posted December 26th, 2012 by . The Do What The Fuck You Want To Public License (WTFPL) is a free software license. There is a long ongoing battle between GPL zealots and BSD fanatics, about which license type is the most free of the two. In fact, both license types have unacceptable obnoxious clauses (such as reproducing a huge disclaimer that is written in all caps) that severely restrain our freedoms. The WTFPL can solve this problem. When analysing whether a license is free or not, you usually check that it allows free usage, modification and redistribution. Then you check that the additional restrictions do not impair fundamental freedoms. The WTFPL renders this task trivial: it allows everything and has no additional restrictions. How could life be easier? You just DO WHAT THE FUCK YOU WANT TO.

Full license text

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE                      Version 2, December 2004      Copyright (C) 2004 Sam Hocevar <[email protected]>      Everyone is permitted to copy and distribute verbatim or modified   copies of this license document, and changing it is allowed as long   as the name is changed.                 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE     TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION       0. You just DO WHAT THE FUCK YOU WANT TO.    


一个奇怪的许可证WTFPL

CoffeeScript 安装配置笔记(Windows 8&Sublime Text2)

安装步骤其实还算简单: 1、安装node.js。 2、更新npm,命令行下执行:

  npm update  
  3、使用npm安装Coffee Script:  
  npm install -g coffee-script  

如果网络有问题,可以去这里下载一个zip包使用:

  https://github.com/jashkenas/coffee-script/  

关于zip包的使用方式,其实就是把下载下来的zip包解压到:

  C:\Users\username\AppData\Roaming\npm\node_modules\coffee-script\  

目录中就可以了,另外有说需要添加环境变量的:

  NODE_PATH=C:\Users\username\AppData\Roaming\npm\node_modules  

到现在为止,其实Coffee Script已经安装完成,你可以通过查看版本号的命令来检查安装时候成功。

  coffeev  

然后我们就要开始配置Sublime Text2的环境了。Sublime Text2其实是提供了一个插件的,可以在用install命令直接安装。不过安装后并不好使(编译报错),需要修改插件配置, 在插件Sublime Text的安装目录:

  \Data\Packages\CoffeeScript\CoffeeScript.sublime-build  
  

打开该文件,使用如下代码覆盖:

  {  
      "cmd": ["C:\\Program Files\\nodejs\\coffee.cmd", "$file","&&","C:\\Program Files\\nodejs\\coffee.cmd","-c","$file"],  
      "file_regex": "^(...*?):([0-9]*):?([0-9]*)",  
      "selector": "source.coffee"  
  }  

可以看到这段代码跟我们网上查到的代码有些不一样,其实coffee命令直接跟$file的话,是控制台输出,中间夹一个”-c”的参数,就是编译了,编译就是把我们创建的.coffee文件编译成指定的.js文件。我们这里的配置的参数是同步录下同名的js文件。(如果文件已经存在,会覆盖) 当然,这里有个coffee.cmd,其实我看到这段代码时也很迷惑的,这段coffee.cmd的作用是什么呢?因为nodejs里面并没有这个命令啊。 经过一番查找,命令也很简单:

  @echo off  
  "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\coffee-script\bin\coffee" %*  

好了,把这个命令保存成coffee.cmd,放在nodejs的根目录下就可以了。 好了,现在就使用sublime text来编写coffee script文件了。 如果你还不太熟悉,这里有个小提示:

  1. sublime text编译快捷键是CTRL+B。
  2. 编写coffeescript 的代码,后缀名是.coffee
  3. 编译后,生成同名js文件。可以使用拆分窗口的方式,方便对比生成的js代码,学习时尤其有效。

参考链接: http://www.ibm.com/developerworks/cn/web/wa-coffee1/ http://www.cnblogs.com/2gua/archive/2012/07/04/2576352.html http://www.ituring.com.cn/article/4048 http://rritw.com/a/bianchengyuyan/C__/20121026/242739.html



CoffeeScript 安装配置笔记(Windows 8&Sublime Text2)

最近网盘活动很丰富,借鸡生蛋搞了个盘搜

最近网盘的活动很丰富,大家都顺手搞了几个T的空间了吧。 说实话,网盘大小到底多大合适呢?其实你有几个T的内容又如何呢?流行的东东都是秒传,看来百度学的很聪明,同一份数据在云端保存一份就够了,在数据库里面做个标记就好了,无需保存那么多份数据。 不过对用户来说,多大都不觉得大,尤其现在的蓝光3d电影,随便一个都是几十G的数据,20部蓝光电影,一个T就木有了。 好吧,互相关注吧。俩人互相关注,空间可以大一倍哦!不过毕竟还是有限,而且检索比较麻烦。 好在现在可以搜索。。。。。 你不知道么?你out了! 下面,接百度,给大家分享一个无广告的网盘搜索:http://pan.byszsz.com/ 暂时只支持百度云盘,360云盘,华为网盘及迅雷快传,今后有时间会慢慢增加流行的网盘上来。



最近网盘活动很丰富,借鸡生蛋搞了个盘搜

2013年6月28日星期五

CoffeeScript 安装配置笔记(Windows 8&Sublime Text2)

安装步骤其实还算简单:

1、安装node.js。

2、更新npm,命令行下执行:

  npm update  
  3、使用npm安装Coffee Script:  
  npm install -g coffee-script  

如果网络有问题,可以去这里下载一个zip包使用:

  https://github.com/jashkenas/coffee-script/  

关于zip包的使用方式,其实就是把下载下来的zip包解压到:

  C:\Users\username\AppData\Roaming\npm\node_modules\coffee-script\  

目录中就可以了,另外有说需要添加环境变量的:

  NODE_PATH=C:\Users\username\AppData\Roaming\npm\node_modules  

到现在为止,其实Coffee Script已经安装完成,你可以通过查看版本号的命令来检查安装时候成功。

  coffeev  

然后我们就要开始配置Sublime Text2的环境了。Sublime Text2其实是提供了一个插件的,可以在用install命令直接安装。不过安装后并不好使(编译报错),需要修改插件配置, 在插件Sublime Text的安装目录:

  \Data\Packages\CoffeeScript\CoffeeScript.sublime-build  
  

打开该文件,使用如下代码覆盖:

  {  
      "cmd": ["C:\\Program Files\\nodejs\\coffee.cmd", "$file","&&","C:\\Program Files\\nodejs\\coffee.cmd","-c","$file"],  
      "file_regex": "^(...*?):([0-9]*):?([0-9]*)",  
      "selector": "source.coffee"  
  }  

可以看到这段代码跟我们网上查到的代码有些不一样,其实coffee命令直接跟$file的话,是控制台输出,中间夹一个”-c”的参数,就是编译了,编译就是把我们创建的.coffee文件编译成指定的.js文件。我们这里的配置的参数是同步录下同名的js文件。(如果文件已经存在,会覆盖)

当然,这里有个coffee.cmd,其实我看到这段代码时也很迷惑的,这段coffee.cmd的作用是什么呢?因为nodejs里面并没有这个命令啊。

经过一番查找,命令也很简单:

  @echo off  
  "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\coffee-script\bin\coffee" %*  

好了,把这个命令保存成coffee.cmd,放在nodejs的根目录下就可以了。

好了,现在就使用sublime text来编写coffee script文件了。

如果你还不太熟悉,这里有个小提示:

  1. sublime text编译快捷键是CTRL+B。
  2. 编写coffeescript 的代码,后缀名是.coffee
  3. 编译后,生成同名js文件。可以使用拆分窗口的方式,方便对比生成的js代码,学习时尤其有效。

参考链接:

http://www.ibm.com/developerworks/cn/web/wa-coffee1/

http://www.cnblogs.com/2gua/archive/2012/07/04/2576352.html

http://www.ituring.com.cn/article/4048

http://rritw.com/a/bianchengyuyan/C__/20121026/242739.html

原创文章,转载请注明: 转载自Happiness space

本文链接地址: CoffeeScript 安装配置笔记(Windows 8&Sublime Text2)



CoffeeScript 安装配置笔记(Windows 8&Sublime Text2)

Amazon S3 REST API详解(转载)

本文转自残阳似血的博客

 

首先还是要先说一下Amazon S3,全称是Amazon Simple Storage Service。EC2和S3是Amazon最早推出的两项云服务。在传统的计算机领域,主要包括计算、存储、网络这几个方面, 在云计算时代,前两者分别对应虚拟化和cloud storage,由此可以显现出Amazon EC2和S3的重要性。如今随着云计算的大红大紫,也有很多使用Amazon S3的例子,典型的有Dropbox,还有之前被FB收购的Instagram,其照片存储就使用的S3。

关于REST,这也是比较火的一种Web服务架构。简单来说,资源是由URI指定,对资源的操作包括GET、PUT、POST、DELETE和HEAD,返回结果常常是XML或者其他形式。如果你想了解更多,可以查看REST的Wiki页面

Amazon S3的操作包括三部分:Service,Buckets和Objects。Service只包括GET操作,就是返回所有的Buckets的列表。Object顾名思义,是指存储在云端的文件,值得注意的是,S3中并没有明确的文件夹的概念,而是通过指定object的路径来实现,比如说,object可以为“photos/1.jpg”。而Bucket拥有全局名,名称由用户定义,用来存放Object,由于是全局名,所以要确保名字是别人没用过的。

访问Web服务时,Http request headers需要一些参数。主要包括:

  • Date:当前UTC时间,形式为“ Wed, 01 Mar 2009 12:00:00 GMT ”。
  • Content-Length: 当对Object进行操作的时候,返回内容的长度,注意不要包括headers中的内容。
  • Content-MD5:用base64编码文件内容的MD5值。
  • Content-Type:资源的类型,比如:text/plain。
  • Host:Get Service时为“ s3.amazonaws.com ”。在对bucket和object进行操作时,例如bucket的名字是“bucketname”,那么Host就是“bucketname.s3.amazonaws.com”。
  • x-amz-meta-和x-am-开头的:包括Amazon定义的一些元数据和一些特定的header。后面如果出现会提到。
  • Authorization:这个是最重要的,主要作用是签名,Amazon根据的请求计算出一个签名值和这里计算的签名值进行比对,只有相同时,访问才是合法的。接下来对Authorization的计算方法进行详述。
Authorization的计算方法

这个是Amazon文档中的说明:

  Authorization = "AWS" + " " + AWSAccessKeyId + ":" + Signature;  
    
  
    
  Signature = Base64( HMAC-SHA1( YourSecretAccessKeyID, UTF-8-Encoding-Of( StringToSign ) ) );  
    
  
    
  StringToSign = HTTP-Verb + "\n" +  
    
         Content-MD5 + "\n" +  
    
         Content-Type + "\n" +  
    
         Date + "\n" +  
    
         CanonicalizedAmzHeaders +  
    
         CanonicalizedResource;  
    
  
    
  CanonicalizedResource = [ "/" + Bucket ] +  
    
         <HTTP-Request-URI, from the protocol name up to the query string> +  
    
         [ sub-resource, if present. For example "?acl", "?location", "?logging", or "?torrent"];  
    
  
    
  CanonicalizedAmzHeaders = <described below>  
    
首先Authorization是由”AWS {0}:{1}“组成的,第0个参数为你的Access Key ID,在注册了AWS之后,在这里可以得到。第1个参数是计算出来的签名值。
签名值的计算方法是对一个UTF-8的字符串,用你的Secret Access Key(同样在Access Key ID处获取)进行SHA1加密。
StringToSign字符串也需要满足一定的格式。如上所示,第一行是你的操作名,应该为PUT、GET、DELETE、HEAD和POST中的一种。第二行是内容的MD5值的base64编码,和headers中的Content-MD5值应保持一致。第三行是Content-Type,同样需要和headers中的一致。第四行Date,和headers中的Date一致。需要说明的是CanonicalizedAmzHeaders和CanonicalizedResource。
CanonicalizedAmzHeaders就是把headers中的x-amz-开头的作为key转化为小写并按顺序排列,key和value之间用冒号相连,用换行符“\n”把它们给连接起来。比如说headers中有:
  X-Amz-Meta-ReviewedBy: [email protected]   X-Amz-Meta-ReviewedBy: [email protected]   X-Amz-Meta-FileChecksum: 0x02661779   X-Amz-Meta-ChecksumAlgorithm: crc32  
    
那么CanonicalizedAmzHeaders就是:
  x-amz-meta-checksumalgorithm:crc32\n  x-amz-meta-filechecksum:0x02661779\n  x-amz-meta-reviewedby:[email protected],[email protected]  
    
CanonicalizedResource是指规范化的资源。如果访问资源没有指定bucket,那么就是“/”;如果包括bucket,而不包括object,那就是“/bucket_name/”,注意前后的“/”不要落了;如果既包括bucket,也包括object,那么就是“/bucket_name/object_name”;另外,有时候比如是访问bucket的acl(访问控制列表acess control list)时,object_name就是?acl,因此这时CanonicalizedResource就是“/bucket_name/?acl”,访问object的acl时,CanonicalizedResource 就是“/bucket_name/object_name?acl”。
需要说明的是,如果计算出的CanonicalizedAmzHeaders不为空时,要确保CanonicalizedAmzHeaders和CanonicalizedResource之间有换行符“\n”连接。
关于Authorization的详细内容,可以参考官方文档
Service
    
对Service的操作只包括Get,即获取用户所有的Buckets列表。Request headers除了通用的,没有其他的内容。比如
  GET / HTTP/1.1  Host: s3.amazonaws.com  Date: date  Authorization: signatureValue  
    
返回的XML中包括Owner和各个Buckets,比如:
  <?xml version="1.0" encoding="UTF-8"?>  
    
  <ListAllMyBucketsResult xmlns="http://doc.s3.amazonaws.com/2006-03-01">  
    
    <Owner>  
    
      <ID>bcaf1ffd86f461ca5fb16fd081034f</ID>  
    
      <DisplayName>webfile</DisplayName>  
    
    </Owner>  
    
    <Buckets>  
    
      <Bucket>  
    
        <Name>quotes</Name>  
    
        <CreationDate>2006-02-03T16:45:09.000Z</CreationDate>  
    
      </Bucket>  
    
      <Bucket>  
    
        <Name>samples</Name>  
    
        <CreationDate>2006-02-03T16:41:58.000Z</CreationDate>  
    
      </Bucket>  
    
    </Buckets>  
    
  </ListAllMyBucketsResult>  
    
    
Buckets
    
由于项目中只用到了Buckets的PUT、GET、DELETE,关于acl、lifecycle、policy等就不作过多说明,如果这方面有疑问,可以参考官方文档
接下来,如果Http request headers中内容没有什么特别说明的,将会略去不写。
PUT Bucket
    
需要说明的是,在request headers可以加入bucket的权限控制,即指定x-amz-acl,合法的值包括:private,public-read、public-read-write、authenticated-read、bucket-owner-read、bucket-owner-full-control,从名字就可以看出具体的含义。
在request body中可以包括位置信息,即用户期望Bucket放置在Amazon的哪个数据中心。默认为US Standard,其他数据中心包括US West (Oregon) Region、US West (Northern California) Region、EU (Ireland) Region、Asia Pacific (Singapore) Region、Asia Pacific (Tokyo) Region、South America (Sao Paulo) Region。对于我们中国用户来说,离得最近的是东京的数据中心。不过在body中内容中,这七个数据中心写成:’EU’、 ‘eu-west-1′、’us-west-1′、 ‘us-west-2′、’ap-southeast-1′、’ap-northeast-1′和’sa-east-1′。
比如请求如下:
  PUT / HTTP/1.1  Host: BucketName.s3.amazonaws.com  Content-Length: length  Date: date  Authorization: signatureValue    
  <CreateBucketConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">   
    
    <LocationConstraint>BucketRegion</LocationConstraint>   
    
  </CreateBucketConfiguration>  
    
  
    
    
GET Bucket
    
Get Bucket主要是列出这个Bucket下所有的objects。值得提的是四个参数Prefix、Marker、MaxKeys和Delimiter,利用这四个参数,可以达到多种效果。
首先是Prefix,它表示这个Bucket中返回的Object以这个值为开头。Marker表示,返回这个值以后的Objects,比如说,第一次调用没有返回全部结果,则把第一次调用返回的Objects的最后一个作为Maker调用,以返回其以后的Objects。MaxKeys返回单次请求返回的最大Objects数,默认为1000。Delimiter表示分隔符,是在设置了Prefix之后,能够返回共同的Prefix(在结果中为CommonPrefix)。
因此,通过设置MaxKeys和Marker可以达到翻页效果,每次返回的最后一个Object作为下一次请求的Marker,在返回值中,如果IsTruncated为true,那么表示还有下一页。此外,通过设置Prefix和将Delimiter设为”/“,可以达到返回某个文件夹下所有内容的效果,其中CommonPrefix下的Prefix表示文件夹路径,而每个Contents中是Object的信息。
下面是一个请求的例子:
  GET ?prefix=N&marker=Ned&max-keys=40 HTTP/1.1  Host: quotes.s3.amazonaws.com  Date: Wed, 01 Mar  2009 12:00:00 GMT  Authorization: AWS AKIAIOSFODNN7EXAMPLE:xQE0diMbLRepdf3YB+FIEXAMPLE=  
    
返回结果为:
  HTTP/1.1 200 OK  x-amz-id-2: gyB+3jRPnrkN98ZajxHXr3u7EFM67bNgSAxexeEHndCX/7GRnfTXxReKUQF28IfP  x-amz-request-id: 3B3C7C725673C630  Date: Wed, 01 Mar  2009 12:00:00 GMT  Content-Type: application/xml  Content-Length: 302  Connection: close  Server: AmazonS3                   
  <?xml version="1.0" encoding="UTF-8"?>  
    
  <ListBucketResult xmlns="http://s3.amazonaws.com/doc/2006-03-01/">  
    
      <Name>bucket</Name>  
    
      <Prefix/>  
    
      <Marker/>  
    
      <MaxKeys>1000</MaxKeys>  
    
      <IsTruncated>false</IsTruncated>  
    
      <Contents>  
    
          <Key>my-image.jpg</Key>  
    
          <LastModified>2009-10-12T17:50:30.000Z</LastModified>  
    
          <ETag>"fba9dede5f27731c9771645a39863328"</ETag>  
    
          <Size>434234</Size>  
    
          <StorageClass>STANDARD</StorageClass>  
    
          <Owner>  
    
              <ID>75aa57f09aa0c8caeab4f8c24e99d10f8e7faeebf76c078efc7c6caea54ba06a</ID>  
    
              <DisplayName>[email protected]</DisplayName>  
    
          </Owner>  
    
      </Contents>  
    
      <Contents>  
    
         <Key>my-third-image.jpg</Key>  
    
           <LastModified>2009-10-12T17:50:30.000Z</LastModified>  
    
          <ETag>"1b2cf535f27731c974343645a3985328"</ETag>  
    
          <Size>64994</Size>  
    
          <StorageClass>STANDARD</StorageClass>  
    
          <Owner>  
    
              <ID>75aa57f09aa0c8caeab4f8c24e99d10f8e7faeebf76c078efc7c6caea54ba06a</ID>  
    
              <DisplayName>[email protected]</DisplayName>  
    
  ...  
    
    
DELETE Bucket
    
DELETE Bucket没有什么需要特殊说明的。
Objects
    
PUT Object
    
PUT Object基本操作类似,在Http body中添加Object的内容,这里就需要计算Content-Type等值。与PUT Bucket类似,可以在Http headers中加入x-amz-acl,以控制Object的权限。
GET Object
    
在GET Object时,Response headers中会包括这个Object的相关信息,除了Content-Length和Content-Type等,Etag其实就是内容的MD5后的16进制的字符串。而Response body中就是文件的内容。
DELETE Object
    
DELETE操作仍然没有什么特别说明的。
综上,本文主要说明了Amazon S3中对Service的GET,以及对Bucket和Object的PUT、GET和DELETE操作。但是REST API中还有一部分没有提到,这个可以查看具体的文档,其中解释得还是比较详细的。这篇文章还是为了想写Amazon S3客户端调用的同学们提供导向作用。
最后,提及一下当时的项目,项目主要是要实现一个本地的多云存储的备份。我们的项目使用了Python,而Amazon S3有一些第三方的API调用的实现,比较知名的有Boto,但是由于其支持很多云服务,显得过于庞大,最后我决定自己实现,而Amazon S3这块的中文资料也不是很多,这里分享出来,让入门的同学能够更快的上手,仅此而已。如果想看我们项目中Amazon S3 REST API的客户端实现,可以移步这里

原创文章,转载请注明: 转载自Happiness space

本文链接地址: Amazon S3 REST API详解(转载)

    

Amazon S3 REST API详解(转载)