首页 > 代码库 > web 开发相关笔记 02

web 开发相关笔记 02

【1】

 HTML 插入第三方。

<iframe src="https://www.youtube.com/embed/sEQf5lcnj_o" frameborder="0" width="560" height="315"></iframe> <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5886854.1488736225!2d-122.10806260897259!3d44.75571499023218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4b0d03d337cc6ad9%3A0x9968b72aa2438fa5!2sCanada!5e0!3m2!1sen!2sjp!4v1501736562546" frameborder="0" width="600" height="450"></iframe>

 

【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 = http://www.mamicode.com/$(‘.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 = http://www.mamicode.com/$(‘.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