希望大家能够喜欢,2、为什么需要预加载

2019-07-19 作者:小鱼儿主页高手论坛   |   浏览(101)

获取类:

jquery仿百度经验滑动切换浏览效果

Math.random()方法返回大于等于 0 小于 1 的一个随机数。对于某些站点来说,这个方法非常实用,因为可以利用它来随机显示一些名人名言和新闻事件。

由于一直在使用,所以了解了下seajs的源代码。这里是我对下面几个问题的理解:

1)动态方法:

$(function() {
  wordStrong();
  $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length);
  $("#header .top_right .vote").hover(function() {
    $(this).children(".hover-tip").css("display", "block");
    $(this).children(".num").css("display", "none");  
  }, function() {
    $(this).children(".hover-tip").css("display", "none");
    $(this).children(".num").css("display", "block");  
  });


  $("#content .left, #content .right").width(($(document).width()-$("#content").width())/4);
  $("#content .left").css("left", -$("#content .left").width());
  $("#content .right").css("right", -$("#content .right").width());

  var showId = 0;
  $("#content span.left").hover(function() {
    if ( checkFirst() ) return ;
    $(this).css("cursor", "pointer");
    $(this).siblings(".sl").stop().animate({
      opacity:0.5 
    }); 
  }, function() {
    $(this).siblings(".sl").stop().animate({
      opacity:0
    }); 
  }).click(function() {
    if ( checkFirst() ) return ;
    showId --;
    $("#content").attr("showId", showId);
    $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");
    center(showId);
  });

  $("#content span.right").hover(function() {
    if ( checkLast() ) return ;
    $(this).css("cursor", "pointer");
    $(this).siblings(".sr").stop().animate({
      opacity:0.5
    }); 
  }, function() {
    $(this).siblings(".sr").stop().animate({
      opacity:0
    }); 
  }).click(function() {
    if ( checkLast() ) return ;  
    showId   ;   
    $("#content").attr("showId", showId);
    $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");
    center(showId); 
  });

  function checkFirst() {
    if ( $("#content").attr("showId") == 0 ) {
      $("#content span.left").css("cursor", "default");
      return true;    
    }
    return false;
  }

  function checkLast() {
    if ( $("#content").attr("showId") == $("#content ul li").length-1 ) {
      $("#content span.right").css("cursor", "default");
      return true;    
    }
    return false;  
  }

  /* 首字母大写 */
  function wordStrong() {
    var liList = $("#content ul li");
    for (var j = 0; j < liList.length; j   ) {
      var pList = $("#content .cont_" (j 1) " .cont_word p");
      for (var i = 0; i < pList.length; i   ) {
        var p = pList.get(i);
        var pCont = $(p).html();    
        var s = $("<b>" (i 1) "</b>");
        s.css("font-size", "24px");   
        $(p).html('');
        s.appendTo(p);
        $(p).append(pCont.substring(1));    
      }
    }
  }  

  center(0);

  //相对li居中
  function center(liIndex) {
    var li = $("#content ul li").css("opacity", 0.3).eq(liIndex).css("opacity", 1);
    $("#content ul").animate({
      left: (-li.width()*liIndex)
    });
  }

  var footLen = $("#content ul li").length;
  var foots = $("#footer ul");
  for (var i = 1; i < footLen-1; i   ) {
    var childA = $("<a>").html(i);
    childA.attr("href", "#");
    $("<li>").append(childA).insertBefore(foots.children("[step=last]")).attr("step", i);   
  }
  foots.children(":last").attr("step", footLen-1);
  foots.css("left", ($(window).width()-foots.width())/2); 
  $("#footer li").click(function() {
    $("#footer ul li").children().removeClass("active");
    $(this).children().addClass("active");
    center($(this).attr("step"));
  });

  function myAddEvent(obj, e, fn) {
    if ( obj.attachEvent ) {
      obj.attachEvent('on' e, fn);
    }else obj.addEventListener(e, fn, false);
  }

  function onMouseWheel(ev) { 
    var ev = ev||event;   
    //IE
    //wheelDelta  下滚:负, 上滚:下
    //alert(oEvent.wheelDelta);
    //FF
    //detail:  下滚:正, 上滚: 负
    //alert(oEvent.detail)   
    var bDown = true;
    if ( ev.wheelDelta ) {
      bDown = ev.wheelDelta<0;
    }else {
      bDown = ev.detail>0;
    }    
    if ( !bDown ) {
      if ( checkFirst() ) return ;
      showId --;     
    }
    else {
      if ( checkLast() ) return ;
      showId   ;     
    }
    $("#content").attr("showId", showId);
    $("#footer ul li").children().removeClass("active").end().eq(showId).children().addClass("active");
    center(showId);
    if ( oEvent.preventDefault ) {
      oEvent.preventDefault();
    }
    return false;
  }

  myAddEvent(window, 'mousewheel', onMouseWheel);
  myAddEvent(window, 'DOMMouseScroll', onMouseWheel);
});

1. 在连续整数中取得一个随机数

1、seajs的require(XXX)的方法是怎样实现模块加载的?

charAt : 获取字符串指定位置上的字符。(参数:一个,指定要获取的字符位置)

以上所述就是本文给大家介绍的全部内容了,希望大家能够喜欢。

值 = Math.floor(Math.random() * 可能值的总数 第一个可能的值)
例:产生1-10的随机数

2、为什么需要预加载?

1,不接受负数,如果为负数,会返回一个空字符串。

