程序博客网 > 客邻尚品 知乎

JavaScript的导入（import）问题————以OpenLayers为例。

来源：互联网 发布：客邻尚品 知乎 编辑：程序博客网 时间：2024/06/03 17:49

    

        大家都知道不管是静态语言还是动态脚本一般都有他们自己的导入方法，比如Java，在一个特定的运行环境中（jar包或是规定的目录结构中）用import关键字来导入非本包中的类，注意这里还有个包的概念，就是说把一组在某些方面相似的类（如一起实现同一个功能、类的性质相同等）组织在一起，互相就不需要再导入了。
      而JavaScript是在页面里面用script标签引入的，并没有导入的概念，就更没有包的概念了（其实这也造成了名称空间的问题）。最终的效果就是把所有的JavaScript代码都引入到页面里面就对了。在JavaScript被当作一门很重要的web编程语言之前大家编写的JavaScript代码相对较小，一般一两个文件就足够了，有几个文件就用几个标签引入就行。但是随着JavaScript的重要性和实用性被充分发掘后，用JavaScript编写的表现层中间件、Ajax应用、webGIS客户端显示系统等都已经不是一个两个文件能够容纳的了，或者说不是这么简单的目录结构能够解决的。

      好比Openlayers（一个即将一统天下的webGIS客户端显示系统）这样一个完全由JavaScript编写的系统，它目前的版本的源代码已经有100个左右的js文件，10多个文件目录（当然不是那种压成一个文件的）。我们不可能100多个script标签来把它们全部引入进来，这样既不优雅也难以维护。Openlayers就提供了一种比较好的解决方式，我们马上来分析一下。不过在分析好的之前我们来看一个个人认为比较坏的例子，其实很多早期的JavaScript系统都是使用这种方式。

      这个比较坏的例子是取自一个知名地图厂商提供的webGIS客户端，不过这个webGIS客户端已经是3年前开发的了，可能他们现在的已经改掉了，仅仅作为一个教材，并没有任何感情色彩。

      它的做法是这样的：
      在页面中引入一个名为abc_include.js(化名，呵呵，还是谨慎点好)的文件，在这个文件里面把其他的文件全部导入进来。

 1
 2<!--
 3//////////////////////////////////////////
 4//                    //
 5//                    //
 6//    包含所有引用的程序包        //
 7//                    //
 8//                    //
 9//////////////////////////////////////////
10
11document.write('<script language="javascript" src="abc_js/abc_1.js"></script>');
12document.write('<script language="javascript" src="abc_js/abc_2.js"></script>');
13document.write('<script language="javascript" src="abc_js/abc_3.js"></script>');
14document.write('<script language="javascript" src="abc_js/abc_4.js"></script>');
15document.write('<script language="javascript" src="abc_js/abc_5.js"></script>');
16document.write('<script language="javascript" src="abc_js/abc_6.js"></script>');
17document.write('<script language="javascript" src="abc_js/abc_7.js"></script>');
18document.write('<script language="javascript" src="abc_js/abc_8.js"></script>');
19document.write('<script language="javascript" src="abc_js/abc_9.js"></script>');
20document.write('<script language="javascript" src="abc_js/abc_10.js"></script>');
21document.write('<script language="javascript" src="abc_js/abc_11.js"></script>');
22document.write('<script language="javascript" src="abc_js/abc_12.js"></script>');
23document.write('<script language="javascript" src="abc_js/abc_13.js"></script>');
24document.write('<script language="javascript" src="abc_js/abc_14.js"></script>');
25document.write('<script language="javascript" src="abc_js/abc_15.js"></script>');
26document.write('<script language="javascript" src="abc_js/abc_16.js"></script>');
27document.write('<script language="javascript" src="abc_js/abc_17.js"></script>');
28document.write('<script language="javascript" src="abc_js/abc_18.js"></script>');
29
30//-->


      这些代码其实很容易理解，就是把标签用JavaScript的方式写进去，而不是直接写在html代码中，这样确实达到了一些目的，但是出现了一个很严重的问题。在页面中包含的代码其实就是<script language="javascript" src="abc_js/abc_1.js"></script>这样的script标签，大家会发现这里的路径都是abc_js/，也就是说我调用这个系统的页面必须与abc_js保持在同一目录。同事在开发的时候就犯了这样的错误，把页面没和它放在同一个目录，叫我过去帮忙看看，我怀着对这个地图厂商的崇拜和信任找了半个小时，最后发现居然是这种问题，完全不是一个负责任的厂商写的系统，还是要小BS一下。

      下面我们再来看看Openlayers是如何处理的，其实Openlayers的基本思想也是这样的，最终也是为了把这些标签都写入进去，但Openlayers完全解决了路径的问题，并且加入了浏览器的兼容，实现的更为优雅。

