Hello, I'm Rocky

(function(){
    var me = {name:Rocky, work:前端开发, like:JavaScript && Java};
    me.extend({ motto : "I want do best code!" });
})();

// 一个backbone的实例,作者:
// [Jérôme Gravel-Niquet](http://jgn.me/). 这个demo使用了
// [LocalStorage adapter](backbone-localstorage.js)
// 你可以在浏览器中演示它.

//当DOM载入完之后加载应用:
$(function() {
    
    // Todo Model
    // 基础 **Todo** model 拥有 `title`, `order`, 和 `done` 属性.
    var Todo = Backbone.Model.extend({
        
        // todo的默认属性.
        defaults : {
            title : "empty todo...",
            done : false
        },

        // 保证每个model创建的时候都有`title`.
        initialize : function() {
            if(!this.get("title")) {
                this.set({
                    "title" : this.defaults.title
                });
            }
        },
        // 切换`done`状态.
        toggle : function() {
            this.save({
                done : !this.get("done")
            });
        },
        // 将Todo从*localStorage*和视图中删除.
        clear : function() {
            this.destroy();
        }
    });

    // Todo 列表
    // ---------------

    // 列表存储在*localStorage*中,代替存储在服务器中
    var TodoList = Backbone.Collection.extend({

        // 关联列表的 model.
        model : Todo,

        // 以`"todos"`名字空间保存所有Todo.
        localStorage : new Store("todos-backbone"),

        // 过滤已完成的Todo.
        done : function() {
            return this.filter(function(todo) {
                return todo.get('done');
            });
        },
        // 过滤列表,保留未完成的Todo.
        remaining : function() {
            return this.without.apply(this, this.done());
        },
        // 尽管我们在localStorage中是无序存储的,但是我们还是按顺序读取和保存的
        nextOrder : function() {
            if(!this.length)
                return 1;
            return this.last().get('order') + 1;
        },
        // 按照原来的顺序保存.
        comparator : function(todo) {
            return todo.get('order');
        }
    });

    // 创建一个全局列表 **Todos**.
    var Todos = new TodoList;

    // Todo Item View
    // --------------

    // todo item的DOM元素
    var TodoView = Backbone.View.extend({

        //列表标签.
        tagName : "li",

        // 为单个元素缓存模板.
        template : _.template($('#item-template').html()),

        // 单个元素的DOM事件.
        events : {
            "click .toggle" : "toggleDone",
            "dblclick .view" : "edit",
            "click a.destroy" : "clear",
            "keypress .edit" : "updateOnEnter",
            "blur .edit" : "close"
        },

        // TodoView视图监听 model的事件变化,重新渲染, **Todo** 和 **TodoView** 成一一对应的关系.
        initialize : function() {
            this.model.bind('change', this.render, this);
            this.model.bind('destroy', this.remove, this);
        },
        // 重新渲染单条todo的title.
        render : function() {
            var $el = $(this.el);
            $el.html(this.template(this.model.toJSON()));
            $el.toggleClass('done', this.model.get('done'));

            this.input = this.$('.edit');
            return this;
        },
        // 切换model的`"done"`状态.
        toggleDone : function() {
            this.model.toggle();
        },
        // 切换视图为`"editing"`,显示输入框.
        edit : function() {
            $(this.el).addClass("editing");
            this.input.focus();
        },
        // 关闭`"editing"`视图, 保存改变数据到Todo.
        close : function() {
            var value = this.input.val().trim();

            if(!value)
                this.clear();

            this.model.save({
                title : value
            });
            $(this.el).removeClass("editing");
        },
        // 如果输入 `enter`回车键, 保存编辑项目.
        updateOnEnter : function(e) {
            if(e.keyCode == 13)
                this.close();
        },
        // 移除单条Todo,销毁model.
        clear : function() {
            this.model.clear();
        }
    });

    // The Application
    // ---------------

    // **AppView**是最外层层UI.
    var AppView = Backbone.View.extend({

        // 使用页面上已有的HTML结构.
        el : $("#todoapp"),

        // app底部统计的模板.
        statsTemplate : _.template($('#stats-template').html()),

        // 为新建Todo和清除已完成Todo创建事件代理.
        events : {
            "keypress #new-todo" : "createOnEnter",
            "click #clear-completed" : "clearCompleted",
            "click #toggle-all" : "toggleAllComplete"
        },

        // 初始化的时候绑定 `Todos`列表的事件,add事件会添加到 *localStorage*.
        initialize : function() {

            this.input = this.$("#new-todo");
            this.allCheckbox = this.$("#toggle-all")[0];

            Todos.bind('add', this.addOne, this);
            Todos.bind('reset', this.addAll, this);
            Todos.bind('all', this.render, this);

            this.$footer = this.$('footer');
            this.$main = $('#main');

            Todos.fetch();
        },
        // 重新渲染只是刷新统计,其他不变.
        render : function() {
            var done = Todos.done().length;
            var remaining = Todos.remaining().length;

            if(Todos.length) {
                this.$main.show();
                this.$footer.show();

                this.$footer.html(this.statsTemplate({
                    done : done,
                    remaining : remaining
                }));
            } else {
                this.$main.hide();
                this.$footer.hide();
            }

            this.allCheckbox.checked = !remaining;
        },
        // 添加一个Todo项,并插入到`<ul>`中.
        addOne : function(todo) {
            var view = new TodoView({
                model : todo
            });
            this.$("#todo-list").append(view.render().el);
        },
        // 一次把所有的Todo添加到 **Todos** 列表中.
        addAll : function() {
            Todos.each(this.addOne);
        },
        // 新建一个Todo赋予属性.
        newAttributes : function() {
            return {
                title : this.input.val().trim(),
                order : Todos.nextOrder(),
                done : false
            };
        },
        // 在input中按回车键会新建一个**Todo** model并且保存到*localStorage*.
        createOnEnter : function(e) {
            if(e.keyCode != 13)
                return;
            if(!this.input.val().trim())
                return;

            Todos.create(this.newAttributes());
            this.input.val('');
        },
        // 清除所有已完成Todo models.
        clearCompleted : function() {
            _.each(Todos.done(), function(todo) {
                todo.clear();
            });
            return false;
        },
        toggleAllComplete : function() {
            var done = this.allCheckbox.checked;
            Todos.each(function(todo) {
                todo.save({
                    'done' : done
                });
            });
        }
    });

    // 创建一个 **App**.
    var App = new AppView;
});
类别:JavaScript     浏览(1490)评论(0
引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法创建的就不行了
var canvas=document.createElement(”canvas”);

if(canvas.getContext){

alert(”support getContext()”);

}

这 段代码在ie下不工作,于是把google搞的这个让ie支持canvas的代码大概地读了一遍,知道了是怎么回事。将代码放到aptana里面看,10 分钟不到,785行代码,还不错,我想,这得益于之前仔细看过犀牛书前面js core部分7遍以及对canvas和vml的了解吧。
原来,加载并执行excanvas.js这个脚本代码的时候,G_vmlCanvasManager_.init();这句语句遍历了页面中所有的canvas元素,然后初始化这些元素,亦即是将标准canvas的那些个方法赋予ie下的canvas:
var els = doc.getElementsByTagName(”canvas”);
for (var i = 0; i < els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
如 果是文档原来就有的canvas标签,那就没有问题,这段脚本将找到的canvas元素作为参数传递给 G_vmlCanvasManager_.initElement()这个方法。但是通过createElement方法创建的canvas就不行了,因 为调用这段脚本的时候,后来新创建的canvas元素还没有被它找到。
那么,解决办法就是新创建了一个canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。
但是,G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的,我在全局范围下就没有办法引用到,还好,在excanvas.js文件的后面,有一句语句,
G_vmlCanvasManager = G_vmlCanvasManager_;
由于js的函数中,如果一个变量不通过var来定义,那么就会把这个变量当作一个全局变量,好啦,现在有一个全局变量来引用它了。
那么,下面是解决问题的代码:
$(function(){

    var canvas=document.createElement(”canvas”);

    document.body.appendChild(canvas);

    if($.browser.msie){

        canvas=window.G_vmlCanvasManager.initElement(canvas);

    }

    if(canvas.getContext){alert(”support”);}

});

这里我用了jquery,在DOM ready以后才执行这段脚本。
另外,记得canvas=window.G_vmlCanvasManager.initElement(canvas);之前要将新创建好的canvas追加到文档流中:document.body.appendChild(canvas);
 
另外与jquery混合使用的时候必须使用jquery1.7以上的版本,具体为什么只兼容1.7以上的版本,我也不晓得了

关键字:ie6浏览器兼容
类别:JavaScript     浏览(1638)评论(0

在网上看见了这篇文章,作者以轻松的语言比喻了java的23种模式,有很好的启发作用。
创建型模式
  1、FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory
  工厂模式:客户类和工厂类分开。消费者任何时候需要某种产品,只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时,工厂类也要做相应的修改。如:如何创建及如何向客户端提供。
  2、BUILDER—MM最爱听的就是“我爱你”这句话了,见到不同地方的MM,要能够用她们的方言跟她说这句话哦,我有一个多种语言翻译机,上面每种语言都有一个按键,见到MM我只要按对应的键,它就能够用相应的语言说出“我爱你”这句话了,国外的MM也可以轻松搞掂,这就是我的“我爱你” builder。(这一定比美军在伊拉克用的翻译机好卖)
  建造模式:将产品的内部表象和产品的生成过程分割开来,从而使一个建造过程生成具有不同的内部表象的产品对象。建造模式使得产品内部表象可以独立的变化,客户不必知道产品内部组成的细节。建造模式可以强制实行一种分步骤进行的建造过程。
  3、FACTORY METHOD—请MM去麦当劳吃汉堡,不同的MM有不同的口味,要每个都记住是一件烦人的事情,我一般采用Factory Method模式,带着MM到服务员那儿,说“要一个汉堡”,具体要什么样的汉堡呢,让MM直接跟服务员说就行了。
  工厂方法模式:核心工厂类不再负责所有产品的创建,而是将具体创建的工作交给子类去做,成为一个抽象工厂角色,仅负责给出具体工厂类必须实现的接口,而不接触哪一个产品类应当被实例化这种细节。
  4、PROTOTYPE—跟MM用QQ聊天,一定要说些深情的话语了,我搜集了好多肉麻的情话,需要时只要copy出来放到QQ里面就行了,这就是我的情话prototype了。(100块钱一份,你要不要)
  原始模型模式:通过给出一个原型对象来指明所要创建的对象的类型,然后用复制这个原型对象的方法创建出更多同类型的对象。原始模型模式允许动态的增加或减少产品类,产品类不需要非得有任何事先确定的等级结构,原始模型模式适用于任何的等级结构。缺点是每一个类都必须配备一个克隆方法。
  5、SINGLETON—俺有6个漂亮的老婆,她们的老公都是我,我就是我们家里的老公Sigleton,她们只要说道“老公”,都是指的同一个人,那就是我(刚才做了个梦啦,哪有这么好的事)
  单例模式:单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例单例模式。单例模式只应在有真正的“单一实例”的需求时才可使用。

结构型模式
  6、ADAPTER—在朋友聚会上碰到了一个美女Sarah,从香港来的,可我不会说粤语,她不会说普通话,只好求助于我的朋友kent了,他作为我和Sarah之间的Adapter,让我和Sarah可以相互交谈了(也不知道他会不会耍我)
  适配器(变压器)模式:把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口原因不匹配而无法一起工作的两个类能够一起工作。适配类可以根据参数返还一个合适的实例给客户端。
  7、BRIDGE—早上碰到MM,要说早上好,晚上碰到MM,要说晚上好;碰到MM穿了件新衣服,要说你的衣服好漂亮哦,碰到MM新做的发型,要说你的头发好漂亮哦。不要问我“早上碰到MM新做了个发型怎么说”这种问题,自己用BRIDGE组合一下不就行了
  桥梁模式:将抽象化与实现化脱耦,使得二者可以独立的变化,也就是说将他们之间的强关联变成弱关联,也就是指在一个软件系统的抽象化和实现化之间使用组合/聚合关系而不是继承关系,从而使两者可以独立的变化。
  8、COMPOSITE—Mary今天过生日。“我过生日,你要送我一件礼物。”“嗯,好吧,去商店,你自己挑。”“这件T恤挺漂亮,买,这条裙子好看,买,这个包也不错,买。”“喂,买了三件了呀,我只答应送一件礼物的哦。”“什么呀,T恤加裙子加包包,正好配成一套呀,小姐,麻烦你包起来。” “……”,MM都会用Composite模式了,你会了没有?
  合成模式:合成模式将对象组织到树结构中,可以用来描述整体与部分的关系。合成模式就是一个处理对象的树结构的模式。合成模式把部分与整体的关系用树结构表示出来。合成模式使得客户端把一个个单独的成分对象和由他们复合而成的合成对象同等看待。
  9、DECORATOR—Mary过完轮到Sarly过生日,还是不要叫她自己挑了,不然这个月伙食费肯定玩完,拿出我去年在华山顶上照的照片,在背面写上“最好的的礼物,就是爱你的Fita”,再到街上礼品店买了个像框(卖礼品的MM也很漂亮哦),再找隔壁搞美术设计的Mike设计了一个漂亮的盒子装起来……,我们都是Decorator,最终都在修饰我这个人呀,怎么样,看懂了吗?
  装饰模式:装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案,提供比继承更多的灵活性。动态给一个对象增加功能,这些功能可以再动态的撤消。增加由一些基本功能的排列组合而产生的非常大量的功能。
  10、FACADE—我有一个专业的Nikon相机,我就喜欢自己手动调光圈、快门,这样照出来的照片才专业,但MM可不懂这些,教了半天也不会。幸好相机有Facade设计模式,把相机调整到自动档,只要对准目标按快门就行了,一切由相机自动调整,这样MM也可以用这个相机给我拍张照片了。
  门面模式:外部与一个子系统的通信必须通过一个统一的门面对象进行。门面模式提供一个高层次的接口,使得子系统更易于使用。每一个子系统只有一个门面类,而且此门面类只有一个实例,也就是说它是一个单例模式。但整个系统可以有多个门面类。
  11、FLYWEIGHT—每天跟MM发短信,手指都累死了,最近买了个新手机,可以把一些常用的句子存在手机里,要用的时候,直接拿出来,在前面加上 MM的名字就可以发送了,再不用一个字一个字敲了。共享的句子就是Flyweight,MM的名字就是提取出来的外部特征,根据上下文情况使用。
  享元模式:FLYWEIGHT在拳击比赛中指最轻量级。享元模式以共享的方式高效的支持大量的细粒度对象。享元模式能做到共享的关键是区分内蕴状态和外蕴状态。内蕴状态存储在享元内部,不会随环境的改变而有所不同。外蕴状态是随环境的改变而改变的。外蕴状态不能影响内蕴状态,它们是相互独立的。将可以共享的状态和不可以共享的状态从常规类中区分开来,将不可以共享的状态从类里剔除出去。客户端不可以直接创建被共享的对象,而应当使用一个工厂对象负责创建被共享的对象。享元模式大幅度的降低内存中对象的数量。
  12、PROXY—跟MM在网上聊天,一开头总是“hi,你好”,“你从哪儿来呀?”“你多大了?”“身高多少呀?”这些话,真烦人,写个程序做为我的Proxy吧,凡是接收到这些话都设置好了自动的回答,接收到其他的话时再通知我回答,怎么样,酷吧。
  代理模式:代理模式给某一个对象提供一个代理对象,并由代理对象控制对源对象的引用。代理就是一个人或一个机构代表另一个人或者一个机构采取行动。某些情况下,客户不想或者不能够直接引用一个对象,代理对象可以在客户和目标对象直接起到中介的作用。客户端分辨不出代理主题对象与真实主题对象。代理模式可以并不知道真正的被代理对象,而仅仅持有一个被代理对象的接口,这时候代理对象不能够创建被代理对象,被代理对象必须有系统的其他角色代为创建并传入。

行为模式
  13、CHAIN OF RESPONSIBLEITY—晚上去上英语课,为了好开溜坐到了最后一排,哇,前面坐了好几个漂亮的MM哎,找张纸条,写上“Hi,可以做我的女朋友吗?如果不愿意请向前传”,纸条就一个接一个的传上去了,糟糕,传到第一排的MM把纸条传给老师了,听说是个老处女呀,快跑!
   责任链模式:在责任链模式中,很多对象由每一个对象对其下家的引用而接起来形成一条链。请求在这个链上传递,直到链上的某一个对象决定处理此请求。客户并不知道链上的哪一个对象最终处理这个请求,系统可以在不影响客户端的情况下动态的重新组织链和分配责任。处理者有两个选择:承担责任或者把责任推给下家。一个请求可以最终不被任何接收端对象所接受。
  14、COMMAND—俺有一个MM家里管得特别严,没法见面,只好借助于她弟弟在我们俩之间传送信息,她对我有什么指示,就写一张纸条让她弟弟带给我。这不,她弟弟又传送过来一个COMMAND,为了感谢他,我请他吃了碗杂酱面,哪知道他说:“我同时给我姐姐三个男朋友送COMMAND,就数你最小气,才请我吃面。”,:-(
  命令模式:命令模式把一个请求或者操作封装到一个对象中。命令模式把发出命令的责任和执行命令的责任分割开,委派给不同的对象。命令模式允许请求的一方和发送的一方独立开来,使得请求的一方不必知道接收请求的一方的接口,更不必知道请求是怎么被接收,以及操作是否执行,何时被执行以及是怎么被执行的。系统支持命令的撤消。
  15、INTERPRETER—俺有一个《泡MM真经》,上面有各种泡MM的攻略,比如说去吃西餐的步骤、去看电影的方法等等,跟MM约会时,只要做一个Interpreter,照着上面的脚本执行就可以了。
  解释器模式:给定一个语言后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器。客户端可以使用这个解释器来解释这个语言中的句子。解释器模式将描述怎样在有了一个简单的文法后,使用模式设计解释这些语句。在解释器模式里面提到的语言是指任何解释器对象能够解释的任何组合。在解释器模式中需要定义一个代表文法的命令类的等级结构,也就是一系列的组合规则。每一个命令对象都有一个解释方法,代表对命令对象的解释。命令对象的等级结构中的对象的任何排列组合都是一个语言。
  16、ITERATOR—我爱上了Mary,不顾一切的向她求婚。
Mary:“想要我跟你结婚,得答应我的条件”
我:“什么条件我都答应,你说吧”
Mary:“我看上了那个一克拉的钻石”
我:“我买,我买,还有吗?”
Mary:“我看上了湖边的那栋别墅”
我:“我买,我买,还有吗?”
Mary:“你的小弟弟必须要有50cm长”
我脑袋嗡的一声,坐在椅子上,一咬牙:“我剪,我剪,还有吗?”
……
  迭代子模式:迭代子模式可以顺序访问一个聚集中的元素而不必暴露聚集的内部表象。多个对象聚在一起形成的总体称之为聚集,聚集对象是能够包容一组对象的容器对象。迭代子模式将迭代逻辑封装到一个独立的子对象中,从而与聚集本身隔开。迭代子模式简化了聚集的界面。每一个聚集对象都可以有一个或一个以上的迭代子对象,每一个迭代子的迭代状态可以是彼此独立的。迭代算法可以独立于聚集角色变化。
  17、MEDIATOR—四个MM打麻将,相互之间谁应该给谁多少钱算不清楚了,幸亏当时我在旁边,按照各自的筹码数算钱,赚了钱的从我这里拿,赔了钱的也付给我,一切就OK啦,俺得到了四个MM的电话。
  调停者模式:调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显作用。从而使他们可以松散偶合。当某些对象之间的作用发生改变时,不会立即影响其他的一些对象之间的作用。保证这些作用可以彼此独立的变化。调停者模式将多对多的相互作用转化为一对多的相互作用。调停者模式将对象的行为和协作抽象化,把对象在小尺度的行为上与其他对象的相互作用分开处理。
  18、MEMENTO—同时跟几个MM聊天时,一定要记清楚刚才跟MM说了些什么话,不然MM发现了会不高兴的哦,幸亏我有个备忘录,刚才与哪个MM说了什么话我都拷贝一份放到备忘录里面保存,这样可以随时察看以前的记录啦。
  备忘录模式:备忘录对象是一个用来存储另外一个对象内部状态的快照的对象。备忘录模式的用意是在不破坏封装的条件下,将一个对象的状态捉住,并外部化,存储起来,从而可以在将来合适的时候把这个对象还原到存储起来的状态。
  19、OBSERVER—想知道咱们公司最新MM情报吗?加入公司的MM情报邮件组就行了,tom负责搜集情报,他发现的新情报不用一个一个通知我们,直接发布给邮件组,我们作为订阅者(观察者)就可以及时收到情报啦
  观察者模式:观察者模式定义了一种一队多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态上发生变化时,会通知所有观察者对象,使他们能够自动更新自己。
  20、STATE—跟MM交往时,一定要注意她的状态哦,在不同的状态时她的行为会有不同,比如你约她今天晚上去看电影,对你没兴趣的MM就会说“有事情啦”,对你不讨厌但还没喜欢上的MM就会说“好啊,不过可以带上我同事么?”,已经喜欢上你的MM就会说“几点钟?看完电影再去泡吧怎么样?”,当然你看电影过程中表现良好的话,也可以把MM的状态从不讨厌不喜欢变成喜欢哦。
  状态模式:状态模式允许一个对象在其内部状态改变的时候改变行为。这个对象看上去象是改变了它的类一样。状态模式把所研究的对象的行为包装在不同的状态对象里,每一个状态对象都属于一个抽象状态类的一个子类。状态模式的意图是让一个对象在其内部状态改变的时候,其行为也随之改变。状态模式需要对每一个系统可能取得的状态创立一个状态类的子类。当系统的状态变化时,系统便改变所选的子类。
  21、STRATEGY—跟不同类型的MM约会,要用不同的策略,有的请电影比较好,有的则去吃小吃效果不错,有的去海边浪漫最合适,单目的都是为了得到MM的芳心,我的追MM锦囊中有好多Strategy哦。
  策略模式:策略模式针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换。策略模式使得算法可以在不影响到客户端的情况下发生变化。策略模式把行为和环境分开。环境类负责维持和查询行为类,各种算法在具体的策略类中提供。由于算法和环境独立开来,算法的增减,修改都不会影响到环境和客户端。
  22、TEMPLATE METHOD——看过《如何说服女生上床》这部经典文章吗?女生从认识到上床的不变的步骤分为巧遇、打破僵局、展开追求、接吻、前戏、动手、爱抚、进去八大步骤(Template method),但每个步骤针对不同的情况,都有不一样的做法,这就要看你随机应变啦(具体实现);
  模板方法模式:模板方法模式准备一个抽象类,将部分逻辑以具体方法以及具体构造子的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑。不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有不同的实现。先制定一个顶级逻辑框架,而将逻辑的细节留给具体的子类去实现。
  23、VISITOR—情人节到了,要给每个MM送一束鲜花和一张卡片,可是每个MM送的花都要针对她个人的特点,每张卡片也要根据个人的特点来挑,我一个人哪搞得清楚,还是找花店老板和礼品店老板做一下Visitor,让花店老板根据MM的特点选一束花,让礼品店老板也根据每个人特点选一张卡,这样就轻松多了;
  访问者模式:访问者模式的目的是封装一些施加于某种数据结构元素之上的操作。一旦这些操作需要修改的话,接受这个操作的数据结构可以保持不变。访问者模式适用于数据结构相对未定的系统,它把数据结构和作用于结构上的操作之间的耦合解脱开,使得操作集合可以相对自由的演化。访问者模式使得增加新的操作变的很容易,就是增加一个新的访问者类。访问者模式将有关的行为集中到一个访问者对象中,而不是分散到一个个的节点类中。当使用访问者模式时,要将尽可能多的对象浏览逻辑放在访问者类中,而不是放到它的子类中。访问者模式可以跨过几个类的等级结构访问属于不同的等级结构的成员类。


http://www.hicss.net/23-design-patterns/
类别:JavaScript     浏览(1716)评论(0
1. 什么是 repaint 和 reflow?
一个页面由两部分组成:
DOM : 描述该页面的结构
render : 描述 DOM 节点 (nodes) 在页面上如何呈现
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint.
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow.
这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.

页面渲染的过程如下:


浏览器页面渲染过程
解析HTML代码并生成一个 DOM 树。
解析CSS文件,顺序为:浏览器默认样式->自定义样式->页面内的样式。
生成一个渲染树(render tree)。这个渲染树和DOM树的不同之处在于,它是受样式影响的。它不包括那些不可见的节点。
当渲染树生成之后,浏览器就会在屏幕上“画”出所有渲染树中的节点。

2. 什么情况下会触发浏览器的repaint/reflow?
除了页面在首次加载时必然要经历该过程之外,还有以下行为会触发这个行为:
DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
应用新的样式或者修改任何影响元素外观的属性
Resize浏览器窗口、滚动页面
读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))

3. 怎么优化?

1. 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种:
先将元素从document中删除,完成修改后再把元素放回原来的位置
将元素的display设置为”none”,完成修改后再把display修改为原来的值
如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document

2. 集中修改样式
尽可能少的修改元素style上的属性
尽量通过修改className来修改样式
通过cssText属性来设置样式值

3. 缓存Layout属性值
对于Layout属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。

4. 设置元素的position为absolute或fixed
在元素的position为static和relative时,元素处于DOM树结构当中,当对元素的某个操作需要重新渲染时,浏览器会渲染整个页 面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素 以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的Javascript动画方面尤其值得考虑。

5. 权衡速度的平滑
比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

6. 不要用tables布局
不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。

7. 不要在css里面写expression
很多情况下都会触发reflow,如果css里有expression,每次都会重新计算一遍。

参考文章:

  1. 如何减少浏览器repaint和reflow
  2. Repaint, reflow/relayout, restyle
  3. Reflows & Repaints: CSS Performance making your JavaScript slow?
  4. Repaint 跟踪浏览器的渲染[如果你的FF是3.5beta+监听网页的重绘情况]


类别:前端经验    浏览(1590)评论(0

最近发现一个非常牛的上传组件,前端根据浏览器不同选择使用Html5、 Gears, Silverlight, Flash, BrowserPlus来对文件进行客户端优化,比如大图片的压缩,大文件分块上传,简直是太牛了,还有上传进度条、多文件上传等。官方网 站:http://plupload.com/,下载的domo是php版本的,于是我弄了个java版本的,分享给大家,

前端js等文件去下载个domo就有了,后端使用到了commons-fileupload-1.2.2.jar这个包。

前端html:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>plupload</title>
<!-- 配置界面上的css -->
<link rel="stylesheet" type="text/css" href="plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.js"></script>
<script type="text/javascript" src="plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>

<!-- 国际化中文支持 -->
<script type="text/javascript" src="plupload/i18n/cn.js"></script>

<script type="text/javascript">
/* Convert divs to queue widgets when the DOM is ready */
$(function(){
	function plupload(){
		$("#uploader").pluploadQueue({
			// General settings
			runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
			url : 'servlet/fileUpload',
			max_file_size : '10mb',
			unique_names: true,
			chunk_size: '2mb',
			// Specify what files to browse for
			filters : [
				{title: "Image files", extensions: "jpg,gif,png"},
				{title: "Zip files", extensions: "zip"}
			],
			resize: {width: 640, height: 480, quality: 90},
			// Flash settings
			flash_swf_url: 'plupload/plupload.flash.swf',
			// Silverlight settings
			silverlight_xap_url: 'plupload/plupload.silverlight.xap',
			// 参数
			multipart_params: {'user': 'Rocky', 'time': '2012-06-12'}
		});
	}
	plupload();
	$('#Reload').click(function(){
		plupload();
	});
});
</script>


<div style="width:750px; margin:0 auto">
	<form id="formId" action="Submit.action" method="post">
		<div id="uploader">
			<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
		</div>
		<input value="重新上传" id="Reload" type="button">
	</form>
</div>
后端
package com.rock;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;

public class FileUploadAction extends HttpServlet {
	private static final long serialVersionUID = 3447685998419256747L;
	private static final String RESP_SUCCESS = "{\"jsonrpc\" : \"2.0\", \"result\" : \"success\", \"id\" : \"id\"}";
	private static final String RESP_ERROR = "{\"jsonrpc\" : \"2.0\", \"error\" : {\"code\": 101, \"message\": \"Failed to open input stream.\"}, \"id\" : \"id\"}";
	public static final String JSON = "application/json";
	public static final int BUF_SIZE = 2 * 1024;
	public static final String FileDir = "uploadfile/";
	
	private int chunk;
	private int chunks;
	private String name;
	private String user;
	private String time;

	/**
	 * Handles an HTTP POST request from Plupload.
	 * 
	 * @param req The HTTP request
	 * @param resp The HTTP response
	 */
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String responseString = RESP_SUCCESS;
		boolean isMultipart = ServletFileUpload.isMultipartContent(req);
		
		if(isMultipart){
			ServletFileUpload upload = new ServletFileUpload();
			try {
				FileItemIterator iter = upload.getItemIterator(req);
				while (iter.hasNext()) {
				    FileItemStream item = iter.next();
				    InputStream input = item.openStream();

				    // Handle a form field.
				    if(item.isFormField()){
				        String fileName = item.getFieldName();
				        String value = Streams.asString(input);

				        if("name".equals(fileName)){
				        	this.name = value;
				        }else if("chunks".equals(fileName)){
				        	this.chunks = Integer.parseInt(value);
				        }else if("chunk".equals(fileName)){
				        	this.chunk = Integer.parseInt(value);
				        }else if("user".equals(fileName)){
				        	this.user = value;
				        }else if("time".equals(fileName)){
				        	this.time = value;
				        }
				    }
				    
				    // Handle a multi-part MIME encoded file.
				    else {
				    	String fileDir = req.getSession().getServletContext().getRealPath("/")+FileDir;
						File dstFile = new File(fileDir);
						if (!dstFile.exists()){
							dstFile.mkdirs();
						}
						
						File dst = new File(dstFile.getPath()+ "/" + this.name);
						
				        saveUploadFile(input, dst);
				    }
				}
			}
			catch (Exception e) {
				responseString = RESP_ERROR;
				e.printStackTrace();
			}
		}
		
		// Not a multi-part MIME request.
		else {
			responseString = RESP_ERROR;
		}
		
		if(this.chunk == this.chunks - 1){
	    	System.out.println("用户:"+this.user);
	    	System.out.println("文件名称:"+this.name);
	    	System.out.println("上传时间:"+this.time);
	    }

		resp.setContentType(JSON);
		byte[] responseBytes = responseString.getBytes();
		resp.setContentLength(responseBytes.length);
		ServletOutputStream output = resp.getOutputStream();
		output.write(responseBytes);
		output.flush();
	}

	/**
	 * Saves the given file item (using the given input stream) to the web server's
	 * local temp directory.
	 * 
	 * @param input The input stream to read the file from
	 * @param dst The dir of upload
	 */
	private void saveUploadFile(InputStream input, File dst) throws IOException {
		OutputStream out = null;
		try {
			if (dst.exists()) {
				out = new BufferedOutputStream(new FileOutputStream(dst, true),
						BUF_SIZE);
			} else {
				out = new BufferedOutputStream(new FileOutputStream(dst),
						BUF_SIZE);
			}

			byte[] buffer = new byte[BUF_SIZE];
			int len = 0;
			while ((len = input.read(buffer)) > 0) {
				out.write(buffer, 0, len);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if (null != input) {
				try {
					input.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			if (null != out) {
				try {
					out.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
	}
}
关键字:java
类别:Java    浏览(10926)评论(3
 <返回顶部