【个人小结】项目公共js的配置，解决不同页面多个配置修改的问题

标签：js优化

   之前写了两个公司项目里面用到的公共插件，说是插件其实也不算标准。问题描述如下：公司项目分三个平台测试，地址分别为 :http://a.server1.com,  http://a.server2.com,  http://a.server3.com .其中server1,server2,server3分别为三台服务器，而每台服务器有对应的插件地址： http://chajian.server1.com,  http://chajian.server2.com,  http://chajian.server3.com .之所以插件这么用，是因为插件和部分业务结合，每个平台的数据不一样，所以配置也不一样，需要对应相应得地址。而项目发布走三个流程，即现发布到server1，然后发布到server2，最后上线到server3.而其中的问题就是，发布的页面中会有这种代码。

<script src="http://chajian.server1.com/xxx/xxx.js"></script>

那么，如果把网站发布到server2项目中，就需要改 页面中的插件js引用配置。将 server1 改为server2.但是如果页面多的话，就得改多个，还有可能忘记，导致程序在不同平台上由于错误的引用插件地址报错。发布麻烦，繁琐。基于这个问题，我想了一个js解决方法。（不知道问题你们看明白了没有，当然有更好的解决方案，只不过本菜鸟暂时未想到。。）

下面介绍解决方法：

解决思路，动态引用js，用一个配置解决N个配置的修改问题。代码如下：

var prelessonconfig = {
    domain: "http://chajian.server1.com",
    // domain:"http://chajian.server2.com",
    // domain:"http://chajian.server3.com",
    initSharejs: function () {//分享
        prelessonconfig.initjs(prelessonconfig.domain + "/Scripts/XYYShareResource/xueyiyun.sharesource.js", "prelessonjs_share");
    },
    initVCNjs: function () {
        //册章节
        prelessonconfig.initjs(prelessonconfig.domain + "/Scripts/XYYVcn/xueyiyun.vcnselect.more.js", "prelessonjs_vcn");
    },
    initTKjs: function () {
        //题库
        prelessonconfig.initjs(prelessonconfig.domain + "/Scripts/XYYVcn/xueyiyun.tikuselect.more.js", "prelessonjs_tk");
    },
    initjs: function (url, id) {
    //动态加载js
        var ds = document.createElement(‘script‘);
        ds.type = ‘text/javascript‘;
        ds.src = url;
        ds.id = id;
        ds.async = false;
        ds.charset = ‘utf-8‘;
        (document.getElementsByTagName(‘head‘)[0] || document.getElementsByTagName(‘body‘)[0]).appendChild(ds);
    },
    initShare: function (callback) {
        prelessonconfig.initLoadFunction(callback, "prelessonjs_share");
    },
    initVCN: function (callback) {
        prelessonconfig.initLoadFunction(callback, "prelessonjs_vcn");
    },
    initTK: function (callback) {
        prelessonconfig.initLoadFunction(callback, "prelessonjs_tk");
    },
    initLoadFunction: function (callback, id) {
        var prelessontimer = null;
        prelessontimer = setInterval(function () {
        //如果js已经加载完毕，那么执行callback方法。（应该有别的方法可以处理，我这里自己根据Interval判断）
            if ($(‘#‘ + id).length == 1) {
                callback();
                clearInterval(prelessontimer);
            }
        }, 100);
    }
};

那么下边的不必多说，只要更改domain然后页面引用 这个config.js就可以解决动态加载不同服务器的js问题了，同样用callback和setinterval方法解决了js未加载完，但是里面方法已经执行而导致的错误（unfined）的问题。

总结：这只是本菜鸟的解决思路，当然我相信还有更好的方法，比如seajs的模块化加载。如果有更好的欢迎各位批评指正。代码去重是一个艰巨的任务。ps这段js还有不少重复代码。。 完

本文出自 “小盘子的IT空间” 博客，请务必保留此出处http://panzi.blog.51cto.com/4738203/1566460

【个人小结】项目公共js的配置，解决不同页面多个配置修改的问题

标签：js优化

原文地址：http://panzi.blog.51cto.com/4738203/1566460