初學(xué)JS JQ 有一段時(shí)間了,功能基本能做出來,也看了一些AG,react,vue這些框架。但是我在寫代碼的結(jié)構(gòu)上,感覺還是停留在初級(垃圾)水平。舉個(gè)列,我用JQ庫寫代碼的結(jié)構(gòu)是這樣的。如下:
$(function () {
//一個(gè)點(diǎn)擊事件
$("selector1").click(function(){
//執(zhí)行代碼塊A
A();
});
如果執(zhí)行代碼塊A 在外面寫個(gè)公用函數(shù),就寫成:
function A(){
//執(zhí)行代碼塊
}
//另一個(gè)點(diǎn)擊事件
$("selector2").click(function(){
//執(zhí)行代碼塊B
B();
});
如果執(zhí)行代碼塊B 在外面寫個(gè)公用函數(shù),就寫成:
function B(){
//執(zhí)行代碼塊
}
});
當(dāng)達(dá)到千行的時(shí)候,我就發(fā)現(xiàn)這個(gè)不好維護(hù),雖然,我把每個(gè)功能 代碼塊寫了注釋,感覺后面維護(hù),修改跟困難。我也看過別人寫的,用原型鏈的等等。
論壇經(jīng)驗(yàn)豐富的朋友能否分享下自己的代碼結(jié)構(gòu)思路。暫時(shí)不要提供什么框架,模板引擎。謝謝
這其實(shí)不是寫代碼的結(jié)構(gòu)思路問題,而是對項(xiàng)目分析的問題。你不用參考 AG,react,vue 這些框架。因?yàn)檫@些框架和jquery有本質(zhì)的區(qū)別。AG,react,vue 這些本質(zhì)上是按照開發(fā)者的思路給你安排好了整個(gè)結(jié)構(gòu)。
初級
1.我說一下我平時(shí)怎么組織一個(gè)項(xiàng)目 js 的結(jié)構(gòu)的。首先我會(huì)把整個(gè)項(xiàng)目都會(huì)用到的一些方法,變量提取出來,放到一個(gè)通用的文件里。比如 common.js。
2.common.js 中需要定義一些公用的方法,以及變量(如果用后端說的話,其實(shí)是常量,但是js中 es6 才有常量的說法)??紤]到直接使用 var 定義的話會(huì)掛載到 window 下面成為全局變量,造成變量污染。所以我們只暴露出來一個(gè)全局變量。這個(gè)變量起名一定不要太普遍,避免沖突,要有自己的標(biāo)識。
var ls=function(){
}
// 添加屬性
ls.prototype.api=‘xxx.com/api’;
// 添加方法
ls.prototype.strtotime=function(){
}
可能這時(shí)候很多人不明白為什么會(huì)用原型來添加方法和屬性,直接 var ls={},ls.api=‘xxx.com/api’ 這樣不是也行嘛?這樣也行,但是后面有可能在某個(gè)模塊會(huì)對 api 屬性進(jìn)行修改,或者對方法進(jìn)行擴(kuò)展。這樣用繼承的寫法比較方便。
3.然后就是按照項(xiàng)目模塊進(jìn)行劃分,比如會(huì)員模塊就新建一個(gè) member.js。文章模塊就新建一個(gè) article.js 。然后一個(gè)頁面對應(yīng)一個(gè)方法,比如會(huì)員登錄就在 member.js 中加一個(gè) login方法。
如果項(xiàng)目比較復(fù)雜,頁面邏輯比較復(fù)雜,直接一個(gè)頁面寫一個(gè)js文件單獨(dú)引入也行。但是這個(gè)時(shí)候要在文件結(jié)構(gòu)上區(qū)分一下,比如 member/login.js,article/insert.js。
這里就靈活變通啦,總之我是不建議在html頁面混寫的。即影響加載速度,維護(hù)也麻煩。
進(jìn)階
等你寫的多了你就會(huì)發(fā)現(xiàn)你們的業(yè)務(wù)中很多邏輯和組件是通用的,比如表單異步提交啊,表單驗(yàn)證啊,異步上傳啊之類的。每個(gè)頁面都復(fù)制一次會(huì)很傻,所以就要把這些邏輯剝離出來,按照你的使用習(xí)慣單獨(dú)重新封裝一下。你會(huì)發(fā)現(xiàn)用起來特別爽,效率非常高。這個(gè)階段可能需要你看一下 jquery,jquery插件之類的源碼。
進(jìn)化
再用一段時(shí)間,你會(huì)發(fā)現(xiàn)沒意思,就想用 AG,react,vue 來體驗(yàn)一下。那就入坑啦。nodejs,npm,webpack什么的走起。。。ps,幸虧現(xiàn)在webpack一家獨(dú)大了。之前前端自動(dòng)化工具更多呢。gulp、fis 什么鬼的。
最后
前端切記不要浮躁,比如“暫時(shí)不要提供什么框架,模板引擎”,這就是很正確的,只要把 js 的原型鏈、閉包、作用域、異步、事件、dom 全部搞清楚,用什么框架都不慫。那就是,大道直至本心,飛升有望矣。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán),成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu),是中國一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺(tái)面向?qū)ο箝_發(fā)經(jīng)驗(yàn),技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。