欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript動態(tài)加載實現(xiàn)方法一

 更新時間：2012年08月22日 21:27:52   作者：  
這兩天，沒什么太多的事情，好吧，我承認，是我這兩天不想做公司的項目，因為我突發(fā)奇想，其實也不算突發(fā)奇想，算是對以前的想法的實現(xiàn)，就是把JS當做Java來寫
現(xiàn)在也有很多JS動態(tài)加載的框架，比如In.js。但是這種并不是我想要的編寫方式，我來說說我的想法。

先來一段java代碼
復制代碼 代碼如下:

import Biz.User;
User u = new User();
u.show();

按流程就是導包、實例化、調(diào)用。

JS是做不了導包的，或者說代碼意義上的導包，一般只是在頁面上進行script標簽的引入。
那么 先假設(shè)需要寫成這樣
復制代碼 代碼如下:

Using("User");
var u = new User();
u.show();

那么，在JS里面可以實現(xiàn)嗎？

來一句一句的分析，當然，前提是頁面并不用script標簽載入user.js,不然就沒意義了。

第一句

Using("User");

為什么用Using，當然只是我的一個命名想法而已，可以聯(lián)想一下C#，用的就是using，借來而已。

Using里面寫入的當然是我需要的對象User，顧名思義，我當然寫成Using("User")了。先不說內(nèi)里是怎么實現(xiàn)的，起碼思路是這樣。
因為不能模擬關(guān)鍵字寫成 Using User;這種起碼我是做不到了。
第二句和第三句
復制代碼 代碼如下:

var u = new User();
u.show();

很正常，就是很平常的實例化與函數(shù)調(diào)用，唯一不解的是User對象哪里來的？那么當然是第一句導包的時候?qū)氲摹?


流程就是這么個流程，那么到底能不能實現(xiàn)，關(guān)鍵就在第一句話。也就是說，到底能不能導包成功，而且該怎么導包。

從script標簽吸引靈感，對，異步加載所需要的js文件。
也就是說
復制代碼 代碼如下:

Using("User");

相當于寫了一句
復制代碼 代碼如下:
<script type="text/javascript" src="user.js"></script>


現(xiàn)在這么看下來，這么做有意義嗎？就為把script標簽寫成JS動態(tài)引入的？或者，只為少寫幾個字符？

當然不能，這么做毫無意義!那要怎么做？
先從效率來講。
如果一個頁面需要載入N多js文件的時候，如下
復制代碼 代碼如下:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript" src="register.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript" src="user.js"></script>
<script type="text/javascript" src="order.js"></script>
<script type="text/javascript" src="type.js"></script>

等等等等。

是不是很嚇人，那是相當嚇人，而且后期維護需要很高的成本，有多少頁面，可能就需要修改幾個頁面。那么，當頁面只引入關(guān)鍵的幾個js文件，其他文件都采用動態(tài)載入的方式呢？
比如我們只需要載入jquery文件，然后調(diào)用
復制代碼 代碼如下:

$.getScript("user.js",function(){});

這樣，我們就做到頁面文件里面只需要引入
復制代碼 代碼如下:

<script type="text/javascript" src="jquery.min.js"></script>

即可。
那么這種寫法的壞處在哪里？看一段代碼
復制代碼 代碼如下:

$.getScript("user.js",function(){
$.getScript("order.js",function(){
$.getScript("type.js",function(){
$.getScript("validate.js",function(){
// and so on..
});
});
});
});

PS：用In.js的watch函數(shù)是可以避免這種情況產(chǎn)生的。這不在本博文的考慮范圍了。

花眼嗎？還愿意去對齊代碼嗎？即便有格式化工具，你還愿意將閉合括號與哪個$.getScript對應嗎？當然不愿意。
那么，仿java的導包形式應聲而出。
復制代碼 代碼如下:

Using("User");
Using("Order");
Using("Type");
Using("Validate");
// and so on..

或者你愿意,你可以
復制代碼 代碼如下:

Using("User","Type","Order","Validate",...);

寫法問題 無所謂。當然我推薦使用第一種方法，清晰。

導包之后，所有的用法不需要任何嵌套，正常使用。
復制代碼 代碼如下:

var u = new User();
var o = new Order();
// and so on..

但是會提出一個問題。假如異步的加載都在Using("XXX")的時候執(zhí)行，那么
復制代碼 代碼如下:

Using("User");
Using("Order");
Using("Type");
Using("Validate");
// and so on..

這一段我就需要異步載入4個文件，雖然是異步的，但是未免有些麻煩？而且需要創(chuàng)建4個鏈接。你愿意合并JS的話，也可以。而且，Using的時候我是不需要使用對象的，這個時候未免太浪費資源了？

至于這個問題，我的解決辦法就是學習hibernate，延遲加載，按需加載。
那么怎么做呢？
復制代碼 代碼如下:

Using("User");

這個時候肯定是不加載，不加載做什么？當然是返回一個mock，也就是模擬對象。給用戶先用著，只有當用戶真正需要使用這個對象的時候，再去加載所需的js。也就是說
復制代碼 代碼如下:

Using("User"); // 這句話執(zhí)行完畢之后會創(chuàng)建一個User對象，當時僅僅是個mock
var u = new User(); // 這個時候用需要的是真實的User對象實例，就在這個時候去動態(tài)加載JS文件，并且返回已經(jīng)實例化的User對象

大家都知道，異步加載是與當前運行的狀態(tài)不沖突的，也就是說
復制代碼 代碼如下:

var u = new User();

