javaScript高级模块化

来源：互联网发布：推荐淘宝靠谱的代购店编辑：程序博客网时间：2024/05/22 13:47

javaScript高级模块化

我们在一个项目的开发过程中,通常要在页面上导入大量的js文件,jQuery文件,jQuery各种插件的文件,甚至是其他的 javascript库文件,这样大量的javascript文件的导入,使得我们的javascript异常的复杂,难以管理的维护,大大增加了我们项目的管理和维护成本,那么有什么办法可以帮助我们管理我们页面的各种各样js代码吗?那就是js的模块化管理.

下面我们看一段代码:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>首页</title><script src="js/jquery_slide.js"></script></head><body><h1>这个是首页</h1></body></html>

jquery_slide.js文件:

(function() {alert("这个是js");})();

使用闭包写了一个简单函数,弹出一句话,我使用闭包避免了全局变量的出现,防止了全局变量污染.

.运行这些代码就会发现页面上内容没有输出,js的弹出框在用户点击后,页面才会继续运行,这样结果

我们不能接受,因为js和页面的加载无关.我们应该让页面继续加载,js执行自己就可以了.但是现在阻塞

住了页面继续加载,如果某个接受报错,可能就会到会导致页面布局崩溃,不能运行,这是我不能接受的

接下来我们使用requireJS.

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><!--        使用requireJS（AMD），        首页引入requireJS的源代码        --><script src="lib/require2.1.11.js"></script><script>/** * require这个方法等同于 requirejs * 这个方法有是三个参数 * 第一个是一个数组，哪怕是一个元素，也要使用数组 * 第二个参数是一个回调函数，表示成功之后的回调 * 第三个参数也是一个回调函数，表示失败后的回调 */require(["js/jquery_slide","js/test"],function() {//只有所有都加载成功，才会回调alert("页面加载完成");},function() {//只要有模块加载失败，则会触发这个回调alert("加载失败");});</script></head><body><h1>首页</h1></body></html>

运行这些代码我们会发现前面的出现的问题解决了.页面加载完成不像前面传统的一样等待js运行完成在

加载页面.而是相反.运行效率大大提升了.

加载网络文件

之前例子加载的本地的js,但是我们大部分加载的js可能来自于服务器,其他网站或CDN.我们就不能使用

以前的加载方式.例子如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="lib/require2.1.11.js"></script><script src="js/config.js"></script></head><body><h1>首页</h1></body></html>

require.config({paths : {"jquery" : ["https://cdn.bootcss.com/jquery/3.2.1/jquery","http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min","lib/jquery-1.8.3"],"slide" : "jquery_slide","test" : "test"}})require(["jquery","slide","test"],function() {//只有所有都加载成功，才会回调alert("页面加载完成");},function() {//只要有模块加载失败，则会触发这个回调alert("加载失败");})

注意:

config方法的参数是一个对象

全局配置

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="lib/require2.1.11.js" data-main="js/config"></script></head><body><h1>首页</h1></body></html>

require.config({paths : {"jquery" : ["https://cdn.bootcss.com/jquery/3.2.1/jquery","http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min","lib/jquery-1.8.3"],"slide" : "jquery_slide","test" : "test"}})require(["jquery","slide","test"],function() {//只有所有都加载成功，才会回调alert("页面加载完成");},function() {//只要有模块加载失败，则会触发这个回调alert("加载失败");});

目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。

下面介绍CMD使用:

在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition）模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。

在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/sea.js"></script><script>/** * seajs.use  === require 加载模块 * 它有两个参数 *  第一个是需要加载的模块，String | Array *  第二个参数是一个回调函数 */seajs.use(["test"],function() {alert("加载结束");});</script></head><body></body></html>

以上是我对javaScript的高级模块化的初浅见解,帮助新手快速理解运用到开发项目中,其中还有很多不足欢迎大家多提意见.后续

会陆续更新.

阅读全文

1 0