模块化开发

模块化开发

requirejs

RequireJS的目标是鼓励代码的模块化,它使用在js中加载js文件的方式代替传统的script加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化

requirejs的出现主要解决两个问题

1. 实现js文件的异步加载,避免网页失去响应;

2. 管理模块之间的依赖性,便于代码的编写和维护。

1使用

按照requireJS当中的规范要求,你只需加载一个文件就可以而,并指定页面主模块main.js,由于requirejs默认的文件后缀名是js,所以可以把main.js简写成main

   

1.1data-main

data-main属性的作用是,指定网页程序的主模块,main.js文件如下

    //main.js-----

    requirejs(['common','moduleA','moduleB','moduleC'],function(jq){

        //这里的代码等common,moduleA,moduleB,moduleC模块都加载完成后执行

        //但不保证以上模块的加载顺序

    });

1.2 baseUrl

基础路径baseUrl,任何文件的加载都是基于此路径

1. 默认值是加载require.jsHTML文件所在的路径

2. 但如果用了data-main属性,则主模块所在的目录就变成baseUrl

1.3常用方法

1. 配置参数:requirejs.config/require.config

2. 加载模块:requirejs/require

3. 定义模块:define

1.4配置config

这个require.js你可以从官网下载,这个config.js你必须自己完成。不用担心,它写起来非常简单:

   //config.js-----

    requirejs.config({

        baseUrl : "js",

        paths : {

             "jquery": "lib/jquery.1.11.3"

        }

    });

1.4.1 baseUrl

指定基础路径

1.4.2 paths

path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl

例如:以上配置路径 “jquery”: “lib/jquery.1.11.3”
冒号左边jquery模块名称,右边则是文件路径,注意文件没有后缀名,因为在require看来所有的模块都是JS文件真实路径为:js/lib/jquery.1.11.3.js

1.4.3 shim配置

严格意义上来说,requirejs必须加载由define()函数定义的模块,但有一些插件,本身未return任何对象或函数,只是对某个框架的扩展,例如 jquery.scroll.js 该怎么实现模块化加载,答案是shim配置

    requirejs.config({

         baseUrl: "js",

         paths: {

             "jquery" :  "lib/jquery.1.11.3",

             "jquery.scroll" : "lib/jquery.scroll"

         },

         shim: {

             "jquery.scroll": {

                 deps: ["jquery"],//设置依赖

                 exports: "jQuery.fn.scroll"

             }

        }

    });

1.5加载模块

以上配置好后,就可以加载模块了,如加载jquery只需如下代码

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

        //这里的jq就是jquery,原理请看模块的定义

    });

1.6定义模块define

1.6.1使用defined方法的规范要求

使用defined方法定义模块必须符合require的规范要求,格式如下:

//把commonjs定义成模块

//在引入模块时,回调函数中得到什么取决于定义模块时返回了什么

define(function(){

     return {

          getStyle : function(){ ........ },

          randomColor : function(){ ......... }

     }

});

1.6.2预加载

如果定义的模块需依赖其他模块,格式如下,这种模块加载方式称为:预加载

    //本模块依赖jquery

    //第一个参数为依赖模块,可以是多个,这里的路径同样基于baseUrl或path

    define(["jquery"],function(jq){

        return {

            start: function(){

                jq("#box").show(1000);

                console.log("模块提供的start方法");

            }

        }

    });

1.6.3延迟加载

如果需要在define内部依赖其他模块,则写法如下,这种模块加载方式称为:延迟加载

    define(["require","jquery"],function(require){

        var a = require('./js/a');

    });

2模块开发的优点

1.避免命名冲突
你有没有发现,整个项目当中,再也没有出现一个全局变量?即使两个框架名字冲突了也没关系

2.更好的依赖处理
你有没有发现,你再也没有考虑过加载顺序的问题?

3.按需加载
更好的代码组织方式,而且你肯定没有发现,所有的JS文件的加载过程,已经变成了异步

4.面向对象编程
最后,你还发现,用了requireJS,你的代码想不写成面相对象都难

3模块化规范与框架

1.commonJS:通用的模块规范(同步);
模块化框架:nodejs

2.AMD:异步模块定义规范(预加载);
模块化框架:requirejs

3.CMD:通用模块定义规范(延迟加载)。
模块化框架:seajs

你可能感兴趣的:(课堂笔记)