第一页 上页 11 12 13 14 15 16 17 18 19 20 下页 最后页 [ 显示模式： 摘要 | 列表 ]

如何成为一名优秀的前端工程师 (share)

[不指定 2015/03/25 09:28 | by 刘新修 ]

 一、技术的必须的

作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通，类似我这样对前端知识一知半解的，一遇到问题就停下工作就四处搜索解决方案的，首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下（包括搜索引擎），能够完成大多数任务。

以下知识点是作为一个前端工程师必须了解和熟悉的：

  • DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
  • 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
  • XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
  • 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
  • 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
  • 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
  • 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
  • HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
  • JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识，也还需学会至少一门后端编程语言，让你自己学会如何与后端进行更好的交互。

很多前端工程师对一些库非常的熟悉，jQuery，Bootstrap等，但是对于库的熟悉并不能提现你的优秀，真正优秀的是那些理解库背后的机制，特别是能够徒手写出一个自己的库的人。

真正合格的前端工程师是能实现具体的功能要求，而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。

二、沟通很重要

优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关。在任何情况下，前端工程师至少都要满足下列四类客户的需求。

  1. 产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求，以及怎样通过他们设计的模式赚到钱（但愿如此）。一般来说，这些人追求的是丰富的功能。
  2. UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。
  3. 项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
  4. 最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道，但他们的反馈意见至关重要；没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。

不要在没有作出评估之前就随便接受某项任务。你必须始终记住，一定先搞清楚别人到底想让你干什么，不能简单地接受“这个功能有问题”之类的大概其的说法。而且，你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理，问一问这个按钮有什么用处，然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师，这种沟通至关重要。

那么，前端工程师应该最关注哪些人的意见呢？答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期，然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上，因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能，必须删繁就简，你怎么跟产品经理解释？再比如，假设某个设计如果不改回原方案可能会给应用程序造成负面影响，你怎么才能说服UI设计师？作为前端工程师，你必须了解每一类人的想法从何而来，必须能拿出所有各方都能接受的解决方案。从某种意义上说，优秀的前端工程师就像是一位大使，需要时刻抱着外交官的心态来应对每一天的工作。

专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。

三、提升无止境

优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

四、前端开发知识架构

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4493)

使用原生JS写Ajax与后端PHP跨越请求实例

[不指定 2015/03/24 15:57 | by 刘新修 ]

http://192.168.66.90:8080/php/Ajax_.php?callback=

PHP代码
  1. <?php  
  2. //公共声明  
  3. header('Content-type: text/json');  
  4. html_entity_decode($string, ENT_QUOTES, 'UTF-8');  
  5.   
  6. //回调参数设置  
  7. $param="callback";  
  8. $callback=$_REQUEST[$param];  
  9.   
  10. //自造Json数据  
  11. $str2='[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]';  
  12. $str=$callback."(".$str2.")";  
  13.   
  14.   
  15. //判断请求参数存在就会输出Json数据  
  16. //if(isset($callback)&&!empty($callback)){  
  17. if(isset($callback)){  
  18.     if (isset($_POST["mail"])&&!emptyempty($_POST["mail"])){  
  19.         echo "1";      
  20.     }else{    
  21.         //echo "N0, mail is not set";  
  22.         echo $str;  
  23.     }  
  24. }  
  25.   
  26. //判断请求参数不存在就输出错误信息  
  27. if(!isset($callback)){  
  28. header("Content-type: text/html; charset=utf-8");  
  29. $str="<h1>400 Required String parameter '{$param}' is not present</h1><hr /><small>http Request with error params: none callback function</small>";  
  30. echo $str;  
  31. //strip_tags() 函数剥去 HTML、XML 以及 PHP 的标签  
  32. //echo strip_tags($str);  
  33. }  
  34.   
  35. ?>  

http://192.168.66.90:8080/html/test/js_Ajax.html

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6.   
  7. </head>  
  8.   
  9. <body>  
  10. <input value="张三" type="text" style="width:96%; background: #F1F1ED; color:#000; text-align:center; font-size:6em; padding:0.2em; margin-bottom:0.5em; border:0.1em #333 solid " id="input"/>  
  11. <div style=" width:100%; background:#000; color:#fff; text-align:center; font-size:6em; cursor:pointer; padding:0.2em;" id="html">点击事件</div>  
  12. <script type="text/javascript">  
  13. /**  
  14. * 复杂的ajax封装  
  15. * @version 1.0  
  16. *  
  17. * 用法  
  18. *  var xmlhttp = new YAjax();  
  19. *    xmlhttp.request({  
  20. *         url : "./demo.php",  // get请求时 可以这样写 "./demo.php?name=zhangsan"  
  21. *        method : "POST",  
  22. *        data : "name=李四",  // 支持json传值 {"name":"zhangsan"}  get时不用该参数  
  23. *        receiveType : "html",  // json html or xml  
  24. *        timeout : 3000,  // 3秒  
  25. *        success : function(d) {alert(d);},  
  26. *        error : function(xmlhttp){alert('timeout');}  
  27. *    });  
  28. *  
  29. */  
  30. function YAjax() {  
  31.     thisthis._self = this;  
  32.     thisthis.xmlhttp = this.init();  
  33. }  
  34. YAjax.prototype = {  
  35.     constructor : YAjax,  
  36.       
  37.     // 初始化xmlhttpRequest  
  38.     init : function() {  
  39.         var xmlhttp = null;  
  40.       
  41.         // 针对不同浏览器建立这个对象的不同方式写不同代码  
  42.         if(window.XMLHttpRequest) {  
  43.             xmlhttp = new XMLHttpRequest();  
  44.             //针对某些特定版本的Mozillar浏览器的BUG进行修正  
  45.             if(xmlhttp.overrideMimeType) {  
  46.                 xmlhttp.overrideMimeType("text/xml");  
  47.             }  
  48.               
  49.         } else if (window.ActiveXObject) {  
  50.             var activexName = ['MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];  
  51.             for (var i=0; i<activexName.length; i++) {  
  52.                 try {  
  53.                     xmlhttp = new ActiveXObject(activexName[i]);  
  54.                     break;  
  55.                 } catch(e) {}  
  56.             }  
  57.         }  
  58.       
  59.         return xmlhttp;  
  60.     },  
  61.       
  62.     extend : function(destination, source, override) {  
  63.         if(undefined == override) override = true;  
  64.         if(typeof destination != "object" && typeof destination != "function") {  
  65.             if(!override)  
  66.                 return destination;  
  67.             else  
  68.                 destination = {};  
  69.         }  
  70.         var property = '';  
  71.         for(property in source) {  
  72.             if(override || !(property in destination)) {  
  73.                 destination[property] = source[property];  
  74.             }  
  75.         }  
  76.       
  77.         return destination;      
  78.     },  
  79.       
  80.     // json to string {name: 'lisi', age: 10} --> name=lisi&age=10  
  81.     json2String : function(jsonData) {  
  82.         var strArr = [];  
  83.         for(var k in jsonData) {  
  84.             strArr.push(k + "=" + jsonData[k]);      
  85.         }  
  86.               
  87.         return strArr.join("&");  
  88.     },  
  89.       
  90.     // 发送http 请求  
  91.     request : function(opt) {  
  92.         var _self = this,  
  93.             isTimeout = false,  
  94.             timeFlag = 0,  
  95.             options = {  
  96.                 url : "",   // string  
  97.                 data : "",  // json or string  
  98.                 method : "POST",  
  99.                 receiveType : "html",  // html json or xml  
  100.                 timeout : 7000,  
  101.                 async : true,  
  102.                 success : function(){alert("define your success function");},  
  103.                 error : function(xmlhttp){}  
  104.             };  
  105.         if("data" in opt) {  
  106.             if(typeof opt.data == "string"){} else {opt.data = this.json2String(opt.data); }      
  107.         }  
  108.         options = this.extend(options, opt);  
  109.           
  110.         this.xmlhttp.onreadystatechange = function(){  
  111.             if(_self.xmlhttp.readyState == 4) {  
  112.                 if(!isTimeout && _self.xmlhttp.status == 200) {  
  113.                     clearTimeout(timeFlag);  
  114.                     var t = options.receiveType.toLowerCase();  
  115.                     if(t == "html") {  
  116.                         options.success(_self.xmlhttp.responseText);  
  117.                           
  118.                     } else if(t == "xml") {  
  119.                         options.success(_self.xmlhttp.responseXML);      
  120.                           
  121.                     } else if(t == 'json') {  
  122.                         try {  
  123.                             var obj = JSON.parse(_self.xmlhttp.responseText);  
  124.                             options.success(obj);      
  125.                         } catch(e) {  
  126.                             var str = '(' + _self.xmlhttp.responseText + ')';  //json字符串  
  127.                             options.success(eval(str));  
  128.                         }  
  129.                     } else {}  
  130.                       
  131.                 } else {  
  132.                     clearTimeout(timeFlag);  
  133.                     options.error(_self.xmlhttp);  
  134.                 }  
  135.             }  
  136.         };  
  137.           
  138.         timeFlag = setTimeout(function(){  
  139.             if(_self.xmlhttp.readyState != 4) {  
  140.                 isTimeout = true;  
  141.                 _self.xmlhttp.abort();  
  142.                 clearTimeout(timeFlag);  
  143.              }      
  144.         }, options.timeout);  
  145.           
  146.         this.xmlhttp.open(options.method.toUpperCase(), options.url, options.async);  //打开与服务器连接  
  147.         if(options.method.toUpperCase() == "POST") {  
  148.             this.xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  //post方式要设置请求类型  
  149.             this.xmlhttp.send(options.data);  //发送内容到服务器  
  150.         } else {  
  151.                 this.xmlhttp.send(null);  
  152.         }  
  153.     }  
  154. };  
  155.   
  156. var text=document.getElementById("input").value;  
  157. var html=document.getElementById("html");  
  158. html.onclick=function(){  
  159.   
  160. var xmlhttp = new YAjax();  
  161.   xmlhttp.request({  
  162.        url:"http://192.168.66.90:8080/php/Ajax_.php?callback=",  // get请求时 可以这样写 "./demo.php?name=zhangsan"  
  163.        method:"POST",  
  164.        data:{"mail":"zhangsan@163.com"},  // 支持json传值 {"name":"zhangsan"}  get时不用该参数 "name=李四"  
  165.        receiveType:"json",  // json html or xml  
  166.        timeout:3000,  // 3秒  
  167.        success:function(data){  
  168.        //JSON.stringify(data); //可以将json对象转换成json对符串  
  169.        //JSON.parse(jsonstr); //可以将json字符串转换成json对象  
  170.            if(data==1){  
  171.             alert("传参已被服务器接收，"+"输入框内容："+text)  
  172.            }  
  173.            else{  
  174.             alert(JSON.stringify(data[0].name));  
  175.            }  
  176.        },  
  177.        error:function(xmlhttp){alert('timeout');}  
  178.    });  
  179. };  
  180. </script>  
  181. </body>  
  182. </html>  

 

PHP/Java | 评论(0) | 引用(0) | 阅读(5097)

resin服务管理

[不指定 2015/03/09 17:32 | by 刘新修 ]

重启服务  sh /usr/local/resin/bin/resin.sh -server youyuan restart

查看日志

C#代码
  1. root@pts/4 # tail -f /usr/local/resin/log/jvm-y  
  2. jvm-youyuan.log  jvm-yylc.log       
  3. 192.168.3.150 [/www/www.youyuan.com/web/WEB-INF/classes] 2015-03-09 17:27:20  
  4. root@pts/4 # tail -f /usr/local/resin/log/jvm-y  
  5. jvm-youyuan.log  jvm-yylc.log       
  6. 192.168.3.150 [/www/www.youyuan.com/web/WEB-INF/classes] 2015-03-09 17:27:20  
  7. root@pts/4 # tail -f /usr/local/resin/log/jvm-youyuan.log   
  8. Resin-4.0.35 (built Tue, 12 Feb 2013 10:05:50 PST)  
  9. Copyright(c) 1998-2012 Caucho Technology.  All rights reserved.  
  10.   
  11.   Using Resin(R) Open Source under the GNU Public License (GPL).  
  12.   
  13.   See http://www.caucho.com for information on Resin Professional,  
  14.   including caching, clustering, JNI acceleration, and OpenSSL integration.  
  15.   
  16. Starting Resin on Mon, 09 Mar 2015 17:27:23 +0800 (CST)  

 

web服务器 | 评论(0) | 引用(0) | 阅读(4555)

php数组转Json

[不指定 2015/02/13 17:20 | by 刘新修 ]

 

PHP代码
  1. <?php  
  2. header("Content-Type: text/html; charset=utf-8");  
  3.   
  4. $mydb=mysql_connect("localhost","root","root");  
  5. if (!$mydb){  
  6.   die('Could not connect:'. mysql_error());  
  7. }  
  8.   
  9. $db_selected=mysql_select_db("mysql",$mydb);  
  10. //$sql = "SELECT * from Person WHERE Lastname='Adams'";  
  11. $sql="SELECT * from user";  
  12. $result=mysql_query($sql,$mydb);  
  13. //print_r(mysql_fetch_array($result));  
  14.   
  15.   
  16. //处理输出数组格式  
  17. //$db1=mysql_query("select * from `tb_info`");  
  18. /* 
  19. $arr=array(); 
  20. while($rows=mysql_fetch_array($db1)){ 
  21. $key=$rows['id'] 
  22. $arr[$key] = $rows['qucount'] 
  23. } 
  24. */  
  25.   
  26. /************************************************************** 
  27.  * 
  28.  *  使用特定function对数组中所有元素做处理 
  29.  *  @param  string  &$array     要处理的字符串 
  30.  *  @param  string  $function   要执行的函数 
  31.  *  @return boolean $apply_to_keys_also     是否也应用到key上 
  32.  *  @access public 
  33.  * 
  34.  *************************************************************/  
  35. function arrayRecursive(&$array, $function, $apply_to_keys_also = false)  
  36. {  
  37.     static $recursive_counter = 0;  
  38.     if (++$recursive_counter > 1000) {  
  39.         die('possible deep recursion attack');  
  40.     }  
  41.     foreach ($array as $key => $value) {  
  42.         if (is_array($value)) {  
  43.             arrayRecursive($array[$key], $function, $apply_to_keys_also);  
  44.         } else {  
  45.             $array[$key] = $function($value);  
  46.         }  
  47.      
  48.         if ($apply_to_keys_also && is_string($key)) {  
  49.             $new_key = $function($key);  
  50.             if ($new_key != $key) {  
  51.                 $array[$new_key] = $array[$key];  
  52.                 unset($array[$key]);  
  53.             }  
  54.         }  
  55.     }  
  56.     $recursive_counter--;  
  57. }  
  58.      
  59. /************************************************************** 
  60.  * 
  61.  *  将数组转换为JSON字符串（兼容中文） 
  62.  *  @param  array   $array      要转换的数组 
  63.  *  @return string      转换得到的json字符串 
  64.  *  @access public 
  65.  * 
  66.  *************************************************************/  
  67. function JSON($array) {  
  68.     arrayRecursive($array, 'urlencode', true);  
  69.     $json = json_encode($array);  
  70.     return urldecode($json);  
  71. }  
  72.   
  73.    
  74.   
  75. $array = array  
  76.        (  
  77.           'Name'=>'希亚',  
  78.           'Age'=>20  
  79.        );  
  80.   
  81. /* 
  82. $array=array ( 
  83.   0 =>  
  84.   array ( 
  85.     'icon' =>  
  86.     array ( 
  87.       'hasPhoto' => '0', 
  88.       'photoPath' => '/resources/v20/images/boy.png', 
  89.     ), 
  90.     'age' => '24', 
  91.     'name' => '男士', 
  92.     'province' => '北京', 
  93.     'lottery' => '100元的爱玛电动车代金券', 
  94.     'mobile' => '', 
  95.   ), 
  96.   1 =>  
  97.   array ( 
  98.     'icon' =>  
  99.     array ( 
  100.       'hasPhoto' => '0', 
  101.       'photoPath' => '/resources/v20/images/boy.png', 
  102.     ), 
  103.     'age' => '24', 
  104.     'name' => '男士', 
  105.     'province' => '北京', 
  106.     'lottery' => '100元的爱玛电动车代金券', 
  107.     'mobile' => '', 
  108.   ), 
  109.   2 =>  
  110.   array ( 
  111.     'icon' =>  
  112.     array ( 
  113.       'hasPhoto' => '0', 
  114.       'photoPath' => '/resources/v20/images/boy.png', 
  115.     ), 
  116.     'age' => '25', 
  117.     'name' => '男士', 
  118.     'province' => '上海', 
  119.     'lottery' => '100元的爱玛电动车代金券', 
  120.     'mobile' => '', 
  121.   ), 
  122.   3 =>  
  123.   array ( 
  124.     'icon' =>  
  125.     array ( 
  126.       'hasPhoto' => '0', 
  127.       'photoPath' => '/resources/v20/images/boy.png', 
  128.     ), 
  129.     'age' => '24', 
  130.     'name' => '男士', 
  131.     'province' => '北京', 
  132.     'lottery' => '100元的爱玛电动车代金券', 
  133.     'mobile' => '186****1046', 
  134.   ), 
  135.   4 =>  
  136.   array ( 
  137.     'icon' =>  
  138.     array ( 
  139.       'hasPhoto' => '0', 
  140.       'photoPath' => '/resources/v20/images/boy.png', 
  141.     ), 
  142.     'age' => '24', 
  143.     'name' => '男士', 
  144.     'province' => '北京', 
  145.     'lottery' => '200元的爱玛电动车代金券', 
  146.     'mobile' => '186****1046', 
  147.   ), 
  148.   5 =>  
  149.   array ( 
  150.     'icon' =>  
  151.     array ( 
  152.       'hasPhoto' => '0', 
  153.       'photoPath' => '/resources/v20/images/boy.png', 
  154.     ), 
  155.     'age' => '24', 
  156.     'name' => '男士', 
  157.     'province' => '北京', 
  158.     'lottery' => '100元的爱玛电动车代金券', 
  159.     'mobile' => '', 
  160.   ), 
  161.   6 =>  
  162.   array ( 
  163.     'icon' =>  
  164.     array ( 
  165.       'hasPhoto' => '0', 
  166.       'photoPath' => '/resources/v20/images/boy.png', 
  167.     ), 
  168.     'age' => '24', 
  169.     'name' => '男士', 
  170.     'province' => '北京', 
  171.     'lottery' => '100元的爱玛电动车代金券', 
  172.     'mobile' => '', 
  173.   ), 
  174.   7 =>  
  175.   array ( 
  176.     'icon' =>  
  177.     array ( 
  178.       'hasPhoto' => '0', 
  179.       'photoPath' => '/resources/v20/images/boy.png', 
  180.     ), 
  181.     'age' => '24', 
  182.     'name' => '男士', 
  183.     'province' => '北京', 
  184.     'lottery' => '100元的爱玛电动车代金券', 
  185.     'mobile' => '', 
  186.   ), 
  187.   8 =>  
  188.   array ( 
  189.     'icon' =>  
  190.     array ( 
  191.       'hasPhoto' => '0', 
  192.       'photoPath' => '/resources/v20/images/boy.png', 
  193.     ), 
  194.     'age' => '24', 
  195.     'name' => '男士', 
  196.     'province' => '河南', 
  197.     'lottery' => '100元的爱玛电动车代金券', 
  198.     'mobile' => '', 
  199.   ), 
  200.   9 =>  
  201.   array ( 
  202.     'icon' =>  
  203.     array ( 
  204.       'hasPhoto' => '0', 
  205.       'photoPath' => '/resources/v20/images/boy.png', 
  206.     ), 
  207.     'age' => '24', 
  208.     'name' => '男士', 
  209.     'province' => '北京', 
  210.     'lottery' => '100元的爱玛电动车代金券', 
  211.     'mobile' => '', 
  212.   ), 
  213.   10 =>  
  214.   array ( 
  215.     'icon' =>  
  216.     array ( 
  217.       'hasPhoto' => '1', 
  218.       'photoPath' => '/201412/11/11/49/1418269782350A03EA57_c.jpg', 
  219.     ), 
  220.     'age' => '20', 
  221.     'name' => '白日做梦', 
  222.     'province' => '北京', 
  223.     'lottery' => '100元的爱玛电动车代金券', 
  224.     'mobile' => '', 
  225.   ), 
  226. ); 
  227. */  
  228.   
  229.     
  230. echo JSON($array);  
  231. ?>  

 

PHP/Java | 评论(0) | 引用(0) | 阅读(4228)

php获取客户端GET参数请求返回JSON数据

[不指定 2015/01/29 18:34 | by 刘新修 ]

 

PHP代码
  1. <?php  
  2. //公共声明  
  3. header('Content-type: text/json');  
  4. html_entity_decode($string, ENT_QUOTES, 'UTF-8');  
  5.   
  6. //回调参数设置  
  7. $param="callbackAA";  
  8. $callback=$_REQUEST[$param];  
  9. $str = '{"topNew":{"specialType":245,"title":"宝宝该由谁来带","img":"http://photo.zastatic.com/photo/activity/1397451753098.jpg","url":"http://t.zhenai.com/vote/voteindex.do?specialType=244&fromMainPage=1","count":23105},"topTwo":[{"specialType":173,"title":"让疯狂眼球帮你搞定爱情","img":"http://photo.zastatic.com/photo/activity/1386918466579.jpg","url":"http://t.zhenai.com/activity/carzyEyes.do?source=0&fromMainPage=2","count":3121},{"specialType":104,"title":"你问我爱你有多深 聘礼代表我的心","img":"http://photo.zastatic.com/photo/activity/1373638053176.jpg","url":"http://t.zhenai.com/activity/brideprice.do?source=3&fromMainPage=3","count":351005}]}';  
  10.   
  11. //自造Json数据  
  12. $str2='[{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":25,"name":"男士","province":"上海","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":"186****1046"},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"200元的爱玛电动车代金券","mobile":"186****1046"},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"河南","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"1","photoPath":"/201412/11/11/49/1418269782350A03EA57_c.jpg"},"age":20,"name":"白日做梦","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""}]';  
  13. $str = $callback . "(" .$str2.")";  
  14.   
  15. //判断存在参数才输出  
  16. if(isset($callback)&&!empty($callback)){  
  17. echo $str;  
  18. }  
  19.   
  20. //判断参数是否为空，提示默认信息  
  21. if(empty($callback)){  
  22. header("Content-type: text/html; charset=utf-8");  
  23. $str="<h1>400 Required String parameter '{$param}' is not present</h1><hr /><small>http Request with error params</small>";  
  24. echo $str;
  25.  
  26. }  
  27.   
  28. ?>  

最终更新：

PHP代码
  1. <?php
  2. //公共声明
  3. header('Content-type: text/json');
  4. html_entity_decode($string, ENT_QUOTES, 'UTF-8');
  5.   
  6. //回调参数设置
  7. $param="callbackAA";
  8. $callback=$_REQUEST[$param];
  9. $str = '{"topNew":{"specialType":245,"title":"宝宝该由谁来带","img":"http://photo.zastatic.com/photo/activity/1397451753098.jpg","url":"http://t.zhenai.com/vote/voteindex.do?specialType=244&fromMainPage=1","count":23105},"topTwo":[{"specialType":173,"title":"让疯狂眼球帮你搞定爱情","img":"http://photo.zastatic.com/photo/activity/1386918466579.jpg","url":"http://t.zhenai.com/activity/carzyEyes.do?source=0&fromMainPage=2","count":3121},{"specialType":104,"title":"你问我爱你有多深 聘礼代表我的心","img":"http://photo.zastatic.com/photo/activity/1373638053176.jpg","url":"http://t.zhenai.com/activity/brideprice.do?source=3&fromMainPage=3","count":351005}]}';  
  10.   
  11. //自造Json数据
  12. $str2='[{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":25,"name":"男士","province":"上海","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":"186****1046"},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"200元的爱玛电动车代金券","mobile":"186****1046"},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"河南","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"0","photoPath":"/resources/v20/images/boy.png"},"age":24,"name":"男士","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""},{"icon":{"hasPhoto":"1","photoPath":"/201412/11/11/49/1418269782350A03EA57_c.jpg"},"age":20,"name":"白日做梦","province":"北京","lottery":"100元的爱玛电动车代金券","mobile":""}]';  
  13. $str=$callback."(".$str2.")";
  14.   
  15.   
  16. //判断请求参数存在就会输出Json数据
  17. if(isset($callback)){
  18. echo $str;
  19. }
  20.   
  21. //判断请求参数不存在就输出错误信息
  22. if(!isset($callback)){
  23. header("Content-type: text/html; charset=utf-8");
  24. $str="<h1>400 Required String parameter '{$param}' is not present</h1><hr /><small>http Request with error params: none callback function</small>";
  25. echo $str;
  26. }  
  28. ?>  

 

PHP/Java | 评论(0) | 引用(0) | 阅读(5473)

有缘网（youyuan.com）网站优化项目（总结报告）

[不指定 2014/12/12 22:13 | by 刘新修 ]

开始时间：2014-11-05  结束时间：2014-12-05

根据网站优化方案，主要实现、解决及项目作用有哪种？

1、使用多域名解析到“文件服务器”（http://f1.youyuan.com   http://f2.youyuan.com）并分别对域名配置分发负载.

2、顶层Nginx对“xfile/”子目录进行分发负载，有效解决了JS全部抽离后，异步Ajax跨域请求的问题.

3、文件服务器加载Nginx-http-concat模块，并开启Gzip压缩（实现合并多http请求及最小化数据源传输）.

4、配置Shell脚本对JS/CSS合并多行代码成单行（使JS/CSS代码文件体积最小化）

5、使用JPGmini/ PNGmini对前端组使用到的图片进行批量压缩（使JPG/PNG图片文件体积最小化）

6、使用Rundeck实现自动化发版工具，缩短发版本耗用时间. （提高发布版本效率）

7、集成Windows本地Nginx开发测试环境（与线上配置相同便于本地开发调试）

8、优化前端组后期开发流程，无需频繁重启本地Maven服务，便于及时修改JS/CSS文件（提升团队工作效率）

9、前端组对JS/CSS的直接控制，发现问题能及时响应并快速解决.

 

########################################################################

PPT项目总结如下：

########################################################################

个人日志 | 评论(0) | 引用(0) | 阅读(4538)

js正则表达式/replace替换变量方法

[不指定 2014/11/20 16:09 | by 刘新修 ]

 1、javascript 正则对象替换创建 和用法： /pattern/flags  先简单案例学习认识下replace能干什么

    正则表达式构造函数： new RegExp("pattern"[,"flags"]); 

    正则表达式替换变量函数：stringObj.replace(RegExp,replace Text);

参数说明： 
pattern -- 一个正则表达式文本 
flags -- 如果存在，将是以下值： 
g: 全局匹配 
i: 忽略大小写 
gi: 以上组合 

//下面的例子用来获取url的两个参数，并返回urlRewrite之前的真实Url
var reg=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var url="http://www.qidian.com/BookReader/1017141,20361055.aspx";

//方式一,最简单常用的方式
var rep=url.replace(reg,"$1ShowBook.aspx?bookId=$2&chapterId=$3");
alert(rep);

//方式二 ,采用固定参数的回调函数
var rep2=url.replace(reg,function(m,p1,p2,p3){return p1+"ShowBook.aspx?bookId="+p3+"&chapterId="+p3});
alert(rep2);

//方式三，采用非固定参数的回调函数
var rep3=url.replace(reg,function(){var args=arguments; return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];});
alert(rep3);

//方法四
//方式四和方法三很类似, 除了返回替换后的字符串外，还可以单独获取参数
var bookId;
var chapterId;
function capText()
{
    var args=arguments; 
    bookId=args[2];
    chapterId=args[3];
    return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];
}

var rep4=url.replace(reg,capText);
alert(rep4);
alert(bookId);
alert(chapterId);

//使用test方法获取分组
var reg3=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
reg3.test("http://www.qidian.com/BookReader/1017141,20361055.aspx");
//获取三个分组
alert(RegExp.$1); 
alert(RegExp.$2);
alert(RegExp.$3);

 

2、 学习最常用的 test exec match search  replace  split 6个方法

1） test  检查指定的字符串是否存在
var data = “123123″;
var reCat = /123/gi;
alert(reCat.test(data));  //true
//检查字符是否存在  g 继续往下走  i 不区分大小写

2） exec 返回查询值
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/i;
alert(reCat.exec(data));  //Cat

3）match  得到查询数组
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/gi;
var arrMactches = data.match(reCat)
for (var i=0;i < arrMactches.length ; i++)
{
alert(arrMactches[i]);   //Cat  cat
}

4） search  返回搜索位置  类似于indexof
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/gi;
alert(data.search(reCat));  //23

5） replace  替换字符  利用正则替换
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/gi;
alert(data.replace(reCat,”libinqq”));

