H5单页面系统开发，动态加载js

最近开发一个手机端办公系统，用了Framework7框架，完全用H5开发网站我也是第一次上手，很不熟练，很多概念也不知道。

Framework7采用单页面模式，所有功能都在一个主页面上完成，用Ajax方式调用其他页面，开发的系统比较大的话，肯定也有很多js，但文档里没有提供如何调用js，可能这是基础知识，哈哈。

将js添加在其他页面中，将不被调用。我本来想将所有js都在主页面上引用，这样虽然可以，但肯定不效率，后来才想到搜索：动态加载js。如下代码：

 1 var i93comm = {};
 2 //动态加载一个js/css文件
 3 i93comm.loadjscssfile=function(filename, filetype) {
 4     if (filetype == "js") {
 5         var fileref = document.createElement('script');
 6         fileref.setAttribute("type", "text/javascript");
 7         fileref.setAttribute("src", filename);
 8         document.getElementsByTagName("body")[0].appendChild(fileref);
 9     }
10     else if (filetype == "css") {
11         var fileref = document.createElement("link");
12         fileref.setAttribute("rel", "stylesheet");
13         fileref.setAttribute("type", "text/css");
14         fileref.setAttribute("href", filename);
15         document.getElementsByTagName("head")[0].appendChild(fileref);
16     }
17 }
18 
19 //移动已经加载过的js/css
20 i93comm.removejscssfile=function(filename, filetype) {
21     var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none";
22     var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none";
23     var allsuspects = document.getElementsByTagName(targetelement);
24     for (var i = allsuspects.length; i >= 0; i--) {
25         if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1)
26             allsuspects[i].parentNode.removeChild(allsuspects[i]);
27     }
28 }
29 
30 //替换已经加载的js / css文件，代码如下：
31 i93comm.createjscssfile = function (filename, filetype) {
32     if (filetype == "js") {
33         var fileref = document.createElement('script');
34         fileref.setAttribute("type", "text/javascript");
35         fileref.setAttribute("src", filename);
36     }
37     else if (filetype == "css") {
38         var fileref = document.createElement("link");
39         fileref.setAttribute("rel", "stylesheet");
40         fileref.setAttribute("type", "text/css");
41         fileref.setAttribute("href", filename);
42     }
43     return fileref;
44 }
45     
46 i93comm.replacejscssfile = function (oldfilename, newfilename, filetype) {
47     var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none";
48     var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none";
49     var allsuspects = document.getElementsByTagName(targetelement);
50     for (var i = allsuspects.length; i >= 0; i--) {
51         if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename) != -1) {
52             var newelement = i93comm.createjscssfile(newfilename, filetype);
53             allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]);
54         }
55     }
56 }

然后在Framework7的路由设置里调用和移除：

 1 routes: [
 2         {
 3             path: '/procurement/declare/',
 4             url: '/pages/procurement/declare.html',
 5             on: {
 6                 pageInit: function (event, page) {
 7                     i93comm.loadjscssfile("js/procurement/declare.js?v=0.2", "js");
 8                 },
 9                 pageBeforeIn: function (event, page) {
10                 },
11                 pageAfterIn: function (event, page) {
12                     getDepartmentList();
13                 },
14                 pageBeforeRemove: function (event, page) {
15                     i93comm.removejscssfile("js/procurement/declare.js?v=0.2", "js");
16                 },
17             }
18         },
19         {
20             path: '/procurement/approval/',
21             url: '/pages/procurement/approval.html',
22         },
23     ],

问题解决，希望对H5初学者有用！