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

 

【4】

distpicker，不要遗漏

trigger

/*
 * per-set
 * 展示、修改用户信息。
 * */
var getSexVal = function() {
    var temp =$(".sex");
    for (var i = 0; i != 3; ++i) {
        if (temp[i].checked) return i;
    }
    return 0;
};

var lastTotalVal;
var getTotalVal = function() {
    var temp = $("#user-val1").val() 
        + $("#user-val2").val() 
        + $("#user-val3").val()
        + $("#user-val4").val()
        + $("#user-val5").val()
        + $("#user-val6").val();
    return temp; 
}

function verifyEmail(str) {  
    var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;  
    return reg.test(str);
}

function verifyPhone(str) {  
    var reg = /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/;  
    return reg.test(str);
}

var checkFormat_message = "";
var checkFormat = function() {
    // 是否改变
    currentTotalVal = getTotalVal();
    if (currentTotalVal === lastTotalVal) {
        checkFormat_message = "您还没有修改信息！";
        return false;
    }
    // 非空
    if ($("#user-val1").val() === "" || $("#user-val1").val() === null) {
        checkFormat_message = "昵称不能为空";
        return false;
    }
    // 邮箱格式
    if (!verifyEmail($("#user-val5").val())) {
        checkFormat_message = "邮箱格式错误";
        return false;        
    }
    // 手机号码格式
    if (!verifyPhone($("#user-val4").val())) {
        checkFormat_message = "手机号格式错误";
        return false;        
    }
    lastTotalVal = currentTotalVal;
    return true;
};

var userProfile = {
    display: function() {
        $.ajax({
            url: 'user/userProfile.do',
            method: 'GET',
            success: function (data) {
                $($('.sex')[data.sex]).attr('checked', true);
                $("#user-val2").val(data.province);
                $("#user-val2").trigger('change');
                $("#user-val3").val(data.city);
                $("#user-val3").trigger('change');
                $("#user-val6").val(data.country);
                $("#user-val6").trigger('change');
            }
        });            
    },
    saveProfile: function() {
        if (!checkFormat()) {
            alert(checkFormat_message);
            return false;
        };
        $.ajax({
            url: 'user/saveProfile.do',
            method: 'GET',
            data: {
                username: $("#user-val1").val(),
                sex: getSexVal(),
                province: $("#user-val2").val(),
                city: $("#user-val3").val(),
                country: $("#user-val6").val(),
                phone: $("#user-val4").val(),
                email: $("#user-val5").val(),
            },            
            success: function (data) {
                if(data.status == 200)
                    alert('保存成功');
                else
                    alert('保存失败');
            }
        });    
    },
};

$(function () { 
    userProfile.display();
    $('#btnSaveProfile').click(userProfile.saveProfile);
    lastTotalVal = getTotalVal();
});