插件： jquery, sweetalert (http://t4t5.github.io/sweetalert/ )
1.index.html
<!DOCTYPE HTML> <html > <head> <meta charset="utf-8"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" href="sweetalert.css"> <script type="text/javascript" src="factory.js"></script> </head> <body> <input type="text" placeholder="haha" value="aa"/> </body> </html>
2. factory.js
1 $(document).ready(function() { 2 swal("Here's a message!"); 3 4 $('body').on('click', 'input', function() { 5 var aaa = new SportFactory('worldCup').intro; 6 $('body input:first').val(aaa); 7 createPop('test', $('body input:first').val()); 8 }); 9 }); 10 11 function createPop(type, text) { 12 var o = new Object(); 13 o.content = text; 14 if(type === 'alert') { 15 swal(o.content); 16 } 17 if(type === 'test') { 18 swal('提示', o.content, 'success'); 19 } 20 return o; 21 } 22 23 var SportFactory = function(name) { 24 switch(name) { 25 case 'NBA' : 26 return new Basketball(); 27 case 'worldCup' : 28 return new Football(); 29 } 30 } 31 32 var Basketball = function() { 33 this.intro = '篮球盛行于美国'; 34 } 35 36 Basketball.prototype = { 37 getMember : function() { 38 console.log('每个队伍需要5个队员'); 39 }, 40 41 getBallSize : function() { 42 console.log('篮球很大'); 43 } 44 } 45 46 var Football = function() { 47 this.intro = '足球在世界范围内很流行'; 48 } 49 50 Basketball.prototype = { 51 getMember : function() { 52 console.log('每个队伍需要11个队员'); 53 }, 54 55 getBallSize : function() { 56 console.log('足球很大'); 57 } 58 }