一、问答
（一）、如下requirejs配置中, baseUrl 有什么作用？以什么作为基准? paths 的作用和用法是什么?
requirejs.config({
baseUrl: "src/js",
paths: {
'jquery': 'lib/bower_components/jquery/dist/jquery.min'
}
});
baseUrl的作用是设置基路径（参照路径），例如上面的例子中就是以src/js路径作为参照路径，然后在该目录下的lib/bower_components/jquery/dist/文件夹中放有jquery.min.js的文件；
paths的作用是指定各个模块的加载路径，当然该路径也可以是网址。用法就是前面是一个模块名，后面是一个路径或网址。
例如：
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
或者：
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
（二）、如下 r.js 的打包配置中 baseUrl 是什么? name 是什么
({
baseUrl: "./src/js",
paths: {
'jquery': 'lib/bower_components/jquery/dist/jquery.min'
},
name: "main",
out: "dist/js/merge.js"
})
baseUrl 是指设置当前配置文件下的src/js路径为基准路径；
name是指模块的入口文件，即其在当前配置文件同一目录的main.js。
需要指出的是：
1、r.js的配置文件中的baseUrl的路径是相对其自身的，而
requirejs配置文件中的baseUrl的路径是相对html文件的；
2、这两个配置文件中的索引的文件必须是同一个（当然文件路径名不一定相同）。
二、代码
（一）、使用 requirejs 完善任务15，包括如下功能：
1、首屏大图为全屏轮播
2、有回到顶部功能
3、PORTFOLIO 使用瀑布流布局（图片高度不一），下部有加载更多按钮，
4、点击加载更多会加载更多数据(数据在后端 mock)
5、About 每个时间区块默认隐藏，曝光渐变展示
6、使用 r.js 打包应用
html源码如下：
15-2
SERVICES
Lorem ipsum dolor sit amet consectetur.
-
E-Commerce
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
-
Responsive Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
-
Web Security
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
PORTFOLIO
Lorem ipsum dolor sit amet consectetur.
正在加载...
ABOUT
Lorem ipsum dolor sit amet consectetur.
2009-2011
Our Humble Beginnings
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
[站外图片上传中……(2)]
MARCH 2011
An Agency is Born
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
[站外图片上传中……(3)]
DECEMBER 2012
Transition to Full Service
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
[站外图片上传中……(4)]
JULY 2014
Phase Two Expansion
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
[站外图片上传中……(5)]
BE PART
OF OUR
STORY!
OUR AMAZING TEAM
Lorem ipsum dolor sit amet consectetur.
-
[站外图片上传中……(6)]
Kay Garland
Lead Designer
-
[站外图片上传中……(7)]
Larry Parker
Lead Marketer
-
[站外图片上传中……(8)]
Diana Pertersen
Lead Developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.
CONTACT US
Lorem ipsum dolor sit amet consectetur.
2、曝光效果js源码如下：
/**
* Created by lxzd1 on 2016/11/5.
*/
define(["../lib/jquery.min"],function () {
var baoguang=(function () {
var clock;
// function isVisible($node) {
// var scrollH=$(window).scrollTop(),
// winH=$(window).height(),
// nodeOffset=$node.offset().top;
//
// if ((scrollH+winH)>=nodeOffset){
// return true
// }
// else {return false}
// }
function isVisible($node){
var scrollH=$(window).height()+$(window).scrollTop(),
selfDoc=$node.offset().top,
selfH=$node.outerHeight(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)||$cur.attr("isShowed")){
return
}
if (isVisible($cur)){
$cur.animate({"opacity":"1"},1500)
$cur.attr("isShowed",true)
}
})
}
function location() {
$(".location").each(function () {
var $cur1=$(this),
num=$cur1.index();
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/jquery.min"],function () {
var getPortfolioMore=(function () {
$(".loadMore").on("click",function () {
$(".loadMore").text("正在加载...")
getAndPlaceData();
});
var perPageCount=9,
curPage=1;
function getAndPlaceData() {
$.ajax({
url:"http://platform.sina.com.cn/slide/album_tech",
dataType: 'jsonp',
jsonp:"jsoncallback",
data:{
app_key:"1271687855",
num: perPageCount,
page:curPage
}
}).done(function (ret) {
if (ret && ret.status && ret.status.code === "0"){
placeData(ret.data);
$(".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=[];
$nodes.find("img").each(function () {
var defer = $.Deferred();
$(this).load(function () {
defer.resolve()
});
arr.push(defer)
});
$.when.apply(null,arr).done(function () {
console.log("PORTFOLIO 区域图片加载全部完成！");
waterFall($nodes)
})
}
function renderData(data) {
var str="",
$nodes;
for (var i=0;i[站外图片上传中……(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 4、goTop效果源码如下：
/**
* Created by lxzd1 on 2016/11/5.
*/
define(["../lib/jquery.min"],function () {
function goTop(ct) {
this.ct=ct;
this.target=$('');
goTopCt=this.ct;
goTopTr=this.target;
this.createNode();
this.bindEvent();
}
goTop.prototype={
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()){
goTopTr.show();
$(".ct-nav").css({"background-color":"#333"})
}
else {
goTopTr.hide();
$(".ct-nav").removeAttr("style")
}
}) ;
goTopTr.on('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/jquery.min"],function () {
var Carousel=(function () {
var bgLiWidth=$(".ct-bg").children().width(),
clock=false,
nextClock=false,
$bgLi=$(".ct-bg").children(),
bgCount=$bgLi.size();
$(".ct-bg").append($bgLi.first().clone());
$(".ct-bg").prepend($bgLi.last().clone());
bgTrueCount=$(".ct-bg").children().length;
$(".ct-bg").css({"left":0-bgLiWidth,"width":bgTrueCount*bgLiWidth});
$(".ct-bg").children().width(bgLiWidth);
function showMe(num) {
if (clock){return}
clock=true;
if (-16、build.js源码如下：
/**
* Created by lxzd1 on 2016/11/6.
*/
({
baseUrl:".",
name:"main",
out:"indexjs.js"
});
7、main.js源码如下：
/**
* Created by lxzd1 on 2016/11/5.
*/
define(["./js/div/goTop","./js/div/lunbo","./js/div/getPortfolioMore","./js/div/baoguang"]);
总体预览地址：
https://github.com/have-not-BUG/task/blob/master/renwu/renwu39/renwu39new.html
**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *