开发者社区> 跃@sir> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

谈谈对前端组件化,模块化,工程化的理解

简介: 谈谈对前端组件化,模块化,工程化的理解
+关注继续查看

谈谈对前端组件化,模块化,工程化的理解

  • 说到前端都觉得入门很简单,上手快,只需要HTML,CSS,JavaScript就可以上手些项目了,或者在找一些特效,粘贴复制到项目,一个页面引入了大量的js效果,css样式,最后越堆越多,维护起来也麻烦。传统的项目已经满足不了需求了,现在前端生态很繁荣,各种框架,组件的出现,让前端发展很迅速,前端组件化,模块化的出现,让代码更加易维护,性能优化程度更高。

前端工程化

  • 工程化思想就是结构,样式和动作的分离,把重复的工作交给代码来处理,保证质量,统一标准化
  • 确定代码规划,统一代码检查,保证输出的代码标准一致。
  • 代码版本管理工具,git,svn.
  • 持续化集成/持续交付/自动化部署
  • webpack打包集成
  • 代码编译和代码质量管理

前端模块化

  • 前端模块化就像编写代码时,将功能封装在一个个独立的js模块内,然后相互引用,完成整个功能的搭建
  • JavaScript模块规范主要有CommonJS,AMD,CMD,以及es6模块化方案等
    ##### CommonJS

     - Node 应用由模块组成,采用 CommonJS 模块规范。每个文件就是一个模块,有自己的作用域
     1. 基本用法:
       - 暴露模块:module.exports = value或exports.xxx = value
       ```js
         var name = "张三";
         var userName = function (value) {
           return value + name;
         };
         module.exports.name = name;
         module.exports.userName = userName;
       ```
       - 引入模块:require(xxx),如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径
       ```js
         var example = require('./info.js');
         console.log(example.name); // 5
         console.log(example.exports('vue'));
       ```
    
AMD
  -  AMD规范则是非同步加载模块,允许指定回调函数
  1. 基本用法
    - 定义暴露模块:
      ```js
        ddefine(['module1', 'module2'], function(m1, m2){
          return 模块
        })
      ```
    - 使用模块
      ```js
        require(['module1', 'module2'], function(m1, m2){
          使用m1/m2
        })
      ```
CMD
  -  CMD规范专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点
  1. 基本用法 
    - 定义暴露模块
      ```js
        define(function(require, exports, module){
          exports.xxx = value
          module.exports = value
        })
      ```
    - 引入使用模块
      ```js
        define(function (require) {
          var m1 = require('./module1')
          m1.show()
        })
      ```
ES6模块化
  -  ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西
  1. 基本用法
    - 定义方法

      ```js
        var count = 0;
        var add = function (a, b) {
            return a + b;
        };
        export { count, add };
      ```
    - 使用方法
      ```js
        import { count, add } from './index.js';
        function test(ele) {
            ele.textContent = add(11 + count);
        }
      ```
  - 如上例所示,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载
总结
- CommonJS规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的
- AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块
- CMD规范与AMD规范很相似,都用于浏览器编程,依赖就近,延迟执行,可以很容易在Node.js中运行。
- ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

组件化

  • 那什么是组件化呢?我们可以认为组件就是页面里的 UI 组件,一个页面可以由很多组件构成。例如一个后台管理系统页面,可能包含了 Header、Sidebar、Main 等各种组件。

2022920222018244.png

  • 组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构:

components.7fbb3771.png

  • 一个组件又包含了 template(html)、script、style 三部分,其中 script、style 可以由一个或多个模块组成。这样界面功能复杂时候,组件化抽离,代码可以易扩展。易复用
  • 组件化思维的精髓是独立、完整、自由组合。以此为目标,尽可能把设计和开发中的元素独立化,使其具备完整的功能,通过自由组合来构成整个页面/产品。

    ##### 定于一个组件

    • 参考vue方式
    • 当使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的 .vue 文件中,这被叫做单文件组件 (简称 SFC):

        <script>
          export default {
            data() {
              return {
                count: 0
              }
            }
          }
          </script>
      
          <template>
            <button @click="count++">You clicked me {{ count }} times.</button>
          </template>
    • 使用组件

        <script>
          import ButtonCounter from './ButtonCounter.vue'
      
          export default {
            components: {
              ButtonCounter
            }
          }
          </script>
      
          <template>
            <h1>Here is a child component!</h1>
            <ButtonCounter />
          </template>

随着前端技术不断发展,只有不断的学习,巩固基础知识,不断尝试新技术,才能走的更远。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
VM系列振弦采集读取模块激励方法
什么是振弦传感器采集读数模块:指针对振弦传感器的特性而设计的传感器激励、读数模块。具有集成度高、功能模块化、数字接口的一系列特性,能完成振弦 传感器的激励、信号检测、数据处理、质量评估等专用针对性功能,进行传感器频率和温度物理量模数转换,进而通过数字接口实现数据交互。振弦传感器读数模块是振弦传感器与数字化、信息化之间的核心转换单元。
15 0
前端组件化工程化的尝试
组件化。工程化开发逐渐成为前端开发主流方式,下面简单介绍下docker的部署
123 0
谈谈组件化-从源码到理解
谈谈组件化-从源码到理解
86 0
前端工作总结217-理解父子组件
前端工作总结217-理解父子组件
33 0
webgl系列之对光栅化的理解
前言 周末没事的学习了光栅化进一步理解, 从底层去学习,遇到问题才会从容不迫, 并同时把这些知识分享给大家, 如果大家没时间看视频的话,废话不多说, 直接开始吧, 这里先做一个概念的铺垫在3D即将渲染到我们屏幕当中来的时候。而接下来我们要做的是把这个标准立方体绘制到屏幕上,这样才能最终被我们所看见。 不清楚的同学看下这篇文章吧 可视化入门跳转到坐标系转换那里 我们简单看下这张图: 图片 变换过程 而光栅化的过程发生在哪里 ,其实 就是物体通过MVP变换,把摄像机观测的空间压缩成了一个标准立方体。然后将标准的立方体【-,1,】绘制到屏幕上的这些过程 图片 转换 在做这步操作之前,我们首
64 0
谈谈10G SFP+万兆光模块的分类有哪些?
10G SFP+万兆光模块分为10G SFP+双纤光模块、10G SFP+单纤光模块、10G SFP+电口模块以及10G SFP+ CWDM/DWDM 光模块,易天光通信ETU-LINK分别给大家详细介绍这几种产品的规格参数。
978 0
谈谈对前端安全的理解
前端安全问题主要有XSS、CSRF攻击 XSS:跨站脚本攻击 它允许用户将恶意代码植入到提供给其他用户使用的页面中,可以简单的理解为一种javascript代码注入。
1148 0
前端开发——模块化(css模块化开发)
掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成: 1.css模块化 2.html模块化 3.js模块化 模块化开发的优势 1.更好的组织和维护代码 2.按需加载 3.避免命名冲突 css模块化 css模块化编程语言 说到css的编程语言我们就需要了解一下css预处理器,它用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
1037 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js在前端服务化上的实践与探索
立即下载
富途web前端组件化实践
立即下载
http://www.vxiaotou.com