如何清除頁面上已有的js？

01-26

最近在研究單頁面網站，在頁面跳轉過程中，希望清除原頁面中可能引起衝突的js和css腳本，希望大神指點一下。
PS：嘗試過jQuery的remove() 和司徒正美博客中的removeNode，下面代碼仍然能夠執行
以下是我嘗試過的代碼：
比如有一個文件test.js
function say() { return "hi" }

還有一個index.js，用來載入、使用並回收test.js
var script = document.createElement("script")
script.src = "test.js"
document.body.appendChild(script)
// do something ...
document.body.removeChild(script)
script.innerHTML = ""
script = null
delete script
setTimeout(function() {

// trouble here
say() // return: hi
}, 500)

把原來的js好好規劃一下啊，不然也沒什麼好辦法了。你要純凈執行環境那只有新建iframe了

從你的描述上怎麼感覺，你對SPA的架構設計是不對的。

Single Page Application是一個整體，因此你的JS當然是從全局角度去設計以及實現的，而不是傳統的One Page One JS。會引起衝突必然是設計的不對，你顯然應該從這個角度去思考著手解決問題，不是嘛。

送書一本，jQuery 下的SPA。

SPA裡面的回收,不是回收頁面上執行過的腳本，而是回收執行過程中產生的變數和對象。

不應該先規劃好函數和變數作用域和命名空間嘛。

模塊和包管理，自己沒有的話可以用seajs這類的工具。

html可以藉助前端模板庫，存儲的話方法很多也比較隨意。

css的話嘗試使用sass這類生成器生成，注意組件之間不要相互污染類名，盡量使用平級的選擇器避免混亂出現難以控制的覆蓋效果，然後統一壓縮帶有冗餘的載入就好了就好了。

單頁的app再注意一下歷史記錄的管理，弄個前端路由插件管理程序狀態。

需要做緩存及其版本控制和管理，藉助已有的node的工具來做比較好。

基本上有一點代碼的設計藉助這些工具都能做出比較組件化的web app了，還不滿意的話就用框架解決咯。

多看看後台代碼的實現，對於你可能會有一些幫助。比如express的業務寫法，或者ROR的業務寫法。

有這需求只說明一個問題:

//重要的事說三遍

for(var i =0; i &< 3; i++){

代碼寫！得！爛！

}

從題主的描述可以猜出題主的程序結構。假設題主有a.html和b.html兩個頁面，兩個頁面對應兩個js——a.js和b.js。

兩個js文件內容如下:

a.js

function wtf(){

alert("hehe");

}

wtf();

----------------------------

b.js

function wtf(text){

alert(text);

}

wtf("hehe");

乍一看沒啥問題，如果ab兩個頁面分開運行也不會有任何問題。但是！題主是spa，於是問題來了，運行a頁面的時候動態引入了a.js，運行b頁面的時候的時候動態引入b.js………WTF!!!報錯了！！！於是題主跑上知乎問：我可不可以在運行b頁面的時候把a.js幹了，下次運行a頁面的時候再引入。

唔，乍一看題主說的挺有道理的，可是結果就是，每次運行新頁面的時候就要把別的頁面引入的js幹掉，再引入新的js。題主你不累么？而且每個頁面運行的時候它的js就要重新載入一次，spa的意義何在！

其實解決問題的辦法很簡單——閉包。把a.js和b.js的代碼放入獨立的域里運行，彼此不再衝突。

比如你可以這樣:

a.js

(function(){

function wtf(){

alert("hehe");

}

wtf();

})();

----------------------------

b.js

(function(){

function wtf(text){

alert(text);

}

wtf("hehe");

})();

看，只需要動動手指多寫一行，問題就完美解決。

蝦米！你的js函數需要在html中調用？？？請看文章開頭重複了三次的話。

解決這個問題，就需要參考命名空間了。

js本身是沒有命名空間的概念的，但是閉包為我們創造了便利。

只需把js改成如下：

a.js

var a ={};

a.wtf =function(){

alert("hehe");

}

b.js就不貼了，靠悟性。

只需要把a.html里調用wtf();的代碼改成這樣：

a.wtf();

問題解決！

至於css，同理。

假設題主有如下html:

&我是賣萌的標題&

& 我是賣萌的內容 &

樣式當然是:

.box { ... }

嗯，沒問題。

可是另外一個頁面也用同樣結構的html，可特么的這次要用不一樣的背景色，引入新的css的時候很自然地覆蓋了原來的樣式，這下再回到原來的頁面……樣式回不來了……

請大聲把開頭的文字讀三遍！

解決問題的思路很簡單，只需要給div加個id：

&我是賣萌的標題&

& 我是賣萌的內容 &

樣式改成如下：

.box {....}

.title {...}

#a.box{....}

#a .title {....}

注意空格不要用錯。為嘛我把不帶id的樣式保留了？因為box可能會有些公用的樣式，比如邊框，邊距蝦米的別處也用得上，抽離出來複用，特殊樣式就用id做區分。問題完美解決。

手機碼字累，知乎客戶端特么的不會轉義html，結果代碼丟失了好幾次，吐血。

可以測試這段代碼：刪除函數：

function testHH() {

return "i am existing";

}

alert(window.testHH);

window.testHH = null;

alert(window.testHH);

testHH();

//========================================

功能代碼：

function SaveWinodw() {

SaveWinodw.Map ={};

for (var k in window) {

SaveWinodw.Map[k] = true;

}

SaveWinodw.Map["SaveWinodw"] = true;

SaveWinodw.ClearAdded = function () {

for (var k in window) {

if (!SaveWinodw.Map[k]) {

alert(k);

SaveWinodw.Map = null;

}

在頁面第一次載入前，調用SaveWinodw函數，

在需要清除函數的地方調用SaveWinodw.ClearAdded