前端模块化 require js

来源:互联网 发布:软件架构示意图 编辑:程序博客网 时间:2024/05/22 05:22

为什么前端需要模块化?

原生js为什么不支持模块化?

怎么进行模块化?

模块化的过程中遇到的问题?

common.js    sea.js

在node中,要想引入第三方js代码,需要用require来加载该代码,(此时与 html 中的 script 标签的功能一样)

将 node 的模块化思想移植到前端之中( 浏览器中 )

node 模块资源有一个特点, 就是存储在本地.

node 在设计 api 的时候将 大部分 api 都设计成异步的. 但是 require 是同步的.

因此在浏览器中不能使用该规则的. 阻塞, 网络等一些列问题.

 引入了一个新的规则 AMD( asynchronous module definition )

在 require 很成功情况下, 它的语法有点问题( 提前加载 )
        define( [ 所有的依赖 ], function () {
            // 自己的代码
        });
        特点是在执行自己的代码之前, 所有依赖必须加载完毕
玉伯提出了按需的加载的思想, 引入了 CMD ( common module definition )规则, 开发了 sea.js
        define( function () {
            // 要用某一个模块的时候 require( '....' )
            // require.async( ... )
            // 自己的代码
        });

使用 requirejs
       模块的定义与加载
        如何定义模块
            语法:  
            define( '模块名', [ '依赖模块1', '依赖模块2', ... ], function (  )  {
                // 自己的模块
            });


            第一个参数是用于描述该模块的名字, 如果写了称该模块为命名模块, 一般不写, 表示的是匿名模块
            第二个参数是一个数组, 里面存储的是所有的依赖模块名( 路径 )
            第三个参数是回调函数, 就是自己定义模块的地方, 如果有加载依赖模块, 利用参数传入


            注意: 一个模块应该定义到一个文件中, 一个文件中只允许有一个模块.
        加载模块的语法
            require( [ '模块名' ], function () {  } )


            加载模块的时候可以依次加载一个模块, 也可以依次加载多个模块, 使用数组描述即可
            第二个参数一般不需要, 它表示的是如果模块加载完成以后要立即使用, 则写在函数中.

原创粉丝点击