rentj - 博客园

2013年1月

摘要：在面向对象的JavaScript开发中使用继承可以提高代码重用性，javascript有多重方式可以实现继承，考虑代码的可维护性在项目中应该保持代码风格的一致性，下面是JavaScript中继承的实现方式之一：辅助对象：var global = window;(function(ns,undefined){ //辅助对象： var Class = { extends: function(SubClass, SuperClass){ var F = function() {}; F.prototype = SuperClass.prototype; SubClas... 阅读全文

posted @ 2013-01-09 16:24 rentj 阅读(675) 评论(0) 推荐(0)

观察者模式的Javascript实现方式

摘要：观察者模式也被称作发布/订阅模式，下面是JAVASCRIPT的一种实现方式var global = window;(function(ns, base){ //被观察的对象 function Observable(){ this.observers = {}; } Observable.prototype = { //subscribe bind: function(name, observer){ var observers = this.observers[name] || ( this.observers[name] = [] ); var isbind = ... 阅读全文

posted @ 2013-01-08 16:35 rentj 阅读(619) 评论(0) 推荐(0)

2012年11月

Javascript AMD模块化规范

摘要： AMD是"Asynchronous Module Definition"的缩写，意思是"异步模块定义"。模块定义define(id?, dependencies?, factory);其中：id: 模块标识，可以省略。dependencies: 所依赖的模块，可以省略。factory: 模块的实现，或者一个JavaScript对象。代码示例1: 定义一个alpha模块，依赖require，exports，beta模块define("alpha", ["require", "exports", & 阅读全文

posted @ 2012-11-15 18:11 rentj 阅读(5652) 评论(3) 推荐(1)

关于Javsript代码的注释和模块定义

摘要：可以这样定义模块：(function(ns, required){ })(window, base); 在上面的代码中使用一个匿名立即执行函数来限定代码的作用域在匿名函数内，用来封模块装逻辑并避免全局命名空间污染。其中ns表示命名空间，required表示依赖的模块。模块通过ns[name] = name; 这样导出，供外部使用。我们将全局对象作为参数传入匿名函数，这样写的目有两个：一方面可以使我们一眼就看出来模块使用了那些全局对象；另一方面因为在Javascript中访问局部变量不需要遍历作用域链所以性能会比访问访问全局变量更高。这样写注释：//class TabVi... 阅读全文

posted @ 2012-11-12 16:25 rentj 阅读(807) 评论(3) 推荐(0)

2012年10月

网页中图片旋转的几种实现方式

摘要：网页中图片旋转一般有下面三种常见的实现方式：一、 ie 滤镜IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。浏览器支持： IE5.5+CSS代码：.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } JS代码：element.style.filter = "progid:DXImageTransform 阅读全文

posted @ 2012-10-13 07:14 rentj 阅读(58408) 评论(1) 推荐(5)

JS Runcode运行网页上的HTML/CSS/Javascrip代码

摘要： <!DOCTYPE html><html><head><meta charset="gb2312" /><title>runcode-运行HTML/CSS/Jvascrip代码</title></head><body><form> <textarea name="codearea" style="width:800px; height:600px"> </textarea> <br /> &l 阅读全文

posted @ 2012-10-09 12:06 rentj 阅读(1917) 评论(0) 推荐(0)

活动广告滑动切换JS效果

摘要：之前写了个javascript动画对象里面的demo比较简单，这是一个比较完整的JS效果。代码很简单，通过修改position:absolute元素的left属性实现滑动切换。点击这里查看淘宝活动广告滑动切换JS效果JS代码:(function(){ //rentj1@163.com var left = 0; var slide = document.getElementById("slide-content"); var options = document.getElementById("slide-options").getElementsByT 阅读全文

posted @ 2012-10-08 12:32 rentj 阅读(684) 评论(0) 推荐(0)

2012年9月

原生Javascript焦点图切换控件

摘要：很常见的javascript效果，写成控件，需要的时候可以直接拿来用点击这里查看原生Javascript焦点图切换控件的演示代码：//原生JavaScript焦点图切换控件function PicSlide(){ var controls = document.getElementById('slide-controls').getElementsByTagName('li');//根据需要选择元素 var list = document.getElementById("slide-list").getElementsByTagName(&# 阅读全文

posted @ 2012-09-30 21:29 rentj 阅读(936) 评论(1) 推荐(1)

javascript动画对象支持加速、减速、缓入、缓出

摘要：调用接口：/** * @param elem {HTMLElement} 执行动画的HTML元素 * @param params {JSON} 动画执行过过程中需要修改的HTML属性 * @param duration {Number} 可选，动画执行时间，单位毫秒 * @param easing {String} 可选，动画执行的方式，缓入easeIn、缓出easeOut * @param callback {Function} 可选，动画执行完成时的回调函数 * @return */effect.animate(elem, params, duration, easing, callba. 阅读全文

posted @ 2012-09-29 10:26 rentj 阅读(1507) 评论(2) 推荐(1)

求数组中元素的最大值最小值

摘要：求数组中元素的最大值、最小值方法一遍历数组方法二使用数组自带的排序方法，如：array.sort() 。返回的数组中第一个元素值最小，最后一个元素值最大方法三使用Math对象的Math.min(arg1, arg2[,...])、Math.max(arg1, arg2[,...])方法，经测试这种方式较前面两种性能更好。使用函数对象的apply方法可以将参数列表作为数组进行传递，如果数组元素是自定义对象可以先重写元素的valueOf方法再调用，下面是实现代码：//最大值Array.prototype.max = function(){return Math.max.apply(Math, 阅读全文

posted @ 2012-09-13 14:12 rentj 阅读(7229) 评论(0) 推荐(0)

公告