Web前端开发requireJs学习研究(一)

柔情只为你懂 2022-09-23 13:48 146阅读 0赞

什么是requireJs？有什么用？用了有什么好处？马上稍等一一解答....

--------------------

最早的前端Js代码可能如下面这样的代码，相信大家都见过,如下面这段示例代码..

//文件名字 calc.js
        //内容如下:
        function add(x,y){ 
            return x+y;
        };
        function sub(x,y){ 
            return x-y;
        };
        .....

然后在需要用到这些方法的地方，引用js

这样以来，有以下几点问题:
    1.页面要等待js代码加载，完成才能加载
    2.由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
    3.空间污染

--------------------

requireJS就是为了解决这两个问题而来
    1）实现js文件的异步加载，避免网页失去响应；
    2）管理模块之间的依赖性，便于代码的编写和维护，独立变量空间，防止污染

--------------------

如何来使用requireJs？

1.创建test.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title1</title >
        </script>
    </head>
    <body>
    body2
    //也许你更喜欢，把javascript放这里，原因就不说了..
    <script data-main="main" src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js" > </body> </html>

2.创建main.js

require.config({
        baseUrl:"../js",//指定js代码的根路径
        paths : {
            "jquery" ://两个参数，如果CDN加载失败，就采用第二个参数，加载本地资源 ["http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min","util/jquery.min"],
            "jquery-cookie":["http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.min"],
            'jquery.tabs': "util/jquery.tabs.min"
        },
        shim: {
       //用于处理非AMD规范的JavaScript代码，什么是AMD规范？请百度，google..
            'jquery.tabs': {
                deps: ['jquery'],//此模块依赖的其它模块
                exports: 'jQuery.fn.tabs'//此模块的引用名字，eg：jquery用$
            }
        }
    });
    require(["jquery","j1"],function($,J1){ //main.js运行后，jquery模块就有了，这里直接注入即可，j1同理，分别对应两个模块的引用对象
        function Controller() { 
            // 继承于J1类
            J1.init.call(this);
            alert(this.add(3,4));//调用继承于J1.js的add函数
            alert(this.sub(4,3));//调用继承于J1.js的sub函数
            alert(this.type(3)); //调用继承于J1.js的type函数
            this.init();//调用本地的init函数
        }
    
        Controller.prototype.init=function () { 
            alert("init load");
        }
    
        //初始化Controller类
        $(document).ready(function () { 
            new Controller;
        });
    });

3.创建J1.js

define(["jquery"],function ($){ //注入jquery模块
        function Calc() { 
            this.add = function (x,y){ 
                return x+y;
            };
            this.sub=function (x,y) { 
                return x-y;
            };
            this.type=function (x) { 
                return $.type(x);//用jquery的方法
            }
        };
        return {
            init: Calc //返回此Calc类，让其它模块继承
        };
    });

--------------------

> 简单描述以下上述代码的意思

html页面上的：

这个引用百度CDN的requirejs文件,加载完毕后，加载同级目录下的main.js文件。熟悉Java的朋友，可以简单吧requireJs看做是个spring，管理依赖注入的容器

--------------------

mian.js：这个主要是实现，把项目依赖的js文件，让requirejs管理起来，注入到对应的模块去使用，

--------------------

J1.js：主要写了一些公共的方法，让继承它的子类去使用。通过define定义一个模块，第一个参数，指定此模块的依赖其它的模块，第二个参数，指 注入成功后，的回调函数处理

--------------------

上述代码，如有问题，欢迎纠正，学习阶段…………….