後端程序員看前端想死（二）進入頁面以後js分析

時間 2019-12-01

原文原文鏈接

在上一篇中分析了一下以網頁的組成、header中引入的亂七八糟的東西，如今進入到js中進行分析了javascript

tuhooo啊，你是要搞前端了麼？css

nonono，好玩，學一下html

打開頁面以後執行js的幾種方法前端

直接寫到html的body標籤中

  1 <body onload="myfunction()">
  2 <html> <body onload="func1();func2();func3();"> </body> </html>

在js語句中調用

  1 <script type="text/javascript">
  2     function myfun() {
  3         alert("this window.onload");
  4     }
  5     /*用window.onload調用myfun()*/
  6     window.onload = myfun;//不要括號
  7 </script>

  1 <script type="text/javascript">
  2     window.onload=function(){
  3     func1();
  4     func2();
  5     func3(); }
  6 </script>

jQuery的方法

整個頁面的document所有加載完成之後執行。不幸的這種方式不只要求頁面的DOM tree所有加載完成，並且要求全部的外部圖片和資源所有加載完成。更不幸的是，若是外部資源，例如圖片須要很長時間來加載，那麼這個js方法執行感受就比較慢了。也就是說這是一種最嚴謹的頁面加載完再執行方法的方法。java

  1 window.onload =function() {
  2     $("table tr:nth-child(even)").addClass("even"); //這個是jquery代碼
  3 };

僅只須要加載全部的DOM結構，在瀏覽器把全部的HTML放入DOM tree以前就執行方法。包括在加載外部圖片和資源以前。jquery

  1 $(document).ready(function() {
  2     $("table tr:nth-child(even)").addClass("even"); //任何須要執行的js特效 
  3 });

還有一種簡寫方式ajax

  1 $(function() {
  2     $("table tr:nth-child(even)").addClass("even"); //任何須要執行的js特效 
  3 });

而後我看了下，還真有一個地方有上面的某個寫法：瀏覽器

我擦，jQuery選擇器忘了，a[rel*=lightbox]是幹啥的？服務器

好像找遍了都沒有找到a[rel*=lightbox]的元素啊框架

先無論

另外一個問題，html加載與js的執行順序問題，先列出這個問題，不深究

來，下面的js一個個看

1. ck-karma.js

Karma 是Google 開源的一個基於Node.js 的 JavaScript 測試執行過程管理工具（Test Runner）。該工具可用於測試全部主流Web瀏覽器，也可集成到 CI （Continuous integration）工具，也可和其餘代碼編輯器一塊兒使用。

Karma 能夠在不一樣的桌面或移動設備瀏覽器上，或在持續集成的服務器上測試 JavaScript 代碼。Karma 支持 Chrome、ChromeCanary、 Safari、Firefox、 IE、Opera、 PhantomJS，知道如何捕獲瀏覽器正使用的默認路徑，這些路徑可能在啓動器配置文件被忽視（overridden）。Karma 就是一個能夠和多重測試框架協做的測試執行過程管理工具，它有針對Jasmine、 Mocha 和AngularJS 的適配器，它也能夠與 Jenkins 或 Travis 整合，用於執行持續集成測試。

  1 function ckratingcreateXMLHttpRequest(){
  2     var xmlhttp = null;
  3     try {
  4         // Moz supports XMLHttpRequest. IE uses ActiveX.
  5         // browser detction is bad. object detection works for any browser
  6         // 檢測對象的方式來檢測瀏覽器是啥
  7         console.log("detect browser")
  8         xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  9     } catch (e) {
 10         // browser doesn’t support ajax. handle however you want
 11         //document.getElementById("errormsg").innerHTML = "Your browser doesnt support XMLHttpRequest.";
 12         // This won't help ordinary users.  Turned off
 13         // alert("Your browser does not support the XMLHttpRequest Object!");
 14     }
 15     return xmlhttp;
 16 }
 17 
 18 var ckratingXhr = ckratingcreateXMLHttpRequest();    // 這個會執行的

2. colorbox.js

這個也是jQuery的動畫效果

3. postviews-cache.js

  1 jQuery.ajax({
  2     type:"GET",
  3     url:viewsCacheL10n.admin_ajax_url,
  4     data:"postviews_id="+viewsCacheL10n.post_id+"&action=postviews",
  5     cache:!1
  6 });

這個是向後臺發了一個ajax請求，做用不得而知，會返回一個遞增的數字，目前大概有130萬，難道是訪問量

4. ready.js

  1 /*!
 2  * domready (c) Dustin Diaz 2012 - License MIT
 3  */
  4 ! function(a, b) {
  5     console.log("a = " + a);
  6     typeof module != "undefined" ? module.exports = b() : typeof define == "function" && typeof define.amd == "object" ? define(b) : this[a] = b()
  7 }("domready", function(a) {
  8     function m(a) {
  9         l = 1;
 10         while (a = b.shift())
 11             a()
 12     }
 13     var b = [],
 14         c, d = !1,
 15         e = document,
 16         f = e.documentElement,
 17         g = f.doScroll,
 18         h = "DOMContentLoaded",
 19         i = "addEventListener",
 20         j = "onreadystatechange",
 21         k = "readyState",
 22         l = /^loade|c/.test(e[k]);
 23 
 24     console.log("domready.js");
 25 
 26     return e[i] && e[i](h,
 27             c = function() {
 28                 e.removeEventListener(h, c, d), m()
 29             },
 30             d),
 31 
 32         g && e.attachEvent(j, c = function() { /^c/.test(e[k]) && (e.detachEvent(j, c), m()) }),
 33 
 34         a = g ? function(c) {
 35             (self != top) ? l ? c() : b.push(c) :
 36             function() {
 37                 try {
 38                     f.doScroll("left")
 39                 } catch (b) {
 40                     return setTimeout(
 41                         function() {
 42                             a(c)
 43                         },
 44                         50)
 45                 }
 46                 c()
 47             }()
 48         } : function(a) {
 49             l ? a() : b.push(a)
 50         }
 51 })

