一種可傳參的javascript模塊文件引入執(zhí)行的方法
【技術領域】
[0001] 本發(fā)明涉及前端開發(fā)技術領域，尤其適合引入需要傳入?yún)?shù)靈活可重用的 javascript模塊文件。
【背景技術】
[0002] 近幾年前端技術的不斷發(fā)展，用戶對軟件界面的人機交互的要求越來越高，使得 軟件界面的復雜程度也相應地變得越來越高，前端開發(fā)人員越來越偏向開發(fā)一種可重用的 javascript模塊模塊封裝在單獨的一個js文件中，在使用時候引入此模塊文件，使用適當 的參數(shù)調用接口即可快捷實現(xiàn)某種常用的交互效果，可重用模塊化開發(fā)模式能夠大大提高 開發(fā)人員的工作效率。
[0003] 同時jquery框架和軟件開源的流行，jquery簡單優(yōu)雅流暢的調用方式使得開發(fā) 變成藝術，推動越來越多人開發(fā)一種通過傳入適當參數(shù)調用相應的接口便可實現(xiàn)復雜效果 的jquery插件。
[0004] 傳統(tǒng)的模式是：先引入javascript模塊文件，在其他地方編寫代碼傳入適當?shù)膮?數(shù)調用接口。這本來是理所當然的事情，但是隨著用戶對界面的交互越來越多，界面所引入 的javascript模塊越來越多，不斷重復著引入-調用的模式。代碼越來越復雜，同時代碼的 耦合程度不斷增強，代碼變得越來越不好維護了。某一天某一個模塊需要替換或者刪除，開 發(fā)人員需要刪除javascript模塊文件的引入，然后在一堆代碼中尋找調用此接口的代碼。 如果這是另外開發(fā)人員編寫的代碼的情況，當前的開發(fā)人員可能需要通過多次的嘗試才能 把調用接口的代碼分毫不差地正確刪除，對開發(fā)人員來說是一件痛苦而且浪費時間但是又 必須面對的工作。

【發(fā)明內(nèi)容】

