2015 年 1月随笔档案 - 清姿

javascript代码复用模式（二）

摘要：前面说到，javascript的代码复用模式，可分为类式继承和非类式继承（现代继承）。这篇就继续类式继承。类式继承模式-借用构造函数使用借用构造函数的方法，可以从子构造函数得到父构造函数传任意数量的参数。这个模式借用了父构造函数，它传递子对象以绑定到this,并转发任意数量的参数：function ... 阅读全文

posted @ 2015-01-29 20:10 清姿阅读(668) 评论(0) 推荐(2) 编辑

javascript代码复用模式

摘要：代码复用有一个著名的原则，是GoF提出的：优先使用对象组合，而不是类继承。在javascript中，并没有类的概念，所以代码的复用，也并不局限于类式继承。javascript中创建对象的方法很多，有构造函数，可以使用new创建对象，并且可以动态的修改对象。javascript的非类式继承（可称为现代... 阅读全文

posted @ 2015-01-27 20:18 清姿阅读(1703) 评论(2) 推荐(0) 编辑

javascript设计模式-观察者模式

摘要：观察者模式定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。UML示意图：其中的角色： Subject：主题角色把所有对观察考对象保存在一个对象里，每个主题都可以有任何数量的观察者。主题可以增加和删除观察者对象... 阅读全文

posted @ 2015-01-26 20:19 清姿阅读(262) 评论(0) 推荐(0) 编辑

javascript设计模式-享元模式