(function() {
    /**
     * Before creating the OpenLayers namespace, check to see if
     * OpenLayers.singleFile is true.  This occurs if the
     * OpenLayers/SingleFile.js script is included before this one - as is the
     * case with single file builds.
     */
    var singleFile = (typeof OpenLayers == "object" && OpenLayers.singleFile);
   
    /**
     * Namespace: OpenLayers
     * The OpenLayers object provides a namespace for all things OpenLayers
     */
    window.OpenLayers = {
       
        /**
         * Property: _scriptName
         * {String} Relative path of this script.
         */
        _scriptName: (!singleFile) ? "lib/OpenLayers.js" : "OpenLayers.js",

        /**
         * Function: _getScriptLocation
         * Return the path to this script.
         *
         * Returns:
         * {String} Path to this script
         */
        _getScriptLocation: function () {
            var scriptLocation = "";
            var scriptName = OpenLayers._scriptName;
        
            var scripts = document.getElementsByTagName('script');
            for (var i=0, len=scripts.length; i<len; i++) {
                var src = scripts[i].getAttribute('src');
                if (src) {
                    var index = src.lastIndexOf(scriptName);
                    // set path length for src up to a query string
                    var pathLength = src.lastIndexOf('?');
                    if (pathLength < 0) {
                        pathLength = src.length;
                    }
                    // is it found, at the end of the URL?
                    if ((index > -1) && (index + scriptName.length == pathLength)) {
                        scriptLocation = src.slice(0, pathLength - scriptName.length);
                        break;
                    }
                }
            }
            return scriptLocation;
         }
    };
    /**
     * OpenLayers.singleFile is a flag indicating this file is being included
     * in a Single File Library build of the OpenLayers Library.
     *
     * When we are *not* part of a SFL build we dynamically include the
     * OpenLayers library code.
     *
     * When we *are* part of a SFL build we do not dynamically include the
     * OpenLayers library code as it will be appended at the end of this file.
      */
    if(!singleFile) {
        var jsfiles = new Array(
            "OpenLayers/Util.js",
            "OpenLayers/BaseTypes.js",
            "OpenLayers/BaseTypes/Class.js",
            "OpenLayers/BaseTypes/Bounds.js",
            "OpenLayers/BaseTypes/Element.js",
            "OpenLayers/BaseTypes/LonLat.js",
            "OpenLayers/BaseTypes/Pixel.js",
            "OpenLayers/BaseTypes/Size.js",
            "OpenLayers/Console.js",
            "OpenLayers/Tween.js",
            "Rico/Corner.js",
            "Rico/Color.js",
            "Gears/gears_init.js",
            "OpenLayers/Ajax.js",
            "OpenLayers/Request.js",
            "OpenLayers/Request/XMLHttpRequest.js",
            "OpenLayers/Events.js",
            "OpenLayers/Projection.js",
            "OpenLayers/Map.js",
            "OpenLayers/Layer.js",
            "OpenLayers/Icon.js",
            "OpenLayers/Marker.js",
            "OpenLayers/Marker/Box.js",
            "OpenLayers/Popup.js",
            "OpenLayers/Tile.js",
            "OpenLayers/Tile/Image.js",
            "OpenLayers/Tile/WFS.js",
            "OpenLayers/Layer/Image.js",
            "OpenLayers/Layer/SphericalMercator.js",
            "OpenLayers/Layer/EventPane.js",
            "OpenLayers/Layer/FixedZoomLevels.js",
            "OpenLayers/Layer/Google.js",
            "OpenLayers/Layer/VirtualEarth.js",
            "OpenLayers/Layer/Yahoo.js",
            "OpenLayers/Layer/HTTPRequest.js",
            "OpenLayers/Layer/Grid.js",
            "OpenLayers/Layer/MapGuide.js",
            "OpenLayers/Layer/MapServer.js",
            "OpenLayers/Layer/MapServer/Untiled.js",
            "OpenLayers/Layer/KaMap.js",
            "OpenLayers/Layer/KaMapCache.js",
            "OpenLayers/Layer/MultiMap.js",
            "OpenLayers/Layer/Markers.js",
            "OpenLayers/Layer/Text.js",
            "OpenLayers/Layer/WorldWind.js",
            "OpenLayers/Layer/WMS.js",
            "OpenLayers/Layer/WMS/Untiled.js",
            "OpenLayers/Layer/GeoRSS.js",
            "OpenLayers/Layer/Boxes.js",
            "OpenLayers/Layer/TMS.js",
            "OpenLayers/Layer/TileCache.js",
            "OpenLayers/Popup/Anchored.js",
            "OpenLayers/Popup/AnchoredBubble.js",
            "OpenLayers/Popup/Framed.js",
            "OpenLayers/Popup/FramedCloud.js",
            "OpenLayers/Feature.js",
            "OpenLayers/Feature/Vector.js",
            "OpenLayers/Feature/WFS.js",
            "OpenLayers/Handler.js",
            "OpenLayers/Handler/Click.js",
            "OpenLayers/Handler/Hover.js",
            "OpenLayers/Handler/Point.js",
            "OpenLayers/Handler/Path.js",
            "OpenLayers/Handler/Polygon.js",
            "OpenLayers/Handler/Feature.js",
            "OpenLayers/Handler/Drag.js",
            "OpenLayers/Handler/RegularPolygon.js",
            "OpenLayers/Handler/Box.js",
            "OpenLayers/Handler/MouseWheel.js",
            "OpenLayers/Handler/Keyboard.js",
            "OpenLayers/Control.js",
            "OpenLayers/Control/Attribution.js",
            "OpenLayers/Control/Button.js",
            "OpenLayers/Control/ZoomBox.js",
            "OpenLayers/Control/ZoomToMaxExtent.js",
            "OpenLayers/Control/DragPan.js",
            "OpenLayers/Control/Navigation.js",
            "OpenLayers/Control/MouseDefaults.js",
            "OpenLayers/Control/MousePosition.js",
            "OpenLayers/Control/OverviewMap.js",
            "OpenLayers/Control/KeyboardDefaults.js",
            "OpenLayers/Control/PanZoom.js",
            "OpenLayers/Control/PanZoomBar.js",
            "OpenLayers/Control/ArgParser.js",
            "OpenLayers/Control/Permalink.js",
            "OpenLayers/Control/Scale.js",
            "OpenLayers/Control/ScaleLine.js",
            "OpenLayers/Control/LayerSwitcher.js",
            "OpenLayers/Control/DrawFeature.js",
            "OpenLayers/Control/DragFeature.js",
            "OpenLayers/Control/ModifyFeature.js",
            "OpenLayers/Control/Panel.js",
            "OpenLayers/Control/SelectFeature.js",
            "OpenLayers/Control/NavigationHistory.js",
            "OpenLayers/Control/Measure.js",
            "OpenLayers/Geometry.js",
            "OpenLayers/Geometry/Rectangle.js",
            "OpenLayers/Geometry/Collection.js",
            "OpenLayers/Geometry/Point.js",
            "OpenLayers/Geometry/MultiPoint.js",
            "OpenLayers/Geometry/Curve.js",
            "OpenLayers/Geometry/LineString.js",
            "OpenLayers/Geometry/LinearRing.js",       
            "OpenLayers/Geometry/Polygon.js",
            "OpenLayers/Geometry/MultiLineString.js",
            "OpenLayers/Geometry/MultiPolygon.js",
            "OpenLayers/Geometry/Surface.js",
            "OpenLayers/Renderer.js",
            "OpenLayers/Renderer/Elements.js",
            "OpenLayers/Renderer/SVG.js",
            "OpenLayers/Renderer/Canvas.js",
            "OpenLayers/Renderer/VML.js",
            "OpenLayers/Layer/Vector.js",
            "OpenLayers/Strategy.js",
            "OpenLayers/Strategy/Fixed.js",
            "OpenLayers/Strategy/Cluster.js",
            "OpenLayers/Strategy/Paging.js",
            "OpenLayers/Strategy/BBOX.js",
            "OpenLayers/Protocol.js",
            "OpenLayers/Protocol/HTTP.js",
            "OpenLayers/Protocol/SQL.js",
            "OpenLayers/Protocol/SQL/Gears.js",
            "OpenLayers/Layer/PointTrack.js",
            "OpenLayers/Layer/GML.js",
            "OpenLayers/Style.js",
            "OpenLayers/StyleMap.js",
            "OpenLayers/Rule.js",
            "OpenLayers/Filter.js",
            "OpenLayers/Filter/FeatureId.js",
            "OpenLayers/Filter/Logical.js",
            "OpenLayers/Filter/Comparison.js",
            "OpenLayers/Filter/Spatial.js",
            "OpenLayers/Format.js",
            "OpenLayers/Format/XML.js",
            "OpenLayers/Format/GML.js",
            "OpenLayers/Format/GML/Base.js",
            "OpenLayers/Format/GML/v2.js",
            "OpenLayers/Format/GML/v3.js",
            "OpenLayers/Format/KML.js",
            "OpenLayers/Format/GeoRSS.js",
            "OpenLayers/Format/WFS.js",
            "OpenLayers/Format/WKT.js",
            "OpenLayers/Format/OSM.js",
            "OpenLayers/Format/GPX.js",
            "OpenLayers/Format/SLD.js",
            "OpenLayers/Format/SLD/v1.js",
            "OpenLayers/Format/SLD/v1_0_0.js",
            "OpenLayers/Format/SLD/v1.js",
            "OpenLayers/Format/Filter.js",
            "OpenLayers/Format/Filter/v1.js",
            "OpenLayers/Format/Filter/v1_0_0.js",
            "OpenLayers/Format/Text.js",
            "OpenLayers/Format/JSON.js",
            "OpenLayers/Format/GeoJSON.js",
            "OpenLayers/Format/WMC.js",
            "OpenLayers/Format/WMC/v1.js",
            "OpenLayers/Format/WMC/v1_0_0.js",
            "OpenLayers/Format/WMC/v1_1_0.js",
            "OpenLayers/Layer/WFS.js",
            "OpenLayers/Control/MouseToolbar.js",
            "OpenLayers/Control/NavToolbar.js",
            "OpenLayers/Control/PanPanel.js",
            "OpenLayers/Control/Pan.js",
            "OpenLayers/Control/ZoomIn.js",
            "OpenLayers/Control/ZoomOut.js",
            "OpenLayers/Control/ZoomPanel.js",
            "OpenLayers/Control/EditingToolbar.js",
            "OpenLayers/Lang.js",
            "OpenLayers/Lang/en.js"
        ); // etc.

        var agent = navigator.userAgent;
        var docWrite = (agent.match("MSIE") || agent.match("Safari"));
        if(docWrite) {
            var allScriptTags = new Array(jsfiles.length);
        }
        var host = OpenLayers._getScriptLocation() + "lib/";   
        for (var i=0, len=jsfiles.length; i<len; i++) {
            if (docWrite) {
                allScriptTags[i] = "<script src='" + host + jsfiles[i] +
                                   "'></script>";
            } else {
                var s = document.createElement("script");
                s.src = host + jsfiles[i];
                var h = document.getElementsByTagName("head").length ?
                           document.getElementsByTagName("head")[0] :
                           document.body;
                h.appendChild(s);
            }
        }
        if (docWrite) {
            document.write(allScriptTags.join(""));
        }
    }
})();

