记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，输出不一样。

后记

先将这个编程方式记录下来，日后学习。最后感谢前端同事给予机会，学习了新知识。