require

2020-10-30 13:42:02   6  举报





AI智能生成

require.js用法

require模块化学习

模板推荐

作者其他创作

大纲/内容

定义

JS模块载入框架，可实现AMD规范

优点

实现异步加载，防止js文件阻塞页面渲染

使用程序调用方式加载js，保持页面整洁

管理模块之间的依赖性，便于代码编写与维护

调用

基本知识

变量

requirejs / require

加载依赖模块，执行加载后的回调函数

require( ["js/js1","js/js2"....],function( js1_name,js2_name,... ){ } )

define

定义AMD模块

define( function( ){ } )

define(["js1","js2"],function( ){ })

加载文件

符合AMD规范的模块

require.config({    paths:{       //配置多路径，若远程加载不成功，则可加载本地文件       "js1":["http_url","localhost_url"],       "js2":["url"]    } })

非AMD规范的模块

require.config({    shim:{      "underscore":{          exports:"_"  //表示对象名      }      //将jquery插件“垫”到jquery中      "jquery.form":["jquery"],      "jquery.form":{          deps: ["jquery"]  //数组形式，表示依赖的库      }    } })

deps

数组，表示其依赖的库

exports

表示输出的对象名

全局配置

其指定的js在require.js加载后进行处理

默认其指定的js为根路径，可直接加载依赖模块

require( ['jquery'] )

require插件

domready插件

使回调函数在页面DOM结构加载完成后运行

require(['domready!'], function (doc){ 　// called once the DOM is ready });

text和image插件

允许require.js加载文本和图片文件

define([     'text!review.txt',     'image!cat.jpg'    ],    function(review,cat){ 　   console.log(review);       document.body.appendChild(cat);     } );

json插件

加载json文件

mdown插件

加载markdown文件