/**
 * Constant: VERSION_NUMBER
 */
OpenLayers.VERSION_NUMBER="$Revision: 8012 $";


      这个文件可以在Openlayers最新的版本中找到，它除了定义了一个名称空间外最重要的作用就是完成了需要引入代码的导入工作。

      大家都应该不难看懂这些代码到底做了些什么，还是把实现的基本过程说一遍。首先我们会在页面里面包含一个主文件，如<script src="../lib/OpenLayers.js"></script>，OpenLayers._getScriptLocation方法首先找到这个标签，取出src属性里面的内容../lib/OpenLayers.js，这个时候根据定义好的_scriptName--lib/OpenLayers.js找出它之前的location目录../，这样不管前面是怎么样的目录，我们只要确定了location目录就可以顺利的导入其他的文件了，也就是说只要知道其他文件与lib/OpenLayers.js的相对位置，我们就可以顺利的导入了。 jsfiles中定义了所有需要导入的文件，然后下面就用一个for循环集体导入，貌似这又是一个什么设计模式，呵呵。确实比X厂商的代码优雅了许多。导入的for循环里面也做了浏览器的兼容，这年头不做好浏览器的兼容哪里敢称真正的js系统。这里又要顺便提请各位同仁们在写稍复杂的JavaScript程序的时候最好多考虑兼容问题，如果你怕麻烦其实建议也更推荐使用象mootools、prototpye等这样的js库。因为只能在IE下跑的程序在今天看来真是逊掉了，并且你也无情的打击了Firefox用户们。

      其实一切在代码里都明白了，所以推荐大家多看看优秀开源项目的源代码，可以学到很多好东西。

 

    这篇文章不错，相信能学到好多东西。。。。


