前端模块化线下总结+新工作知识点小结

1-模块化

上上周六在杭州参加了线下关于前端模块化的专场活动，也就是8/19号吧。由于最近换了新的环境，工作比较忙，无暇顾及一些别的东西，也没能及时复盘，现在算是一个小小的总结吧。活动很不错，没想到可以参加掘金的线下活动，算是增长一下见识了。说一下我的泛泛的感受吧：第一次见这么多开发人员相聚，不管是后端还是前端同行吧，见到这么多开发我还是有一点点激动的，对于参会人员两个会议室竟然都没放下，后面来的小伙伴都站在会议室；对于讲解的老师，真的全是大佬啊，高手云集的感觉。武林盟友全都是高手的感觉；再一个就是对于前端工程化也有了新的认识，对于活动中请来的大佬真的是既仰望又崇敬，对于活动中如何渐进式推进前端工程化，我从中学习了一些我平时能接触到的东西。从下面几个小的方面认识一下：

1.1-关于微前端（前端工程化）

先贴图吧，大佬的ppt，会议现场

从参加活动回去并没有很大的感触，但是看到群里大家的总结那么优秀，我貌似觉得也应该回顾一下这次活动我收获到了什么。 周末就一直在看群里分享的总结，看官方的总结看官方发的文章。周一到公司温习了一下微前端的知识，总结了一些知识点： a:微前端概念 b:三大原则；优势；实现微前端的方式 c:微前端架构的分类（sing-spa;qiankun;Micro-app;Module Federation） d:微前端沙箱 （具体的我发不出来链接哈哈哈，因为我在topora文档写的笔记，需要可私发） 微前端在活动中，尤毅老师也有提到，我实际开发中后台项目中也有用到过，所以印象深刻。不仅仅是微前端，关于低代码我也有了解过，前端开发中是一种可以快速提高开发效率的方案。大佬们会议上有提到这个，我没总结，直接贴图吧 低代码2：

1.2-关于工程化

贴图：尤老师的总结。 以下是我对工程化的小的理解： 前端工程化是使用软件工程的方法来解决前端的开发流程中模块化、组件化、规范化、自动化的问题，其主要目的为了提高效率和降低成本。

1.2.1-为什么要前端工程化 eb业务日益复杂化和多元化，现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。代码量可能从以前的千行到如今的万行，甚至十万行。人数从一个人变成了N个一起协作开发。所以在业务上，我们要去思考这些复杂和多元的场景，而产生的问题，如：

• 如何扩展javascript、html、css本身的语言能力
• 如何进行高效的多人协作
• 如何解决功能复用和变更问题
• 如何保证项目的规范性
• 如何实现重复的劳动简单化

1.2.2-工程化我也问了一下AI，它给出的基本概念如下：

前端工程化是指在前端开发过程中，利用工具、流程和方法来提高开发效率、代码质量和团队协作的一种实践。它包括了多个方面，如模块化开发、自动化构建、代码规范、性能优化、自动化测试等。

具体来说，前端工程化可以包括以下几个方面：

1. 模块化开发：使用模块化的方式组织代码，将功能拆分成独立的模块，提高代码的可维护性和复用性。常见的模块化规范有CommonJS和ES6模块。

2. 自动化构建：使用构建工具（如Webpack、Gulp、Grunt等）自动化处理前端资源文件（如HTML、CSS、JavaScript），包括文件压缩、合并、打包、版本管理等，减少手动操作，提高开发效率。

3. 代码规范：制定统一的代码规范，如命名规范、缩进规范、注释规范等，通过工具（如ESLint、Prettier等）进行静态代码检查，保证团队成员的代码风格一致，并提高代码质量。

4. 性能优化：针对前端性能进行优化，包括减少HTTP请求数量、减小文件体积、优化渲染性能等。可以使用工具（如Webpack的代码分割、图片压缩工具等）和优化策略（如懒加载、预加载、缓存等）来达到优化目的。

5. 自动化测试：通过自动化测试工具（如Jest、Mocha、Karma等）编写和运行前端单元测试、集成测试和端到端测试，保证代码质量和功能的稳定性。

通过前端工程化的实践，可以提高前端开发的效率和质量，减少重复劳动，降低维护成本，并促进团队协作。

通过上面的理解，不难想到前端模块化跟微前端或者低代码就很好的能够连接起来。 贴图中后台管理：

尤老师总结：juejin.cn/post/727080...

2-基于 WebAssembly 打造一个纯浏览器上的POSIX 运行环境

这个我并没有很深的去了解，所以各位请看官文吧：juejin.cn/post/727080...

juejin.cn/post/727079...

3-基础架构中后台提效之路

会议中有提到中后台的背景起源，以及中后台项目中会遇到的问题，最后的圆桌会议也非常棒。贴图吧还是。

最后借用一个大佬的总结：

在当前的前端领域，深入业务对于前端开发人员来说是非常重要的。通过深入理解业务需求、业务流程和用户行为，前端同学可以更好地设计和实现与业务紧密结合的前端解决方案。包括更好地理解用户需求，优化用户体验，以及与后端和其他团队进行有效的协作。

