from: http://www.html-js.com/article/2134Underscore 简介Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。Underscore提供了80多个函数,包括常用的: map, select, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能, 强类型相等测试, 等等. 在新的浏览器中, 有许多函数如果浏览器本身直接支持,将会采用原生的,如 forEach, map, reduce, filter, every, some 和 indexOf.个人感受Underscore 是一个我坚持看完的js源代码，他简单、易懂、实用，细心观察就会发现，每个函数都很简短，作为开源阅读源码，我相信Underscore是不错的选择笔记1：大量的这种方法，应该是 防止原始方法被篡改，同时加快运行速度，而且在严格模式，也不让通过arguments.callee 调用相关方法的原因吧var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;// Create quick reference variables for speed access to core prototypes.varpush = ArrayProto.push, slice = ArrayProto.slice, concat = ArrayProto.concat, toString = ObjProto.toString, hasOwnProperty = ObjProto.hasOwnProperty;2：void 0，开始还好奇为啥用void 0，是undefined 的缩写？后来一打听才知道，原来undefined在旧版本的浏览器中是不可以被赋值的，而新版本的浏览器是可以被赋值的，为了准确的判断，所以就有了void 0_.first = _.head = _.take = function(array, n, guard) { if (array == null) return void 0; if ((n == null) || guard) return array[0]; if (n < 0) return []; return slice.call(array, 0, n);};3：代码短小精干Underscore 代码短小精干没的说，真是精品除了 eq 这个方法长点外 其他方法都很短4：遗憾 这次走读 没记录笔记没调试本菜鸟第一次走读源码 同时欢迎大家把源码走读 放到这个专栏下 O(∩_∩)O~
TmodJS 前端模板,又一款腾讯的前端模板框架,使用 artTemplate3.0 作为模板引擎.TmodJS（原名 atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板，从而让前端模板实现工程化管理，最终保证前端模板在复杂单页 web 应用下的可维护性。同时预编译输出的代码经过多层优化，能够在最大程度节省客户端资源消耗。
Iconfont.cn是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。（目前已有7000+图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。） Iconfont提供以下功能：在线图标搜索图标分捡下载在线储存矢量格式转换图标库管理iconfont的优势自由变化大小（高清屏无压力）自由修改颜色（纯色）可以添加一些视觉效果如：阴影、旋转、透明度iconfont使用声明字体@font-face {font-family: ‘iconfont’;src: url(‘iconfont.eot’); /* IE9*/src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 /url(‘iconfont.woff’) format(‘woff’), / chrome、firefox /url(‘iconfont.ttf’) format(‘truetype’), / chrome、firefox、opera、Safari, Android, iOS 4.2+/url(‘iconfont.svg#iconfont’) format(‘svg’); / iOS 4.1- */}`定义样式`.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;}`选择图标、获取字体编码，应用于页面`<i class="iconfont">!</i>
google reader 现在是我每天必看的，基本所有的信息来源都是通过google reader。刚刚一打开google reader，就这样弹出来了。怎么回事啊？要在2013年7月1号下线？
javascript 进1取整的几种方式最长见的都是四舍五入，业务中难免也有一些进一去整的要求。进一去整，比如2.1 3.5 4.9，进1去整后的结果就是3 4 5.方式一var a = 2.0;var b = 3.4;var c = 8.9;function modFoat(v) { var _max = parseInt(v) + 1; if( _max - v < 1 ) { return _max; } return v;}alert(modFoat(a)); // 2alert(modFoat(b)); // 4alert(modFoat(c)); // 9方式二var a = 2.0;function parseNumber(number, splitChar) { var n = number + ''; var s = splitChar == null ? '.' : splitChar; var nArr = n.split(s); if (nArr.length == 2) {//2.1 return parseInt(nArr[0]) + 1; } else {//2.0 return number; }}document.write(parseNumber(a));方式三这种方式有bug，如果是2.0呢？var a = 2.1;var b = parseInt(a) + 1; // b will be 3parseInt是截掉尾数，然后再加一即可。方式四最简单的var a = 1.1var s = Math.ceil(a);alert(s);
jQuery使用户能更方便地处理HTML documents、events，以及动画效果，并且方便地为网站提供AJAX交互。jQuery的另一个比较大的优势是，它拥有一套很好的文档说明，其中的各种应用也说得很详细，同时还有优秀的插件可供开发组来选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。[代码] 图片预加载(function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } }jQuery.preLoadImages("image1.gif", "/path/to/image2.png");[代码] 在新窗口打开链接 (target=”blank”)$('a[@rel$='external']').click(function(){ this.target = "_blank";});/* Usage: <a href="http://www.idbshare.com" rel="external">idbshare.com</a>*/[代码] 当支持 JavaScript 时为 body 增加 class/* 该代码只有1行，但是最简单的用来检测浏览器是否支持 JavaScript 的方法 如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */$('body').addClass('hasJS');[代码] 平滑滚动页面到某个锚点$(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; });});[代码] 鼠标滑动时的渐入和渐出$(document).ready(function(){ $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads $(".thumbs img").hover(function(){ $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover },function(){ $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout });});[代码] 制作等高的列var max_height = 0;$("div.col").each(function(){ if ($(this).height() > max_height) {…
Web应用部署在tomcat中，默认是带了web应用名称的。例如：web应用项目名称为：testweb，则部署到tomcat后，是部署在tomcat/webapps/testweb中，网址为：http://localhost:8080/testweb。一般我们实际使用是不带testweb的，发现了一个小方法。修改Web Context-root的值为“/”，就可以将testweb去掉，看webapps，testweb是部署到了webapps/ROOT中的，实际的应用部署也需要部署在ROOT中。原理不解释，看下tomcat文档就能明白，不看也行，知道怎么用也就够了！注意：建议使用tomcat7，tomcat6没测试。另外：如果想更简单的开发使用，推荐使用内嵌jetty。
原文网址：http://www.cnblogs.com/mailingfeng/archive/2012/09/13/2683246.htmlOCP(Open-Close Principle)开闭原则 Software entities should be open for extension,but closed for modification,(在设计一个模块的时候，应当使这个模块可以在不被修改的前提下扩展)。 对扩展开放open，对修改关闭close。 如何实现？ 1.抽象化是关键 2.对可变性的封装原则(Principle of Encapsulation of Variation EVP)。 3.对可能的拓展预留接口 备注: 1) 对于抽象化, 我的理解是, 接口是相对稳定的, 实现是根据需求多变的. 对于大多数可能预料的变化点, 我们可以抽取出共性或者常态点, 进行接口的封装, 而选择不同的实现类嵌入模块, 从而达到可扩展的作用. 2) 对于某个业务点, 可能以后有多种介入处理的情况, 那么这时候可以将业务抽象成事件(event)接口和监听器(listener)接口, 不同的处理需求生成不同的listener, 接入模块的listener收集器, 从而得到业务点的介入机会. 最后达到功能的扩展. 典型容易理解的例子，工厂模式。当需要新增加一个类的时候，直接继承product接口就可以了 , 由工厂类来组装产生需要的product, 而不用大范围修改原有代码。OCP～Liskov Subsitution Principle(LSP)里氏代换原则 就是子类可以代替父类出现的任何地方，在抽象的时候，重要的要理解的一个地方两个类之间是什么关系，是“has-A”？还是“Is-a”的关系。在 “has-a”的关系中，两个类存在的是依赖的关系(在类A里面存在类B的的变量)；在“Is-a”的关系中，可以提取这两个类的“共同代码”放在抽象类 C中，然后A，B继承与C，这也是一种重构。Dependency Inversion Principle(DIP)依赖倒转原则 就是在我们编程的时候方法的参数类型，变量，对于其他具体类的依赖，我们尽量的使用抽象类 。 就是说尽量依赖于抽象，而不是依赖于实现。 在书中两种表述: (1)，Abstraction should not depend on details.details should depend on abstraction. (抽象不应当依赖于细节，细节应当依赖于抽象)。Abstraction就像是建筑物的基础，而其实现类就是在基础上面一层一层的往上面走。你拆掉最上面 那层，和拿走最下面的基础，有什么不同了，这就是差异了。所以Abstraction是要相当的稳定，是维护的重点。也正是因为稳定，所以我们尽量的依赖 于Abstraction，既是稳定系统，也是灵活系统。 (2),Program to an Interface,not an implementation(要针对接口编程，不要针对实现编程) 应当使用java接口和抽象java类进行变量的类型声明，参数的类型声明，方法返回值的类型和数据类型的转换。 备注: 依赖倒转原则的作用在于多模块或者类间有统一的"知识", 都知道有这个接口, 都知道这个接口是这样用,会返回什么数据. 至于最初的实现类是什么, 只有提供该接口功能的实现类自己关心, 其他模块或者类只管用就行了. 即使以后需求更改, 实现会换成别的一个, 其他模块和类也无需修改代码. 例如A模块提供了一个接口是: List getProducts() 而B和C会使用该模块, 他们只知道这个方法就会返回List , 他们知道List和Product代表什么. 但他们不会管你的接口内部是使用List list = new ArrayList() , 还是List lis = new LinkedList() 或者具体的Product是什么(可能是衣服,鞋子等)Interface Segregation Principle(ISP)接口隔离原则 限制一个实体对另一个实体通信时候的宽度。 就是一个类对另外一个类依赖的时候，应当是建立在最小的接口上面。对于接口隔离原则来说，有两种接口，一种是真正意义上面的“java 接口”Interface；另外一种是指一个类的方法的集合。对于这来两种有，两个接口隔离的原则，对于一个类里面的方法的集合的接口隔离，我们称作是 “角色隔离原则”；另外一种叫做“定制服务”。 定制服务，就是一个类，我给你这个客户端一些方法，我放在一个java接口(Interface)里面。给另外一个客户端另外一些方法，放在另外一个接口(Interface). 角色隔离原则，是指客户端要多个不同的类的方法，我们就搞几个不同类别的接口(Interface)，在书中，这么比喻的，就相当于电影剧本里面的人物，我们找人来演，这个人就是具体的类。这就叫做角色隔离原则。Composition/Aggregation Reuse Principle(CARP)组合/聚合复用原则 就是说要尽量的使用合成和聚合，而不是继承关系达到复用的目的。 其实这里最终要的地方就是区分“has-a”和“is-a”的区别。相对于合成和聚合，继承的缺点在于：父类的方法全部暴露给子类。父类如果发生变化，子类也得发生变化。聚合的复用的时候就对另外的类依赖的比较的少。Least Knowledge Principle(LKP)最少知识原则，又称为“Law of Demeter”迪米特原则。 和ISP接口隔离原则一样，限制类与类之间的通信。ISP限制的是宽度，而LoD迪米特原则限制的是通信的广度和深度。 LoD在广度上面，尽量减少远距离类的关联，而使用与自己有关的类，并且也与远距离类有关的类。 可是这种做法有一点麻烦。多个远距离类产生关联的时候，不怎么容易处理，所以增加一个远距离类的抽象类。所有的远距离类都是通过抽象类的形式来访问。 在深度上面，控制权限是最重要的，对于类，一个是default 和public，尽量最小权限；对于成员，private，default，protected，public。往上面走，权限越小，依赖的耦合就越小。 有几种描述： (a)Only talk to your immediate friends. (b)Don’t talk to strangers. 设计模式“facade”,"调停者模式"。在这里是IoD的典型表现。 备注: 当一个系统比较大的时候, 如果所有的模块都自己去寻找与自己相关的类的时候, 那么引用关系就会变得极度复杂, 耦合度高. 这个时候最好就设定一个为各个模块所熟悉的对象, 例如Context容器. 另外,各个模块可以应用facade模式, 提供一个简单的对外接口, 并将其嵌入Context容器. 这样, 模块间通过熟人Context来获取其他模块的Facade接口,…