記Javascript的編寫方式的全新學習

前言

此次有幸參與前端的工做，對於前端開發學習了很多新知識，在此記錄一下相比以前，徹底不一樣的Javascript編寫方式。

原來的編寫方式

以前也是寫過Javascript，就是常見的.js 文件寫函數：

function SayHello(){
alert('Test.');
}

而後再使用頁面引入該.js文件 便可調用SayHello方法。

新學方式

如今使用prototype，使用對象調用：

(function (exports, W, D, $) {
   'use strict';

    function History(W, D) {
    this.W = W;
    this.D = D;
    this.ChatUI = W.ChatUI;

    this.$Overlay = $('#overlay');
    this.$Alert = $('#alert-cnt');
    this.$PaginationHis = $('.pagination-container');
    this.$SearchForm = $('.filter-form');
    this.GetSearchFormData = function () {
        var status = this.$SearchForm.find('[name="sel-status"] option:selected').val().trim();
        var data = {};
        var startDate = this.$SearchForm.find('input[name="StartDate"]').val();
        var endDate = this.$SearchForm.find('input[name="EndDate"]').val();
        data = {
            Status: status,
            StartDate: startDate,
            EndDate: endDate,
        };
        return data;
    };

    this.baseUrl = W.baseUrl;

    this.DisplayOverlayDialog = function () {
        this.$Overlay.removeClass('hidden');
        this.$Overlay.show();
        this.$Overlay.find('.overlay-container').show();
        this.$Overlay.find('.overlay-loading').hide();
    }

    this.HideOverlay = function () {
        this.$Overlay.hide();
    }

    this.AlertError = function (errmsg) {
        this.$Alert.find('.alert-success').hide();
        this.$Alert.find('.alert-danger').text(errmsg).show();
    }

    this.AlertSucc = function (succmsg) {
        this.$Alert.find('.alert-danger').hide();
        this.$Alert.find('.alert-success').text(succmsg).show();
    }

    this.AlertNone = function () {
        this.$Alert.find('.alert-danger').hide();
        this.$Alert.find('.alert-success').hide();
    }
}

History.prototype.BindEvent = function () {
    var chatForm = this;
    $('#a.btn').click(function (event) {
        var $tgt = $(event.target);
    });
};

History.prototype.LoadDataAjax = function (ajaxUrl, postData, isRest) {
    var history = this;
    $.blockUI();
    $.ajax(ajaxUrl, {
        dataType: 'html',
        data: postData,
        timeout: 12000,
        method: "POST",
        success: function (data) {
            $('input[name="total-cnt"]').remove();
            var $caseTable = $('.histroy-case');
            $caseTable.remove();
            $('.hitory-msg').remove();

            $(data).insertBefore(history.$PaginationHis);
            var totalCount = $('input[name="total-cnt"]').val();
            history.InitPagination(totalCount, true, isRest);
            history.AlertSucc("Get case list succeed.")
            $.unblockUI();
        },
        error: function (error) {
            history.AlertError("Internal occurs error, please try again.")
            $.unblockUI();
        },
        complete: function () {
            $.unblockUI();
        }
    });
}

History.prototype.InitPagination = function (totalCount, isReInit, isReset) {
    var historyPage = this;
    var paginationHis = historyPage.$PaginationHis;

    var total = $('input[name="total-cnt"]').val();
    var pageSize = 5;
    pageSize = parseInt(pageSize);
    if (totalCount != null) {
        total = parseInt(totalCount);
    }
    if (total == 0) {
        paginationHis.addClass("hidden");
    } else {
        paginationHis.removeClass("hidden");
    }
    if (isReset) {
        paginationHis.bootpag({
            page: 1
        });
    }
    paginationHis.bootpag({
        total: Math.ceil(total / pageSize),
        maxVisible: 10
    }).on('page', function (event, num) {
        var ajaxUrl = "/Home/AjaxLoadCase";
        var postData = historyPage.GetSearchFormData();
        postData.Pagination = {
            PageIndex: num,
            PageSize: pageSize,
            Status: postData.Status,
            StartTime: postData.StartDate,
            EndTime: postData.EndDate
        }
        if (!isReInit || isReInit == undefined) {
            historyPage.LoadDataAjax(ajaxUrl, postData, false);
        }
    });
}

History.prototype.FilterData = function () {
    var history = this;

    history.$SearchForm.on('submit', function () {
        var postData = history.GetSearchFormData();
        var pageSize = 5;
        postData.Pagination = {
            PageIndex: 1,
            PageSize: pageSize,
            Status: postData.Status,
            StartTime: postData.StartDate,
            EndTime: postData.EndDate
        }
        var ajaxUrl = "/Home/AjaxLoadCase";
        history.LoadDataAjax(ajaxUrl, postData, true);
        return false;
    });
};
History.prototype.InitDatePicker = function () {
    $('.datepicker').datepicker({ defaultDate: new Date() });
}

var history = new History(window, document);
exports.module = exports.module || {};
exports.module.history = history;
history.BindEvent();
history.InitPagination();
history.InitDatePicker();
})(window.ChatUI, window, document, window.$);

說明

1.嚴格模式：use strict

顧名思義，是的Javascript在嚴格條件下執行，這些嚴格條件包括：
-消除Javascript語法的不合理、不嚴謹之處；
-提升編譯器效率，增長運行速度；
-消除代碼運行的不安全之處；
嚴格模式下，不少函數操做會拋錯或者禁止使用，好比this的使用，變量的做用域等，目前在學習中。

2.調用方式

聲明瞭History的對象，就能夠點出History下全部的函數或者變量成員。是的調用的時候，提示清晰明瞭。

3.閉包理解

這一塊仍是沒搞太明白（沮喪）。
閉包，就是使內部函數能夠訪問定義在外部函數中的變量，可是外部板書不能訪問內部定義的變量。

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 5);
}

這將打印出5 5 5 5 5， 而不是0 1 2 3 4，被坑。
Js的var的做用域，有做用域鏈，還有this關鍵字，構造器中的 this會指向新對象，而不是一開始中的this對象，打印這兩次this，輸出不同。

後記

先將這個編程方式記錄下來，往後學習。最後感謝前端同事給予機會，學習了新知識。