web 開發相關筆記 02

標籤：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