javascript - 如果其他的JS文件互相依赖怎么使用require？

问题描述

问 题

项目中使用了photoClip.js依赖于iscroll-zoom.js（v5.1.3）,然后自己写的函数调用了photoClip.js中的方法；我的项目中使用了下面的代码，然后在控制台报：IScroll is not a constructor，查找到photoClip中对iscroll实例化引起的这个错误，想咨询下什么原因引起的？

2017.1.14 根据几个同学的回答修改了path和依赖的名字，但是还是报那个错，不知道那里的问题，下面代码已更新

2017.1.17 由于自身学习能力不够，本来能够去github找答案的贸贸然在segmentfault提问了，现在下面提供了解决办法，自省己身：多读文档、多读文档、多读文档。

require.config({
                paths : {
                    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
                    "sendpoint":["js/sendpoint"],
                    "layer":["layer/layer"],
                    "hammer":["js/lib/hammer"],
                    "photoClip":["js/lib/jquery.photoClip"],
                    "exif":["js/lib/exif"],
                    "Iscroll":["js/lib/iscroll-zoom"]
                },
                shim: {
                    'layer': {},
                    "Iscroll":{}
                }
            })
            require(["sendpoint","Iscroll","layer","hammer","photoClip","exif"],function(){
                                $(function(){
                  $("#clipArea").photoClip({
                    width: 230,
                    height: 230,
                    file: "#images",
                    view: "#view",
                    ok: "#clipbtn",
                    loadStart: function() {
                      var fontSize = $("html").css("fontSize");
                      $("#clipArea").css({
                        "height":"11rem",
                        "font-size":0
                      });
                      $("#toload").css("display","block");
                    },
                    loadComplete: function(){
                      $("#showEdit").css("display","block");
                      $("#toload").css("display","none");
                    },
                    clipFinish: function(dataURL) {
                      
                    }
                  });
                })

            });

解决方案

由于这个错误是在photoClip依赖iscroll的问题引起的，所有在github上找到了photoClip的文档找到的解决办法：

require.config({
    paths: {
        'iscroll-zoom': 'js/iscroll-zoom',
        'hammer': 'js/hammer.min',
        'lrz': 'js/lrz.all.bundle',
        'PhotoClip': 'js/PhotoClip'
    },
    shim: {
        'iscroll-zoom': {
            exports: 'IScroll'
        }
    }
});

require(['PhotoClip'], function(PhotoClip) {
    new PhotoClip('#clipArea');
});

在path参数中，设置了模块名称(可以随意指定)，在shim参数中，exports是输出的变量名，表明这个模块外部调用时的名称

这篇关于javascript - 如果其他的JS文件互相依赖怎么使用require？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！