[0005] 本發(fā)明解決的技術問題在于提供一種可傳參的javascript模塊文件引入執(zhí)行的 方法，解決"引入javascript模塊文件一在其他地方調用javascript模塊接口"這種傳 統(tǒng)模式帶來的代碼耦合和維護困難的問題。
[0006] 本發(fā)明解決上述技術問題的技術方案是：
[0007] 在被引入的javascript模塊文件中增加獲取傳入獲取參數(shù)、處理參數(shù)、調用接口 等相關邏輯代碼；通過常規(guī)引入javascript模塊文件，在〈script〉標簽中根據(jù)模塊的需求 增加自定義參數(shù)；被引入的javascript模塊文件在加載解析的過程中執(zhí)行上述增加的代 碼，從而實現(xiàn)獨立的引入執(zhí)行機制。
[0008] 所述方法的具體流程為：
[0009] 第一步，在被引入的javascript模塊文件的基礎上添加獲取當前〈script〉標簽 所傳入的參數(shù)的邏輯代碼；
[0010] var scripts = document. getElementsByTagName( 'script')，
[0011] //獲取所有標簽
[0012] config = scripts [scripts.length-1]. getAttribute ( ^data-config?)；
[0013] //獲取當前標簽的所有參數(shù)
[0014] 其中data-config這個參數(shù)是給〈script〉標簽設置的自定義屬性，之所以增加 data-的前綴，是因為遵從html5的標準，給數(shù)據(jù)類型的屬性增加前綴便于區(qū)分；若傳入的 參數(shù)為object類型字符串，則增加把object字符串正確解析成object類型的代碼：
[0015] config = eval ('（' +config+'）'）；
[0016] 第二步，在被引入javascript模塊文件中增加處理參數(shù)的邏輯代碼：
[0017] (I).〈script〉標簽沒傳入?yún)?shù)：等待外部代碼使用參數(shù)調用接口；
[0018] (2).〈script〉標簽傳入?yún)?shù)且data-config參數(shù)為default :在模塊內(nèi)部按照定 義的默認參數(shù)調用接口；
[0019] (3).〈script〉標簽傳入?yún)?shù)且data-config參數(shù)為非default的其他值：在模塊 內(nèi)部使用傳入的參數(shù)覆蓋默認的參數(shù)調用接口；
[0020] 第三步，通過〈script〉標簽引入javascript模塊文件，并添加 data-config =" {autoStart :1，second :1} " 的屬性；
[0021] 第四步，解析被引入的javascript模塊文件的過程中，模塊內(nèi)部代碼獲取并解析 data-config的參數(shù)并覆蓋默認的autoStart和second這兩個參數(shù)；
[0022] 第五步，在模塊內(nèi)部使用合并后的參數(shù)調用接口。
[0023] 所述方法中不傳參數(shù)的詳細引入執(zhí)行流程為：
[0024] 第一步，在被引入的javascript模塊文件的基礎上添加獲取〈script〉標簽所傳 入?yún)?shù)的邏輯代碼：
[0025] var scripts = document. getElementsByTagName( 'script'），
[0026] config = scripts[scripts, length-1]. getAttribute( 'data-config'）；
[0027] 其中data-config這個參數(shù)是給〈script〉標簽設置的屬性，增加 data-的前綴是 遵從html5的標準；
[0028] 第二步，在模塊文件內(nèi)部增加沒傳參的判斷，等到外部代碼調用接口；
[0029]
[0030]
[0031] 第三步，使用〈script〉標簽正常引入javascript模塊文件；
[0032] 第四步，在外部代碼中使用參數(shù)調用接口。
[0033] 本發(fā)明與傳統(tǒng)的模式相比，javascript模塊文件的獨立性強，無需再在別的地方 調用被引入的javascript模塊文件所提供的接口完成執(zhí)行，僅需在引入時候傳入?yún)?shù)即 可實現(xiàn)引入執(zhí)行。本發(fā)明同時兼容傳統(tǒng)的模式，對于不傳入?yún)?shù)的情況則使用傳統(tǒng)的模式 執(zhí)行。
【附圖說明】
[0034] 下面結合附圖對本發(fā)明進一步說明：
[0035] 圖1是本發(fā)明詳細流程。
【具體實施方式】
[0036] 如圖1所示，本發(fā)明通過在〈script〉引入javascript中設置data-config參數(shù) 和在被引入的javascript模塊文件中處理data-config的詳細流程。
[0037] 下面以調用一個輪播的焦點圖一jquery插件easySlider為例，詳細說明本發(fā)明 的【具體實施方式】：
[0038] 第一步，在easySlider中添加以下代碼：
[0039] 獲取參數(shù)：
[0040]
[0041]

[0043] 第 二步， 通過〈script type = " text/javascript " data-sliderlD Smyslideri data-config =" {speed :600} "src ="plugins/easyslider.js"> 的方 式引入D與傳統(tǒng)引入方式的顯著差異是：添加了 data-sliderlD和data-config這兩個 參數(shù)。easySlider模塊文件內(nèi)部在解析的過程中調用了第一步添加的代碼，即可在ID為 myslider 的元素中，使用了 speed :600，auto :true，continuous :true 這三個參數(shù)執(zhí)行了 easyslider效果。其中speed :600是使用了外部傳入的方式，其余兩個均直接使用了模塊 內(nèi)部自定義的默認值，如需要覆蓋這兩個值，在data-config增加即可。
【主權項】
1. 一種可傳參的javascript模塊文件引入執(zhí)行的方法，其特征在于：在被引入的 javascript模塊文件中增加獲取傳入獲取參數(shù)、處理參數(shù)、調用接口等相關邏輯代碼；通 過常規(guī)引入javascript模塊文件，在〈script〉標簽中根據(jù)模塊的需求增加自定義參數(shù)；被 引入的javascript模塊文件在加載解析的過程中執(zhí)行上述增加的代碼，從而實現(xiàn)獨立的 引入執(zhí)行機制。2. 根據(jù)權利要求1所述的可傳參的javascript文件引入執(zhí)行的方法，其特征在于：所 述方法的具體流程為： 第一步，在被引入的javascript模塊文件的基礎上添加獲取當前〈script〉標簽所傳 入的參數(shù)的邏輯代碼； varscripts=document.getElementsByTagName( 'script'）， //獲取所有標簽 config=scripts[scripts,length-1].getAttribute( ^data-config?)； //獲取當前標簽的所有參數(shù) 其中data-config這個參數(shù)是給〈script〉標簽設置的自定義屬性，之所以增加data-的前綴，是因為遵從html5的標準，給數(shù)據(jù)類型的屬性增加前綴便于區(qū)分；若傳入的 參數(shù)為object類型字符串，則增加把object字符串正確解析成object類型的代碼： config=eval( +config+' ）'）； 第二步，在被引入javascript模塊文件中增加處理參數(shù)的邏輯代碼： (1) .〈script〉標簽沒傳入?yún)?shù)：等待外部代碼使用參數(shù)調用接口； (2) .〈script〉標簽傳入?yún)?shù)且data-config參數(shù)為default:在模塊內(nèi)部按照定義的 默認參數(shù)調用接口； (3) .〈script〉標簽傳入?yún)?shù)且data-config參數(shù)為非default的其他值：在模塊內(nèi)部 使用傳入的參數(shù)覆蓋默認的參數(shù)調用接口； 第三步，通過〈script〉標簽引入javascript模塊文件，并添加data-config=" {autoStart: 1，second: 1} " 的屬性； 第四步，解析被引入的javascript模塊文件的過程中，模塊內(nèi)部代碼獲取并解析data-config的參數(shù)并覆蓋默認的autoStart和second這兩個參數(shù)； 第五步，在模塊內(nèi)部使用合并后的參數(shù)調用接口。3. 根據(jù)權利要求1所述的可傳參的javascript文件引入執(zhí)行的方法，其特征在于：所 述方法中不傳參數(shù)的詳細引入執(zhí)行流程為： 第一步，在被引入的javascript模塊文件的基礎上添加獲取〈script〉標簽所傳入?yún)?數(shù)的邏輯代碼： varscripts=document.getElementsByTagName( 'script'）， config=scripts[scripts,length-1].getAttribute( 'data-config'）； 其中data-config這個參數(shù)是給〈script〉標簽設置的屬性，增加data-的前綴是遵從html5的標準； 第二步，在模塊文件內(nèi)部增加沒傳參的判斷，等到外部代碼調用接口； If(config! =null){ //處理參數(shù)并調用接口的相關操作 } //沒傳入?yún)?shù)，不作任何處理 第三步，使用〈script〉標簽正常引入javascript模塊文件； 第四步，在外部代碼中使用參數(shù)調用接口。
【專利摘要】本發(fā)明涉及前端開發(fā)技術領域，尤其適合引入需要傳入?yún)?shù)靈活可重用的javascript模塊文件。本發(fā)明在被引入的javascript模塊文件中增加獲取傳入獲取參數(shù)、處理參數(shù)、調用接口等相關邏輯代碼；通過常規(guī)引入javascript模塊文件，在<script>標簽中根據(jù)模塊的需求增加自定義參數(shù)；被引入的javascript模塊文件在加載解析的過程中執(zhí)行上述增加的處理代碼，從而實現(xiàn)獨立的引入執(zhí)行機制。本發(fā)明能夠構建一種相當靈活的javascript模塊文件：在<script>標簽處傳入?yún)?shù)可實現(xiàn)引入執(zhí)行機制；不傳入?yún)?shù)可使用傳統(tǒng)的模式來調用模塊接口。用于javascript模塊引入執(zhí)行。
【IPC分類】G06F9/44
【公開號】CN104915212
【申請?zhí)枴緾N201510342432
【發(fā)明人】陳健豪, 艾建文, 孫傲冰, 季統(tǒng)凱
【申請人】國云科技股份有限公司
【公開日】2015年9月16日
【申請日】2015年6月18日