同时，深入整个软件的研发链路也是前端开发人员需要去尝试的方向。这涉及到与其他开发团队（如后端开发、测试、运维等）紧密合作，参与系统架构设计、性能优化、安全性等方面的工作。通过扩展技术视野和参与更广泛的交流使得前端工程化的链路可以延伸到整个软件研发链路中。

从业务中发展自身的价值，并积极参与整个软件的研发链路，通过深入理解业务需求、与其他开发团队紧密合作以及持续学习和掌握前沿技术来实现。这样的发展路径将使前端开发人员在职业发展中更具竞争力，并为团队和项目的成功做出更大的贡献。也是提高未来前端自身竞争力的手段之一。

3-关于近期项目中遇到的问题小结

1-echarts重组横向柱状图，效果图如下

项目需求要这种，之前没有在echarts图上重组或者创新过，当我看见这个效果时候并没有思路，查了资料也花费了一些时间，找到了这个柱状图的关键： 1-首先是拿到最基础的柱状图，通过修改

 将x,Y轴的type值修改，交换即可将基本柱状图修改成横向柱状图
   xAxis: [
          { gridIndex: 0, show: false, max: 100 },
          { gridIndex: 1, show: false, max: 100 },
          { gridIndex: 2, show: false, max: 100}
        ],

        yAxis: [
          {
            type: "category",
            data: xData,
            gridIndex: 0,
            show: true
          },
          {
            type: "category",
            data: xData,
            gridIndex: 1,
            show: false
          },
          {
            type: "category",
            data: xData,
            gridIndex: 2,
            show: false
          }
        ],
 

2-同样在series中进行新增两个属性

series: [
  {
   xAxisIndex: 0,
   yAxisIndex: 0
  },
 {
   xAxisIndex: 1,
   yAxisIndex: 1,
  },
{
   xAxisIndex: 2,
   yAxisIndex: 2,
  },
]

剩下的就是基础配置了，关键代码都已经贴上，这个方法是通过一个好心掘友提供思路跟代码得到的方法，将掘友提供的代码总结如下

其实也有另外一种方式进行解决，总体思路就算隐藏双数的柱状图，设置柱状图不显示，并且赋值跟前一个单数柱状图数据要相关，通过计算数值进行实现，较麻烦点。如下： 需求：假定是需要展示三个柱状图数据，并且设置为1，3，5柱展示，我就设置2，4柱状图为不显示 1-设置x,y轴交换type设置的方式

    xAxis: {
            type: "value",
            //此处设置的属性跟正常需要一样的属性。
            xxxx:xxxx
            ....
            }
            
       yAxis: {
           
            type: "category",
            //同上
            
           }
            
    

2-series属性中设置5个值

      series: [
        {           
         type: "bar",
         name:'1',
         
         
         },
           {
                      name:'undefined',
                      type:'bar',
                      stack:'total',
                      data:[],   //设置空值
                
                      itemStyle:{
                          color:'rgba(255,255,0,0)'   //柱状图设置为透明色,
                      },
                  },
              {
              //要显示的柱子，设置如柱子 name:'1',
              
              },
               {
               //设置柱子同上  name:'undefined',
               
               },
                {
                  //要显示的柱子，设置如柱子 name:'1',
                },
      
      
      ]

以上属性如果设置有不对的地方可能会出现如下情况

好的，不着急，那么就是需要从series中的数据data属性下手

  series: [
        {           
        name:'undefined',
       type:'bar',
       data:此时要设置的数据要从上一个数据-固定的max值=此时的data数据，就可以实现开头数据        是同一个起点。
         
         
         },

3-关于echarts中设置的提示框也需要重组，根据需要可以修改属性tooltip中的函数

   tooltip: {
            backgroundColor: "rgba(0,0,0,0.5)",
            //设置边框颜色transparent
            borderColor: "transparent",
            // 设置文字颜色
            textStyle: {
              color: "#fff",
            },
            trigger: "axis",
            formatter: function (params) {
              // console.log("查看折线数据==",params)
              return `
            <div>${params[0].name}</div>
            <div>
            <a style="color:#a72020">●</a>
            <a style="color:#fff">${d}|nmv:${params[0].value}</a>
            </div>
            <div>
            <a style="color:#255461">●</a>
            <a style="color:#fff">${d}|unit Price:${params[1].value}</a>
            </div>
            <div>
            <a style="color:#5ab5ce">●</a>
            <a style="color:#fff">${d}|Market Share:${params[2].value + "%"}</a>
            </div>
            
            `;
            },
          },

我们是需要设置灰色透明度0.5的背景色，文字颜色为白色，提示内容也是项目要求的内容所以formatter函数内容可根据实际修改。

3.1-项目中数据处理问题2

1-使用js函数将数据中的千分位去掉 数据源.replace(/,/g, "") 2-使用js将浮点数转化成整数 parseInt(数据源)

3-处理好的数据进行保留一位小数 数据源.toFixed(1)

4-用于将当前对象以字符串值的形式返回 ，该字符串的格式适合当前宿主环境的当前区域设置。由于所有的对象都"继承"了Object的对象实例，因此几乎所有的实例对象都可以使用该方法。此方法返回的结果都为 String类型的；

数据源.toLocaleString()