您可能感兴趣的文章:

  • jquery使用经验小结
  • jquery查找父元素、子元素(个人经验总结)
  • jquery选择器、属性设置用法经验总结
  • jQuery使用经验小技巧(推荐)

复制代码 代码如下:

3、为什么需要构建工具?

2,如果不给参数,默认是获取第0位置上的字符。

var rand1 = Math.floor(Math.random() * 10 1);

4、构建前后的代码究竟有些什么区别,为什么要这么做?

3,只接收一个参数。

编写产生startNumber至endNumber随机数的函数

问题1: seajs的require(XXX)的方法是怎样实现模块加载的?

charCodeAt : 获取字符串中指定位置上字符的Unicode编码(参数: 一个,指定要获取字符编码的字符位置)

复制代码 代码如下:

代码逻辑比较绕,对源代码的理解放在文章的末尾,这里先简单梳理下模块加载的逻辑:

1,任何字符都有一个唯一的字符编码。

function selectFrom(startNumber, endNumber) {
    var choice = endNumber - startNumber 1;
    return Math.floor(Math.random() * choice startNumber)
}
var rand2 = selectFrom(2,8);//产生2至8的随机数

1、从seajs.use方法入口,开始加载use到的模块。

2,只接收一个参数。

2. 在不相邻整数中取得一个随机数

2、use到的模块这时mod缓存当中一定是不存在的。seajs创建一个新的mod,赋予一些初始的状态。

  常用:

2.1 在不相邻的两个整数中取得一个随机数

3、执行mod.load方法

    数字 : 48 ~ 57

例:随机产生2或4中的一个数

4、一堆逻辑之后走到seajs.request方法,请求模块文件。模块加载完成之后,执行define方法。

    下划线 : 95

复制代码 代码如下:

5、define方法分析提取模块的依赖模块,保存起来。缓存factory但不执行。

    空格  : 32

var rand3 = Math.random() < 0.5 ? 2 : 4;

6、模块的依赖模块再被加载,如果继续有依赖模块,则继续加载。直至所有被依赖的模块都加载完毕。

    制表符 : 9

2.2 在不相邻的多个整数中产生一个随机数

7、所有的模块加载完毕之后,执行use方法的callback.

    小写字母 :97 ~ 122

结合函数参数数组,可编写在不相邻的多个整数中产生一个随机值的函数

8、模块内部逻辑从callback开始执行。require方法在这个过程当中才被执行。

    大写字母 : 65 ~ 90

复制代码 代码如下:

问题2:为什么需要预加载?

2)静态方法:

function selectFromMess() {
    return arguments[Math.floor(Math.random() * arguments.length)]
}
//随机产生1、6、8中的一个数
var rand4 = selectFromMess(1, 6, 8);
//也可随机产生文本
var randomTxt1 = selectFromMess("安慰奖", "二等奖", "一等奖");

我们看到seajs.use方法实际上是在所有依赖模块都加载完了之后才执行callback。可以理解成在业务逻辑代码在执行之前,必须先预加载所有被依赖的模块代码。那么为什么是一个这样必须先做预加载的逻辑?

fromCharCode : 根据指定的字符编码返回对应的字符。(参数: 任意多个)

每次要输入这么多参数比较麻烦,可以改写一下函数

答案在于逻辑代码里面引用其他模块方法的这个require方法的执行方法:

1,可以接收多个参数。

复制代码 代码如下:

var mod = require(id);

2,写法是固定的(静态方法):String.fromCharCode();   //字符编码有效范围 : 0 ~ 65535 String是字符串的对象

function selectFromMessArray(arr) {
    return arr[Math.floor(Math.random() * arr.length)]
}
var arrayTxt=["一","二","三","四","五"];
var randTxt2 = selectFromMessArray(arrayTxt);

这个语法决定了mod的取得是个同步执行的过程,如果模块代码在此之前没有被预加载的话,就只能采用异步加载回调的方法来实现了,那么整个seajs的执行逻辑将完全会是另一个样子。因为异步你会搞不懂模块的执行顺序,逻辑会变的难以掌控。

 var str = '我是字符串';
 alert( str.charAt( 2 ) );  //''  如果本身长度只有5,却找str.charAt(12) 找不到也是空字符串'',0~str.length-1是合法范围。
 alert( str.charAt( ) );   //'我' 默认不写是0,找到第一个字符
 alert( str.charAt(2) );   // '字'
 alert( '1234'.charAt( 2 ) ); //3
 alert( '1234'.charAt(2,3) ); //3
 alert( str.charCodeAt( 2 ) );//23383 unicode编码
 alert( '1'.charCodeAt() );  // 49
 alert(String.fromCharCode(23383 ,21619)); //'字味' 根据编码转换成字符(静态方法)多个字符用 , 隔开

或者不改变原有方法,可以利用apply()这个方法传递数组参数

问题3:为什么需要构建工具?

查找类:

复制代码 代码如下:

可以看到没有构建前各个依赖模块都是单独加载的。这会产生过多的模块请求,对于页面的加载性能是不利的。构建工具本质上就是为了解决模块合并加载的问题。

indexOf : 查找指定的子字符串在字符串中第一次出现的位置。(第一个参数,指定要查找的子字符串;第二个参数指定开始查找的位置。)

var randTxt3 = selectFromMess.apply(null,arrayTxt);

问题4:构建前后的代码究竟有些什么区别,为什么要这么做?

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:希望大家能够喜欢,2、为什么需要预加载

关键词: 小鱼儿玄机30码