前端模塊化結(jié)構(gòu)如何拆分

channg 發(fā)布于2019-08-23 14:21 / 1092人閱讀

摘要：模塊化結(jié)構(gòu)將復(fù)雜的程序拆分成不同的文件夾或者文件不同的模塊即獨(dú)立又可以相互關(guān)聯(lián)如何拆分具體的拆分規(guī)則針對不同的項(xiàng)目也不一樣，這里列出一點(diǎn)建議，更主要的還是有自己的一個(gè)規(guī)范，物以類聚將具有相同特性的可以拆分到一起，比如在一個(gè)電商網(wǎng)站項(xiàng)目中對文

模塊化結(jié)構(gòu)

將復(fù)雜的程序拆分成不同的文件夾或者文件
不同的模塊即獨(dú)立又可以相互關(guān)聯(lián)

如何拆分

具體的拆分規(guī)則針對不同的項(xiàng)目也不一樣，這里列出一點(diǎn)建議，更主要的還是有自己的一個(gè)規(guī)范，

物以類聚
將具有相同特性的可以拆分到一起，比如在一個(gè)vue電商網(wǎng)站項(xiàng)目中對文件夾的拆分

pages 源文件入口
    |-list 列表模塊(可能包括普通列表頁，閃購列表) 都可以認(rèn)為是列表頁屬于一類
        |-list 普通列表頁
            |- components 組件
            |- router 路由
            |- store vuex
            |- index.js 打包js
        |-其它頁面

按功能拆分

 在上邊的結(jié)構(gòu)劃分中，普通列表頁有組件，路由，vuex,還有打包入口，這些都可以看成模塊，每個(gè)模塊各自負(fù)責(zé)不同的功能，
        components 負(fù)責(zé)存放普通列表頁多帶帶擁有的組件
        router 負(fù)責(zé)路由
        store 狀態(tài)
        index.js 等同于普通列表頁容器組件
 最終這些不同功能的模塊組合成了一個(gè)完整的頁面結(jié)構(gòu)

這里只說了兩種簡單的拆分思想給大家做個(gè)入門，真正項(xiàng)目拆分過程其實(shí)也是這樣，搞清楚自己的項(xiàng)目，
文件結(jié)構(gòu)如何拆分真正還是取決于自己，當(dāng)然可以參考業(yè)界規(guī)范，一般情況下拆了就比不拆強(qiáng)，所以大家可以多嘗試

云服務(wù)器 GPU云服務(wù)器如何拆分?jǐn)?shù)據(jù) js如何拆分單元格前端模塊化 phpcms模塊結(jié)構(gòu)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100480.html

相關(guān)文章

如何降低前端開發(fā)的復(fù)雜度

摘要：我們作為前端開發(fā)，都應(yīng)該具有這樣的能力。那么如何才能降低業(yè)務(wù)開發(fā)的復(fù)雜度呢細(xì)分組件都說模塊化開發(fā)，其實(shí)在，這些思想規(guī)范之前就已經(jīng)有模塊化開發(fā)的規(guī)范了，雖然標(biāo)準(zhǔn)從然后隔了年才有了，在那年基本都是函數(shù)式開發(fā)，一切皆函數(shù)。優(yōu)秀的程序員總是能優(yōu)雅的組織自己的代碼，清晰的編寫思路，合理的組織結(jié)構(gòu)劃分，從小的功能組件，到大的模塊結(jié)構(gòu)，都能通過合理的巧妙的搭配，不僅能化復(fù)雜為簡單，更能提升代碼運(yùn)行...

wushuiyong 2019-08-29 15:15 評論0 收藏0
如何降低前端開發(fā)的復(fù)雜度

摘要：我們作為前端開發(fā)，都應(yīng)該具有這樣的能力。那么如何才能降低業(yè)務(wù)開發(fā)的復(fù)雜度呢細(xì)分組件都說模塊化開發(fā)，其實(shí)在，這些思想規(guī)范之前就已經(jīng)有模塊化開發(fā)的規(guī)范了，雖然標(biāo)準(zhǔn)從然后隔了年才有了，在那年基本都是函數(shù)式開發(fā)，一切皆函數(shù)。優(yōu)秀的程序員總是能優(yōu)雅的組織自己的代碼，清晰的編寫思路，合理的組織結(jié)構(gòu)劃分，從小的功能組件，到大的模塊結(jié)構(gòu)，都能通過合理的巧妙的搭配，不僅能化復(fù)雜為簡單，更能提升代碼運(yùn)行...

xorpay 2019-08-26 11:52 評論0 收藏0
如何降低前端開發(fā)的復(fù)雜度

摘要：我們作為前端開發(fā)，都應(yīng)該具有這樣的能力。那么如何才能降低業(yè)務(wù)開發(fā)的復(fù)雜度呢細(xì)分組件都說模塊化開發(fā)，其實(shí)在，這些思想規(guī)范之前就已經(jīng)有模塊化開發(fā)的規(guī)范了，雖然標(biāo)準(zhǔn)從然后隔了年才有了，在那年基本都是函數(shù)式開發(fā)，一切皆函數(shù)。優(yōu)秀的程序員總是能優(yōu)雅的組織自己的代碼，清晰的編寫思路，合理的組織結(jié)構(gòu)劃分，從小的功能組件，到大的模塊結(jié)構(gòu)，都能通過合理的巧妙的搭配，不僅能化復(fù)雜為簡單，更能提升代碼運(yùn)行...

LinkedME2016 2019-08-02 10:19 評論0 收藏0
基于SpringCloud的Microservices架構(gòu)實(shí)戰(zhàn)案例-架構(gòu)拆解

摘要：服務(wù)拆分具體拆分到多細(xì)，業(yè)內(nèi)沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。全部模塊基于，采用進(jìn)行項(xiàng)目管理。比較常見的做法時(shí)，每個(gè)子服務(wù)模塊中獨(dú)立一個(gè)模塊，存放實(shí)體及對外的接口。自第一篇《基于SpringCloud的Microservices架構(gòu)實(shí)戰(zhàn)案例-序篇》發(fā)表出來后，差不多有半年時(shí)間了，一直也沒有接著拆分完，有如讀本書一樣，也是需要契機(jī)的，還是要把未完成的工作做完，雖然并不是什么經(jīng)典應(yīng)用，還是有必要將si...

gghyoo 2019-08-15 15:15 評論0 收藏0
權(quán)限設(shè)計(jì)的雜談

摘要：權(quán)限設(shè)計(jì)的雜談這篇文章的定位，不是宣傳某個(gè)框架，僅僅之是梳理一下有關(guān)權(quán)限方面的一些想法和最近項(xiàng)目中的一些探索過程。而這兩者的取舍則是有設(shè)計(jì)人員決定的。數(shù)據(jù)抽象原則最小特權(quán)劃分從某個(gè)程度上來說決定了控制的對象，而數(shù)據(jù)抽象原則是是決定了操作。權(quán)限設(shè)計(jì)的雜談這篇文章的定位，不是宣傳某個(gè)框架，僅僅之是梳理一下有關(guān)權(quán)限方面的一些想法和最近項(xiàng)目中的一些探索過程。我們主要想解決一下問題。什么...

yck 2019-08-19 10:53 評論0 收藏0