模块化感知

一:什么是模块化

    模块:函数包裹的功能

    模块化:具备一定的功能,作用域独立,可以拿到任何地方使用,不会有其他任何依赖可以在不同的地方实现不同的细微功能差别。

    模块化分类:

1.    CommonJS:适用于后台,实现方式是同步执行(),代表nodeJS

    requireJS:前台后台都可以使用,实现方式是异步执行,适用单页面应用  AMD

    seaJS:已经死亡,官网已不更新    CMD

AMD/CMD区别:

        AMD:提前加载,把使用到的JS在页面加载前都加载了

        CMD:按需加载,在加载页面是需要哪个JS就加载哪个JS ,缺点:需要先检测所有代码,查找需要加载那些js文件。

   CommonJS:

        CommenJS:是一种比较久的规范,模块化

        导入:要使用外部的变量或函数,require(‘模块’)

        导出:给外部使用的变量或函数,modeule.expores

2.requireJS

    AMD模式,异步加载,适用于前端

    下载这个js,使用时需要引入页面

    能解决的问题:

        1.js之间的相互依赖关系

        2.实现模块化

        引入方法:<script src='require.js  data-main="对应的js文件"'></script>

        入口文件需要定义功能 

        requirejs.config({

        baseUrl:''//定义引入其他js的根目录

        paths:{

                jequery:'jequary',    //js后缀不用写

                },

          shim:{

                //1.把不符合AMD规范的文件转成符合的   2.给指定文件加载依赖

                    requirejs(['jquery'],function($){

                    加载的回调函数能作用域整个项目

                })

定义模块:

    AMD电仪模块规范:define()

    用法:没有依赖,只有一个功能,define(function(){})

               有依赖:define(‘名字’,[依赖模块],function(){})

                有名字的模块:define(‘名字’,[‘依赖模块’],function(){})

                注意:有名字模块一定得使用定义的名字,不能自己定义其他名字;没有名字的莫夸也可以定义任意的名字

           shim:用法:

                    1.把不符合AMD规范的模块转成符合AMD规范的模块

                        shim:{

                            add:{

                                    init:function(){}

                                    }

                           }

                      2.把一个文件中多个不符合AMD规范的模块转成符合

                           shim:{

                                     init:function(){

                                            return{

                                                    add:add,

                                                   jian:jian        

                                            }

                          }

                         3.添加依赖

                                    shim:{

                                                refer:{

                                            deps:['依赖模块'],

                                            exports:‘refer’

                                    }

                                }

                               4.注意:不管shim中是为了转换符合规范文件还是添加依赖,都需要在paths中,都需要在paths中声明文件路径。

猜你喜欢

转载自blog.csdn.net/amily8023/article/details/80534403