Giter VIP home page Giter VIP logo

rocket's People

Contributors

gmuteam avatar miller avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

miller lonjoy zhoumm1008 woodtable zhangshiguang yonglehou imiti

rocket's Issues

ROCKET编码规范

文件命名规范

webapp代码文件主要以js、css、html、图片等格式存在。框架对这些文件的命名有一些约定的规范。

js文件命名

js文件命名，按照js代码命名空间层级给出，举例如下：
common模块，所有js文件命名都遵从rocket.二级命名空间.js的格式，无三级命名空间：

▾ common/
  ▾ webapp-2.0/
    ▾ pageanimations/
        rocket.pageanimation_fade.js
        rocket.pageanimation_simple.js
        rocket.pageanimation_slide.js
      rocket.baseview.js
      rocket.collection.js
      rocket.js
      rocket.model.js
      rocket.pageview.js
      rocket.router.js
      rocket.subview.js

app模块js目录，命名方式同common模块。不过在这里引入了三级命名空间vs，具体如下：

▾ app/
  ▾ js/
      rocket.conf.js
      rocket.helper.js
      rocket.init.js
      rocket.router.vs.js

app模块的page目录，以detailmulticolumn页面为例，其js目录下文件命名遵从rocket.二级命名空间.三级命名空间.js的格式，具体如下：

▾ app/
  ▾ page/
    ▾ detailmulticolumn/
      ▾ js/
        ▾ model/
            rocket.model.detailmulticolumn_pageslider.js
        ▾ view/
            rocket.pageview.detailmulticolumn.js
            rocket.subview.detailmulticolumn_content.js
            rocket.subview.detailmulticolumn_pageslider.js

css、html、tpl文件命名规范

不同于js文件按命名空间方式命名，css、html、tpl的命名更简单一点，因为对于单个页面来讲，这些文件一般只有一个，所以可以直接使用页面的action name来命名。

detaimulticolumn页面的css、html、tpl文件的命名，具体如下：

▾ app/
  ▾ page/
    ▾ detailmulticolumn/
      ▾ css/
          detailmulticolumn.css
      ▾ html/
          detailmulticolumn.html
      ▾ tpl/
          detailmulticolumn.tpl.html

除了页面内部文件的命名规范，还有app级别的文件命名规范，如下例子，全局loading和页面loading，属于产品级别通用模块，按模块名来命名文件：

▾ app/
  ▾ css/
      globalloading.css
      pageloading.css
  ▾ tpl/
      globalloading.tpl.html
      pageloading.tpl.html

为什么要这样命名？

主要解释js文件的命名，js文件之所以选择按命名空间来规范，原因是：

  • 一个页面对应多个js，按命名空间可以较好地避免冲突
  • 命名空间独有的层级组织，使得文件组织一目了然，开发者很容易找到要编辑的文件

为什么最多只有3级命名空间呢？主要考虑命名空间的依赖对文件打包的限制。一、二级命名空间是框架提供的，对这两级命名空间的依赖通过app和commom的模块间依赖很容易实现。而在app模块内，如果引入四级命名空间，那么它对三级命名空间的依赖就需要在文件级别上来解决，比较麻烦，同时也不易于使用FIS的import提供的通配符包含。所以app模块内最多三级命名空间。

命名空间规范

命名空间主要针对js代码。框架的顶级命名空间为app，预定义了6个核心二级命名空间：router, baseview, pageview, subview, model, collection。
common模块最多为二级命名空间，以pageanimation为例，提供的三个切换效果的命名空间如下：

▾ pageanimations/
    rocket.pageanimation_fade.js
    rocket.pageanimation_simple.js
    rocket.pageanimation_slide.js

而不是理所当然的:

▾ pageanimations/
    rocket.pageanimation.fade.js
    rocket.pageanimation.simple.js
    rocket.pageanimation.slide.js

目的是为了减少三级命名空间对二级命名空间的依赖，否则，在文件包含上，就必须保证rocket.pageanimation这个命名空间先于rocket.pageanimation.fade出现，很不易于代码打包。

app模块最多为三级命名空间，以页面navzaker为例：

▾ page/
  ▾ listzaker/
    ▾ js/
      ▾ model/
          rocket.model.listzaker_nids.js
      ▾ view/
          rocket.pageview.listzaker.js
          rocket.subview.listzaker_content.js
          rocket.subview.listzaker_header.js
          rocket.subview.listzaker_pageslider.js

与common模块一样，为了减少命名空间依赖，并不是以下形势，而是用下划线来表示层级关系：

▾ js/
  ▾ model/
      rocket.model.listzaker.nids.js
  ▾ view/
      rocket.pageview.listzaker.js
      rocket.subview.listzaker.content.js
      rocket.subview.listzaker.header.js
      rocket.subview.listzaker.pageslider.js

id-class命名规范

主要针对html和css文件涉及的命名相关的规范。

id命名规范

根元素：                   #wrapper
页面元素：               #页面名称_view
页面子元素：            #页面名称_view_子元素名称
下一级页面子元素：  #页面名称_view_子元素名称_子元素名称

依此类推，例如：

#wrapper
    #detail_view
        #detail_view_header
        #detail_view_content
            #detail_view_content_list

class命名规范

CSS类名与id命名规范类似，区别在于id的分隔符是下划线，CSS类名的分隔符是减号。命名的时候，CSS类名以id为参照，层级与id对应。

根元素：                 .wrapper
页面元素：              .页面名称-view
页面子元素：           .页面名称-view-子元素名称
下一级页面子元素:   .页面名称-view-子元素名称-子元素名称

依此类推，例如：

.wrapper
    .detail-view
    .detail-view-header
    .detail-view-content
        .detail-view-content-list
            .detail-view-content-list-item
                .detail-view-content-list-item-title

实际上，.wrapper, .detail-view这类具有唯一性的节点一般不需要类选择器，直接使用id选择器即可。

id-class命名规范

实际情况中，id和class是混合的，CSS命名的时候，类名以id为参照，层级与id对应，举例如下：

#wrapper
    #detail_view
        #detail_view_content 
            .detail-view-content-list
                .detail-view-content-list-item

其中.detail-view-content-list是动态创建的子页面对应的DOM节点。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.