這句話執(zhí)行之后，u是一個沒有實際意義值的變量，而已。那么，怎么解決這個問題，我暫且想到的辦法，只能是采用同步策略了。只有當js加載完畢，再去執(zhí)行之后的js語句，這個地方有點遺憾，而且同步可能帶來的瀏覽器假死，也是一個比較嚴重的問題，暫且不顧這些問題，希望以后能有更好的辦法解決。

那問題出來了，這么做同步，有什么優(yōu)勢嗎？
我不知道有什么優(yōu)勢，起碼對比異步加載，應該沒有劣勢。比如正常的異步加載為
復制代碼 代碼如下:

$.getScript("user.js",function(){
var u = new User();
});

單單執(zhí)行這個語句，要執(zhí)行到function，本質(zhì)上也是等user.js加載完畢才會執(zhí)行,那么對比
復制代碼 代碼如下:

var u = new User();

理論上時間應該相當，因為都是等user.js加載完畢之后才執(zhí)行的。

起碼第二種看起來更像java式的代碼，不必理會其他非業(yè)務(wù)相關(guān)的代碼。

那么，怎么會知道需要的對象在什么地方，怎么加載進來？我能想到的就是模擬一個配置文件，為什么用配置文件，而不是像In.js用add函數(shù)或者其他框架的類似于register的函數(shù)，大概我只是想用配置文件，更像java，而且后期的修改起來也會更解耦一些吧。
復制代碼 代碼如下:

Using.Config = {
"User" : "/js/user" // 可以隱去.js 因為肯定是加載JS文件了
}

整個思路大概就是這個樣子，我在其基礎(chǔ)上進行了一些約束，比如加入了命名空間
復制代碼 代碼如下:

var u = new Using.Modules.User();

這樣可以減少一些全局變量，而且有需要的話，可以插入一些所有對象可能都具有的共性，減少創(chuàng)建類時的重復編碼。

當然，也還是支持不使用命名空間的。

為了解決這個約束的效力，加入了Class.create函數(shù)來進行類創(chuàng)建約束。
復制代碼 代碼如下:

Using.Class.create("User",function(){
}).property({
}).static({
}).namespace(Using.Modules);

這里的大概意思就是

create(類名，構(gòu)造函數(shù))
property(類的屬性)
static(類的靜態(tài)屬性)
namespace(命名空間)

引申到此,為何不加入MVC形式?
后來我發(fā)現(xiàn),要MVC,那么幾個類之間的動態(tài)維護,或者創(chuàng)建之時就由Using這個類來自動維護,暫時還沒想到好的解決辦法,所以沒有加入其中,只能自己創(chuàng)建類，自己維護了.

通過上面的文字，最后得到一個Using.js
然后在頁面里面就只需要引入一個
復制代碼 代碼如下:

<script type="text/javascript" src="using.js"></script>

這樣接下來就可以寫
復制代碼 代碼如下:

Using("jquery");
Using("User");

$("#ID").click(function(){
var user = new User();
user.name = "xx";
user.show();
});

相關(guān)文章

  • 微信小程序用戶位置權(quán)限的獲取方法（拒絕后提醒）

    微信小程序用戶位置權(quán)限的獲取方法（拒絕后提醒）

    這篇文章主要介紹了微信小程序用戶位置權(quán)限的獲取方法（拒絕后提醒）,文中給大家介紹了微信小程序獲取用戶當前位置的三個方式，授權(quán)方法，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-11-11
  • js調(diào)用activeX獲取u盤序列號的代碼

    js調(diào)用activeX獲取u盤序列號的代碼

    js調(diào)用activeX獲取u盤序列號的代碼，需要的朋友可以參考下。
    2011-11-11
  • 關(guān)于在Servelet中如何獲取當前時間的操作方法

    關(guān)于在Servelet中如何獲取當前時間的操作方法

    下面小編就為大家?guī)硪黄P(guān)于在Servelet中如何獲取當前時間的操作方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • JavaScript實現(xiàn)拖拽效果

    JavaScript實現(xiàn)拖拽效果

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • 詳解JVM系列之內(nèi)存模型

    詳解JVM系列之內(nèi)存模型

    JVM是一種用于計算設(shè)備的規(guī)范，它是一個虛構(gòu)出來的機器，是通過在實際的計算機上仿真模擬各種功能實現(xiàn)的。JVM的內(nèi)存區(qū)域可以被分為：線程、棧、堆、靜態(tài)方法區(qū)。本文將介紹JVM的內(nèi)存模型，感興趣的小伙伴，可以參考下
    2021-06-06
  • Js的MessageBox效果代碼

    Js的MessageBox效果代碼

    看到論壇上有人模仿alert，自己也寫了一個。 本來想模仿winapi里的MessageBox 但可惜js 不支持，阻塞模式。
    2008-05-05
  • 如何將php數(shù)組或者對象傳遞給javascript

    如何將php數(shù)組或者對象傳遞給javascript

    這篇文章主要介紹了將php數(shù)組或者對象傳遞給javascript的方法,需要的朋友可以參考下
    2014-03-03
  • Javascript仿京東放大鏡的效果

    Javascript仿京東放大鏡的效果

    本文主要介紹了Javascript仿京東放大鏡效果的實例。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-03-03
  • js實現(xiàn)頁面導航層級指示效果

    js實現(xiàn)頁面導航層級指示效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)頁面導航層級指示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • 理解JavaScript中worker事件api

    理解JavaScript中worker事件api

    這篇文章主要幫助大家理解JavaScript中worker事件api，對worker事件api有一個深刻了解，感興趣的小伙伴們可以參考一下
    2015-12-12

最新評論