模块化编程:
如何在实际开发过程中,解决变量名冲突?
早期是通过:
给变量名添加前缀
放入对象中
放入一个自执行的函数
目前最好的方法是:使用模块化开发。
早期的三种方式解决变量名冲突,但是这三种都有缺陷,其中前两种,变量名和对象名,虽然说几率小,但是还是会有一定几率会重复,第三种的话,放在一个自执行函数中,只会有两种情况:当函数执行完毕,里面的数据就无法取出。或是函数一直执行,但是这样的话数据就一直存在在内存里面,非常消耗性能的。
综和后两种方法的缺点,我们发现 模块化开发能完美的避免对象名冲突,以及函数中变量无法随用随取的缺点。
我们只需要在一个单独的js文件中进行变量和方法的定义,在需要引用这里面的变量时,就通过require属性,把这个js文件变成一个对象的形式进行引入。这样我们就可以通过对象的方式,调用到该js文件中的变量和方法,从而避免了变量名冲突。
在js文件中进行其他js文件引入的方法:
1,先在被引用的js文件中,把js文件透过exports属性开一个口,使其他js文件能够通过require属性访问到。
2,在当前js文件中通过require方法引入暴露出的js文件,并将其赋值给一个变量,该变量就代表了被引用的js文件暴露出的{list:list,get:get}这个对象,暴露出的是什么,引用过来的就是什么,一般都是以对象的形式暴露出数据,并且只要被引用的文件中跟list或是get有关的数据,就都能获取到。(注意:引入文件时前面的 ./ 是必加的,并不是去到上一层)
模块化开发:
模块化开发是由commenjs规范提出的,但是commenjs规范不支持浏览器,所以我们需要通过一些手段,比如说requirejs,seajs,angular….来实现模块化开发并兼容浏览器,同时,我们还可以通过一些前端构建工具来对我们的文件进行编译,从而实现模块化。
后端语言中,node.js全面支持commenjs规范
模块化构建工具:webpack,gulp,grunt等也是支持commenjs规范。
这里我们主要来了解一下通过一些固定的手段来完成模块化,完成模块化的手段一般分三个:
首先,模块化编程有三种规范,AMD,CMD,UMD,其中:
AMD:依赖前置规范,先加载,在运行
requirejs,遵守依赖前置编程规范,英文缩写是AMD,其特点是一次性加载,在进行编程
seajs,与requirejs对应,遵守依赖后置编程规范,英文缩写是CMD,其特点是随用随加载
最后一种是UMD规范,既支持AMD又支持CMD。
我们最常用的是requirejs,因为他比较符合我们的编程规范,但是性能最好的却是seajs,但是随用随加载不符合正常编程规范,并且容易忘记加载,所以seajs不常用。
模块化开发的优点:
1,避免了变量名冲突
2,使代码更加的简洁明了,
(通过define方法,定义一个个模块,通过功能划分,把不同的功能分别放到一个模块中。或是通过数据划分,比如说用户,一个用户就是一个数据,把一个用户的数据放到一个模块中。这样一个模块对应一个功能,代码看起来就非常的简洁明了)
3,通过功能的划分,一人负责一个功能,实现多人协调开发,提高代码开发效率。
requirejs模块化编程流程:
requirejs模块化编程,可以说是使用define定义一个个模块,然后在通过require,将这些模块进行数据整合,从而在require里面完成数据的传递以及处理。
1,引入require.js文件:
<scriptdata-main='js/main.js'src='js/require.js'></script>
requirejs中,会有很多js文件,但是html中,只引入这一个文件。
requirejs中,通过require.js对js进行管理,但是我们又不能直接把代码写到require.js中,所以这里就要使用data-main属性,定义一个js文件,用于当作进行requirejs操作的配置入口。
在requirejs中,要定义其他两个js文件,其中一个文件中使用define进行功能模块的定义,另一个文件中使用require方法,进行另外的js文件之间的引用。
requirejs模块化开发的大致流程:
1,在define方法中定义用户的操作,然后通过return把这些方法和变量返回出去。
define方法有一个函数参数,在该函数中创建变量和方法。
2,require方法中进行js文件的引用,相当于大脑,把所有的数据,在这里进行汇总,并对这些数据执行操作。
在app.js文件中,使用require方法,把其他js中定义的变量和方法,汇总到该文件中,进行统一的数据处理操作。
require方法中有两个参数:
第一个是一个数组,用于定义需要引入的多个js文件,这些文件被引入后,就都是对象的形式了
第二个参数是一个函数,该函数的形参名称随便定义,尽量语义化,它们分别代表前面数组中引入的一个个js文件对象,注意这些对象都是在define中,通过return{}形式返回的。然后通过这些形参,就可以在函数中对define方法中定义并返回的方法和变量进行操作。
所以说,requirejs的整体操作流程是先把define中定义的变量和方法进行编译,然后引用到require中,再在require方法的函数下执行的。所以requirejs是符合AMD依赖前置规范的。
requirejs还可以对文件进行管理,对文件依赖进行管理。
(下面的requirejs就不是进行模块化开发的相关操作了,而是进行文件的管理配置了,所以命令是有所不同)
什么是文件依赖?
文件依赖就是,两个文件中,一个文件A如果需要生效,就必须在有另一个文件B存在的前提下,该文件A才能生效,这时我们就文件A依赖域文件B。就比如说bootstrap和jquery,因为bootstrap是基于jquery写的,所以如果想使用bootstrap.js,就必须在之前引入jquery文件。
requirejs进行文件管理配置的步骤:
1,首先在页面中引入require插件,并通过data-main的形式进行require的入口配置:
<scriptdata-main='js/main.js'src='js/require.js'></script>
2,在main.js文件中使用的是requirejs.config({})方法,进行文件的管理配置。
3,config中的一些指令操作:
paths属性,因为一个项目不可能就只有一个页面,在每个页面中如果想要引用一个js插件或是自己编写的js文件,都需要写上一大串的插件名字,所以requirejs.config方法中,就提供了一个paths方法,用于配置文件真实路径的标识,这样我们只需要在引用时写上标识,就可以代表文件路径进行链接操作了。
(js中的引用文件的相对路径,是基于html页面算的)
定义模块标识的格式:
paths:{
bootstrap:'plugins/bootstrap/js/bootstrap.min'
(模块名:“真实相对路径”)
(注:paths中的路径名中不用写js,浏览器会自动在最后添加一个js,如果写了反而会出错)
}
deps:将当前config中定义的标识,返回到参数中,在requirejs.config中的作用就是程序配置完成,在参数所在页面中进行初始化。其值是一个数组,里面放的是init.js的文件的相对路径,该文件中定义require方法,所以说,该命令代表的是,当程序配置完成后,就通过deps方法,与作为参数的init.js文件之间建立起了联系,这样在init.js中就可以访问到requirejs.config中的数据,也就可以直接用模块标识来表示其所定义的相对路径了。这样在require方法,就可以直接使用模块标识来引入对应的js文件,从而完成数据的整合操作了。
require所在页面的操作方法和功能,与模块化编程中的require页面是完全一样的。
shim:两个作用:
1:设置文件与文件之间的引用依赖
2:对不符合amd操作规范的文件,返回一个可操作的接口。
1:比如说在shim中设置文件依赖:
shim:{
bootstrap:[“jquery]
被依赖的文件路径:[“所依赖的文件所在的路径”]
}
shim中的文件路径一般都在paths中提前定义成模块标识了。
在config中通过shim进行文件依赖的配置后,当在require中加载被依赖的文件时,会自动先加载其所依赖的文件,这样就避免了文件依赖文件忘记链接后报错的问题。
使用requirejs引入文件时,同一个文件如果有多次引入操作,那么在浏览器中引入一次。
2:对不符合amd操作规范的文件,返回一个可操作的接口。
requirejs中,只能通过require方法进行其他js文件变量和方法的引用,但是require要想引用到其他js文件中定义的变量和方法,必须提前有define方法将这些方法和变量进行return返回出来,要不然requirejs即使能够找到文件,但是却是找不到其内定义的方法的,所以requirejs访问其他js文件下的内容的流程是,显示define方法返回,再是require方法接收。
但是对于一些插件,你是不知道你想返回的变量是在哪里被定义的,所以使用define方法就解决不了插件中的方法如何在requier方法中被引用的问题,所以我们一般是通过shim方法,对不符合amd操作规范的文件,返回一个可操作的接口,使require方法能够获取到没有通过define方法返回对象的js文件里的方法和变量。语法:
shime:{
模块名:{exports:”方法名/变量名”} //将模块名对应的js文件中的方法/变量暴露出来
mall:{
exports:'getMall'
}
}
(注:exports出的方法/变量不能有多个,会报错,但是可以在mall文件中,将要暴露出的方法/变量都放到一个对象中,然后返回这个对象即可。 )
相关文章
- requirejs加载bootstrap报错处理:Bootstrap dropdown require Popper.js (https://popper.js.org)
- Java并发编程(5) —— synchronized关键字
- 2023年程序员数据报告:全球有 2690 万程序员,近一半不到35岁,Rust是最受期待的编程语言
- JUC并发编程第二章之CompletableFuture[加强版的线程]
- C++提高编程(1)
- GitHub Copilot X:AI 协助编程的软件开发新时代来了!
- scala函数式编程
- GPT-4是个编程高手,真服了!
- 竞赛无人机搭积木式编程——以2022年TI电赛送货无人机一等奖复现为例学习(7月B题)
- Tars-Java网络编程源码分析