require.js 笔记

1.前言

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

通过script标签来导入众多的js文件有几个缺点：

文件的引入路径难以书写，一大串路径字符串难以记忆，也不直观
无法清晰的表明各种库之间的依赖关系,一旦引入顺序出错就不能正常执行
所有的js都处在同一个作用域下，容易造成全局变量污染

而require.js做到了这一点，它是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。

相关代码笔记：简易demo

2.基本使用

引入require.js，并指定主模块的路径

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 引入require.js 并指定主模块的路径 -->

    <script src="/assets/libs/require/require.js" data-main="/assets/js/require-backend.js"></script>

    <title>主页</title>

</head>

<body>

</body>

</html>

主模块：相关路径配置，依赖配置，引入公共模块，引入页面js

//定义相关配置

require.config({

    baseUrl : "/assets", //基础路径 只针对 paths 下的字段生效

    //模块路径配置

    paths:{

        'vue':['libs/vue/vue.min', 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min'], //1.数组中可设多个路径  2.无需.js后缀

        'ELEMENT': 'libs/element-ui/index.min',

    },

    map: {

        '*': {

            //引入require-css，使其支持加载css

            'css': '/assets/libs/require-css/css.min.js'

        }

    },

    shim: { //声明模块依赖

        'ELEMENT': ['css!/assets/libs/element-ui/index.min.css'],//如果引入了ELEMENT模块，则自动引入这个css文件

    }

})

//vue和element-ui每个页面都会用到，所以作为公共模块引入

//每个页面都有其对应的js模块，需要为其配置相应的规则，使其根据页面路径自动引入

//引入页面公共模块和页面js模块

require(['vue','ELEMENT'],function(Vue,ELEMENT){

    //安装element-ui

    Vue.use(ELEMENT)

    //将Vue渲染至全局

    window.Vue = Vue

    //设定js基本路径

    var baseJsPath = "/assets/js"

    //获取当前页面路径

    var page_path = window.location.pathname

    //判断路径是否以 .html 结束

    if(page_path.lastIndexOf('.html') > -1 && (page_path.length - 5) == page_path.lastIndexOf('.html')){

        //页面路径完整（需去除.html后缀 再拼接）

        var jsPath = baseJsPath + page_path.slice(0,-5) + '.js'

    }else if(page_path.lastIndexOf('/') > -1 && (page_path.length - 1) == page_path.lastIndexOf('/')){//判断是否已 / 结尾

        //页面路径不完整（需要拼接 index.js）

        var jsPath = baseJsPath + page_path + 'index.js'

    }else{

        //页面路径不完整（说明无需去除.html后缀 直接拼接）

        var jsPath = baseJsPath + page_path + '.js'

    }

    //引入页面的js文件

    require([jsPath],function(){

    })

})

页面js

define([],function(utils){

    new Vue({

        el:"#app",

        data(){

            return {

            }

        }

    })

})

3.封装自定义模块

模块定义使用define()方法，他有3个参数：

参数	类型	说明
参数一	String	可选，当前模块名称，一旦设定，在配置模块路径（paths）是就必须使用该名称
参数二	Array	可选，依赖的模块
参数三	Function	模块的定义，需要return一个数据作为当前模块的暴漏值

define('name_utils',[],function () {

    return {}

})

某些库就是使用这种方式定义的，所以引入是名称必须固定，例如jquery和elementui

像上面的依赖，elementui的源码已经指明依赖vue，一旦页面引入了elementui，即使没有引入vue，则require.js会自动引入vue，但是在回调中无法拿到Vue这个类，导致页面无法使用vue渲染，也无法安装elementui，所以还是得手动引入vue，require.js会自动忽略重复的请求

4.加载css

加载css需要用到require-css插件，在主模块中引入这个插件，确保后面所有的模块都可正常加载css

require.config({

    map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块

        '*': {

            css: 'https://cdn.bootcdn.net/ajax/libs/require-css/0.1.9/css.js'

        }

    }

})

例1：element-ui依赖其配套的css，我们在shim字段中为element-ui声明他所需要的依赖。

require.config({

    map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块

        '*': {

            css: 'https://cdn.bootcdn.net/ajax/libs/require-css/0.1.9/css.js'

        }

    },

    shim: { //声明模块依赖

        'ELEMENT':{

            "deps":['css!https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css'], //声明 'ELEMENT' 的依赖

        }

    }

})

例2：引入页面的css文件，在引入时添加前缀 "css!" 后面跟css文件路径即可

当然，页面的js和css可以集中主模块中进行引入

//引入页面js映射模块

require([],function(){

    //加载页面对应的js和css (部分代码省略)

    require([jsPath, 'css!'+cssPath],function(){

    })

})

5.加载非规范的模块

require.js的模块使用define()方法进行定义，在回调中return一个数据，其他模块引入他的时候，就能够接收到这个模块，参考上面的封装自定义模块
但是如果在define()的参数回调中，没有return任何数据，或者编写js模块时，未使用模块化的写法，，则无法接收，显示undefined
上面的js定义了不止一个数据，我们可以指定其中的一个作为模块进行引入

require.config({

    //模块路径配置

    paths:{

        'utils':"js/utils"

    },

    shim: { //声明模块依赖

        'utils':{

            exports:"utils",//本例中可以sayHello和utils二选一

        }

    }

})

require.js 笔记的更多相关文章

require.js笔记
笔记参考来源:阮一峰 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 浏览器端的模块只能采用“异步加载”方式 = ...
require.js 入门笔记
网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...
【转】require.js学习笔记(二)
require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...
require.js学习笔记（内容属于转载总结）
<script data-main="src/app" src="src/lib/require.js"></script> backb ...
require.js学习笔记
使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织官方网站http ...
【转】require.js学习笔记(一)
一.立即执行函数立即执行函数可以有效避免临时变量污染全局空间.可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用. for (var i = 0; i < elems.lengt ...
【笔记】关于require.js 的用法
最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化. 网上有不少很好的学习文章这 ...
require.js源码分析
写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...
javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
Javascript模块化编程（三）：require.js的用法
Javascript模块化编程(三):require.js的用法原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

随机推荐

小tips：nodejs请求接口超时使用中间件connect-timeout实现自动超时机制
如果在请求中不设置超时时间,那么一直处理loading卡屏状态,使用connect-timeout来设置自动超时时间. 安装: npm install connect-timeout -S 如下例子: ...
2024csps初赛记
对于此次初赛,教训有不少,有一些差点把自己整死. 第一点,铅笔只能用2B,不要尝试使用HB 2nd:一定要带涂卡笔和橡皮,不然就算借别人用了也会发现橡皮还不如手擦的干净(可能因为这个原因我都要丢几分) ...
Windows NoiLinux
在 Windows 下使用 NoiLinux ubuntu-noi-v2.0.iso 下载 ubuntu-noi-v2.0.iso 打开 VMWare,创建新的虚拟机 -> 自定义(高级)-&g ...
在windows下安装Composer（转载）
在windows下安装Composer Composer是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer ...
/proc/pids/io
rchar:代表自进程启动以来所读取的总字符数,包括通过缓存或直接读取的字符.单位是字节(bytes). wchar:代表自进程启动以来所写入的总字符数,包括通过缓存或直接写入的字符.单位是字节(by ...
iOS之动画(transform和UIView动画)学习
1.transform 形变这个是UIView的属性,继承UIView的控件都具有这个属性 UIImageView *imageview=[[UIImageView alloc]init]; ima ...
2. 王道OS-操作系统的特征，发展和分类
1. 并发:宏观上是同时发生的,微观是交替发生的 :ps:并行:宏观和微观都是同时发生的 : ps:单核CPU同一时刻只能执行一个程序,各个程序只能并发的执行 : 多核CPU同一时刻可以同时执行多个程 ...
KubeSphere 社区双周报 | 杭州站 Meetup 议题征集中 | 2023.04.14-04.27
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...
KubeSphere 社区双周报 | OpenFunction v0.8.0 发布 | 2022-12-09
KubeSphere 从诞生的第一天起便秉持着开源.开放的理念,并且以社区的方式成长,如今 KubeSphere 已经成为全球最受欢迎的开源容器平台之一.这些都离不开社区小伙伴的共同努力,你们为 Ku ...
Mysql中常用函数分组,连接查询
函数在Mysql中函数是一组预定义的指令,用于执行特定的操作并返回结果,可类比Java中的方法.在SQL中函数根据其作用范围和返回结果方法分为两大类:单行函数,分组函数单行函数单行函数的特点为对 ...