前言

这次有幸参与前端的工作,对于前端开发学习了不少新知识,在此记录一下相比之前,完全不同的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,输出不一样。

后记

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

记Javascript的编写方式的全新学习的更多相关文章

  1. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  2. 【JavaScript的引入方式】

    javascript:   是基于对象和事件驱动的客户端脚本[组成] Bom:浏览对象模型(与浏览器交互的方法和接口) Dom:文档对象模型(处理网页内容的方法和接口) ecma:核心(描述了js的语 ...

  3. 2、JavaScript 基础二 (从零学习JavaScript)

     11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...

  4. 1、JavaScript 基础一 (从零学习JavaScript)

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

  5. Expo大作战(二)--expo的生命周期,expo社区交流方式,expo学习必备资源,开发使用expo时关注的一些问题

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  6. [技术翻译]在现代JavaScript中编写异步任务

    本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...

  7. JavaScript 基础(一) - JavaScript的引入方式,JavaScript 变量命名规则,JS 的五种基本数据类型,ECMAScript 算数运算符,逻辑运算符

    JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. web前端(13)—— 了解JavaScript,JavaScript的引入方式

    从本篇博文开始,将进入web前端方便最关键最重要的部分——javascript,学到后面你就知道它真的太重要了 什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...

  9. java 编写小工具 尝试 学习(七)

    1.在java 编写小工具 尝试 学习(六)里学会了,控件 的随意摆放, 以及大小(x,y,width,height),又根据前面学习的按钮 被点击 的事件监控 的方法 ,点击 按钮 在显示区域显示“ ...

随机推荐

  1. express 安装和运行

    1.npm install -g express-generator 2.进入服务目录(自己定义的文件夹,或者express Myapp && cd Myapp 新建Myapp文件夹并 ...

  2. asp.net mvc项目实记-开启伪静态-Bundle压缩css,js

    百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...

  3. eclipse导入源码

    1.window-----preferences 2.java---installed jres(点击不用展开)---选中使用的jar包-----editor 3.选中rt.jar ------sou ...

  4. Ubuntu16.04下安装mysql

    系统信息 (lsb_release -a) Distributor ID: Ubuntu Description: Ubuntu 16.04.2 LTS Release: 16.04 Codename ...

  5. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  6. [UWP]创建一个进度按钮

    1. 前言 最近想要一个进度按钮. 传统上UWP上处理进度可以这样实现,首先是XAML,包括一个ProgressBar和一个按钮: <StackPanel Orientation="H ...

  7. 我的Spring学习记录(四)

    虽然Spring管理这我们的Bean很方便,但是,我们需要使用xml配置大量的Bean信息,告诉Spring我们要干嘛,这还是挺烦的,毕竟当我们的Bean随之增多的话,xml的各种配置会让人很头疼. ...

  8. Angular JS的正确打开姿势——简单实用(下)

        前  言 絮叨絮叨 继上篇内容,本篇继续讲一下这款优秀并且实用的前端插件AngularJS. 六. AngularJS中的HTTP 6.1先看看JQuery的Ajax写法 $ajax({ me ...

  9. jvm系列(十):如何优化Java GC「译」

    本文由CrowHawk翻译,是Java GC调优的经典佳作. 本文翻译自Sangmin Lee发表在Cubrid上的"Become a Java GC Expert"系列文章的第三 ...

  10. PS+HTML测试

    PS: 1. 写出标尺.参考线.网格线.放大和缩小的快捷键 2. 写出RGB模式和CMYK颜色模式里每一个字母代表什么颜色 3. 写出暖色和冷色各3种 4. 写出常用的抠图工具(6个以上) 5. 写出 ...