码迷,mamicode.com
首页 > Web开发 > 详细

web 开发相关笔记 02

时间:2017-08-05 18:50:22      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:llb   get   home   btn   top   3.1   blog   class   数据   

【1】

 HTML 插入第三方。

 

【2】

技术分享

 

【3】

JavaScript 回调函数 & 模块化 --> 用变量封装数据、方法 --> 类比 Java 中的 package

var fetchLive = function(callback) {
    $.ajax({
        url: "live/list.do",
        method: ‘GET‘,
        success: function (data) {
            callback(data);
        }
    });        
};

var liveDisplay = {
    homepage: function(data) {
        console.log(data);
        var liveName = $(‘.telecast-title‘);
        var liveStatus = $(‘.live-status‘);
        var liveTime = $(‘.telecast-time‘);
        var liveHref = $(‘.live-href‘);
        const DISPLAY_NUM = (data.length < 4 ? data.length : 4);
        for (var i = 0; i != DISPLAY_NUM; ++i) {
            $(liveName[i]).text(data[i].name);
            $(liveStatus[i]).text(data[i].status);
            $(liveTime[i]).text(data[i].lastTime);
            liveHref[i].href = data[i].link;
        }
    }
};

$(function () {
    fetchLive(liveDisplay.homepage);
});

示例 02:

/**
 * 分类展示课程
 */

const BASE_URL = "course/listbyid.do?categoryID=";

var fetchCourseById = function(id, callback) {
    $.ajax({
        url: BASE_URL + id,
        method: ‘GET‘,
        success: function (data) {
            callback(data);
        }
    });    
};

var displayCourse = {
    frameA: function(courses) { // 首页页面展示1
        var courseName = $(‘.recommended-course-name‘);
        var courseNum = $(‘.recommended-course-number‘);
        var coursePic = $(‘.recommended-course-picture‘);
        
        const DISPLAY_NUM = (courses.length < 6 ? courses.length : 6);
        for (var i = 0; i != DISPLAY_NUM; ++i) {
            $(courseName[i]).text(courses[i].title);
            $(courseNum[i]).text(courses[i].lessonNum);
            coursePic[i].src = courses[i].picture;
        }
    },
    
    frameB: function(courses) { // 首页页面展示2
        var courseName = $(‘.free-course-name‘);
        var courseNum = $(‘.free-course-lessionNum‘);
        var coursePic = $(‘.free-course-logo‘);
        var courseHref = $(‘.btn-study‘);
        
        const DISPLAY_NUM = (courses.length < 8 ? courses.length : 8);
        for (var i = 0; i != DISPLAY_NUM; ++i) {
            $(courseName[i]).text(courses[i].title);
            $(courseNum[i]).text(courses[i].lessonNum);
            coursePic[i].src = courses[i].picture;
            courseHref[i].href = ‘toPcLivePlay.do?source=‘ + courses[i].rtmp;
        }
    }
}

$(function () { 
    fetchCourseById(2, displayCourse.frameA);
    fetchCourseById(1, displayCourse.frameB);
});

 

web 开发相关笔记 02

标签:llb   get   home   btn   top   3.1   blog   class   数据   

原文地址:http://www.cnblogs.com/xkxf/p/7269898.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!