現在的網站程式代碼工作比重已經從後端轉移到了前端，不是後端的份量減少了，而是前端的工作增加到了比後端更多。
參考資源
- http://www.twsoap.com/js/script.js
- Include a JavaScript file in another JavaScript file?
以下的代碼應該不陌生
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="/Component_Front/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <script src="/Component_Front/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="/Component_Front/jquery-validation-1.14.0/dist/localization/messages_zh_TW.min.js"></script> <script src="/js/moment.js"></script> <script src="/js/bootstrap-datetimepicker.min.js"></script> <script src="/js/zh-tw.js"></script> <script src="/js/tablesaw.js"></script> <script src="/Component_Front/jGrowl-master/jquery.jgrowl.min.js"></script> <script src="/Component_Front/chosen_v1.4.2/chosen.jquery.min.js"></script> <script src="/Component_Front/ckeditor/ckeditor.js"></script> <script src="/Component_Front/autosize-master/dist/autosize.min.js"></script> <script src="/js/Php.js"></script> |
HTML JavaScript 載入
|
1 2 |
<script src="js/jquery.js"></script> <script src="js/script.js"></script> |
js/script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function include(url){ document.write('<script src="'+url+'"></script>'); return false ; } /* Touchtouch library ========================================================*/ include('js/touchTouch.jquery.js'); $(window).load(function () { $('.zoom').touchTouch(); }); /* 以下以此類推 |
jQuery
|
1 2 3 |
$.getScript("my_lovely_script.js", function(){ alert("Script loaded but not necessarily executed."); }); |
JavaScript -2 擷取至 Blockly Games
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var script = document.createElement('script'); var debug = false; try { debug = !!sessionStorage.getItem('debug'); if (debug) { console.info('Loading uncompressed JavaScript.'); } } catch(e) { // Don't even think of throwing an error. } script.src = appName + '/generated/' + lang + (debug ? '/uncompressed.js' : '/compressed.js'); script.type = 'text/javascript'; document.head.appendChild(script); |
- 建立一個 script 的元素
- 設定 src 路徑
- 將組裝好的 <script src=""> 字串附加在載入的 script 之後
Blockly Games 從上面載入的 JavaScript 也是一個簡潔加載的技巧
JavaScript -3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
(function() { var srcs = [ "js-read-only/goog/base.js", "js-read-only/goog/string/stringbuffer.js", "js-read-only/goog/dom/nodetype.js", // 這裡刪掉很多行 "index/generated/en/soy.js", "js-read-only/goog/dom/classes.js", "js/lib-games.js", "index/js/index.js" ]; function loadScript() { var src = srcs.shift(); if (src) { var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; script.onload = loadScript; document.head.appendChild(script); } } loadScript(); })(); |
--
進階使用者可以朝 
這類的工具邁進，將 JavaScript 打包壓縮，可以增加傳輸以及執行效能。
CSS border-collapse
是否將表格的框線合併
1,207 total views, 1 views today