美文网首页
JS | RequireJS 使用

JS | RequireJS 使用

作者: Ada54 | 来源:发表于2018-09-11 13:33 被阅读0次

一、传统JS文件加载

传统 JS 代码写在一个文件中,页面通过 script 标签来导入文件。随着网站功能的丰富,JS 文件越来越多,页面就需要依次加载大量的JS 文件

缺点 : JS 文件的编写和维护比较困难

1. 浏览器在加载 JS 文件时会暂停网页渲染, 当加载 JS 文件越多,网页停止响应的时间就会越长

2. JS 文件是按照 script 标签导入顺序来依次加载的, 而 JS 文件之间存在依赖关系, 依赖性大的模块一定要放到后来加载,例如上图中 a.js 在  b.js 前面进行加载的,你若换了位置则会出现错误

二、RequireJS  用法

RequireJS 优势

1. 实现 js 文件的异步加载,避免 js 文件加载时使得页面停止响应

2. 模块化管理和加载,使用程序去调用 js 文件,易于代码维护

3. 声明不同 js 文件的依赖关系

RequireJS 用法

1.  html 页面引入require库

src 属性: 填写 require.js 文件的存放目录

2. html 页面使用 require() 加载自己写的 js 文件

require 第一个参数:是一个数组,加载依赖模块,可以加载多个模块。当前加载的是主模块main.js 

require 第二个参数: 回调函数,执行代码

require() 先加载 main.js 后,在回调函数中再加载其他的 js文件

3. main.js 文件,配置模块的路径,以及模块依赖关系,来简化模块的调用

baseUrl:模块默认加载路径

paths:自定义模块加载路径

            例如    jquery: " /lib /jquery /jquery.min "    

            定义 jquery,文件的存放路径是 /lib /jquery /jquery.min,其中 jquery.min 只写文件名,不写后缀

在调用模块的时候,直接调用 jquery

shim:定义模块之间的依赖关系

上面的 shim 中 bootstrap 依赖于 jquery,加载顺序是jquery,bootstrap

datatime_zh 依赖于 jquery 和 datatime,加载顺序是 jquery,datatime,datatime_zh

参考链接: http://www.zymseo.com/369.html

相关文章

  • requirejs

    requirejs作用 当你运行多个js的时候页面会造成堵塞,如下。 使用requirejs可以异步加载不同的js...

  • IE9 不支持 base 标签

    最近在学习使用 requirejs,config 的配置中有一个baseUrl代表 requirejs 加载 js...

  • AMD-requirejs

    require.js使用教程 下载require.js, 并引入 官网: http://www.requirejs...

  • JS | RequireJS 使用

    一、传统JS文件加载 传统 JS 代码写在一个文件中,页面通过 script 标签来导入文件。随着网站功能的丰富,...

  • requireJs使用

    requireJs使用 requireJs 使用require.js的第一步,是先去官方网站下载最新版本。下载后,...

  • RequireJS

    1.使用RequireJS需要下载require.js 加载js的方式 但是上述的方式并不能保证,myFuctio...

  • requireJs

    requirejs模块化开发 -- AMD配置短名称 config.js引入requirejs

  • 模块化

    - 模块化 -AMD-CMD规范- requireJS实践- r.js打包工具使用 1、为什么要使用模块化?###...

  • RequireJS规范

    为什么使用RequireJS 上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多...

  • requireJS使用说明

    1. 引入 requireJS 2. 在引入requireJS的标签中,添加data-main="js/入口文件"...

网友评论

      本文标题:JS | RequireJS 使用

      本文链接:https://www.haomeiwen.com/subject/pgysgftx.html