a part of state parttern

lilythy · lilythy · commit f4292fdc5a3c · 2016-05-10T23:53:13.000+08:00
diff --git a/State/state.html b/State/state.html
@@ -55,6 +55,7 @@
     };
     OffLightState.prototype.buttonWasPressed = function(){
         console.log("弱光");                              // offLightState 对应的行为
+        console.log(this.light);
         this.light.setState(this.light.weakLightState);   // 切换状态到weakLightState
     };
 
@@ -94,13 +95,12 @@
         }
     };
 
-    Light.prototype.setState = function(newState){
-        this.currState = newState;
-    }
-
     var light = new Light();
     light.init();
 
+    Light.prototype.setState = function( newState ){
+        this.currState = newState;
+    };
     /********这时如果要加一个“超强光”状态，则不必修改函数内部，只需增加一个对象即可*********/
 
     //如果SuperStrongLightState有一个父类State，且State的buttonWasPressed方法为空，则子类必须复写此方法
@@ -139,15 +139,123 @@
                 self = this;
         this.button = document.body.appendChild( button );
         this.button.innerHTML = '开关';
-        this.currState = this.offLightState; // 设置默认初始状态
-        this.button.onclick = function(){ // 定义用户的请求动作
+        this.currState = this.offLightState; // 设置当前状态
+        this.button.onclick = function(){
             self.currState.buttonWasPressed();
         }
     };
 
     var light = new Light();
-    console.log('加入超强光状态/n');
+    console.log('加入超强光状态\n');
     light.init();
+
+
+    /***********上传文件的时候有扫描状态、上传状态、暂停状态、上传完成状态**********/
+    window.external.upload = function(state){
+        console.log(state);   // 可能为sign、uploading、done、error
+    };
+
+    var plugin = (function(){
+        var plugin = document.createElement('embed');
+        plugin.style.display = 'none';
+        plugin.type = 'application/txftn-webkit';
+        plugin.sign = function(){
+            console.log('开始扫描文件');
+        }
+        plugin.pause = function(){
+            console.log('暂停文件上传');
+        }
+        plugin.uploading = function(){
+            console.log('开始上传文件');
+        }
+        plugin.del = function(){
+            console.log('删除文件上传');
+        }
+        plugin.done = function(){
+            console.log('文件上传完成');
+        }
+        document.body.appendChild(plugin);
+        return plugin;
+    })();
+
+    var Upload = function(fileName){
+        this.plugin = plugin;
+        this.fileName = fileName;
+        this.button1 = null;
+        this.button2 = null;
+        this.state = 'sign';   // 设置初始状态为waiting
+    }
+
+    Upload.prototype.init = function(){
+        var that = this;
+        this.dom = document.createElement('div');
+        this.dom.innerHTML = '<span>文件名称:'+ this.fileName +'</span>\<button data-action="button1">扫描中</button>\<button data-action="button2">删除</button>';
+        document.body.appendChild(this.dom);
+        this.button1 = this.dom.querySelector('[data-action="button1"]');
+        this.button2 = this.dom.querySelector('[data-action="button2"]');
+        this.bindEvent();
+    }
+
+    Upload.prototype.bindEvent = function(){
+        var self = this;
+        this.button1.onclick = function(){
+            if(self.state === 'sign'){           // 扫描状态下，任何操作无效
+                console.log( '扫描中，点击无效...' );
+            }else if(self.state === 'uploading'){     // 上传中，点击切换到暂停
+                self.changeState('pause');
+            }else if(self.state === 'pause'){        // 暂停中，点击切换到上传中
+                self.changeState( 'uploading' );
+            }else if(self.state === 'done'){
+                console.log('文件已上传完成，点击无效');
+            }else if(self.state === 'error'){
+                console.log('文件上传失败，单击无效');
+            }
+        };
+
+        this.button2.onclick = function(){
+            if(self.state === 'done' || self.state === 'error' || self.state === 'pause'){
+                // 上传完成、上传失败和暂停状态下可以删除
+                self.changeState('del');
+            }else if(self.state === 'sign'){
+                console.log('文件正在扫描中，不能删除');
+            }else if(self.state === 'uploading'){
+                console.log('文件正在扫描中，不能删除');
+            }
+        }
+    }
+
+    Upload.prototype.changeState = function(state){
+        switch(state){
+            case 'sign':
+                this.plugin.sign();
+                this.button1.innerHTML = '扫描中，任何操作无效';
+                break;
+            case 'uploading':
+                this.plugin.uploading();
+                this.button1.innerHTML = '正在上传，点击暂停';
+                break;
+            case 'pause':
+                this.plugin.pause();
+                this.button1.innerHTML = '已暂停，点击继续上传';
+                break;
+            case 'done':
+                this.plugin.done();
+                this.button1.innerHTML = '上传完成';
+                break;
+            case 'error':
+                this.button1.innerHTML = '上传失败';
+                break;
+            case 'del':
+                this.plugin.del();
+                this.dom.parentNode.removeChild(this.dom);
+                console.log('删除完成');
+                break;
+        }
+        this.state = state;
+    }
+
+    var uploadObj = new Upload('JavaScript 设计模式与开发实践');
+    uploadObj.init();
 </script>
 </body>
 </html>
