后端程序员看前端想死（二）进入页面之后js分析

最新推荐文章于 2023-08-17 08:50:31 发布

WWWWWWWWolf

最新推荐文章于 2023-08-17 08:50:31 发布

阅读量339

点赞数

文章标签：前端后端 javascript ViewUI

在上一篇中分析了一下以网页的组成、header中引入的乱七八糟的东西，现在进入到js中进行分析了

tuhooo啊，你是要搞前端了么？

nonono，好玩，学一下

打开页面之后执行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.οnlοad=function(){
  3     func1();
  4     func2();
  5     func3(); }
  6 </script>

jQuery的方法

整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成，而且要求所有的外部图片和资源全部加载完成。更不幸的是，如果外部资源，例如图片需要很长时间来加载，那么这个js方法执行感觉就比较慢了。也就是说这是一种最严谨的页面加载完再执行方法的方法。

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

仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行方法。包括在加载外部图片和资源之前。

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

还有一种简写方式

  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大小，敏感度也较高，非常适合懒人们操作

使用方法：

1、将head中的css样式引入到你的网页中

2、将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>

分别是返回底部和返回顶部的，两个图片用的都是position为fix的定位

WWWWWWWWolf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后端程序员看前端想死（二）进入页面之后js分析

在上一篇中分析了一下以网页的组成、header中引入的乱七八糟的东西，现在进入到js中进行分析了 tuhooo啊，你是要搞前端了么？nonono，好玩，学一下打开页面之后执行js的几种方法直接写到html的body标签中 1 &lt;body onload="myfunction()"&gt; 2 &lt;html&gt; &lt;bod...
复制链接

扫一扫