荣耀彩票代理

IT技术互动交流平台

到底是什么是前端工程化 模块化 组件化

作者:碧霄中游  发布日期:2016-12-19 20:32:14

引言

提到前端往往很多人的映像就是入门简单,HTML、CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化、组件化、模块化、MVC这些“高大上”的词汇云里雾里。
荣耀彩票代理 本文用最简单的语言介绍一下我对工程化、组件化、模块化的理解,面向的对象是前端新手,所以我用最好理解的方式去说,难免会有很多“幼稚”的表述,请大神们轻喷。

荣耀彩票代理BENWENZHONGDIANJIESHAOSIXIANGBUSHEJIGUODUOZHIJIEDEJISHU,RUGUOXINSHOUTONGXUEMENLIJIELESIXIANGYIHOUKEYIDUODUOBAIDU、GUGEQUXUEXIJUTIDEJISHU,WOYEHUIZAIHOUXUDEWENZHANGZHONGZUOYIXIEJIESHAOHEDAJIAYIQIXUEXI。

前端工程化

荣耀彩票代理HAIJIDEWOZAIZUIZAOQIXIEQIANDUANDAIMASHI,WANGWANGYIGEYEMIANJIUSHIYIGEWENJIANGAODING,HTML/CSS/JSQUANBUXIEZAIYIQI,HOULAIZHIDAOYINGGAIBAJIEGOU、YANGSHIHEDONGZUOFENLI,WOXIANGZHEISHIWOJIECHUDAOZUIZAODEQIANDUANGONGCHENGHUADESIXIANGLE,SUOWEIQIANDUANGONGCHENGHUAWORENWEIJIUSHI

荣耀彩票代理JIANGQIANDUANXIANGMUDANGCHENGYIXIANGXITONGGONGCHENGJINXINGFENXI、ZUZHIHEGOUJIANCONGERDADAOXIANGMUJIEGOUQINGXI、FENGONGMINGQUE、TUANDUIPEIHEMOQI、KAIFAXIAOLVTIGAODEMUDE.

工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术),这样说还不够具体,举个例子来说:

YAOGAIYIDONGDALOU,JIARUWOMENBUJINXINGGONGCHENGHUADEKAOLIANGNEIJIUSHIYISHANGLAIDIANQIWADAO、ZHUANKUAIJIUKAIGAN,ZHIDAOBADALOULEIQILAI,ZHEIYANGZUOWANGWANGYIWEIZHEZHONGJIANHUICHUXIANCUOWU,YAOTUIDAOZHONGLAIHUOSHIGAIHAOYIHOUJIEGOUYOUWENTIDANYOUBUZHIDAOCHUXIANZAINASHEIDEZERENSHENZHIHUIZAIMOUYITIANHONGRANDAOTA,NEIWOMENRUGUOYONGGONGCHENGHUADESIXIANGQUZUO,JIUHUIXIANHUATUZHI、QUEDINGJIEGOU、QUEDINGYONGLIAOHEYUSUANYIJIGONGQI,LINGWAIXUYAOYONGDAOSHENMEGONGZHONGDUOSHAORENDENGDENG,WOMENHUIXIANDADIJIZAIJIANKUANGJIAZAITIANCHONGQIANGTIZHEIYANGZUIHOUJIANLIQILAIDEGAOLOUCAISHIWENGUDEHEGUIDE,SHENMEDIFANGCHULEWENTIWOMENYENENGZHAODAOYUANTOUHEFUZEREN。

QIANMIANWOSHUOJIECHUZUIZAODEGONGCHENGHUASIWEIJIUSHI“JIEGOU、YANGSHIHEDONGZUOFENLI”,ZAIZHIYOURUOGANGEYEMIANDEXIAOXINGXIANGMUWOMENZHIXUYAOYONGZHEIXIEJIANDANDEZUOFAJIUNENGBAXIANGMUHENHAODEZUZHIQILAI,DANSHIZAIYIGEDAXINGwebXIANGMUZHONGWANGWANGYOUGENGJIAFUZADEJIEGOUHEFEICHANGDUODEYEMIANXUYAOHENDUORENSHENZHISHIDUOGETUANDUIPEIHECAINENGBAXIANGMUZUOWAN,WOMENXUYAOYOUGENGJIAYANJINHEFUZADEGONGCHENGHUASIWEIQUZUZHIJIEGOU。CONGGENGGAOCENGMIANDEXIANGMUZUZHILAIKANWOMENYAOZUOXIANGMUDEGEZHONGGUIFAN、JISHUXUANXING、XIANGMUGOUJIANYOUHUADENGDENG,ZAIDAIMACENGMIANWOMENHAIXUYAOYONGDAOJS/CSSMOKUAIJI、UIZUJIANHUADENGKAIFAFANGSHI。

