2023年7月9日发(作者：)

requireJS、基础知识问答⼀、问答（⼀）、如下requirejs配置中, baseUrl 有什么作⽤？以什么作为基准? paths 的作⽤和⽤法是什么? ({ baseUrl: "src/js",

paths: { 'jquery': 'lib/bower_components/jquery/dist/' } });baseUrl的作⽤是设置基路径（参照路径），例如上⾯的例⼦中就是以src/js路径作为参照路径，然后在该⽬录下的lib/bower_components/jquery/dist/⽂件夹中放有的⽂件；paths的作⽤是指定各个模块的加载路径，当然该路径也可以是⽹址。⽤法就是前⾯是⼀个模块名，后⾯是⼀个路径或⽹址。例如：　　({　　　　baseUrl: "js/lib",　　　　paths: {　　　　　　"jquery": "",　　　　　　"underscore": "",　　　　　　"backbone": ""　　　　}　　});或者：　　({　　　　paths: {　　　　　　"jquery": "/ajax/libs/jquery/1.7.2/"　　　　}　　});（⼆）、如下 的打包配置中 baseUrl 是什么? name 是什么({ baseUrl: "./src/js", paths: { 'jquery': 'lib/bower_components/jquery/dist/' }, name: "main", out: "dist/js/"})baseUrl 是指设置当前配置⽂件下的src/js路径为基准路径；name是指模块的⼊⼝⽂件，即其在当前配置⽂件同⼀⽬录的。需要指出的是：1、的配置⽂件中的baseUrl的路径是相对其⾃⾝的，⽽requirejs配置⽂件中的baseUrl的路径是相对html⽂件的；2、这两个配置⽂件中的索引的⽂件必须是同⼀个（当然⽂件路径名不⼀定相同）。⼆、代码（⼀）、使⽤ requirejs 完善任务15，包括如下功能：1、⾸屏⼤图为全屏轮播2、有回到顶部功能3、PORTFOLIO 使⽤瀑布流布局（图⽚⾼度不⼀），下部有加载更多按钮，4、点击加载更多会加载更多数据(数据在后端 mock)5、About 每个时间区块默认隐藏，曝光渐变展⽰6、使⽤ 打包应⽤html源码如下：

2、曝光效果js源码如下：/** * Created by lxzd1 on 2016/11/5. */define(["../lib/"],function () { var baoguang=(function () { var clock; // function isVisible($node) { // var scrollH=$(window).scrollTop(), // winH=$(window).height(), // nodeOffset=$().top; // // if ((scrollH+winH)>=nodeOffset){ // return true // } // else {return false} // } function isVisible($node){ var scrollH=$(window).height()+$(window).scrollTop(), selfDoc=$().top, selfH=$eight(true); if (selfDoc < scrollH && scrollH < selfDoc+selfH ) { return true } else return false } $(window).on("scroll",function () { if (clock){clearTimeout(clock)}; clock=setTimeout(function () { location(); showCheck(); },100) }) function showCheck() { $(".wrap-about").each(function () { var $cur=$(this); if (!isVisible($cur)||$("isShowed")){ return } if (isVisible($cur)){ $e({"opacity":"1"},1500) $("isShowed",true) } }) } function location() { $(".location").each(function () { var $cur1=$(this), num=$(); if (!isVisible($cur1)){ if (!isVisible($cur1)){ $(".nav li").eq(num).find("a").removeAttr("style"); return } if (isVisible($cur1)){ $(".nav li").eq(num).siblings().find("a").removeAttr("style"); $(".nav li").eq(num).find("a").css("background-color", "#fed136"); } }) } }()) return {baoguang};});3、portfolio区域效果源码如下/** * Created by lxzd1 on 2016/11/5. */define(["../lib/"],function () { var getPortfolioMore=(function () { $(".loadMore").on("click",function () { $(".loadMore").text("正在加载...") getAndPlaceData(); }); var perPageCount=9, curPage=1; function getAndPlaceData() { $.ajax({ url:"/slide/album_tech", dataType: 'jsonp', jsonp:"jsoncallback", data:{ app_key:"1271687855", num: perPageCount, page:curPage } }).done(function (ret) { if (ret && && === "0"){ placeData(); $(".loadMore").text("点击加载更多"); }else{alert("调⽤的新浪后台出现错误，请重试get ajax data error1")} }) .fail(function () { alert("从新浪获取数据失败，请重试get ajax data error2"); $(".loadMore").text("点击重试"); }) } //3、将获取的数据append到ul中 待图⽚加载完成，使⽤瀑布流的⽅式放置元素 function placeData(nodelist) { var $nodes=renderData(nodelist); var arr=[]; $("img").each(function () { var defer = $.Deferred(); $(this).load(function () { e() }); }); (defer) }); $.(null,arr).done(function () { ("PORTFOLIO 区域图⽚加载全部完成！"); waterFall($nodes) }) } function renderData(data) { var str="", $nodes; for (var i=0;i<;i++){ str+='

'; str+='[站外图⽚上传中……(13)]'; str+='

'+data[i].short_name+'

'; str+='

'+data[i].short_intro+'

'; str+='

'; } $nodes=$(str); $(".portfolioUl").append($nodes); return $nodes; } var widthNum=parseInt($(".ct").width()/$(".portfolioLi").outerWidth(true)), allHeight=[]; for (var i=0;i'); goTopCt=; goTopTr=; Node(); ent(); } ype={ bindEvent:function () { $(window).on("scroll",function () { function canShow() { var windowH=$(window).height(), scrollH=$(window).scrollTop(); if (scrollH>windowH){ return true; } else {return false} } if (canShow()){ (); $(".ct-nav").css({"background-color":"#333"}) } else { (); $(".ct-nav").removeAttr("style") } }) ; ('click',function () { $('html,body').animate({"scrollTop":"0px"},800) }); }, createNode:function (){ $(goTopCt).append(goTopTr) } }; var GoTop1= new goTop('body'); return { GoTop1 };});5、⾸页轮播效果源码如下：/** * Created by lxzd1 on 2016/11/5. */define(["../lib/"],function () { var Carousel=(function () { var bgLiWidth=$(".ct-bg").children().width(), clock=false, nextClock=false, $bgLi=$(".ct-bg").children(), bgCount=$(); $(".ct-bg").append($().clone()); $(".ct-bg").prepend($().clone()); bgTrueCount=$(".ct-bg").children().length; $(".ct-bg").css({"left":0-bgLiWidth,"width":bgTrueCount*bgLiWidth}); $(".ct-bg").children().width(bgLiWidth); function showMe(num) { function showMe(num) { if (clock){return} clock=true; if (-1

发布者：admin，转转请注明出处：http://www.yc00.com/news/1688854007a176706.html