摘要：享元模式采用一个共享来有效的支持大量细小粒度的对象，避免大量有相同内容的类的开销（如内存耗费），共享一个元类。应用场景：页面存在大量的资源密集型对象；他们具备一些共性，可以分离出公共操作的数据。一个例子，汽车登记： var Car = function(make,model,year,owne... 阅读全文

posted @ 2015-01-26 19:04 清姿阅读(230) 评论(0) 推荐(0) 编辑

javascript设计模式-装饰模式

摘要：装饰模式：在不改变原类（对象）和继承的情况下动态扩展对象功能，通过包装一个对象来实现一个新的具有原对象相同接口的新的对象。在设计原则中，有一条，多用组合，少用继承，装饰模式正是这一原则的体现。UML示意图：假设自行车商店有4种自行车卖：var ABicycle = function(){ ... }... 阅读全文

posted @ 2015-01-22 20:14 清姿阅读(606) 评论(0) 推荐(1) 编辑

javascript设计模式-适配器模式

摘要：适配器模式的主要作用是将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些对象（类）可以一起工作。UML示意图：例如，鸭子有fly方法和quack(嘎嘎叫)方法，火鸡也有fly方法和gobble(咯咯叫)方法，如果希望火鸡有quack方法，可以复用鸭子的，... 阅读全文

posted @ 2015-01-22 19:20 清姿阅读(545) 评论(0) 推荐(0) 编辑

javascript页面滚动图片加载

摘要：图片量越来越大，网页加载不堪重负。还是得用lazyload... 实现要点：页面绑定滚动事件；加载页面的时候把地址放于一个属性中；在滚动过程中判断元素是否进入显示的区域内；加载图片。主要相关问题：浏览器兼容，如获取浏览器可见部分的宽度： window.innerHeight|| document... 阅读全文

posted @ 2015-01-20 20:06 清姿阅读(350) 评论(0) 推荐(0) 编辑

javascript设计模式-外观模式

摘要：也可译为门面模式。它为子系统中的一组接口提供一个一致的界面， Facade模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。引入外观角色之后，使用者只需要直接与外观角色交互，使用者与子系统之间的复杂关系由外观角色来实现，从而降低了系统的耦合度。比如在家要看电影，需要打开音响，再打开投影... 阅读全文

posted @ 2015-01-20 19:06 清姿阅读(1943) 评论(0) 推荐(1) 编辑

javascript创建对象的相关问题

摘要：javascript创建对象的方法有很多种，一般来说，推荐使用对象字面量来创建对象。对象构造函数捕捉使用new Object来创建对象，可能会带来一些问题：var o = new Object();console.log(o.constructor === Object);//truevar o =... 阅读全文

posted @ 2015-01-19 19:51 清姿阅读(172) 评论(0) 推荐(0) 编辑

javascript设计模式-组合模式

摘要：组合模式所要解决的问题：可以使用简单的对象组合成复杂的对象，而这个复杂对象有可以组合成更大的对象。可以把简单这些对象定义成类，然后定义一些容器类来存储这些简单对象。客户端代码必须区别对象简单对象和容器对象，而实际上大多数情况下用户认为它们是一样的。对这些类区别使用，使得程序更加复杂。递归使用的时候跟... 阅读全文

posted @ 2015-01-19 19:09 清姿阅读(318) 评论(0) 推荐(0) 编辑

前端中的MVC

摘要：MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。其中：M - MODEL（模型）V - VIEW（视图）C - CONTROLLER（控制器）一个事件的发生是这样的过程： 1. 用户和应用产生交互。 2. 控制器的事件处理器被触发。 3. 控制器... 阅读全文

posted @ 2015-01-17 15:57 清姿阅读(1052) 评论(0) 推荐(0) 编辑

Javascript中的Bind 、Call和Apply

摘要：看以下代码： var bind = Function.prototype.call.bind(Function.prototype.bind); 第一眼看上去，我能猜出它究竟是用来做什么的。它把x.y(z)转化成了y(x,z)。编写良好的代码会比较容易被读懂。在读完Functional Javasc... 阅读全文

posted @ 2015-01-16 13:36 清姿阅读(231) 评论(0) 推荐(0) 编辑

javascript-如何判断一个对象为数组

摘要：Q:如何判断一个对象是否为数组？A1:判断对象的constructor是否指向Array, 接着判断对应的特殊属性，如length,splice之类.这个很容易冒充。A2：使用instanceof判断对象是否为数组的实例。一般情况下可行，在某些极端情况下，会出错。例如，有个A页面定义了一个数组a，页... 阅读全文

posted @ 2015-01-15 19:44 清姿阅读(3073) 评论(0) 推荐(1) 编辑

javascript设计模式-桥接模式

摘要：在系统中，某些类由于自身逻辑，具有两个或两个以上维度的变化，如何使得该类型可以沿多个方向变化，但又不引入额外的复杂度，这就是桥接模式要解决的问题。定义：桥接模式(Bridge),将抽象部分与它的实现部分分离，使他们可以独立的变化。意图：将抽象与实现解耦。对于前端，比较常用的场景，是事件监控：... 阅读全文

posted @ 2015-01-15 19:11 清姿阅读(386) 评论(0) 推荐(0) 编辑

javascript设计模式-工厂模式

摘要：简单工厂模式：使用一个类来生成实例。复杂工厂模式：使用子类来决定一个成员变量应该是哪个具体的类的实例。简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口。通过工厂，可以取得需要的实例。逻辑示意图：下面列举了一个例子：var Coffee = function(){... 阅读全文

posted @ 2015-01-13 19:54 清姿阅读(165) 评论(0) 推荐(0) 编辑

javascript设计模式-单例模式

摘要：在C#中，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，会提供一个静态方法，通过该静态方法可以取得唯一实例。这就确保了一个类只有一个实例对象：public class Singleton{ private static Sing... 阅读全文

posted @ 2015-01-12 19:41 清姿阅读(305) 评论(0) 推荐(0) 编辑

阅读jQuery源码的18个惊喜

摘要：注释：本文使用$.fn.method指代调用一系列选中的元素的方法。例如，$.fn.addClass，指代$('div').addClass(‘blue’)或 $('a.active’).addClass(‘in-use’)这些用法。$.fn指代jQuery对象。1.Sizzle’s weight：... 阅读全文

posted @ 2015-01-08 20:09 清姿阅读(218) 评论(0) 推荐(1) 编辑

CSS3之弹性布局

摘要：flexbox是CSS3提出的页面布局模块。flexbox可以把列表横向或者纵向排列，并且填满可以延伸到的空间。稍微复杂的布局可以通过嵌套flex container来实现。利用flexbox可以方便的创建弹性布局，这使得在移动设备上，可以让元素在容器内扩展和收缩，更容易的实现常见布局，如三列布局。... 阅读全文

posted @ 2015-01-06 20:10 清姿阅读(3872) 评论(1) 推荐(2) 编辑

CSS3之圆角

摘要：CSS3圆角border-radius也是比较常用的，有了圆角，可以少很多图片了:)语法：border-radius ： none | {1,4} [/ {1,4} ]?说明：length不可为负值。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径... 阅读全文

posted @ 2015-01-06 19:08 清姿阅读(374) 评论(0) 推荐(0) 编辑

CSS3之动画相关

摘要：CSS3动画相关的属性：transform,transition,animation.变形Transform语法：transform: rotate | scale | skew | translate |matrix;rotate:旋转，通过指定一个角度对原元素进行2D旋转，正值表示顺时针旋转，负... 阅读全文

posted @ 2015-01-04 20:14 清姿阅读(301) 评论(0) 推荐(0) 编辑