fecomponent bass 组件依赖关系及修改注意事项

Showjoy fecomponent 组件依赖关系

由于bass组件中依赖关系复杂,整理了下表。大家注意在修改组件时,最好对应此此依赖关系,依赖关系出现问题。

例如:修改 bass 组件时,如果修改是不兼容的或者是bug修复时,要注意查看第五栏 [被依赖组件名] ,里面所有的组件都要进行依赖版本信息更新。

其中归属类别只是用来区分是第三方插件还是尚庄自己的组件库,并无太大意义。

各组件最新版本及依赖关系一览表

| 组件名 | 归属类别 | 最新版本号 | 依赖组件 | 被依赖组件名 | | :---- | :---- | :----:| :----| :----| | bass | bass | 0.0.4 | | bass-util-common-util
bass-editor-comment-editor
bass-editor-commentreply-editor
bass-editor-mail-editor
bass-editor-topic-editor
bass-editor-topicreply-editor
bass-editor-trade-editor
bass-editor-tradereply-editor
bass-widget-action
bass-widget-ajaxdel
bass-widget-cart
bass-widget-feedback
bass-widget-message
bass-widget-postoffice
bass-widget-reader
bass-widget-sensefilter
bass-widget-sidebar
bass-widget-suggest
bass-widget-trynotice
bass-widget-uploader
bass-widget-verification | | bass-ui-carousel | bass-ui | 0.0.8 | jqueryui | | | bass-ui-dialog | bass-ui | 0.0.3 | jqueryui
textfocus | bass-editor-commentmini-editor
bass-editor-mail-editor
bass-editor-topic-editor
bass-editor-topicreply-editor
bass-editor-trade-editor
bass-editor-tradereply-editor
bass-widget-catmenu
bass-widget-feedback
bass-widget-message
bass-widget-postoffice
bass-widget-reader
bass-widget-trynotice
bass-widget-verification | | | bass-ui-gallery | bass-ui | 0.0.3 | jqueryui | | | bass-ui-menu | bass-ui | 0.0.3 | jqueryui | bass-widget-catmenu | | bass-ui-rating | bass-ui | 0.0.3 | jqueryui | | bass-ui-slider | bass-ui | 0.0.3 | jqueryui | bass-widget-sensefilter | | bass-util-common-util | bass-util | 0.0.6 | bass | bass-editor-commentreply-editor
bass-editor-topic-editor
bass-editor-topicreply-editor
bass-editor-trade-editor
bass-editor-tradereply-editor
bass-widget-action
bass-widget-ajaxdel
bass-widget-sensefilter
bass-widget-verification | | bass-util-cookie-util | bass-util | 0.0.3 | | | bass-util-form-util | bass-util | 0.0.2 | | bass-editor-comment-editor
bass-editor-commentmini-editor
bass-editor-commentreply-editor
bass-editor-mail-editor
bass-editor-topic-editor
bass-editor-topicreply-editor
bass-editor-trade-editor
bass-editor-tradereply-editor | | bass-util-image-util | bass-util | 0.0.1 | | bass-editor-comment-editor
bass-editor-commentmini-editor | | bass-util-multiline-util | bass-util | 0.0.1 | | | bass-util-share-util | bass-util | 0.0.1 | | bass-widget-sensefilter | | bass-util-time-util | bass-util | 0.0.1 | | | bass-editor-less | bass-editor-less | 0.0.2 || | bass-editor-comment-editor | bass-editor | 0.0.9 | jqueryui
bass
bass-util-form-util
bass-util-image-util
bass-editor-richtext-editor | | bass-editor-commentmini-editor| bass-editor | 0.0.7 | bass-ui-dialog
bass-util-form-util
bass-util-image-util
bass-editor-richtext-editor| | bass-editor-commentreply-editor | bass-editor | 0.0.7 | textfocus
bass
bass-widget-moreviews
bass-util-common-util
bass-util-form-util | | bass-editor-mail-editor | bass-editor | 0.0.6 | bass-ui-dialog
bass
bass-editor-richtext-editor
bass-util-form-util | bass-widget-message | | bass-editor-richtext-editor | bass-editor | 0.0.3 | bass-widget-uploader | bass-editor-topic-editor
bass-editor-topicreply-editor
bass-editor-trade-editor
bass-editor-tradereply-editor | | bass-editor-topic-editor | bass-editor | 0.0.6 | bass-ui-dialog
bass
bass-editor-richtext-editor
bass-util-form-util
bass-util-common-util | | bass-editor-topicreply-editor | bass-editor | 0.0.7 | bass-ui-dialog
bass
bass-editor-richtext-editor
bass-util-form-util
bass-util-common-util | | bass-editor-trade-editor | bass-editor | 0.0.6 | bass-ui-dialog
bass
bass-editor-richtext-editor
bass-util-form-util
bass-util-common-util | | bass-editor-tradereply-editor | bass-editor | 0.0.6 | bass-ui-dialog
bass
bass-editor-richtext-editor
bass-util-form-util
bass-util-common-util | | bass-widget-less | bass-widget-less | 0.0.2 || | bass-widget-action | bass-widget | 0.0.3 | bass
bass-util-common-util | | bass-widget-ajaxdel | bass-widget | 0.0.3 | bass
bass-util-common-util | | bass-widget-amountinput | bass-widget | 0.0.1 | | | bass-widget-backtop | bass-widget | 0.0.1 | | | bass-widget-cart | bass-widget | 0.0.4 | bass
knockout
bass-widget-loading | | bass-widget-catmenu | bass-widget | 0.0.7 | bass-ui-dialog
bass-ui-menu | | bass-widget-clipboard | bass-widget | 0.0.2 | zeroclipboard | | bass-widget-customnotice | bass-widget | 0.0.1 | | | bass-widget-drop | bass-widget | 0.0.2 | | | bass-widget-feedback | bass-widget | 0.0.4 | bass-ui-dialog
bass | | bass-widget-infscroll | bass-widget | 0.0.3 | jquery-infinite-scroll | | bass-widget-infscrolllist | bass-widget | 0.0.3 | jquery-infinite-scroll
jquery-isotope | | bass-widget-loading | bass-widget | 0.0.2 | | bass-widget-moreviews
bass-widget-postoffice
bass-widget-reader
bass-widget-sensefilter | | bass-widget-message | bass-widget | 0.0.6 | bass-ui-dialog
bass
bass-editor-mail-editor
knockout | | bass-widget-moreviews | bass-widget | 0.0.2 | bass-widget-loading | | bass-widget-postoffice | bass-widget | 0.0.4 | bass-ui-dialog
bass
knockout
bass-widget-loading | | bass-widget-reader | bass-widget | 0.0.5 | bass-ui-dialog
bass
knockout
bass-widget-loading | | bass-widget-sensefilter | bass-widget | 0.0.4 | jquery-ui-touch-punch
knockout
ajaxqueue
bass-ui-slider
bass-widget-loading
bass
bass-util-common-util
bass-util-share-util | | bass-widget-sidebar | bass-widget | 0.0.5 | bass | | bass-widget-suggest | bass-widget | 0.0.4 | bass | | bass-widget-trynotice | bass-widget | 0.0.4 | bass-ui-dialog
bass | | bass-widget-uploader | bass-widget | 0.0.3 | bass
jqueryui
xiuxiu | | bass-widget-verification | bass-widget | 0.0.4 | bass-ui-dialog
bass
jquery-validation
bass-util-common-util | | ajaxuploader | plugin | 0.0.1 | | | art-template | plugin | 0.0.2 | | | chart | plugin | 0.0.1 | | | cookie | plugin | 0.0.1 | | | countdown | plugin | 0.0.6 | | | detect-ua | plugin | 0.0.1 | | jswebview | | dialog-event | plugin | 0.0.2 | | | drop-load | plugin | 0.0.2 | | | elevator-event | plugin | 0.0.2 | | | fastclick | plugin | 0.0.3 | | | h5-slider-banner | plugin | 0.0.1 | | | hammer | plugin | 0.0.1 | | | jcrop | plugin | 0.0.1 | | | jqform | plugin | 0.0.2 | | | jqtransform | plugin | 0.0.2 | | | jquery-ajaxqueue | plugin | 0.0.1 | | | jquery-city-select | plugin | 0.0.1 | | | jquery-fullpage | plugin | 0.0.1 | | | jquery-infinite-scroll | plugin | 0.0.1 | | | jquery-isotope | plugin | 0.0.1 | | | jquery-json | plugin | 0.0.1 | | | jquery-mcustomscrollbar | plugin | 0.0.2 | | | jquery-mousewheel | plugin | 0.0.1 | | | jquery-placeholder | plugin | 0.0.1 | | | jquery-raty | plugin | 0.0.1 | | | jquery-scrolld | plugin | 0.0.1 | | | jquery-ui-touch-punch | plugin | 0.0.1 | | | jquery-validation | plugin | 0.0.1 | | | jquery-zaccordion | plugin | 0.0.1 | | | jqueryui | plugin | 0.0.7 | | | jqueryui-less | plugin-less | 0.0.2 || | jswebview | plugin | 0.0.6 | zepto-callbacks
zepto-deferred
detect-ua | | juicer | plugin | 0.0.2 | | | knockout | plugin | 0.0.1 | | | lazyload | plugin | 0.0.1 | | | mock | plugin | 0.0.1 | | | onebyone | plugin | 0.0.1 | | | raphael | plugin | 0.0.5 | | | say | plugin | 0.0.16 | withcss | | textfocus | plugin | 0.0.1 | | | wait-for-start | plugin | 0.0.2 | | | withcss | plugin | 0.0.4 | say | | xiuxiu | plugin | 0.0.1 | | | zepto-callbacks | plugin | 0.0.3 | | jswebview | | zepto-city-select | plugin | 0.0.6 | | | zepto-countdown | plugin | 0.0.1 | | | zepto-deferred | plugin | 0.0.2 | | jswebview | | zepto-fullpage | plugin | 0.0.3 | | | zeroclipboard | plugin | 0.0.1 | |

