记Javascript的编写方式的全新学习

前言

这次有幸参与前端的工作，对于前端开发学习了不少新知识，在此记录一下相比之前，完全不同的Javascript编写方式。

原来的编写方式

http://blog.sina.com.cn/s/blog_175dc3f8a0102xgxi.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgxg.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgxd.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgww.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwv.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwu.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwt.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwe.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwj.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwi.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwd.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwc.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwb.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgwa.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgw6.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgw7.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtz.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgty.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtx.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtw.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtu.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtt.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgts.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtr.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtq.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtp.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgto.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtn.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgtk.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgsh.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgsg.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgsf.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgse.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgsd.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgsc.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgsb.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgs3.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgs0.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgr4.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgqc.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgqb.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgqa.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgpp.html
http://blog.sina.com.cn/s/blog_175dc3f8a0102xgpo.html

之前也是写过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，输出不一样。