web 开发相关笔记 02

【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);
});