6）split   利用正则分割数组
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /\,/;
var arrdata = data.split(reCat);
for (var i = 0; i < arrdata.length; i++)
{
alert(arrdata[i]);
}

3、常用表达式收集：

 

"^\\d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$"　　//正整数
"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$"　　//负整数
"^-?\\d+$"　　　　//整数
"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"
//正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"
//负浮点数
"^(-?\\d+)(\\.\\d+)?$"　　//浮点数
"^[A-Za-z]+$"　　//由26个英文字母组成的字符串
"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串
"^[a-z]+$"　　//由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串
"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url
"^[A-Za-z0-9_]*$"。

============================================正则表达式基础知识==============================================

^ 匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a" 
$ 匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A" 
* 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa 
+ 匹配前面元字符1次或多次，/ba+/将匹配ba,baa,baaa 
? 匹配前面元字符0次或1次，/ba?/将匹配b,ba 
(x) 匹配x保存x在名为$1...$9的变量中 
x|y 匹配x或y 
{n} 精确匹配n次 
{n,} 匹配n次以上 
{n,m} 匹配n-m次 
[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符) 
[^xyz] 不匹配这个集合中的任何一个字符 
[\b] 匹配一个退格符 
\b 匹配一个单词的边界 
\B 匹配一个单词的非边界 
\cX 这儿，X是一个控制符，/\cM/匹配Ctrl-M 
\d 匹配一个字数字符，/\d/ = /[0-9]/ 
\D 匹配一个非字数字符，/\D/ = /[^0-9]/ 
\n 匹配一个换行符 
\r 匹配一个回车符 
\s 匹配一个空白字符，包括\n,\r,\f,\t,\v等 
\S 匹配一个非空白字符，等于/[^\n\f\r\t\v]/ 
\t 匹配一个制表符 
\v 匹配一个重直制表符 
\w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9] 
\W 匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4114)

