模块化编程-requirejs

时间:2022-09-28 22:25:39
模块化编程:   如何在实际开发过程中,解决变量名冲突? 早期是通过: 给变量名添加前缀 放入对象中 放入一个自执行的函数 目前最好的方法是:使用模块化开发。 早期的三种方式解决变量名冲突,但是这三种都有缺陷,其中前两种,变量名和对象名,虽然说几率小,但是还是会有一定几率会重复,第三种的话,放在一个自执行函数中,只会有两种情况:当函数执行完毕,里面的数据就无法取出。或是函数一直执行,但是这样的话数据就一直存在在内存里面,非常消耗性能的。 综和后两种方法的缺点,我们发现 模块化开发能完美的避免对象名冲突,以及函数中变量无法随用随取的缺点。 我们只需要在一个单独的js文件中进行变量和方法的定义,在需要引用这里面的变量时,就通过require属性,把这个js文件变成一个对象的形式进行引入。这样我们就可以通过对象的方式,调用到该js文件中的变量和方法,从而避免了变量名冲突。   js文件中进行其他js文件引入的方法: 1,先在被引用的js文件中,把js文件透过exports属性开一个口,使其他js文件能够通过require属性访问到。 模块化编程-requirejs 2,在当前js文件中通过require方法引入暴露出的js文件,并将其赋值给一个变量,该变量就代表了被引用的js文件暴露出的{list:list,get:get}这个对象,暴露出的是什么,引用过来的就是什么,一般都是以对象的形式暴露出数据,并且只要被引用的文件中跟list或是get有关的数据,就都能获取到。(注意:引入文件时前面的 ./ 是必加的,并不是去到上一层) 模块化编程-requirejs     模块化开发:          模块化开发是由commenjs规范提出的,但是commenjs规范不支持浏览器,所以我们需要通过一些手段,比如说requirejsseajsangular….来实现模块化开发并兼容浏览器,同时,我们还可以通过一些前端构建工具来对我们的文件进行编译,从而实现模块化。          后端语言中,node.js全面支持commenjs规范          模块化构建工具:webpackgulpgrunt等也是支持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.jsjs进行管理,但是我们又不能直接把代码写到require.js中,所以这里就要使用data-main属性,定义一个js文件,用于当作进行requirejs操作的配置入口。 requirejs中,要定义其他两个js文件,其中一个文件中使用define进行功能模块的定义,另一个文件中使用require方法,进行另外的js文件之间的引用。   requirejs模块化开发的大致流程: 1,在define方法中定义用户的操作,然后通过return这些方法和变量返回出去。 define方法有一个函数参数,在该函数中创建变量和方法。
模块化编程-requirejs          2require方法中进行js文件的引用,相当于大脑,把所有的数据,在这里进行汇总,并对这些数据执行操作 模块化编程-requirejs          app.js文件中,使用require方法,把其他js中定义的变量和方法,汇总到该文件中,进行统一的数据处理操作。          require方法中有两个参数: 第一个是一个数组,用于定义需要引入的多个js文件,这些文件被引入后,就都是对象的形式了 第二个参数是一个函数,该函数的形参名称随便定义,尽量语义化,它们分别代表前面数组中引入的一个个js文件对象,注意这些对象都是在define中,通过return{}形式返回的。然后通过这些形参,就可以在函数中对define方法中定义并返回的方法和变量进行操作。 所以说,requirejs的整体操作流程是先把define中定义的变量和方法进行编译,然后引用到require中,再在require方法的函数下执行的。所以requirejs是符合AMD依赖前置规范的。     requirejs还可以对文件进行管理,对文件依赖进行管理。 (下面的requirejs就不是进行模块化开发的相关操作了,而是进行文件的管理配置了,所以命令是有所不同) 什么是文件依赖? 文件依赖就是,两个文件中,一个文件A如果需要生效,就必须在有另一个文件B存在的前提下,该文件A才能生效,这时我们就文件A依赖域文件B。就比如说bootstrapjquery,因为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({})方法,进行文件的管理配置。   3config中的一些指令操作 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文件中,将要暴露出的方法/变量都放到一个对象中,然后返回这个对象即可。