js前端編輯組件_js前端組件是怎麼封裝的

⑴ 在前端中什麼是組件化什麼是模塊化

模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如，一個頁面分好多個功能，這時候你要是都寫在一個js 中會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，後期別人拉手，或你接手別人的項目，這時候來個需求讓你把分頁去掉，或修改你可以清楚的找到對應模塊文件進行修改或去掉
模塊是自定義的，

組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用，不需要再單獨開發的

⑵ node.js一般用什麼前端編輯器

sublime 其實挺不錯的。
nide的也還可以。這是專門寫node.js的
WebStorm的話，就相對重量級了。

⑶ 有沒有比較強大的html+js+css編輯器

推薦Hbuider，個人感覺比eclipse和dreamweaver好用。。
特點：輕量，只有幾M，就算全部插件安裝也只有三百M。
測試方便：可以直接打包成app運行到安卓或蘋果模擬器和真機里。
app配置簡單，上手速度快。
全中文界面。
可以新建mui的相關項目並直接調試。
可以新建HTML5 plus項目並直接調試。
可以新建微信支付寶等各種小程序頁面並直接調試。
反正就是強大，好用。。
HTML項目打包成app也很方便。
使用過程中無廣告全程免費。
軟體啟動快，沒有載入界面讀取界面。雙擊圖標頂多兩秒，編碼窗口就出來了。
軟體響應快，速度快。

⑷ web前端組件怎麼實現

⑸ 如何用javascript開發前端組件

開發組件需要學會javascript基礎的東西。比如原型，比閉包等。

如果你覺得那個不好學，那還是有一招更簡單的開發，直接用jquery開發插件。給你一個例子吧：

$.fn.myPlugin=function(options){
alert($(this).html());
}

//調用方法

$('div').myPlugin();

一個插件就這產生，非常happly，瀟灑一回。如果還有問題可以留言或者去看下前端開發資料，蝦米站長，中國站長等裡面都有。

⑹ js如何實現點擊編輯按鈕，前端table表格行內指定td可修改。（table是動態生成的）

functionready(){varurl=base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function(result){//生成之前先清空tr,防止AJAX非同步載入重復生成$("#lottr").remove();varlength=result.length;for(vari=0;i<length;i++){varname=result[i].name;//服務名稱varalias=result[i].alias;//服務別名vartype=result[i].type;//服務類型varyear=result[i].year;//年份varurl=result[i].url;//服務地址varvisible=result[i].visible;//是否可見varid=result[i].id;//idserviceIdArray[i]=id;//此處將id塞給serviceIdArray，用於判斷是否添加。varstr="";if(visible==true){//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"checked="true"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}else{//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}var$tr=$(str);$("#lot").append($tr);
}
}
});
}

2）