JSP获取服务器时间+JS截取匹配

[不指定 2014/11/20 13:02 | by 刘新修 ]
Java代码
  1. <%  
  2. java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy-MM-dd_HH:mm:ss");  
  3. java.util.Date currentTime = new java.util.Date();//得到当前系统时间  
  4. String DateTime = formatter.format(currentTime); //将日期时间格式化  
  5. %>  
  6. ############################################ 我是华丽分割线 ########################################  
  7. <div class="yy_header" sex="<c:if test="${USER.sex==1}">mm</c:if><c:if test="${USER.sex==0}">gg</c:if>" guid="${GUID}" taohua="<c:if test="${USER.level==5 or USER.monthUser}"><fmt:formatDate value="${muDate}" type="both" pattern="yyyy-MM-dd"/></c:if><c:if test="${USER.level!=5 and not USER.monthUser}">false</c:if>" datetime="<%=DateTime%>">  
XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script type="text/javascript" src="http://static.3snews.net/public/js/jquery-1.5.1.js"></script>  
  7. <script type="text/javascript">  
  8. $(document).ready(function(){  
  9. var datetime=$(".yy_header").attr("datetime");  
  10. var taohuavip=$(".yy_header").attr("taohuavip");  
  11. var regdatetime=$(".yy_header").attr("regdatetime");  
  12. var datetimedatetimeNN=datetime.replace(/\-/g,"").replace(/\:/g,"");  
  13. var taohuaviptaohuavipNN=taohuavip.replace(/\-/g,"").replace(/\:/g,"");  
  14. var regdatetimeregdatetimeNN=regdatetime.replace(/\-/g,"").replace(/\:/g,"");  
  15. //匹配服务器时间  
  16. var snowdate=datetimeNN.split(" ")[0];  
  17. var snowtime=datetimeNN.split(" ")[1];  
  18. var snowdatesnowdatetime=snowdate+snowtime;  
  19. //匹配桃花VIP时间  
  20. var taohuadate=taohuavipNN.split(" ")[0];  
  21. var taohuatime=taohuavipNN.split(" ")[1];  
  22. var taohuadatetaohuadatetime=taohuadate+taohuatime;  
  23. //匹配用户注册时间  
  24. var regdate=regdatetimeNN.split(" ")[0];  
  25. var regtime=regdatetimeNN.split(" ")[1];  
  26. var regdateregdatetime=regdate+regtime;  
  27. alert(snowdatetime)  
  28. alert(taohuadatetime)  
  29. alert(regdatetime)  
  30.   
  31. //alert(Thuatime.replace(" ","").replace("-",""));   
  32. //alert(Thuatime.replace(/\ /g,"").replace(/\-/g,"").replace(/\:/g,""))  
  33. //删除第二次出现的test  
  34. var str="testORtest"  
  35. var h=str.replace(/test$/,"hello")  
  36. //alert(h)  
  37.   
  38. })  
  39. </script>  
  40. </head>  
  41.   
  42. <body>  
  43. <div class="yy_header" sex="gg" guid="215416540" datetime="2014-11-20 12:52:12" taohuavip="2016-12-01 00:00:00" regdatetime="2013-01-01 15:50"></div>  
  44. </body>  
  45. </html>  

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(5081)

