zoukankan      html  css  js  c++  java
  • 看菜鸟诉说,构建一个前端生态化的模块组件系统思路

    目录如下:

    1> Scrat webapp框架体系

    2> 我的生态化组件思路

    如果说世界的梦想是:One World,One Dream (同一个世界,同一个梦想).  那么工程师的梦想是:One Project,Code like building block (编码就像搭建积木)  ,这是我yy的哦。

    Scrat的官网http://scrat-team.github.io/#!/modular

    前端开发愿景:工程师希望能像 搭积木 一样开发和维护系统,通过组装模块得到一个完整的系统

    Scrat 现在就可以做到了,现在先来向大家一步步的讲讲Scrat的思想。

    所谓模块化:就是可组合、可分解和更换的单元,这就要求模块本身具有一定的独立性,完整的前端模块化方案需要将js、css和模板维护在一起,保证模块的独立。

    如图1:

       

    Scrat来历:它是UC大导航负责人张云龙,根绝UC业务,针对FIS做的一个定制化前端集成化框架解决方案。

    Scrat中静态资源分成 模块化资源 和 非模块化资源 两类,其中模块化资源还分为 工程模块 和 生态模块 两类。

    如图2:

    • 模块化资源:具有独立性的模块所对应的静态资源。每个独立的模块将自己所需要的js、css、模板、图片等资源放在一起维护,使得模块具备独立性,引用模块的js即可。
      • 工程模块:当前工程所开发的模块。这些模块通常跟业务耦合较高。
      • 生态模块:从 模块生态 下载的模块,属于外部依赖。
    • 非模块化资源:虽然在模块化开发体系内,应该 一切皆模块,但总有不应该成为模块的资源,比如入口页面、模块化框架、页面启动器等。

    我的生态化组件思路

    学习了解了Scrat的思想,我自己也践行的去学习实践了一把:git , webpack ,vue。

    确实可以做成生态化的模块组件系统,这样就可以总结开源了一些我们认为积木化的模块,这个积木模块与业务无关,只是一个空的架子,而它的数据和原料的东西,需要我们自己去填充,感觉这才是我们的世界。

    这种感觉棒棒的、duangduang的。我觉得这才是生态化组件的初衷,开源分享,任何团队都可以分享自己的积木模块到生态。

    框架的标准目录如下:

     

    准备上传到Git的生态化组件模块,感觉棒棒的哦。

    上传到的git账号的仓库中,大家就可以:git clone https://github.com/XXXX/foo.git

    生态化组件:基本思路就是我们可以把项目通用的模块推送到git的仓库上,各个业务的项目如果需要就可以git clone。

    总结:其实这个方案实施的难点在于一般的小公司很难去推动,践行,因为能力水平都一般;但是我觉得可能还需要一个好的大框架去做统一的标准化的项目开发,花时间去做培训指导。其实我自己也水平也就一般,我只是分享下我自己的所见所想。

    今天刚学习了 git 的基本命令,哈哈哈

    1 git init
    2 git config user.name "someone"
    3 git config user.email "someone@someplace.com"
    4 git add *
    5 git commit -m "some init msg"
  • 相关阅读:
    codevs1028 花店橱窗布置
    bzoj1497 [NOI2006]最大获利 (最大闭合权图)
    扩展欧几里得算法总结
    codevs1033 蚯蚓的游戏问题
    bzoj1001狼抓兔子
    CSS3中的选择器
    LESS快速入门
    怎样让老浏览器兼容html5新标签
    http与https差异
    css3中的radius
  • 原文地址:https://www.cnblogs.com/Kummy/p/4439601.html
Copyright © 2011-2022 走看看