cari

Rumah >hujung hadapan web >tutorial js >如何使用require.js？让JS加载速度更快

如何使用require.js？让JS加载速度更快

PHP中文网
PHP中文网asal
2017-06-21 10:59:391857semak imbas

当一个网页引入很多js文件，网页加载会变得很慢，并且js文件存在依赖性，有时候颠倒顺序就不能运行了，这很影响用户体验。

require.js解决了异步加载，提高网页的加载，同时依赖顺序的js可以用数组排序。

 

第一部加载require.js放到目录的js子目录下:

<script src="js/require.js?1.1.10">script>

需要加一个参数 defer async="true" 表示这个文件需要异步加载 defer兼容IE版本


需要加data-main="js/main" 表示js下的main.js是主要加载模块。工作时候一定要严谨。

 


require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，第二个是回到函数，当前面模块都加载成功后，它将被调用。

//main.js:

define(function (require,exports,module){
　　　　exports.add = function (x,y){
　　　　　　return x+y;
　　　　};　
});

//math.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>require(['main'], function (math){
　　　        　alert(math.add(1,1));
　　            });</script></head><body></body></html>

返回一个2，则成功弹出。

 

一起调用

//b.js:

define(function (require,exports,module){
　　　　exports.add = function (obj,oEv,show){
　　　　　　return obj[addEventListener(oEv,show,false)]
　　　　};　
});

//math.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>var btn=document.getElementById('btn');function show(){
                alert('弹出')
            }
            require(['main','main'], function (math){
    　　　        math.add(btn,'click',show);
                alert(math.add(1,1));
　　            });</script></head><body><button id="btn">提交</button></body></html>

 

看玩此文，如果有什么不妥之处望请留言。

Atas ialah kandungan terperinci 如何使用require.js？让JS加载速度更快. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：ajax简介及JS写原生ajax实例教程Artikel seterusnya：javaScript事件绑使用方法

Artikel berkaitan

Lihat lagi