2014年5月14日星期三

打油诗 转载

兖州交警真好汉,
今后看谁再扯淡。
敢骂公安是孬种,
请进局子吃牢饭。
甭说社会太黑暗,
别怨制度不完善。
七条底线是王法,
小心发帖成罪犯。
抓完大谣还不算,
发个牢骚当案判。
谁跟上边对着干,
当时就叫谁完蛋!
和谐社会别添乱,
留着脑袋好吃饭。
上网什么也别说,
建议多玩连连看。

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)