//修改table行內元素(td)functioneditTd(id){//選中編輯按鈕的時候,把這行指定的幾個td變成文本框varb=$("input[type='button'][id='"+id+"']").parent();//tdvara=b.siblings();//td的兄弟節點if(a[1].children.length===0){a[1].innerHTML="<inputtype='text'value='"+a[1].innerText+"'/>";
}
if(a[2].children.length===0){a[2].innerHTML="<inputtype='text'value='"+a[2].innerText+"'/>";
}
if(a[3].children.length===0){a[3].innerHTML="<inputtype='text'value='"+a[3].innerText+"'/>";
}//將編輯改成保存和取消兩個按鈕b[0].innerHTML="<inputid='"+id+"'type='button'onclick='saveEditTd(this.id);'value='保存'/><inputtype='button'onclick='resertEditTd();'value='取消'/>";
//以下注掉的都是在網上找的參考。/*alert(a[0].getText());var$this=$(this).index();alert($this);*//*$('input[type="button"]').on('click',function(){var$this=$(this).parent().parent();//trready();});*//*var$=function(node){returntypeofnode=="string"?document.getElementById(node):node;}var$1=function(node,parent){varnd=document.createElement(node);if(parent)parent.appendChild(nd);returnnd;}/!**綁定事件流*!/varbind=function(obj,eventName,funcionName){if(obj.addEventListener){obj.addEventListener(eventName,funcionName,false);}elseif(obj.attachEvent){obj.attachEvent("on"+eventName,funcionName);}else{obj["on"+eventName]=funcionName;}};varfulltable=function(tbody,data){varpd=data.data;varcolumn=data.column;for(vari=0,len=data.rows;i<len;i++){vartr=$1("tr",tbody);varcd=pd[i];for(varj=0,jlen=column.length;j<jlen;j++){vartd=$1("td",tr);td.innerHTML=cd[column[j]];//innerText不兼容火狐，可以自己寫innerText和textContent的兼容，這里就直接用innerHTML了}}}varlittlehow_edit_table=function(tbody,ev){this.tbody=$(tbody);this.event=ev?ev:"click";//默認為單機事件this.init=function(data){//data可以是undefinedif(data){fulltable(this.tbody,data);}//調用可編輯this.edit();}this.edit=function(){vartds=this.tbody.getElementsByTagName("td");for(vari=0,len=tds.length;i<len;i++){bind(tds[i],this.event,this.click);}}this.click=function(){//alert(this.children.length);if(this.children.length>0)return;varv=this.innerHTML;this.innerHTML="";varinput=$1("input",this);input.type="text";input.value=v;input.focus();//游標聚集bind(input,"blur",blur);}varblur=function(){varv=this.value;this.parentNode.innerHTML=v;}}window.$$=function(id,ev){returnnewlittlehow_edit_table(id,ev);};*//*$('.editable').handleTable({"handleFirst":true,"cancel":"<spanclass='glyphiconglyphicon-remove'></span>","edit":"<spanclass='glyphiconglyphicon-edit'></span>","add":"<spanclass='glyphiconglyphicon-plus'></span>","save":"<spanclass='glyphiconglyphicon-saved'></span>","confirm":"<spanclass='glyphiconglyphicon-ok'></span>","operatePos":-1,"editableCols":[2,3,4],"order":["add","edit"],"saveCallback":function(data,isSuccess){//這里可以寫ajax內容，用於保存編輯後的內容//data:返回的數據//isSucess:方法，用於保存數據成功後，將可編輯狀態變為不可編輯狀態varflag=true;//ajax請求成功（保存數據成功），才回調isSuccess函數（修改保存狀態為編輯狀態）if(flag){isSuccess();alert(data+"保存成功");}else{alert(data+"保存失敗");}returntrue;},"addCallback":function(data,isSuccess){varflag=true;if(flag){isSuccess();alert(data+"增加成功");}else{alert(data+"增加失敗");}},"delCallback":function(isSuccess){varflag=true;if(flag){isSuccess();alert("刪除成功");}else{alert("刪除失敗");}}});*//*//dom創建文本框varinput=document.createElement("input");input.type="text";//得到當前的單元格varcurrentCell;functioneditCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根據Dimmacro的建議修定下面的bug非常感謝if(currentCell.tagName=="TD"){//用單元格的值來填充文本框的值input.value=currentCell.innerHTML;//當文本框丟失焦點時調用lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把文本框加到當前單元格上.currentCell.appendChild(input);//根據liu_binq63的建議修定下面的bug非常感謝input.focus();}}functionlast(){//充文本框的值給當前單元格currentCell.innerHTML=input.value;}//最後為表格綁定處理方法.document.getElementById("table").ondblclick=editCell;*//*varttr=$(this).val()=="編輯"?"確定":"編輯";$(this).val(ttr);//按鈕被點擊後，在「編輯」和「確定」之間切換$(this).parent().siblings("td").each(function(){//獲取當前行的其他單元格varobj_text=$(this).find("input:text");//判斷單元格下是否有文本框if(!obj_text.length)//如果沒有文本框，則添加文本框使之可以編輯$(this).html("<inputtype='text'value='"+$(this).text()+"'>");else//如果已經存在文本框，則將其顯示為文本框修改的值$(this).html(obj_text.val());});*//*$('input[type="button"]').on('click',function(){var$this=$(this);var$td_arr=$this.parent().html('保存').prevAll('td');$.each($td_arr,function(){var$td=$(this);$td.html('<inputtype="text"value="'+$td.html()+'">');});});*/}

3）

//取消editTd編輯functionresertEditTd(){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}

//保存editTd編輯functionsaveEditTd(id){vara=$("input[type='button'][id='"+id+"']").parent().siblings();//td的兄弟節點vartd_name=a[1].children[0].value;//服務名稱vartd_alias=a[2].children[0].value;//服務別名vartd_type=a[3].children[0].value;//服務類型varurl=base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId},datatype:"json",success:function(result){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}
});
}

⑺ js前端組件是怎麼封裝的

JS即使封裝了，你也是可以看得到的。JS運行於客戶端，只要能看得到就能下載得到。只是一般都會做一些混淆處理罷了。

要知道是如何封裝的，你首先要弄明白啥叫面向對象編程。不知道這個，就不知道如何封裝一段代碼。

js前端編輯組件

與js前端編輯組件相關的內容