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

原生JS实现AJAX、JSONP及DOM加载完成事件

[不指定 2015/06/19 16:04 | by 刘新修 ]

 

JavaScript代码
  1. ajax({  
  2.     url:"http://192.168.66.90:8080/php/test5.php",  
  3.     type:"POST",  
  4.     data:{GUID:"288350897",subFlag:"1"},  
  5.     dataType:"jsonp",  
  6.     callback:"Jsoncallback",  
  7.     success:function(data){  
  8.         if(data.sex==0){  
  9.             var userSex="帅哥";  
  10.         }  
  11.         if(data.sex==1){  
  12.             var userSex="美女";  
  13.         }  
  14.         if(data.switch==0){  
  15.             $(".Mbox .mailInfo .text_").html('<span style="color:#fbff83">'+data.mailInfo+'</span>封'+userSex+'来信');  
  16.             $(".Mbox").addClass("ty");  
  17.             mbox.addEventListener("webkitAnimationEnd",function(){ //动画结束时事件  
  18.             var timer=setInterval(function(){  
  19.             if(mbox.offsetTop==-60){  
  20.                 mbox.className='Mbox tyy';  
  21.                 clearInterval(timer)  
  22.             }  
  23.             },1000)  
  24.             },false);  
  25.         }  
  26.         //alert(data.switch)  
  27.   
  28. },  
  29.     fail:function(status){  
  30.     // 此处放失败后执行的代码  
  31.     }  
  32. });  
  33.   
  34. /***********************************
  35. 公共ajax方法支持跨越请求
  36. ************************************/  
  37. function ajax(options) {  
  38. options = options||{};  
  39. if (!options.url||!options.callback){  
  40. throw new Error("参数不合法");  
  41. }  
  42.   
  43. //创建 script 标签并加入到页面中  
  44. var callbackName=('jsonp_'+Math.random()).replace(".","");  
  45. var oHead=document.getElementsByTagName('head')[0];  
  46. options.data[options.callback]=callbackName;  
  47. var params=formatParams(options.data);  
  48. var oS=document.createElement('script');  
  49. oHead.appendChild(oS);  
  50.   
  51. //创建jsonp回调函数  
  52. window[callbackName]=function(json){  
  53. oHead.removeChild(oS);  
  54. clearTimeout(oS.timer);  
  55. window[callbackName]=null;  
  56. options.success&&options.success(json);  
  57. };  
  58.   
  59. //发送请求  
  60. oS.src=options.url+'?'+params;  
  61.   
  62. //超时处理  
  63. if(options.time){  
  64. oS.timer=setTimeout(function(){  
  65. window[callbackName]=null;  
  66. oHead.removeChild(oS);  
  67. options.fail&&options.fail({message:"超时"});  
  68. },time);  
  69. }  
  70. };  
  71.   
  72. //格式化参数  
  73. function formatParams(data){  
  74. var arr=[];  
  75. for(var name in data){  
  76. arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));  
  77. }  
  78. return arr.join('&');  
  79. }  

 

Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4960)

jQuery制作从左到右从新排列内容动画特效

[不指定 2015/06/17 14:27 | by 刘新修 ]

 