客邻尚品 知乎 客邻尚品 知乎
原创粉丝点击
热门IT博客
qq美化主题软件qq美化主题软件
知乎 用户状态异常知乎 用户状态异常
黑色沙漠召唤数据
文学少女知乎
apache 配置index.php
python求100以内的素数
数据分析需要的技能
a href js 函数
wifi自动切换软件
医疗管理系统数据库
诈骗 知乎
淘宝外贸男装店推荐
java开发大学项目
三星note8网络参数
翻译成文言文的软件
淘宝客好做不
科比最后一战 知乎
三菱plc 4da模块编程
网络算命大师
varier 适合程序员吗
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 宝塔山油漆 佐敦油漆 长颈鹿漆 乐化油漆 久诺真石漆 杜邦漆 家丽安优质墙面漆 亚多涂料 白色亚光树脂乳液涂料 亚夏汽车股份有限公司 002607亚夏汽车股吧 银河生物股吧 亚大集团 亚大 宁波亚大集团 宁波亚大集团员工月薪 亚细亚大家族 亚大集团董事长 圣索非亚大教堂 亚大塑料制品有限公司 亚太区什么意思 亚索怎么改键设置太空步 亚太天能指纹锁价格查询 亚太智能锁 亚太天能智能锁怎么样 亚太天能锁怎么样 亚太天能指纹锁怎么样 亚威农少女 亚威股份股吧 亚威股份 威亚是什么 002559亚威股份股吧 爱威亚 江苏亚威机床股份有限公司 漫威世界里的亚索 混在漫威世界的疾风亚索 江苏亚威机床有限公司 爱威亚旗舰店 亚威折弯机 亚威机床股份有限公司 爱威亚运动鞋

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里