2014-01-20 100 views
4

我有一個有趣的概念,我正在研究和瀏覽,通過各種關於自動加載JavaScript的堆棧問題。我不想使用第三方工具,除了表單jQuery,所以我認爲我會自己扮演角色。我的理念是:自動加載Javascript

var scripts = { 
    'name' : 'path/to/script_dir/' // Load all scripts in this file. 
} 

requireScripts(scripts); // Requires all scripts 
// Call your classes, methods, objects and so on .... 

requireScript()功能會的工作是這樣的:

function requireScript(hash){ 
    $.each(hash, function(key, value)){ 
     $.ajax({ 
      url: value, 
      dataType: "script", 
      async: false, 
      error: function() { 
       throw new Error("Could not load script " + script); 
      } 

     }); 
    }); 
} 

注:以上只是一個概念,我不認爲它會奏效。

上面的代碼可以讓你加載SPECIFIC腳本。所以實質上你的散列鍵值是'name' : 'path/to/specific/script'。這個擁有的問題是你的哈希會得到相當大的....

我遇到的另一個問題是如果我簡化這個「php梨命名標準」,所以,如趨勢似乎是 - 我們會創建一個類,並且將它的位置來命名:

var some_folder_name_class = function(){}

會由自動爲翻譯:some/folder/name/class.js再裝下去。

總結並達到我的觀點有兩種方法加載JavaScript文件我正在通過滾動我自己的「require」方法來查看。一個是通過上面實現的散列思想加載一個javascript文件的目錄。 (這是如何散列將通過將不得不被踩到所提供的代碼示例進行更改和固定....我不認爲它的工作原理,甚至加載一個文件)

OR

有你只是這樣做:

new some_class_name()並且有一個全局函數偵聽這個新單詞,根據類的名字找到你試圖調用的文件並加載它,這個你永遠不用擔心 - 只要你關注「梨命名標準」在類和文件夾結構中,您的js文件將被加載。

可以採取哪一種辦法?還是我夢想成真?

我看到了很多的框架做的require('/path/to/script')一堆如果我能角色我自己的自動加載的,只允許我要麼加載的JS文件的目錄,甚至有它的地方一個類的實例之前偵聽new然後我可以讓我的生活變得更輕鬆。

回答

2

你有沒有考慮使用requirejs,可能是延遲加載。

http://www.joezimjs.com/javascript/lazy-loading-javascript-with-requirejs/

下面是示例版本:

  1. 您可以下載here

  2. 將樣品基於該文件夾結構:

    公共

    • 的index.html
    • 腳本

      • app.js
      • LIB

        **的jquery-1.10.2.js

        ** require.js

3。從代碼:

HTML

`<!DOCTYPE html><html> 
<head><title>Sample Test</title>` 

<script src="scripts/lib/require.js"></script> <!-- downloaded from link provide above--> <script src="scripts/app.js"></script></head>

`<body><h1>My Sample Project</h1><div id="someDiv"></div></body></html>` 

應用程序配置app.js

requirejs.config({ 
    baseUrl: 'scripts', 

    paths: { 
     app: 'app', 
     jquery: 'lib/jquery-1.10.2' //your libraries/modules definitions 
    } 
}); 

// Start the main app logic. loading jquery module 
require(['jquery'], function ($) { 
     $(document).on('ready',function(){ 
      $('#someDiv').html('Hello World'); 
     }); 
}); 
+0

請注意(http://stackoverflow.com/questions/how-to-answer):*「[爲鏈接提供上下文]始終歡迎鏈接到潛在解決方案,但請在鏈接上添加上下文,以便您其他用戶將會了解它是什麼以及它爲什麼在那裏。總是引用重要鏈接中最相關的部分,以防目標站點無法訪問或永久脫機。「* –

2

jQuery的唯一的選擇

如果您正在尋找僅限jQuery的解決方案,請查看jQuery.getScript()。這將是處理您的問題的腳本加載部分的好選擇。然後,你可以寫一個非常小的包裝它周圍像你上面寫的加載所有腳本出頭:如果你有興趣在這種方法中,read this article由大衛·沃爾什更多信息

var loadScripts = function(scripts) { 
    $.each(scripts, function(name, path) { 
    jQuery.getScript("/root/path/" + path + ".js"); 
    }) 
} 

其他大圖書館

我強烈建議考慮看看當前批處理腳本加載庫。我認爲你會驚喜於那裏的東西。此外,他們還帶來了良好的社區支持和文檔。 RequireJS似乎是領跑者,但大衛沃爾什在curl.jsLABjs上有很棒的文章。