zoukankan      html  css  js  c++  java
  • 如何用文件夹去管理你的代码?

    导读:
       如果你的项目里面有十几万行代码你怎么去维护你的代码?你可以把你经常操作的文件放到哪里?如果不能怕代码你可以清晰定位你代码的位置吗?
    如果让你修该一个JS的话,可以马上定位到吗?如果去更新服务器代码不给路径,你能定位到吗?那么我希望当你看完这篇文章的时候,可以解决你
    下个项目的文件结构。

        项目应用背景:数据请求全部要求是:HTML+JS+XML不允许使用VS自带的用户控件,最主要原因是为了兼容一套以后的JAVA服务器端

         刚开始写代码的时候,就听说过用文件夹去管理你的代码,使其尽可能的明确的去管理你的代码,定位你代码的位置,下面是自己在可发一个项目的文件夹结构。
    自己业余时间吓画的,有点乱,但是看上去是不是很像一棵树呀?我们看见的是一棵很像树的文件夹结构


    第一层:根文件夹
      一般会起个英文的比较简洁的描述当前项目的名字作为当前的项目名称。
     
    总结:一般我们会把一个项目放到一个文件夹里面,很少有几个文件夹同时存在,目的是为了便于管理。


    第二层:树上挂的是系统里面所有的系统模块文件夹
     基本的核心的代码:底层跟数据库打交道的链接不同数据库,以及提供出来的操作数据库的方法后台代码
    组件的开发:树呀,列表呀主要负责系统里面树呀列表的产生的后台代码
    还有一些个性化的开发:日志呀,消息呀,组织结构呀等等
    WEB:展示层信息

    总结:这层文件夹是系统里面几个大模块的分类,一般存放的是系统里面最抽象的。


    第三层树:WEB文件夹结构
    组件服务:树,列表等暴露出来的服务页面
    常用JS:JQ等常用类库分下类,放到这里,然后把所有的JS以.IN的文件提供出去,别的地方只要引用.IN的文件就OK了。
    个性化应用模块:主要是第二层的个性化的开发(日志呀,消息呀,组织结构呀等等)的应用代码

    总结:如果你认为可以放到这个层次的还会有很多,当然只要你认为在某种逻辑上可以讲的通,当然一些测试的代码也可以放一个新的
    文件夹里面,DEMO也可以


    个性化服务模块的第四层:日志代码的文件夹结构【核心】
    XML:里面写日志模块的当前日志模块的所有配置,功能项的注册呀,功能项权限的注册呀,总之只要是以XML进行配置的都可以写到这里
    HTML:日志所有的HTML页面,绝对不让写JS的,但是可以加进来JS引用,以及当前HTML向外部提供的服务
    JS:日志模块的所有JS文件,以及当前模块向外部提供的JS
    Control:处理程序,处理所有的请求

    总结:当然消息组织结构开发的文件组织结构等所有的模块也是这样的(只要是个性化服务),为什么这么设计,可以一目了然,可以快速定位到你的JS写在那里,
    html写到哪里,同时把权限管理写道这里,权限管理只要读没个模块下这个文件就行了。

        如果你是个程序开发人员仅仅只是做用户控件开发的,那么我认为第四层是个很经典的文件结构,你如果要开发一个新模块,首先是创建4个文件夹,然后不同的里 面写不同代码,当然你可以先写在一起,最好再COPY过去(代码重构嘛),画页面,然后写后台代码。这也算是种比较好的文件管理方式吧。

    小结:我们回到刚刚开头的问题:"如果让你修该一个JS的话,可以马上定位到吗?"


       那么如果你的代码是这样被层层文件夹管理的, 那么很容易吧,没必要去HTML里面无目的找,或者你说我可以去整个文件夹去搜索,OK,好方法,但是这样会搜

    很多个同样名称的方法,还的以个个定位,如果夹足够大的,那么等时间也是件很头痛事情,这样做其实还有个好处,当更新一个模块的代码的时候,可以很快的发

    布,单个模块可以定期发布,只要你提供的接口文件是没问题的,也是为了解决单个模块发布的问题,而不是一次性的那平台所有代码。还有一点就是命名一定要有

    意义,这样当你在找文件的时候不会那么乱。


       就这样我们通过一个一个文件夹管理一个文件夹,我们在这棵导航文件夹的树上可以精确的定位到自己在那里呢,而不是头大不知道那是那,以上只是自己在开发的时候感
    受到的一个小小的方法吧,分享给大家,谁如果有什么好的想法,可以留言给我,谢谢!!
  • 相关阅读:
    vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You
    Vue2.x是怎么收集依赖的
    只绑定一次事件的简单方法
    Proxy是怎么做数据劫持的
    使用babel进行打包
    使用npm link进行模块调试
    Webpack 热加载插件的实现原理
    Vue 服务端渲染的数据流
    Vue的生命周期钩子
    Linux定时任务
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2074785.html
Copyright © 2011-2022 走看看