XML/HTML代码
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>jQuery制作从左到右从新排列内容动画特效</title>  
  6.     <style>  
  7.     body{ height: 3000px; padding: 0; margin: 0; }  
  8.     div{ background: #000; margin: 20px 0; width: 100px; height: 30px; color: #fff; line-height: 30px; text-align: center; }  
  9.     </style>  
  10. </head>  
  11.  <script src="js/jquery.min.js"></script>  
  12.  <body>  
  13.     <div class="op1">111</div>  
  14.     <div class="op2">222</div>  
  15.     <div class="op3">333</div>  
  16.     <div class="op4">444</div>  
  17.     <div class="op5">555</div>  
  18.     <div class="op6">666</div>  
  19.     <div class="op7">777</div>  
  20.     <input type="button" value="stop!!!" />  
  21.     <script>  
  22.     var _width = ($(document).width() - $('div').width()) + "px";  
  23.   
  24.     var animateList=[   
  25.           function(){ $('.op1').delay(500).animate({marginLeft:_width},500,queueList);  },   
  26.           function(){ $('.op2').delay(300).animate({marginLeft:_width},500,queueList);  },   
  27.           function(){ $('.op3').delay(300).animate({marginLeft:_width},500,queueList);  },   
  28.           function(){ $('.op4').delay(700).animate({marginLeft:_width},500,queueList);  },   
  29.           function(){ $('.op5').delay(300).animate({marginLeft:_width},500,queueList);  },   
  30.           function(){ $('.op6').delay(200).animate({marginLeft:_width},500,queueList);  },   
  31.           function(){ $('.op7').delay(300).animate({marginLeft:_width},500,function(){ alert('动画队列结束'); } );}  
  32.     ];   
  33.       
  34.     $(document).queue('_queueList',animateList);   
  35.     var queueList=function(){   
  36.         $(document).dequeue('_queueList');   
  37.     };   
  38.     queueList();  
  39.   
  40.     $(':button').click(function(){  
  41.         $(document).clearQueue('_queueList');  
  42.     });  
  43.   
  44.     </script>  
  45.   
  46. </body>  
  47. </html>  

 

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

Linux复制本地文件到远程

[不指定 2015/06/17 10:06 | by 刘新修 ]

 scp -r /www/next.youyuan.com2 root@192.168.3.162:/www/

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

JSON 常用类型处理

[不指定 2015/06/16 11:54 | by 刘新修 ]

 

JavaScript代码
  1. var str='{"weatherinfo": [{"city": "北京","city_en": "beijing", "cityid": "101130101","date": "","date_y": "2014年1月23日", "wind6": "微风"}]}';  
  2. var obj=JSON.parse(str);  
  3. var yy=JSON.stringify(obj);  
  4. alert(yy)  

 

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

JS设置数组随机取值，支持多个不重复【实例】

[不指定 2015/06/12 18:10 | by 刘新修 ]

JS设置数组随机取值，支持多个不重复【实例】

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. </head>  
  7. <body Arrdata="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33">  
  8. </body>  
  9. <script type="text/javascript" src="http://code.liuxinxiu.com/lib/zepto/zepto-1.1.6.js"></script>  
  10. <script language="javascript">  
  11. //从一个给定的数组arr中,随机返回num个不重复项  
  12. function getArrayItems(arr, num) {  
  13.     //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;  
  14.     var temp_array = new Array();  
  15.     for (var index in arr) {  
  16.         temp_array.push(arr[index]);  
  17.     }  
  18.     //取出的数值项,保存在此数组  
  19.     var return_array = new Array();  
  20.     for (var i = 0; i<num; i++) {  
  21.         //判断如果数组还有可以取出的元素,以防下标越界  
  22.         if (temp_array.length>0) {  
  23.             //在数组中产生一个随机索引  
  24.             var arrIndex = Math.floor(Math.random()*temp_array.length);  
  25.             //将此随机索引的对应的数组元素值复制出来  
  26.             return_array[i] = temp_array[arrIndex];  
  27.             //然后删掉此索引的数组元素,这时候temp_array变为新的数组  
  28.             temp_array.splice(arrIndex, 1);  
  29.         } else {  
  30.             //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.  
  31.             break;  
  32.         }  
  33.     }  
  34.     return return_array;  
  35. }  
  36.   
  37. //测试  
  38. var ArrData=$("body").attr("Arrdata");  
  39. //var ArrList=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33];  
  40. var data=ArrData.split(",");//已经是数组，直接可以用str[0]去取了  
  41. //alert(str[1])  
  42. //alert(getArrayItems(arr,2));  
  43. var html=getArrayItems(data,2);  
  44. for(var i=0;i<html.length;i++){  
  45.     alert(html[i])  
  46. }  
  47. document.write(html)  
  48. </script>  
  49. </html>  

 

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

JS遍历2层DOM装入数组转JSON【实例】

[不指定 2015/06/12 15:42 | by 刘新修 ]

 JS遍历2层DOM装入数组转JSON【实例】

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. <style>  
  7. *{ margin:0; padding:0;}  
  8. body{ color:#333; font-family:'Microsoft Yahei'; font-size:16px;}  
  9. ul,li{ list-style:none; line-height:30px;}  
  10. .conbox{ padding:10px;}  
  11. .conbox .selected{ color:#CC0033}  
  12. .conbox .lis span{ padding:0 5px;}  
  13. </style>  
  14. </head>  
  15. <body arrData="111,222,333,444,555,666">  
  16. <div class="conbox">  
  17.     <ul class="lisbox">  
  18.         <li data-qId="11" n="aaa" class="lis selected"><span class="on">111c</span><span class="on">222c</span><span class="on">333c</span></li>  
  19.         <li data-qId="22" n="bbb" class="lis">bbb</li>  
  20.         <li data-qId="33" n="ccc" class="lis selected"><span class="on">111a</span><span class="on">222a</span><span class="on">333a</span></li>  
  21.         <li data-qId="44" n="ddd" class="lis">ddd</li>  
  22.         <li data-qId="55" n="eee" class="lis selected"><span class="on">111b</span><span class="on">222b</span><span class="on">333b</span></li>  
  23.         <li data-qId="66" n="fff" class="lis">fff</li>  
  24.     </ul>  
  25. </div>  
  26. <div id="submitBtn" style=" width:100%; height:50px; line-height:50px; text-align:center; color:#fff; background:#CC0000">点击事件</div>  
  27. </body>  
  28. <script type="text/javascript" src="http://code.liuxinxiu.com/lib/zepto/zepto-1.1.6.js"></script>  
  29. <script type="text/javascript">  
  30. $("#submitBtn").on("click",function(){  
  31.     /*********  声明变量获取节点 ***************/  
  32.     var qList=$(".lisbox li.selected"),qLen=qList.length,arr=[];  
  33.     /*********  循环第一层问题 ***********/  
  34.     for(var i=0;i<qLen;i++){  
  35.         /**** var $anList=$qList.eq(i).find("[name=an" + i + "]:checked"),subArr=[]; ****/  
  36.         var anList=qList.eq(i).find(".on"),subArr=[];  
  37.         var qid=qList.eq(i).attr("data-qId");  
  38.         /*****  循环第二层答案  **********/  
  39.         for(var key=0;key<anList.length;key++){  
  40.             subArr.push(anList.eq(key).text());  
  41.         }  
  42.         /*****  添加到整体数组 ************/  
  43.         arr.push({Question:qid,Answer:subArr});  
  44.     }  
  45.     /***** 转化成JSON结构字符串 *******/  
  46.     var subArrst=JSON.stringify(subArr);  
  47.     var jsondata=JSON.stringify(arr);  
  48.     /***** 使用replace替换"号为空、可全部 ******/  
  49.     var _subArrst=subArrst.replace(/"/g,"");  
  50.     var _datalist=jsondata.replace(/"/g,"");  
  51.     var _dataJson={guId:111222,eventId:11,plat:5,datalist:subArrst};  
  52.     alert(_datalist)  
  53. });  
  54. </script>  
  55. </html>  

 

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

JSTL 与 JSP 或者 Java 相互传递变量的代码

[不指定 2015/06/08 11:20 | by 刘新修 ]

 两种方式

 
<c:set var="s1" value="This is One" scope="request" />
out.print(request.getAttribute("s1") ;
 
<c:set var="s2" value="This is Two"/>
out.print(pageContext.getAttribute("s2"));
 
----------------------------------------------------
JSTL 变量由 JSP 读取
 
<c:set var="JspValue1" value="Java Language One" scope="request" /> 
<c:set var="JspValue2" value="Java Language Two"/>
<%
String JspValue3 = request.getAttribute("JspValue1").toString();
String JspValue4 = pageContext.getAttribute("JspValue2").toString();
          
out.print(JspValue3);
out.print(JspValue4);
%>
 
----------------------------------------------------
 
JSP 变量由 JSTL 读取
String strContextPath = request.getContextPath();
 pageContext.setAttribute("ContextPath", strContextPath);
..
<c:out value="${ContextPath}"></out>
PHP/Java | 评论(0) | 引用(0) | 阅读(2950)

Nginx Post最大提交数据限制

[不指定 2015/05/13 20:39 | by 刘新修 ]

原以为是php本身的限制，查看配置文件无论是POST还是单个文件上传都满足要求：

#post最大提交量

post_max_size = 8M

#php给个文件最大限制

upload_max_filesize = 2M

************************************************************************

NGINX错误日志显示：

Nginx 【client intended to send too large body: 1065755 bytes】

http://at.liuxinxiu.com/2015/05/image/nginx_error_log.png

在Nginx.conf文件中添加：

client_max_body_size 64M; #多少M根据实际情况填写

重启即可！

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

PHP判断POST或GET请求，返回提交服务器的JSON数据（支持跨越）

[不指定 2015/04/17 10:32 | by 刘新修 ]

注明：暂时不支持跨域名下GET请求

http://192.168.66.90:8080//php/POST_GET.php

PHP代码
  1. <?php  
  2. //目前暂不支持跨域GET请求  
  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. //判断请求参数就是同域名下AJAX请求  
  11. if(!isset($callback)){  
  12.       
  13.     //返回多个Id  
  14.     if($_POST){  
  15.         exit(json_encode($_POST));  
  16.     }else if($_GET){  
  17.         exit(json_encode($_GET));  
  18.     }  
  19.   
  20.     //返回单个Id  
  21.     if($_POST['Id']){  
  22.         $a=$_POST['Id'];  
  23.         //echo $a;  
  24.         exit(json_encode($a));  
  25.     }else if($_GET['Id']){  
  26.         $a=$_GET['Id'];  
  27.         //echo $a;  
  28.         exit(json_encode($a));  
  29.     }  
  30.       
  31.     //强制开关按钮  
  32.     if($_POST['CT']){  
  33.         $a=$_POST['CT'];  
  34.         echo $a;  
  35.     }else if($_GET['CT']){  
  36.         $a=$_GET['CT'];  
  37.         echo $a;  
  38.     }  
  39. }  
  40.   
  41. //判断请求参数存在就是实现JSONP跨越提交  
  42. if(isset($callback)){  
  43.       
  44.     //强制开关按钮  
  45.     if($_POST['Id']){  
  46.         $a=$_POST['Id'];  
  47.         $b=json_encode($a);  
  48.         $str=$callback."(".$b.")";  
  49.     }else{  
  50.         $a=$_POST['CT'];  
  51.         $str=$callback."(".$a.")";  
  52.     }  
  53.     echo $str;  
  54.   
  55. }  
  56.   
  57. ?>  

http://192.168.66.90:8080/Ajax/s6.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>ajax test</title>  
  6. <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>    
  7. <script type="text/javascript">    
  8.   
  9. $(document).ready(function(){  
  10.   
  11. //点击请求http接口，删除多条数据  
  12. $(".delall").click(function(){  
  13.   
  14.     //拼写成JSON数据格式,提交http接口JSON不需要转字符串  
  15.     //alert(JSON.stringify(obj))  
  16.     var val=$(".dellink.on").map(function(){    
  17.         return $(this).attr("id");        
  18.     }).get();  
  19.     var obj={Id:val};  
  20.     //var vot=JSON.stringify(obj);  
  21.     //alert(obj)  
  22.       
  23.     /***** 同域名下多条ID请求  
  24.     $.ajax({  
  25.         url:"/php/POST_GET.php",  
  26.         type:"post",  
  27.         dataType:"json",  
  28.         //jsonp:"callback",  
  29.         data:obj,  
  30.         success:function(data){  
  31.             //var yy=JSON.stringify(data);  
  32.             //alert(yy)  
  33.               
  34.             $.each(data.Id,function(i,item){  
  35.                 $('#'+item).slideUp();  
  36.             });      
  37.         },  
  38.         error:function(){      
  39.             alert("异常！");  
  40.         }  
  41.     });  
  42.     */  
  43.       
  44.     /***** 跨域名多条ID请求 *****/  
  45.     $.ajax({  
  46.         url:"http://192.168.66.90:8080//php/POST_GET.php",  
  47.         type:"post",  
  48.         dataType:"jsonp",  
  49.         jsonp:"callback",  
  50.         data:obj,  
  51.         success:function(data){  
  52.             //var yy=JSON.stringify(data);  
  53.             //alert(data)  
  54.               
  55.             $.each(data,function(i,item){  
  56.                 $('#'+item).slideUp();  
  57.             });      
  58.         },  
  59.         error:function(){      
  60.             alert("异常！");  
  61.         }  
  62.     });  
  63. });  
  64.   
  65. //点击请求http接口，删除单条数据  
  66. $(".dellink").click(function() {    
  67.     var thisId=$(this).attr("id");  
  68.     /***** 同域名Ajax请求  
  69.     $.ajax({  
  70.         url:"/php/POST_GET.php",  
  71.         type:"post",  
  72.         dataType:"json",  
  73.         //jsonp:"callback",  
  74.         data:{Id:thisId},  
  75.         success:function(data){  
  76.             //var yy=JSON.stringify(data);  
  77.             //alert(yy)  
  78.               
  79.             $.each(data,function(i,item){  
  80.                 $('#'+item).slideUp();  
  81.             });  
  82.         },  
  83.         error:function(){      
  84.             alert("异常！");  
  85.         }  
  86.     });  
  87.     *****/  
  88.     /****** 可支持jsonp跨域名请求 */  
  89.     $.ajax({  
  90.         url:"http://192.168.66.90:8080//php/POST_GET.php",  
  91.         type:"post",  
  92.         dataType:"jsonp",  
  93.         jsonp:"callback",  
  94.         data:{Id:thisId},//{Id:"44554547"}  
  95.         success:function(data){  
  96.             var yy=JSON.stringify(data);  
  97.             //alert(data)  
  98.             if(thisId==data){  
  99.                 $('#'+data).slideUp();  
  100.             }  
  101.         },  
  102.         error:function(){      
  103.             alert("异常！");  
  104.         }  
  105.     });  
  106. });  
  107.   
  108.   
  109. //控制开关（服务器返回0或1）  
  110. $(".control").click(function(){  
  111.     var hason=$(this).hasClass("on");  
  112.     /***** 同域名下访问http接口  
  113.     if(hason){  
  114.         $.ajax({  
  115.             url:"/php/POST_GET.php",  
  116.             type:"post",  
  117.             dataType:"json",  
  118.             data:{CT:"0"},  
  119.             success:function(data){  
  120.                 $(".control").removeClass("on");  
  121.                 $(".control").html("广告关闭")  
  122.             },  
  123.             error:function(){      
  124.                 alert("异常！");  
  125.             }  
  126.         });  
  127.     }else{  
  128.         $.ajax({  
  129.             url:"/php/POST_GET.php",  
  130.             type:"post",  
  131.             dataType:"json",  
  132.             data:{CT:"1"},  
  133.             success:function(data){  
  134.                 $(".control").addClass("on");  
  135.                 $(".control").html("广告开启")  
  136.             },  
  137.             error:function(){      
  138.                 alert("异常！");  
  139.             }  
  140.         });  
  141.     }  
  142.     */    
  143.     /***** 跨域名访问http接口 *****/  
  144.     if(hason){  
  145.         $.ajax({  
  146.             url:"http://192.168.66.90:8080//php/POST_GET.php",  
  147.             type:"post",  
  148.             dataType:"jsonp",  
  149.             jsonp:"callback",  
  150.             data:{CT:"0"},  
  151.             success:function(data){  
  152.                 if(data==0){  
  153.                     $(".control").removeClass("on");  
  154.                     $(".control").html("广告关闭")  
  155.                 }  
  156.             },  
  157.             error:function(){      
  158.                 alert("异常！");  
  159.             }  
  160.         });  
  161.     }else{  
  162.         $.ajax({  
  163.             url:"http://192.168.66.90:8080//php/POST_GET.php",  
  164.             type:"post",  
  165.             dataType:"jsonp",  
  166.             jsonp:"callback",  
  167.             data:{CT:"1"},  
  168.             success:function(data){  
  169.                 if(data==1){  
  170.                     $(".control").addClass("on");  
  171.                     $(".control").html("广告开启")  
  172.                 }  
  173.             },  
  174.             error:function(){      
  175.                 alert("异常！");  
  176.             }  
  177.         });  
  178.     }  
  179.   
  180. });  
  181. //control end  
  182.   
  183. });  
  184. </script>  
  185. </head>  
  186. <body>    
  187. <style type="text/css">  
  188. body { font-family: 'Microsoft Yahei'; margin:0; padding:0; font-weight:normal}  
  189. .dellink,.delall,.list .control{height:60px; line-height:60px; color:#fff; width:600px; font-size:22px; text-align:center; margin:2px auto;  cursor:pointer;}  
  190. .dellink{ display:block; background:#000;}  
  191. .delall{  background: #CC3366; }  
  192. .list .control{ background:#CC0033; }  
  193. .list .on{background:#006633;}  
  194. </style>  
  195. <a class="dellink on" id="1001">删除单条数据 0111</a>  
  196. <a class="dellink" id="1002">删除单条数据 022</a>  
  197. <a class="dellink on" id="1003">删除单条数据 0333</a>  
  198. <a class="dellink on" id="1004">删除单条数据 044</a>  
  199. <a class="dellink" id="1005">删除单条数据 0555</a>  
  200. <div class="delall">请求http接口【并删除多条数据】</div>  
  201. <div class="list">  
  202. <div class="control on">广告开启</div>  
  203. </div>  
  204. </body>    
  205. </html>  

 

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

如何成为一名优秀的前端工程师 (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) | 阅读(4414)
第一页 上页 10 11 12 13 14 15 16 17 18 19 下页 最后页 [ 显示模式： 摘要 | 列表 ]