less 样式组件使用

原svn上portal工程里的less目录下的bass样式共整理成2个样式组件: bass-editor-less

bass-widget-less,在git上的fecomponent组里。这2个组件只是纯粹的样式组件,里面只包含less,并无对应的js。

在进行portal工程迁移时,文件处理需要注意以下几项:

  1. 原less文件中有导入目录为"bass/widget/XXX"的,若XXX中带有editor-,则在js中引入bass-editor-less组件,否则在js中引入bass-widget-less组件,然后将less中导入此目录的代码块删除;

  2. 原less文件结构中的common目录中的文件,根据各自负责的项目实际需要进行处理:

比如user-p工程里,有两个页面使用了common中的register-form.less文件,那么将register-form放到user-p工程的"src/components"目录下,工程里pages下面的less文件直接引components里的文件。(注意componless中的less引入mixins和variables文件的路径。)

注意:common中有两个文件(list.less 和 topic.less)引入了widget里面的less文件。针对这样的less文件,需要在页面业务逻辑中的js中引入bass-widget-less 或 bass-editor-less组件,再将less文件中引入widget样式的代码块删除。

以spuList 页面为例:

  • list.less文件放到components目录下,并检查import中引入mixins和variables的路径;

  • 在pages下的spuList.js里引入bass-widget-less 和 bass-editor-less组件;

  • 将components/list/list.less 文件中导入XXX/bass/widget/XXX 的代码块注释。

以上需要注意避免在js中多次引入相同的组件,在进行less文件处理时,先检查js中是否已经存在该组件再确认是否引入。建议在每个page工程里,先处理less文件,针对less文件中样式依赖进行js处理。

米奇

继续阅读此作者的更多文章