javascript模块化编程库require.js的用法

javascript模块化编程库require.js的用法

    随着javascript的兴起，越来越多的公司开始将JS模块化，以增加开发的效率和减少重复编写代码的。更是为了能更加容易的维护日后的代码，因为现在的随着人们对交互效果的越来越强烈的需求，我们的JS代码也从以前的几十行代码，慢慢的发展到了现在的几百甚至上千过万，但是要怎么才能把这些代码很好的整合起来呢？

    

    面向对象的编程方法应该是目前最为流行的编程方式，将所有代码都模块化，不仅有利于增加我们开发效率，而且还使我们代码更容易维护。今天就推荐一个目前比较流行的require.js库，用来编写javascript模块化倒是不错的一个选择，以下是我的一些学习总结，希望对大家学习这个库有点帮助

require.js主要特色功能    

    我们现在写JS一般一个站点最少都会有两到三个JS文件，多则七八个JS文件都很正常。看下淘宝的首页加载的JS文件数量：

：

    是不是非常的惊人，巨多的文件，面对这样的多的JS文件，说实在的很头疼，而且许多JS文件是有依赖性的，例如：

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript" src="3.js"></script>

    像上面这样的JS文件，2.js文件要依赖与1.js文件，3.js又要依赖前面两个js文件，他们之间的先后顺序还不能出现错误，否则JS就会报错。像上面这样一个页面需要如此多的JS文件,对我们使用他们的功能时其实是种负担，因为调用一个功能的时候我们需要加载多个JS文件，而且调用JS的顺序必须按照顺序。除了这个问题，我还不知道，我们调用的这些JS会不会跟其他JS发生冲突，这就更加坑爹了

    

但是上面这些问题，require.js可以很好的解决：

  • 实现js文件的异步加载，避免网页失去响应；

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

导入require.js文件方法

    首先大家可以到require.js的官网去下载最新的文件包。下载完以后我们把require.js放到我们的JS文件目录下，然后把它加载到页面上：

  1. <script src="js/require.js" defer async="true" ></script>

    我们上面给这个JS加了两个额外的属性：defer和async，这两个属性主要是为了让浏览器能在页面元素全部加载完以后再加载JS，我称这个为异步加载JS，这种方法可以避免因为加载JS时页面卡住，出现假死的状态，所以我们让先让页面呈现出来，然后在加载JS，相当于平常我们把JS放到页面底部原理差不多。上面defer属性是因为IE不支持async，所以加上的。

    加载require.js以后，下一步就要加载我们自己的JS文件了。假如我们自己的代码文件是main.js，也放在JS目录下面。那么，只需要写成下面这样就行了：

  1. <script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

require.js配置文件方法

我们的JS文件不单单是只要main.js这个文件，我们还需要加载其他文件，这时候我们只需要在main.js这个文件里面编写好你需要另外加载的JS文件，这时我们要用他的require()函数，这个函数有两个参数：第一个参数是一个数组，表示所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，我们将调用它；

  1. require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
  2. 　　　　//回调成功后的操作
  3. });

上面模块会按照你填写的先后顺序异步加载到页面中：A,B,C。加载成功后才会执行操作代码。这样就可以防止页面出现假死的状况了。

    可能有很多的人JS都是依赖一些框架来写的，这时候我们就需要加载例如jquery等库进来的时候，我们就可以这样写：

  1. requirejs(['jquery', 'canvas', 'app/sub'],
  2. function   ($,canvas,sub) {
  3.     //jQuery, canvas and the app/sub module are all
  4.     //loaded and can be used here now.
  5. });

看上面的代码，jquery他会自动去寻找jquery.js文件，所以你想加载成功你的jquery你就需要将他命名为jquery.js这样才行。但是如果希望你的jquery文件可以带版本号，require.js也可以满足你的需求，它提供了require.config()的函数，可以让我们自定义一些路径，文件名称。我们可以这样写代码：

  1. require.config({
  2. 　　paths: {
  3. 　　　　"jquery": "jquery-1.8.3.min",
  4. 　　}
  5. });

请记住一点，我们的文件名不需要加.js后缀，否则require.js会找不到文件的。

    看到上面的代码，有些人可能还会问，如果我的JS文件不是跟main.js在同一个目录的时候怎么办？方法和上面的差不多，直接改目录，假设我们jquery放在JS文件夹下面的libs目录下面时，我们可以这样写：

  1. require.config({
  2.     paths: {
  3.         jquery: 'libs/jquery-1.8.3.min'
  4.     }
  5. });

还可以用另外一种写法，直接改变基目录：

  1. requirejs.config({ 
  2.     baseUrl: 'js/lib',
  3.     paths: {
  4.         jquery: 'jquery-1.8.3.min'
  5.     }
  6. });

require.js模块化编程方法    

    require.js的所有模块必须采用特定的define()函数的来定义。如果一个模块不依赖其他模块，那么就可以直接定义在define()函数中。例如：

  1. //main.js
  2. define({
  3.     color: "black",
  4.     size: "unisize"
  5. });

调用上面方法：

  1. //main.js
  2. require(['main'], function (main){
  3.         console.log(main.color); //black
  4.         console.log(main.size);  //unisize 
  5. 　　});

如果我们要编写函数，我们可以这样写：

  1. define(function (){
  2. 　　var Total = function (x,y){
  3. 　　　　return x+y;
  4. 　　};
  5. 　　return {
  6.         total: Total
  7. 　　};
  8. });

调用上面的代码：

  1. //main.js
  2. require(['main'], function (main){
  3.          console.log(wnf.total(5,10));
  4. 　　});

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

  1. define(['jquery'], function(){
  2. 　　var foo = function(){
  3. 　　    $("body").click(function(){
  4.             alert("jquery");
  5.         });
  6. 　　}
  7. 　　return {
  8. 　　    foo : foo
  9. 　　};
  10. });

然后我们调用上面的方法：

  1. //main.js
  2. require(['main'], function (main){
  3.          main.foo();//jquery
  4. 　　});

上面是我的学习笔记，看完你应该能对require.js有些了解，如果想更详细的了解这个库的功能，建议大家可以到require.js官网去进行深入了解学习。

转载请注明来自 520UED http://www.520ued.com/article/538830e8b992a7c43f5c204d

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jiangjunli/p/7380065.html