首页 > 代码库 > 【个人小结】项目公共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的配置,解决不同页面多个配置修改的问题