再用一句通俗的话来概括前端工程化:前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写

前端模块化

QIANMIANWOMENTIDAOZAIZUZHIDAIMADESHIHOUHUIYONGDAOMOKUAIHUAHEZUJIANHUA,DAJIAYINGGAILIJIEDAO,QIANDUANGONGCHENGHUASHIYIGEGAOCENGCIDESIXIANG,ERMOKUAIHUAHEZUJIANHUASHIWEIGONGCHENGHUASIXIANGXIAXIANGDUIJIAOJUTIDEKAIFAFANGSHI,YINCIKEYIJIANDANDERENWEIMOKUAIHUAHEZUJIANHUASHIGONGCHENGHUADEBIAOXIANXINGSHI。

NEIJUTISHENMESHIMOKUAIHUANI,HAISHIJUJIANDANDELIZI,WOMENYAOXIEYIGESHIXIANAGONGNENGDEJSDAIMA,ZHEIGEGONGNENGZAIXIANGMUQITAWEIZHIYEXUYAOYONGDAO,NEIMEWOMENJIUKEYIBAZHEIGEGONGNENGKANCHENGYIGEMOKUAICAIYONGYIDINGDEFANGSHIJINXINGMOKUAIHUABIANXIE,JINENGSHIXIANFUYONGHAIKEYIFENERZHIZHI,TONGLIZAIXIEYANGSHIDESHIHOU,RUGUOWOMENXUYAOMOUZHONGTESHUDEYANGSHI,HUIZAIHENDUODIFANGYINGYONG,NEIMEWOMENYEKEYICAIYONGYIDINGDEFANGSHIJINXINGCSSDEMOKUAIHUA,JUTISHUOLAI,JSMOKUAIHUAFANGANHENDUOYOUAMD/CommonJS/UMD/ES6 ModuleDENG,CSSMOKUAIHUAKAIFADADUOSHIZAIless、sass、stylusDENGYUCHULIQIDEimport/mixinTEXINGZHICHIXIASHIXIANDE,JUTIJISHUDAJIAZIXINGXUEXI。

ZONGTIERYAN,MOKUAIHUABUNANLIJIE,ZHONGDIANSHIYAOXUEXIXIANGGUANDEJISHUBINGQIELINGHUOYUNYONG。

前端组件化

QIANWENZHONGWOMENTIDAOGUO,ZUJIANHUAYESHIGONGCHENGHUADEBIAOXIANXINGSHI,NEIMEDAODISHENMESHIQIANDUANZUJIANHUANI

页面上的每个独立的、可视/可交互区域视为一个组件;
每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;
由于组件具有独立性,因此组件与组件之间可以 自由组合;
页面只不过是组件的容器,负责组合组件形成功能完整的界面;
当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

ZUJIANHUAJIANGYEMIANSHIWEIYIGERONGQI,YEMIANSHANGGEGEDULIBUFENLIRU:TOUBU、DAOHANG、JIAODIANTU、CEBIANLAN、DIBUDENGSHIWEIDULIZUJIAN,BUTONGDEYEMIANGENJUNEIRONGDEXUYAO,QUSHENGFANGXIANGGUANZUJIANJIKEZUCHENGWANZHENGDEYEMIAN。

PS:MOKUAIHUAHEZUJIANHUAYIGEZUIZHIJIEDEHAOCHUJIUSHIFUYONG,TONGSHIWOMENYEYINGGAIYOUYIGELINIAN,MOKUAIHUAHEZUJIANHUACHULEFUYONGZHIWAIHAIYOUJIUSHIFENZHI,WOMENNENGGOUZAIBUYINGXIANGQITADAIMADEQINGKUANGXIAANXUXIUGAIMOUYIDULIDEMOKUAIHUOSHIZUJIAN,YINCIHENDUODIFANGWOMENJISHIMEIYOUHENQIANGLIEDEFUYONGXUYAOYEKEYIGENJUFENZHIXUQIUJINXINGMOKUAIHUAHUOZUJIANHUAKAIFA。

Tag标签:   
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规