require.js 模块化简单理解

组件化

基于UI 样式布局

没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等....

模块化

基于功能模块

 一个可以替换的js部分称之为模块(module) 模块化:

 将代码按照特定的逻辑组合到一起,进行编码和使用;简单的说就是一个或多个有特定功能的函数 要用某个功能时用一种规则将 模块引入使用;

 原生JS不支持 模块化 不支持 commonjs 规则

 有人就将js抽离出来开发出 node.js 但是node.js 全是本地资源 浏览器是执行的网络资源 要想执行js必须下载本地资源 需要异步加载,所有就有了异步加载概念;

 异步加载概念 有两种代表: 国外的AMD模型: require.js CMD模型: 国内 淘宝 玉伯开发的 sea.js

 

 

模块与非模块之间的区别

 非模块:

  1>将JS写至 页面中(优点:结构清晰;缺点:无法复用,js 库的依赖 版本变化 所有代码都得变 命名冲突几率大)

  2> 使用js 文件编写 用script 标签引入 (优点:复用 ;缺点 : 依赖大量的js库)

模块: 

  1> 按照功能进行分类 将一类功能定义成一个模块 (就是一个js文件) 易于维护;'

  2>在页面中加载模块 

  3>优点: 

  1.关注点集中, 将重点放在业务逻辑中; 

  2.逻辑更加清晰,按照功能划分模块; 

  3.划分很细时, 数据共享不会受到影响(全局变量污染出现的问题概率变小); 

 

 

模块有两种模型

1) 自己封装的库, 需要返回一个全局对象才能引入到模块化中使用

var bbb=(function(){
    function func(){}
    function func1(){}
                return{
     func:func,
    func1:func1 
    };
})()
//引入 在baseUrl路径中设置添加 :
                   require.config({
            baseUrl:"./lib",
            paths:{
            jquery:"sasas/saS/saS/jquery-3.2.0"
            
            },
              shim{
                模块名 :{
                exports:"模块名"//!!!接收的变量名
                    },
                bootstarp:{
                  deps:["jquery"] //加载bootstarp之前必须先加载jquery
            }   
         })

2) 插件,本身不需要返回数据,但依赖一些代码 没有定义依赖需手动添加 shim{ 模块名 :{ deps:['模块名字'] }

一.引入js 定义简单模块

define('模块名',[依赖其他js库列表],function(依赖库需要返回的参数){ 
　　　　　　//功能代码 业务逻辑
　　　　　　　　　/*　1>第一个参数,用于描述该模块的路径名字,如果提供了该参数, 表示当前模块为命名模块(named module),不提供参数为 匿名模块!!!

                   2>第二个参数描述当前模块需要使用的其他模块名
                              ['jquery文件名','template文件名']
​
                   3>第三个参数 
                           ($,template) 
                      4>这些依赖的js库必须支持require.js */
                  })

二.加载模块

require(["模块名字"])

注意:

  1>模块名字 就是定义模块的文件名, 无后缀!

  2>越简单的代码使用模块化(module)越复杂 越复杂的项目使用模块化越简单

  3>加载模块后要执行一个很短小的代码 不用复用

  require(["要加载的js库模块名字"],function(){})

如: 

require(["jquery"],function($){ //功能代码 业务逻辑 })

三.模块路径

模块名字路径有三种

  1>带有./ , ../, /(本地打开会从当前文件夹根目录(大盘)找寻 且必须写后缀)等等 路径名的形式:会按照路径来寻找文件

  2>只有一个文件名: 默认路径搜索在HTML所在的文件夹(和html同级)

  3>使用script 来加载模块 <script src='require.js' data-main="./(加后缀)"></script>

配置文件(路径)加载模块

  1.引入require.js

  2.调用require.config() 配置

  3.使用baseUrl 来配置搜索路径

  4.引入baseUrl , 在写模块名时, 都是在baseUrl给出路径作为跟目录中查找

  5.lib中还是有很多文件夹 路径目录还是很长 可以用paths来设置:

require.config({ baseUrl:'./lib', paths:{ 短名字:长名字 a文件名: "文件名路径 : b/a", c文件名: "文件名路径 : d/c" }) require(['a']); //a 依赖于c !!文件引入失败可以在Network中刷新查看文件的路径是怎么加载的

四. 匿名模块 和 命名模块的区别

 (define( )的第一个参数) 命名模块 :

  注意 :

1.) 使文件的名字和命名模块的名字一样.且文件必须在当前目录 (很少使用)

  2.)配置paths时 短名字(属性)必须和模块的名字一致!!!!! 命名规则很严谨 区分大小写 (防止开发人员随意对模块命名)

 匿名模块 :

define( )的第一个参数,不提供参数为 匿名模块!!!

注意 : 去依赖的js库必须进入源代码 ctrl + F 找到 define( 把他定义的名字去掉 就行了