CentOS下安装yuicompressor-2.4.8合并JS-CSS.txt

[不指定 2014/11/13 20:52 | by 刘新修 ]
C#代码
  1. 查看CentOS自带JDK是否已安装  
  2.   
  3. yum list installed |grep java  
  4. root@pts/0 # yum list installed |grep java  
  5. java-1.6.0-openjdk.x86_64  
  6. java-1.6.0-openjdk-devel.x86_64  
  7.   
  8. 查看yum库中的Java安装包  
  9.   
  10. yum -y list java*  
  11.   
  12. 使用yum安装Java环境。  
  13.   
  14. yum -y install java-1.7.0-openjdk*  
  15.   
  16. 官方网站：http://yui.github.io/yuicompressor/  
  17.   
  18. wget http://soft.liuxinxiu.com/yuicompressor/yuicompressor-2.4.8.zip  
  19.   
  20. unzip yuicompressor-2.4.8.zip  
  21.   
  22.   
  23. 2. 将yuicompressor.jar放在任意目录，比如 /opt/software/yuicompressor/yuicompressor.jar  
  24.   
  25.   
  26. 3. 编写bash脚本,保存为yui.sh  
  28. #!/usr/bin/env bash  
  29. java -jar /root/bin/yuicompressor-2.4.8.jar $1 > $2  
  30. java -jar /root/bin/yuicompressor-2.4.8.jar header.js -o header.yy.js --charset utf-8 --type js  
  31.   
  32. java -jar /root/bin/yuicompressor-2.4.8.jar /opt/xfile/www/js/pages/123/*.js -o /opt/xfile/www/js/pages/123/*.yy.js --charset utf-8 --type js  
  33.   
  34.   
  35. 4. 运行命令使yui.sh可执行  
  36.   
  37. chmod +x /root/bin/yui.sh  
  38.   
  39. 5. 建立链接  
  40.   
  41. sudo ln -s /root/bin/yui.sh /usr/bin/yui  
  42.   
  43. 6. 使用方法  
  44.   
  45. yui old.js new.js  

#!/bin/bash

 

#发布时临时存放svn里下载的style文件

XfileJS="/opt/xfile/www/js/pages/ceshi/"

XfileCSS="/opt/xfile/www/js/pages/ceshi/"

#rm -rf $svn_style

#查找到$xfileJS目录下的所有.js文件，然后逐个压缩之

echo "compress js ..."

for js in `find $XfileJS -name "*.js"`;

do

#转成绝对路径，find出来的是相对路径

apath=`readlink -f $js`

echo "compress $apath"

new=`echo $js | sed 's/\.js//g'`

cp -rf $js $new".temp.js"

temp=`echo $js | sed 's/\.temp.js//g'`

#压缩后还是输出在原来的位置，相当于覆盖原有文件

java -jar /root/bin/yuicompressor-2.4.8.jar $temp -o $temp --type js --charset utf-8

done

#压缩所有的.css文件，过程与上面类似

echo "compress css ..."

for css in `find $XfileCSS -name "*.css"`;

do

apath=`readlink -f $css`

echo "compress $apath"

java -jar /root/bin/yuicompressor-2.4.8.jar $apath -o $apath --type css --charset utf-8

done

#echo "force cp $svn_style to $style"

#强制(-f)复制到目标目录，即nginx下的style目录

#cp -fr $svn_style/* $style

#rm -rf $svn_style

echo "deploy style success!"

Linux/Unix | 评论(0) | 引用(0) | 阅读(4980)

比较实用的sed命令总结

[不指定 2014/11/12 23:33 | by 刘新修 ]

比较实用的sed命令总结

C#代码
  1. sed   '/^\/opt\//!  s/^.*$/\/home\/admin\/mydoc&/'    file  
  2. sed -i '/^http:\/\//!  s/^\/\//\/home\/admin\/mydoc&/' 1.txt （在//之前追加）  
  3. sed -i '/^http:\/\//!  s/^\/\///g' 1.txt （不是以http://打头的删除//）  
  4. sed -i '/http:\/\//!  s/\/\/.*//g' 1.txt （非常强大，无论是首行还是中间都删除//.*）  
  5.   
  6. 要求把含有冒号的连续的多行合并成一行，以空格分割（用于合并CSS写成一行）：  
  7. sed '/:/{:a;N;/\n[^:]*$/!{$!ba};s/\n\([^:]*:\)/ \1/g}' 2.txt  
  8. 删除以#打头的内容  
  9. sed -i "s/#.*//g" 1.txt  

 

Linux/Unix | 评论(0) | 引用(0) | 阅读(4413)
第一页 上页 11 12 13 14 15 16 17 18 19 20 下页 最后页 [ 显示模式： 摘要 | 列表 ]