請原諒我js寫的少,這他媽是什麼鬼，感受像是dom加載完成以後執行的動做，可是這是要幹啥呢？

5. easing.js

學前端的真苦逼，這都是啥啊

jQuery Easing是一款比較老的jQuery插件，在不少網站都有應用，尤爲是在一些頁面滾動、幻燈片切換等場景應用比較多。它很是小巧，且有多種動畫方案供選擇，使用簡單，並且免費。

6. superfish.js

這個是用來實現多級菜單的

我感受好像本身寫的沒幾個，都是用的插件或者別人的東西啊

7. validate.js

表單驗證的，也是一個插件

我也是服氣了，前端戲真多

8. touchswipe.js

效果描述：

jquery.touchSwipe.js插件，適合手機客戶端手勢上下滑屏的jQuery插件

壓縮後只有11KB大小，敏感度也較高，很是適合懶人們操做

使用方法：

一、將head中的css樣式引入到你的網頁中

二、將body中的兩個js引入到你的頁面底部便可

(注意：jquery.touchSwipe.min.js插件路徑保持正確便可

9. caroufredsel.js

特色：徹底可定製換膚，充滿了自定義事件。自動滾動或使用按鈕，按鍵，鼠標滾輪，或經過拖動和刷卡。可選responsible/fluid/liquid。支持可變項目的大小。內置鍵盤和鼠標導航和分頁。內置9個滾動，包括淡入淡出，淡入淡出的效果等。可以使用CSS3過渡。對齊（左/中/右）內的可用寬/高的項目。動態添加和刪除的項目。

10. flexslider.js

Flexslider是一款基於的jQuery內容滾動插件。它能讓你輕鬆的建立內容滾動的效果，具備很是高的可定製性。開發者可使用Flexslider輕鬆建立各類圖片輪播效果、焦點圖效果、圖文混排滾動效果。

11. jplayer.js

jPlayer是一個JavaScript寫的徹底免費和開源 (MIT) 的jQuery多媒體庫插件 (如今也是一個Zepto插件) jPlayer可讓你迅速編寫一個跨平臺的支持音頻和視頻播放的網頁. jPlayer的豐富API可讓你建立一個個性化多媒體應用，所以也得到愈來愈多的社區成員的支持和鼓勵。

12. fitvids.js

在製做快速響應式網站時，文字、圖片等元素均可以很容易的響應屏幕尺寸的變化，惟獨視頻比較麻煩。好比經過embed方式加載優酷、土豆甚至YouTube視頻時，使用max-width:100%的方式不能保證視頻在任何設備上都能跟隨屏幕尺寸縮放，這時能夠藉助js腳原本實現，這就是今天要介紹的FitVids.JS。

13. selectnav.js

響應下拉導航SelectNav.js專爲手機和小屏幕設備。SelectNav.js是一個JavaScript插件，讓您轉換你的網站導航到下拉菜單選擇。媒體查詢一塊兒使用，它能夠幫助你建立一個節約空間，爲小屏幕設備上的導航響應。靈感來自 TinyNav.js，它是從頭開始重寫到成爲jQuery的獨立的和可定製的。特色獨立 - 無需外部庫或其餘依賴條件只有1.5KB，gziped縮小0.8KB 可定製 - 使其知足您的需求兼容 - IE 6+, Firefox 3.6+, Chrome 4+, Safari 3+, Mobile Safari iOS 3.2+, Android 2.3+ Browser, Opera Mobile, Opera Mini

這個我知道是哪一個了，就是頁面縮得很小的時候，能夠用下拉列表來導航的

14. effects.js

effects.js中提供了兩種類型的動畫效果，一種稱爲核心效果（core effect），一種稱爲組合效果（combination effect）
顧名思義，core effect提供了一種比較單一的效果，例如元素的漸變隱藏、元素的移動等等，全部的core effect都是繼承於effect.base 這個基類，effect.base類實現了瀏覽器中用js表現一段動畫效果的整個邏輯，而每一個具體的core effect類實現該效果的表現代碼就能夠了

最後還有兩個js點擊事件

  1 <div id="full-btm" style="position:fixed; left:50%; top:550px;  z-index:100; text-align:center; cursor:pointer;">
  2     <a><img src="./images/back-btm.png" width="20" border="0" alt="跳到底部" title="跳到底部"></a>
  3 </div>
  4 
  5 <script type="text/javascript">
  6     jQuery('#full-btm').click(function(){
  7         jQuery('html, body').animate({scrollTop:jQuery(document).height()}, 'slow');
  8         return false;
  9     });
 10 </script>
 11 
 12 <div id="full-top" style="position:fixed; left:50%; top:520px; margin-left:495px; z-index:100; text-align:center; cursor:pointer;">
 13     <a><img src="./images/back-top.png" width="20" border="0" alt="返回頂部" title="返回頂部"></a>
 14 </div>
 15 
 16 <script type="text/javascript">
 17     jQuery('#full-top').click(function(){
 18         jQuery('html, body').animate({scrollTop:0}, 'slow');
 19         return false;
 20     });
 21 </script>