'var webApp = { .. }' 和 'var webApp = function (){ .. }' 有什么区别
What's the difference between 'var webApp = { .. }' and 'var webApp = function (){ .. }'
我最近对模块化 JS 进行了很多试验，但我仍然想知道我是否正在编写它 "the right way"。
例如，如果我有一个包含输入和提交按钮的页面，这些按钮应该在提交后显示数据（例如 table 和图表），那么我在 IFFE 下编写代码，这样就没有人可以访问它，但是使用这样的对象变量：
var webApp = { ... }
并在其中缓存 DOM 中的元素、添加绑定事件和其他有用的功能。
这是一个真实的代码，我用于一个应该显示图表的表单，table，以及加载数据时的进度条，所有这些都在一个对象中进行管理qwData：
(function() {
const qwData = {
// Initialize functions
init: function() {
this.cacheDom();
this.bindEvents();
},
// Cache vars
cacheDom: function() {
this.dataDisplayed = false;
this.countUsers = <?php echo $_SESSION['all_users_count_real']; ?>;
this.customerMachines = <?php echo $_SESSION['customer_statistics']['total_machines']; ?>;
this.$form = $('#frm');
this.$alistToolbar = this.$form.find('.alist-toolbar');
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][10].value;
this.dateCount = this.countDays(this.start_date, this.end_date);
this.show = document.querySelector('#btn-show');
this.downloadBtn = document.querySelector('#download_summary_button');
this.$dataContainer = $('#qw-data-container');
this.$qwTable = $('#qwtable');
this.$qwTbody = this.$qwTable.find('tbody');
this.$qwTd = this.$qwTbody.find('td');
this.qwChart = echarts.init(document.getElementById('main-chart'));
this.progressBar = document.querySelector('.progress-bar');
Object.defineProperty(this, "progress", {
get: () => {
return this.progressPrecent || 0;
},
set: (value) => {
if( value != this.progressPrecent ) {
this.progressPrecent = value;
// this.setQwChartProgress(value);
this.setProgressBarValue(value);
this.setProgressButton(value);
}
},
configurable: true
});
this.qwChartProgress = this.progress;
},
// Bind click events (or any events..)
bindEvents: function() {
var that = this;
// On click "Show" BTN
this.show.onclick = this.sendData.bind(this);
// On Change inputs
this.$form.change(function(){
that.updateDatesInputs(this);
});
// downloadQw
this.downloadBtn.onclick = this.downloadQw.bind(this);
},
downloadQw: function(e){
e.preventDefault();
var customer = "<?php echo $_SESSION['company_name']; ?>";
var filename = customer + "qws_"+ this.start_date + "-" + this.end_date + ".zip";
$.ajax({
url: "/aaa/api/download_csv.php",
method: "GET",
dataType : "json",
data: {
customer: customer,
filename: filename
},
success:function(result){
if(result.status){
window.location.href="/aaa/api/download_csv.php?customer="+customer+"&filename="+filename+"&download=1";
}
},
error:function(){
}
})
},
setQwChartProgress: function(value){
if (value != 0) {
// Show Chart Loading
this.qwChart.showLoading({
color: (value == 99) ? '#00b0f0' : '#fff',
text: value + '%'
});
}
},
setProgressButton: function(value){
if ( value >= 100 || value == 0 ){
this.show.value = 'Show';
}
else {
this.show.value = value +'%';
// this.show.disabled = true;
this.disableShow();
}
},
resetShowButton: function(){
this.show.value = 'Show';
this.disableShow();
},
disableShow: function(){
// this.show.style.color = "grey";
// this.show.disabled = true;
this.show.classList.add("isDisabled");
},
enableShow: function(){
// this.show.style.color = "#66aa66";
// this.show.disabled = false;
this.show.classList.remove("isDisabled");
},
updateDatesInputs: function(){
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][11].value;
this.dateCount = this.countDays(this.start_date,this.end_date);
// this.show.disabled = false;
this.enableShow();
this.removeError();
},
removeError: function(){
if (this.errors) {
this.errors.remove();
delete this.errors;
}
},
countDays: function(date1, date2){
// First we split the values to arrays date1[0] is the year, [1] the month and [2] the day
var date1 = date1.split('-');
var date2 = date2.split('-');
// Now we convert the array to a Date object, which has several helpful methods
date1 = new Date(date1[0], date1[1], date1[2]);
date2 = new Date(date2[0], date2[1], date2[2]);
// We use the getTime() method and get the unixtime (in milliseconds, but we want seconds, therefore we divide it through 1000)
var date1_unixtime = parseInt(date1.getTime() / 1000);
var date2_unixtime = parseInt(date2.getTime() / 1000);
// This is the calculated difference in seconds
var timeDifference = date2_unixtime - date1_unixtime;
// in Hours
var timeDifferenceInHours = timeDifference / 60 / 60;
// and finaly, in days :)
var timeDifferenceInDays = timeDifferenceInHours / 24;
if (timeDifferenceInDays > 0){
return timeDifferenceInDays;
} else {
// alert('Error: The date are invalid.');
}
},
// Get data, prevent submit defaults and submit.
sendData: function(e) {
e.preventDefault();
if (this.show.classList.contains('isDisabled')) {
this.showErrorDiv("Please select a new date range before submitting.");
} else {
let that = this;
let estimatedTotalTime = ( (this.countUsers*this.customerMachines)/777 ) * 0.098;
let estimatedTime = estimatedTotalTime/99;
let estimatedTimeMs = estimatedTime*1000;
let timer = setInterval( function(){that.incrementProgress(timer);}, estimatedTime);
console.log('Total Time: ' + estimatedTotalTime + 's');
console.log('Estimated Time for 1%: ' + estimatedTime + 's');
$.ajax({
type: 'POST',
url: "/manageit/ajax.php?module=qw_module",
dataType: 'json',
data: {
start_ts: that.start_date,
stop_ts: that.end_date,
submitted: true,
company_name: "<?php echo $_SESSION['company_name']; ?>"
},
beforeSend: function() {
// Show Chart Loading
that.qwChart.showLoading({
color: '#00b0f0',
// text: that.qwChartProgress
text: ''
});
// If data div isn't displayed
if (!that.dataDisplayed) {
// Show divs loading
that.showMainDiv();
} else {
that.$qwTbody.slideUp('fast');
that.$qwTbody.html('');
}
},
complete: function(){},
success: function(result){
// Reset show btn
that.resetShowButton();
// Clear timer
clearInterval(timer);
// Set progressbar to 100%
that.setProgressBarTo100();
// Show Download Button
that.downloadBtn.style.display = 'inline-block';
// Insert Chart Data
that.insertChartData(result);
// Insert Table Data
that.insertTableData(result);
}
});
that.dataDisplayed = true;
}
},
showErrorDiv: function(errorTxt){
if (!this.errors){
this.errors = document.createElement("div");
this.errors.className = "qw_errors_div";
this.errors.textContent = errorTxt;
this.$alistToolbar.append(this.errors);
}
},
// Insert Data to Table
insertTableData: function(json){
let str = '';
let isOdd = ' rowspan="2" ';
for ( let i=1; i<9; i++ ) {
str += '<tr>';
for (let j = 0; j < 8; j++) {
if ((i%2 === 0) && (j==0)){
// do nada
} else {
str += '<td ';
str += ((i % 2 !== 0)&&(j==0)) ? isOdd : '';
str += '> ';
str += json[i][j];
str += '</td>';
}
}
str += '</tr>';
}
this.$qwTbody.html(str);
this.$qwTbody.slideDown('fast', function(){
if ($(this).is(':visible'))
$(this).css('display','table-row-group');
});
// Apply colors on table.
this.tableHover();
},
tableHover: function(){
this.$qwTd = this.$qwTbody.find('td');
var that = this;
this.$qwTd.eq(0).hover( function(){
that.$qwTd.eq(0).css('background-color', '#f5f5f5');
that.$qwTd.eq(0).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(0).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(0).css('background-color', '');
that.$qwTd.eq(0).parent().css('background-color', '');
that.$qwTd.eq(0).parent().next().css('background-color', '');
});
this.$qwTd.eq(15).hover( function(){
that.$qwTd.eq(15).css('background-color', '#f5f5f5');
that.$qwTd.eq(15).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(15).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(15).css('background-color', '');
that.$qwTd.eq(15).parent().css('background-color', '');
that.$qwTd.eq(15).parent().next().css('background-color', '');
});
this.$qwTd.eq(30).hover( function(){
that.$qwTd.eq(30).css('background-color', '#f5f5f5');
that.$qwTd.eq(30).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(30).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(30).css('background-color', '');
that.$qwTd.eq(30).parent().css('background-color', '');
that.$qwTd.eq(30).parent().next().css('background-color', '');
});
this.$qwTd.eq(45).hover( function(){
that.$qwTd.eq(45).css('background-color', '#f5f5f5');
that.$qwTd.eq(45).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(45).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(45).css('background-color', '');
that.$qwTd.eq(45).parent().css('background-color', '');
that.$qwTd.eq(45).parent().next().css('background-color', '');
});
},
incrementProgress: function(timer){
if (this.progress == 99)
clearInterval(timer);
else
this.progress++;
},
// Insert Data to Chart
insertChartData: function(json){
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
this.qwChart.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
this.qwChart.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: this.qwChart.config.rotate,
align: this.qwChart.config.align,
verticalAlign: this.qwChart.config.verticalAlign,
position: this.qwChart.config.position,
distance: this.qwChart.config.distance
}
};
this.qwChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
normal: {
show: true,
position: this.qwChart.config.position,
distance: this.qwChart.config.distance,
align: this.qwChart.config.align,
verticalAlign: this.qwChart.config.verticalAlign,
rotate: this.qwChart.config.rotate,
// formatter: '{c} {name|{a}}',
formatter: '{name|{a}}',
fontSize: 16,
rich: {
name: {
// textBorderColor: '#fff',
// color: '#333',
// color: '#717171',
color: '#525252',
shadowColor: 'transparent',
shadowBlur: 0,
textBorderColor: 'transparent',
textBorderWidth: 0,
textShadowColor: 'transparent',
textShadowBlur: 0
}
}
}
};
option = {
color: ['#007bff', '#00b0f0', 'red', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Inactives / Viewers', 'Inactives / Viewers / Less than 1min per day', 'Light no Macro']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['Excel', 'Word', 'PowerPoint', 'All 3 Apps']
}
],
yAxis: [
{
type: 'value',
name: 'Score'
}
],
series: [
{
name: 'Light no Macro',
type: 'bar',
label: labelOption,
color: 'red',
data: [ [3, json[7][7]] ]
},
{
name: 'Inactives / Viewers',
type: 'bar',
barGap: 0,
label: labelOption,
data: [ json[1][7], json[3][7], json[5][7], json[8][7] ]
},
{
name: 'Inactives / Viewers / Less than 1min per day',
type: 'bar',
label: labelOption,
data: [ json[2][7], json[4][7], json[6][7] ]
}
]
};
// Set charts options
this.qwChart.setOption(option);
// Hide Loading
this.qwChart.hideLoading();
},
// Show Main div on submition (only)
showMainDiv: function(){
// Show all contatner div
this.$dataContainer.slideDown('slow');
},
// Sets a new value for the progress bar
setProgressBarValue: function(value){
this.progressBar.style.width = this.returnNumWithPrecent(value);
},
returnNumWithPrecent: function(num){
return num.toString() + '%';
},
setProgressBarTo100: function(){
var that = this;
// Show Download Button
this.progress = 100;
setTimeout(function () {
// Show Download Button
that.progress = 0;
}, 1000);
}
}
// run object
qwData.init();
})();
但我看到 other examples 将功能写在函数下而不是对象下:
webApp = function (){ ... };
喜欢这个例子：
var Background = (function() {
'use strict';
// placeholder for cached DOM elements
var DOM = {};
/* =================== private methods ================= */
// cache DOM elements
function cacheDom() {
DOM.$background = $('#background');
}
// coordinate async assembly of image element and rendering
function loadImage() {
var baseUrl = 'https://source.unsplash.com/category',
cat = 'nature',
size = '1920x1080';
buildElement(`${baseUrl}/${cat}/${size}`)
.then(render);
}
// assemble the image element
function buildElement(source) {
var deferred = $.Deferred(function (task) {
var image = new Image();
image.onload = function () {
task.resolve(image);
};
image.onerror = function () {
task.reject();
};
image.src = source;
});
return deferred.promise();
}
// render DOM
function render(image) {
DOM.$background
.append(image)
.css('opacity', 1);
}
/* =================== public methods ================== */
// main init method
function init() {
cacheDom();
loadImage();
}
/* =============== export public methods =============== */
return {
init: init
};
}());
关于这个我有 2 个问题：
使用对象和在对象内部设置函数、变量等有什么区别':
var webApp = { ... };
和一个具有相同特征的函数变量（只是有一个
写法不同）。就像我粘贴的 link 中的示例。
var webApp = function (){ ... };
- 编写这样的代码是否正确，其中所有（有点分离的元素，如图表、table、进度条）都在一个 object/function 中？这应该更好地分离到不同的对象吗？如果有更新更好的方法来编写此类代码，请提及我应该研究的内容。
IIFE 模式允许私有变量 - DOM、cacheDom、loadImage - 这些变量无法从 IIFE 外部访问。在对象模式中，一切都可以作为对象的属性公开访问。有时，如果不先声明一些变量，您根本无法构造所需的对象，因此将这些变量隔离在 IIFE 中也很有用。
如果您熟悉面向对象编程，可以通过类比 class 的私有和 public 属性和函数来理解它。
其他方法：模块化模式，请参阅节点模块。是关于包装的。
看这段代码：
var obj = (function() {
let a = function() { console.log('function a'); };
let b = function() { a(); console.log('function b'); };
return { b: b };
})();
obj.b();
// function a
// function b
obj.a();
// TypeError: obj.a is not a function
或者这样更熟悉：
function MyStuff() {
let a = function() { console.log('function a'); };
let b = function() { a(); console.log('function b'); };
return { b: b };
}
var obj = MyStuff();
obj.b();
// function a
// function b
obj.a();
// TypeError: obj.a is not a function
在函数内部，您有一个局部作用域，无法从外部访问。在这个本地范围内，您可以创建变量、函数等。
在 return 语句中，您 return 一个对象将函数和变量导出到外部作用域。这就像决定哪些 functions/props 是 public，哪些应该保密。
当您以 var webApp = {...} 方式创建对象时，您是在直接创建一个对象，其所有属性和函数都 public 在您定义变量的范围内 "webApp".
回答你的第二个问题，是的，你应该根据关注点将东西分成不同的对象。请参阅 SOLID 原则。 :)
互联网教程的一个问题是它们停留在相关点之外，很少有作者保持最新状态。在 JS 领域，事情发展得非常快，5 年前的行业标准（例如 jQuery）现在看起来很奇怪，当你仍然偶然发现它时。
所以，要养成我唠叨别人遗漏的好习惯：
JavaScript 模块的状态，2018 年年中，变化很快，#deprecated
一团糟。
首先你有 ES 6 模块。 ES 6 被重命名为 ES 2015 并且模块部分被取出并成为一个单独的规范，这意味着浏览器可以兼容 ES 2015 并且仍然没有原生模块。然而，3 年后，每个具有相关全球市场份额的浏览器（chrome、android chrome、firefox、iOS Safari）都至少实现了原生的基本版本模块系统（Edge、Opera 等也是如此）。我不清楚，因为我相信规范允许路径更宽容（我们将在一分钟内返回），但这里是语法，相对或绝对文件路径，需要扩展名：
import Foo from './foo.js'; // Import default export from foo.js, alias to 'Foo'
import { Foo } from './foo.js'; // Import named export 'Foo' from foo.js
export default function () {}; // exports a function as default, importer aliases
const Foo = class Foo {};
export Foo; // exports named class Foo
这些比其他任何东西都有很多优势（首先，最重要的是你不需要特殊的工具或构建过程），但是因为它们 非常 最近他们不是尚未在 JavaScript 生态系统中得到广泛使用。因为他们很早就来了，而且人们还有工作要完成，所以他们实现了各种其他模块 patterns/tools/systems。最早的模式之一就是您的问题中的模式，但这种模式虽然肯定比没有模式好，但它有足够多的问题，人们开始四处寻找。
AMD 模块
另一个早期产品是 require.js 的异步模块定义。虽然它有一些引人注目的技术优势，但它实际上已经死了。
Common.js 个模块
node.js 以其自己的基于 common.js 模块的模块系统（基本上已经成为 common.js 的实际风格）出现在现场。人们开始说 "hey it'd be great to be able to do this in the browser too"，因此，browserify。 Browserify 是一个工具，可以遍历你的依赖图并将 require 表达式转换成浏览器可以处理的东西（基本上，通过使 require 成为一个函数）。 Node 的模块有点不适合浏览器，但汇聚在一个标准上比八千万个相互竞争的临时实现要好。人们看着这三个相互竞争的模块 patterns/systems（你的问题中有一个，AMD，common.js），然后说嘿我们可以统一这些。于是
通用模块定义
如果您在野外看到过如下代码：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory(require('jquery'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
那么你已经看到了UMD。请注意它如何检查它所在的环境是否针对 AMD 或 common.js 进行了设置。出于遗留代码和易读性问题（这是相当多的样板文件），转换器被编写为将这两种样式转换为这种样式。
但人们想要更多：他们希望能够在代码中表达 所有 的 Web 应用程序依赖项（包括 css 和图像），并使用分片工具并有选择地加载它。另外，此时本机模块规范处于草案阶段，人们希望使用该语法。因此
Webpack 模块
Webpack 目前是目前使用的事实上的系统（尽管很多人仍在使用 browserify）。 Webpack 的模块语法看起来像这样：
import Foo from 'foo'; // imports default export from foo.js somewhere on PATH
这看起来很眼熟吗？非常类似于（但与本机模块略有不同）。 Webpack 还可以执行以下操作：
import 'Something.css'; // commonly seen in react apps
import 'logo.svg'; // ditto
这很方便，随着人们转向组件化系统，能够在该组件的入口点文件中表达所有组件依赖性是件好事。不幸的是，HTML 允许您在没有构建步骤的情况下本地执行此操作的导入死于可怕的死亡。
不幸的是，与本机模块系统的不兼容性，微妙的（路径和文件扩展名）和严重的（导入非 js 资产），这意味着其中一个或另一个将不得不改变，因为我已经尝试过最近编写基于本地模块的应用程序，非常 难以使用库（其中几乎 none 提供了本地模块风格）。
使用什么是一种自以为是的问题，但如果您使用的是框架，请使用该框架的其他用户常用的任何东西。 Common.js 和 webpack 很常见，有很多工具可以使用它们，并且可能是目前最好的选择。另一件需要注意的事情是动态导入，已经登陆了几个浏览器。
抱歉，这一切太混乱了，您恰好在一个非常过渡的时期进入 JavaScript。
我最近对模块化 JS 进行了很多试验，但我仍然想知道我是否正在编写它 "the right way"。
例如，如果我有一个包含输入和提交按钮的页面，这些按钮应该在提交后显示数据（例如 table 和图表），那么我在 IFFE 下编写代码，这样就没有人可以访问它，但是使用这样的对象变量：
var webApp = { ... }
并在其中缓存 DOM 中的元素、添加绑定事件和其他有用的功能。
这是一个真实的代码，我用于一个应该显示图表的表单，table，以及加载数据时的进度条，所有这些都在一个对象中进行管理qwData：
(function() {
const qwData = {
// Initialize functions
init: function() {
this.cacheDom();
this.bindEvents();
},
// Cache vars
cacheDom: function() {
this.dataDisplayed = false;
this.countUsers = <?php echo $_SESSION['all_users_count_real']; ?>;
this.customerMachines = <?php echo $_SESSION['customer_statistics']['total_machines']; ?>;
this.$form = $('#frm');
this.$alistToolbar = this.$form.find('.alist-toolbar');
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][10].value;
this.dateCount = this.countDays(this.start_date, this.end_date);
this.show = document.querySelector('#btn-show');
this.downloadBtn = document.querySelector('#download_summary_button');
this.$dataContainer = $('#qw-data-container');
this.$qwTable = $('#qwtable');
this.$qwTbody = this.$qwTable.find('tbody');
this.$qwTd = this.$qwTbody.find('td');
this.qwChart = echarts.init(document.getElementById('main-chart'));
this.progressBar = document.querySelector('.progress-bar');
Object.defineProperty(this, "progress", {
get: () => {
return this.progressPrecent || 0;
},
set: (value) => {
if( value != this.progressPrecent ) {
this.progressPrecent = value;
// this.setQwChartProgress(value);
this.setProgressBarValue(value);
this.setProgressButton(value);
}
},
configurable: true
});
this.qwChartProgress = this.progress;
},
// Bind click events (or any events..)
bindEvents: function() {
var that = this;
// On click "Show" BTN
this.show.onclick = this.sendData.bind(this);
// On Change inputs
this.$form.change(function(){
that.updateDatesInputs(this);
});
// downloadQw
this.downloadBtn.onclick = this.downloadQw.bind(this);
},
downloadQw: function(e){
e.preventDefault();
var customer = "<?php echo $_SESSION['company_name']; ?>";
var filename = customer + "qws_"+ this.start_date + "-" + this.end_date + ".zip";
$.ajax({
url: "/aaa/api/download_csv.php",
method: "GET",
dataType : "json",
data: {
customer: customer,
filename: filename
},
success:function(result){
if(result.status){
window.location.href="/aaa/api/download_csv.php?customer="+customer+"&filename="+filename+"&download=1";
}
},
error:function(){
}
})
},
setQwChartProgress: function(value){
if (value != 0) {
// Show Chart Loading
this.qwChart.showLoading({
color: (value == 99) ? '#00b0f0' : '#fff',
text: value + '%'
});
}
},
setProgressButton: function(value){
if ( value >= 100 || value == 0 ){
this.show.value = 'Show';
}
else {
this.show.value = value +'%';
// this.show.disabled = true;
this.disableShow();
}
},
resetShowButton: function(){
this.show.value = 'Show';
this.disableShow();
},
disableShow: function(){
// this.show.style.color = "grey";
// this.show.disabled = true;
this.show.classList.add("isDisabled");
},
enableShow: function(){
// this.show.style.color = "#66aa66";
// this.show.disabled = false;
this.show.classList.remove("isDisabled");
},
updateDatesInputs: function(){
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][11].value;
this.dateCount = this.countDays(this.start_date,this.end_date);
// this.show.disabled = false;
this.enableShow();
this.removeError();
},
removeError: function(){
if (this.errors) {
this.errors.remove();
delete this.errors;
}
},
countDays: function(date1, date2){
// First we split the values to arrays date1[0] is the year, [1] the month and [2] the day
var date1 = date1.split('-');
var date2 = date2.split('-');
// Now we convert the array to a Date object, which has several helpful methods
date1 = new Date(date1[0], date1[1], date1[2]);
date2 = new Date(date2[0], date2[1], date2[2]);
// We use the getTime() method and get the unixtime (in milliseconds, but we want seconds, therefore we divide it through 1000)
var date1_unixtime = parseInt(date1.getTime() / 1000);
var date2_unixtime = parseInt(date2.getTime() / 1000);
// This is the calculated difference in seconds
var timeDifference = date2_unixtime - date1_unixtime;
// in Hours
var timeDifferenceInHours = timeDifference / 60 / 60;
// and finaly, in days :)
var timeDifferenceInDays = timeDifferenceInHours / 24;
if (timeDifferenceInDays > 0){
return timeDifferenceInDays;
} else {
// alert('Error: The date are invalid.');
}
},
// Get data, prevent submit defaults and submit.
sendData: function(e) {
e.preventDefault();
if (this.show.classList.contains('isDisabled')) {
this.showErrorDiv("Please select a new date range before submitting.");
} else {
let that = this;
let estimatedTotalTime = ( (this.countUsers*this.customerMachines)/777 ) * 0.098;
let estimatedTime = estimatedTotalTime/99;
let estimatedTimeMs = estimatedTime*1000;
let timer = setInterval( function(){that.incrementProgress(timer);}, estimatedTime);
console.log('Total Time: ' + estimatedTotalTime + 's');
console.log('Estimated Time for 1%: ' + estimatedTime + 's');
$.ajax({
type: 'POST',
url: "/manageit/ajax.php?module=qw_module",
dataType: 'json',
data: {
start_ts: that.start_date,
stop_ts: that.end_date,
submitted: true,
company_name: "<?php echo $_SESSION['company_name']; ?>"
},
beforeSend: function() {
// Show Chart Loading
that.qwChart.showLoading({
color: '#00b0f0',
// text: that.qwChartProgress
text: ''
});
// If data div isn't displayed
if (!that.dataDisplayed) {
// Show divs loading
that.showMainDiv();
} else {
that.$qwTbody.slideUp('fast');
that.$qwTbody.html('');
}
},
complete: function(){},
success: function(result){
// Reset show btn
that.resetShowButton();
// Clear timer
clearInterval(timer);
// Set progressbar to 100%
that.setProgressBarTo100();
// Show Download Button
that.downloadBtn.style.display = 'inline-block';
// Insert Chart Data
that.insertChartData(result);
// Insert Table Data
that.insertTableData(result);
}
});
that.dataDisplayed = true;
}
},
showErrorDiv: function(errorTxt){
if (!this.errors){
this.errors = document.createElement("div");
this.errors.className = "qw_errors_div";
this.errors.textContent = errorTxt;
this.$alistToolbar.append(this.errors);
}
},
// Insert Data to Table
insertTableData: function(json){
let str = '';
let isOdd = ' rowspan="2" ';
for ( let i=1; i<9; i++ ) {
str += '<tr>';
for (let j = 0; j < 8; j++) {
if ((i%2 === 0) && (j==0)){
// do nada
} else {
str += '<td ';
str += ((i % 2 !== 0)&&(j==0)) ? isOdd : '';
str += '> ';
str += json[i][j];
str += '</td>';
}
}
str += '</tr>';
}
this.$qwTbody.html(str);
this.$qwTbody.slideDown('fast', function(){
if ($(this).is(':visible'))
$(this).css('display','table-row-group');
});
// Apply colors on table.
this.tableHover();
},
tableHover: function(){
this.$qwTd = this.$qwTbody.find('td');
var that = this;
this.$qwTd.eq(0).hover( function(){
that.$qwTd.eq(0).css('background-color', '#f5f5f5');
that.$qwTd.eq(0).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(0).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(0).css('background-color', '');
that.$qwTd.eq(0).parent().css('background-color', '');
that.$qwTd.eq(0).parent().next().css('background-color', '');
});
this.$qwTd.eq(15).hover( function(){
that.$qwTd.eq(15).css('background-color', '#f5f5f5');
that.$qwTd.eq(15).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(15).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(15).css('background-color', '');
that.$qwTd.eq(15).parent().css('background-color', '');
that.$qwTd.eq(15).parent().next().css('background-color', '');
});
this.$qwTd.eq(30).hover( function(){
that.$qwTd.eq(30).css('background-color', '#f5f5f5');
that.$qwTd.eq(30).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(30).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(30).css('background-color', '');
that.$qwTd.eq(30).parent().css('background-color', '');
that.$qwTd.eq(30).parent().next().css('background-color', '');
});
this.$qwTd.eq(45).hover( function(){
that.$qwTd.eq(45).css('background-color', '#f5f5f5');
that.$qwTd.eq(45).parent().css('background-color', '#f5f5f5');
that.$qwTd.eq(45).parent().next().css('background-color', '#f5f5f5');
}, function(){
that.$qwTd.eq(45).css('background-color', '');
that.$qwTd.eq(45).parent().css('background-color', '');
that.$qwTd.eq(45).parent().next().css('background-color', '');
});
},
incrementProgress: function(timer){
if (this.progress == 99)
clearInterval(timer);
else
this.progress++;
},
// Insert Data to Chart
insertChartData: function(json){
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
this.qwChart.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
this.qwChart.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: this.qwChart.config.rotate,
align: this.qwChart.config.align,
verticalAlign: this.qwChart.config.verticalAlign,
position: this.qwChart.config.position,
distance: this.qwChart.config.distance
}
};
this.qwChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
normal: {
show: true,
position: this.qwChart.config.position,
distance: this.qwChart.config.distance,
align: this.qwChart.config.align,
verticalAlign: this.qwChart.config.verticalAlign,
rotate: this.qwChart.config.rotate,
// formatter: '{c} {name|{a}}',
formatter: '{name|{a}}',
fontSize: 16,
rich: {
name: {
// textBorderColor: '#fff',
// color: '#333',
// color: '#717171',
color: '#525252',
shadowColor: 'transparent',
shadowBlur: 0,
textBorderColor: 'transparent',
textBorderWidth: 0,
textShadowColor: 'transparent',
textShadowBlur: 0
}
}
}
};
option = {
color: ['#007bff', '#00b0f0', 'red', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Inactives / Viewers', 'Inactives / Viewers / Less than 1min per day', 'Light no Macro']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['Excel', 'Word', 'PowerPoint', 'All 3 Apps']
}
],
yAxis: [
{
type: 'value',
name: 'Score'
}
],
series: [
{
name: 'Light no Macro',
type: 'bar',
label: labelOption,
color: 'red',
data: [ [3, json[7][7]] ]
},
{
name: 'Inactives / Viewers',
type: 'bar',
barGap: 0,
label: labelOption,
data: [ json[1][7], json[3][7], json[5][7], json[8][7] ]
},
{
name: 'Inactives / Viewers / Less than 1min per day',
type: 'bar',
label: labelOption,
data: [ json[2][7], json[4][7], json[6][7] ]
}
]
};
// Set charts options
this.qwChart.setOption(option);
// Hide Loading
this.qwChart.hideLoading();
},
// Show Main div on submition (only)
showMainDiv: function(){
// Show all contatner div
this.$dataContainer.slideDown('slow');
},
// Sets a new value for the progress bar
setProgressBarValue: function(value){
this.progressBar.style.width = this.returnNumWithPrecent(value);
},
returnNumWithPrecent: function(num){
return num.toString() + '%';
},
setProgressBarTo100: function(){
var that = this;
// Show Download Button
this.progress = 100;
setTimeout(function () {
// Show Download Button
that.progress = 0;
}, 1000);
}
}
// run object
qwData.init();
})();
但我看到 other examples 将功能写在函数下而不是对象下:
webApp = function (){ ... };
喜欢这个例子：
var Background = (function() {
'use strict';
// placeholder for cached DOM elements
var DOM = {};
/* =================== private methods ================= */
// cache DOM elements
function cacheDom() {
DOM.$background = $('#background');
}
// coordinate async assembly of image element and rendering
function loadImage() {
var baseUrl = 'https://source.unsplash.com/category',
cat = 'nature',
size = '1920x1080';
buildElement(`${baseUrl}/${cat}/${size}`)
.then(render);
}
// assemble the image element
function buildElement(source) {
var deferred = $.Deferred(function (task) {
var image = new Image();
image.onload = function () {
task.resolve(image);
};
image.onerror = function () {
task.reject();
};
image.src = source;
});
return deferred.promise();
}
// render DOM
function render(image) {
DOM.$background
.append(image)
.css('opacity', 1);
}
/* =================== public methods ================== */
// main init method
function init() {
cacheDom();
loadImage();
}
/* =============== export public methods =============== */
return {
init: init
};
}());
关于这个我有 2 个问题：
使用对象和在对象内部设置函数、变量等有什么区别':
var webApp = { ... };
和一个具有相同特征的函数变量（只是有一个 写法不同）。就像我粘贴的 link 中的示例。
var webApp = function (){ ... };
- 编写这样的代码是否正确，其中所有（有点分离的元素，如图表、table、进度条）都在一个 object/function 中？这应该更好地分离到不同的对象吗？如果有更新更好的方法来编写此类代码，请提及我应该研究的内容。
IIFE 模式允许私有变量 - DOM、cacheDom、loadImage - 这些变量无法从 IIFE 外部访问。在对象模式中，一切都可以作为对象的属性公开访问。有时，如果不先声明一些变量，您根本无法构造所需的对象，因此将这些变量隔离在 IIFE 中也很有用。
如果您熟悉面向对象编程，可以通过类比 class 的私有和 public 属性和函数来理解它。 其他方法：模块化模式，请参阅节点模块。是关于包装的。
看这段代码：
var obj = (function() {
let a = function() { console.log('function a'); };
let b = function() { a(); console.log('function b'); };
return { b: b };
})();
obj.b();
// function a
// function b
obj.a();
// TypeError: obj.a is not a function
或者这样更熟悉：
function MyStuff() {
let a = function() { console.log('function a'); };
let b = function() { a(); console.log('function b'); };
return { b: b };
}
var obj = MyStuff();
obj.b();
// function a
// function b
obj.a();
// TypeError: obj.a is not a function
在函数内部，您有一个局部作用域，无法从外部访问。在这个本地范围内，您可以创建变量、函数等。
在 return 语句中，您 return 一个对象将函数和变量导出到外部作用域。这就像决定哪些 functions/props 是 public，哪些应该保密。
当您以 var webApp = {...} 方式创建对象时，您是在直接创建一个对象，其所有属性和函数都 public 在您定义变量的范围内 "webApp".
回答你的第二个问题，是的，你应该根据关注点将东西分成不同的对象。请参阅 SOLID 原则。 :)
互联网教程的一个问题是它们停留在相关点之外，很少有作者保持最新状态。在 JS 领域，事情发展得非常快，5 年前的行业标准（例如 jQuery）现在看起来很奇怪，当你仍然偶然发现它时。
所以，要养成我唠叨别人遗漏的好习惯：
JavaScript 模块的状态，2018 年年中，变化很快，#deprecated
一团糟。
首先你有 ES 6 模块。 ES 6 被重命名为 ES 2015 并且模块部分被取出并成为一个单独的规范，这意味着浏览器可以兼容 ES 2015 并且仍然没有原生模块。然而，3 年后，每个具有相关全球市场份额的浏览器（chrome、android chrome、firefox、iOS Safari）都至少实现了原生的基本版本模块系统（Edge、Opera 等也是如此）。我不清楚，因为我相信规范允许路径更宽容（我们将在一分钟内返回），但这里是语法，相对或绝对文件路径，需要扩展名：
import Foo from './foo.js'; // Import default export from foo.js, alias to 'Foo'
import { Foo } from './foo.js'; // Import named export 'Foo' from foo.js
export default function () {}; // exports a function as default, importer aliases
const Foo = class Foo {};
export Foo; // exports named class Foo
这些比其他任何东西都有很多优势（首先，最重要的是你不需要特殊的工具或构建过程），但是因为它们 非常 最近他们不是尚未在 JavaScript 生态系统中得到广泛使用。因为他们很早就来了，而且人们还有工作要完成，所以他们实现了各种其他模块 patterns/tools/systems。最早的模式之一就是您的问题中的模式，但这种模式虽然肯定比没有模式好，但它有足够多的问题，人们开始四处寻找。
AMD 模块
另一个早期产品是 require.js 的异步模块定义。虽然它有一些引人注目的技术优势，但它实际上已经死了。
Common.js 个模块
node.js 以其自己的基于 common.js 模块的模块系统（基本上已经成为 common.js 的实际风格）出现在现场。人们开始说 "hey it'd be great to be able to do this in the browser too"，因此，browserify。 Browserify 是一个工具，可以遍历你的依赖图并将 require 表达式转换成浏览器可以处理的东西（基本上，通过使 require 成为一个函数）。 Node 的模块有点不适合浏览器，但汇聚在一个标准上比八千万个相互竞争的临时实现要好。人们看着这三个相互竞争的模块 patterns/systems（你的问题中有一个，AMD，common.js），然后说嘿我们可以统一这些。于是
通用模块定义
如果您在野外看到过如下代码：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory(require('jquery'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
那么你已经看到了UMD。请注意它如何检查它所在的环境是否针对 AMD 或 common.js 进行了设置。出于遗留代码和易读性问题（这是相当多的样板文件），转换器被编写为将这两种样式转换为这种样式。
但人们想要更多：他们希望能够在代码中表达 所有 的 Web 应用程序依赖项（包括 css 和图像），并使用分片工具并有选择地加载它。另外，此时本机模块规范处于草案阶段，人们希望使用该语法。因此
Webpack 模块
Webpack 目前是目前使用的事实上的系统（尽管很多人仍在使用 browserify）。 Webpack 的模块语法看起来像这样：
import Foo from 'foo'; // imports default export from foo.js somewhere on PATH
这看起来很眼熟吗？非常类似于（但与本机模块略有不同）。 Webpack 还可以执行以下操作：
import 'Something.css'; // commonly seen in react apps
import 'logo.svg'; // ditto
这很方便，随着人们转向组件化系统，能够在该组件的入口点文件中表达所有组件依赖性是件好事。不幸的是，HTML 允许您在没有构建步骤的情况下本地执行此操作的导入死于可怕的死亡。
不幸的是，与本机模块系统的不兼容性，微妙的（路径和文件扩展名）和严重的（导入非 js 资产），这意味着其中一个或另一个将不得不改变，因为我已经尝试过最近编写基于本地模块的应用程序，非常 难以使用库（其中几乎 none 提供了本地模块风格）。
使用什么是一种自以为是的问题，但如果您使用的是框架，请使用该框架的其他用户常用的任何东西。 Common.js 和 webpack 很常见，有很多工具可以使用它们，并且可能是目前最好的选择。另一件需要注意的事情是动态导入，已经登陆了几个浏览器。
抱歉，这一切太混乱了，您恰好在一个非常过渡的时期进入 JavaScript。