Write a common four-way operation:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>arithmetic</title>
</head>
<body>
<input type="text" id="x"/>
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="y"/>
<button id="cal" onclick= "fn()">=</button>
<input type="text" id="result"/>
<script>
// add subtract multiply divide Function name used for calculation
function add(leftnum,rightnum){
var res = leftnum+rightnum;
document.getElementById('result').value = res;
}
function subtract(leftnum,rightnum){
var res = leftnum-rightnum;
document.getElementById('result').value = res;
}
function multiply(leftnum,rightnum){
var res = leftnum*rightnum;
document.getElementById('result').value = res;
}
function divide(leftnum,rightnum){
if(rightnum == 0){
alert("The divisor cannot be zero.");
return;
}
var res = leftnum/rightnum;
document.getElementById('result').value = res;
}
function fn(){
var str1=Number(document.getElementById('x').value);
var str2=Number(document.getElementById('y').value);
comp=document.getElementById('opt').value;
var result;
switch(comp) {
case '0':
add(str1,str2);
break;
case '1':
subtract(str1,str2);
break;
case '2':
multiply(str1,str2);
break;
case '3':
divide(str1,str2);
break; }}</script>
</body>
</html>
Copy the codeEffect:
Disadvantages:
All the methods and variables of the code are in the global environment, there is the problem of global environment pollution;
Use objects to encapsulate methods:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>arithmetic</title>
</head>
<body>
<input type="text" id="x"/>
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="y"/>
<button id="cal" onclick= "fn()">=</button>
<input type="text" id="result"/>
<script>
// add subtract multiply divide Function name used for calculation
var calculator = {}; // Put it inside
calculator.add = function(leftnum,rightnum){
var res = leftnum+rightnum;
document.getElementById('result').value = res;
}
calculator.subtract = function (leftnum,rightnum){
var res = leftnum-rightnum;
document.getElementById('result').value = res;
}
calculator.multiply = function (leftnum,rightnum){
var res = leftnum*rightnum;
document.getElementById('result').value = res;
}
calculator.divide = function (leftnum,rightnum){
if(rightnum == 0){
alert("The divisor cannot be zero.");
return;
}
var res = leftnum/rightnum;
document.getElementById('result').value = res;
}
function fn(){
var str1=Number(document.getElementById('x').value);
var str2=Number(document.getElementById('y').value);
comp=document.getElementById('opt').value;
switch(comp) {
case '0':
calculator.add(str1,str2);
break;
case '1':
calculator.subtract(str1,str2);
break;
case '2':
calculator.multiply(str1,str2);
break;
case '3':
calculator.divide(str1,str2);
break; }}</script>
</body>
</html>
Copy the codeEffect:
Disadvantages:
There are still attributes in the global environment problem;
Implement calculators with closures and self-executing functions:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="x" />
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="y"/>
<button id="cal">=</button>
<input type="text" id="result" />
<script>
// The method does not pollute the global scope
var calculator = (function(){
function add(x,y){
return parseInt(x)+parseInt(y);
}
function subtract(x,y){
return parseInt(x)-parseInt(y);
}
function multiply(x,y){
return parseInt(x)*parseInt(y);
}
function divide(x,y){
if(y == 0){
alert('The divisor cannot be zero.');
return;
}
return parseInt(x)/parseInt(y);
}
return {
add:add,
subtract:subtract,
multiply:multiply,
divide:divide
}
})();
var oX = document.getElementById('x');
var oY = document.getElementById('y');
var oOpt = document.getElementById('opt');
var oCal = document.getElementById('cal');
var oResult = document.getElementById('result');
// Event listener
oCal.addEventListener('click'.function(){
var x = oX.value.trim();
var y = oY.value.trim();
var opt = oOpt.value;
var result = 0;
switch(opt){
case '0':
result = calculator.add(x,y);
break;
case '1':
result = calculator.subtract(x,y);
break;
case '2':
result = calculator.multiply(x,y);
break;
case '3':
result = calculator.divide(x,y);
}
oResult.value = result;
})
</script>
</body>
</html>
Copy the codeUse listeners to implement events after click:
oCal.addEventListener('click'.function(){})Copy the codeThe use of self-executing functions and closures narrates the scope of the method, only after the Calculator object calls the method.
var calculator = (function(){
function add(x,y){}function subtract(x,y){}function multiply(x,y){}function divide(x,y){}// Returns an object
return {
add:add,
subtract:subtract,
multiply:multiply,
divide:divide
}
})();
Copy the codeFinal version: implementation does not change the structure of the original code, add functionality
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="x" />
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
<option value="4">%</option>
</select>
<input type="text" id="y"/>
<button id="cal">=</button>
<input type="text" id="result" />
<script>
// The method does not pollute the global scope
var calculator = (function(cal){
function add(x,y){
return parseInt(x)+parseInt(y);
}
function subtract(x,y){
return parseInt(x)-parseInt(y);
}
function multiply(x,y){
return parseInt(x)*parseInt(y);
}
function divide(x,y){
if(y == 0){
alert('The divisor cannot be zero.');
return;
}
return parseInt(x)/parseInt(y);
}
cal.add = add;
cal.subtract = subtract;
cal.multiply = multiply;
cal.divide = divide;
return cal;
})(calculator || {}); // Use the self-executing function, if there is no parameter passed, the object is empty, if there is normal parameter passed
var calculator = (function(cal){
cal.mod = function(x,y){
return x%y;
}
return cal;
})(calculator || {});
var oX = document.getElementById('x');
var oY = document.getElementById('y');
var oOpt = document.getElementById('opt');
var oCal = document.getElementById('cal');
var oResult = document.getElementById('result');
// Event listener
oCal.addEventListener('click'.function(){
var x = oX.value.trim();
var y = oY.value.trim();
var opt = oOpt.value;
var result = 0;
switch(opt){
case '0':
result = calculator.add(x,y);
break;
case '1':
result = calculator.subtract(x,y);
break;
case '2':
result = calculator.multiply(x,y);
break;
case '3':
result = calculator.divide(x,y);
case '4':
result = calculator.mod(x,y);
}
oResult.value = result;
})
</script>
</body>
</html>
Copy the codeOperation effect:
We use the following format to keep all methods and attributes out of the global environment:
var calculator = (function(cal){
cal.mod = function(x,y){
return x%y;
}
return cal;
})(calculator || {});
Copy the codeBenefits: You can add functionality flexibly and it doesn’t matter in which order the functionality is added.
Node.js
Use of global objects:
// Global objects
global.foo = 'var';
console.log(global.foo);
Copy the codeSimple HTTP server:
// Import the HTTP package
/ / the require is package
var http = require('http');
// Create a server
http.createServer(function(req,res)
{
// If there is a request, the response is hello world
res.end('hello world');
}).listen(3000.'127.0.0.1'); // Listen for addresses and ports
Copy the codeUsage:
Open your browser:
Enter http://127.0.0.1:3000 or localhost:3000
End Method: CtrL-C
Using the above knowledge, realize data sharing between modules:
info.js
// a js in a node is a module
// Expose the age variable externally
module.exports.age = '10';
// Expose a function
module.exports.sayHello = function(){
console.log('hello');
}
var name = 'tom';
Copy the codetest.js
// Load the module
var myModule = require('./info');
console.log(myModule);
myModule.sayHello();
console.log(myModule.name); // Cannot be accessed
Copy the codeNodeJs implementation calculator:
File directory:
add.js
module.exports = function add(x,y){
return parseInt(x)+parseInt(y);
}
Copy the codedivide.js
module.exports = function divide(x,y){
if(y == 0){
alert('The divisor cannot be zero.');
return;
}
return parseInt(x)/parseInt(y);
}
Copy the codemultiply.js
module.exports = function multiply(x,y){
return parseInt(x)*parseInt(y);
}
Copy the codesubtract.js
module.exports = function subtract(x,y){
return parseInt(x)-parseInt(y);
}
Copy the codeindex.js
module.exports = {
add:require('./add'),
subtract:require('./subtract'),
multiply:require('./multiply'),
divide:require('./divide')};Copy the codeWhat we need to access is a file called index.js
var cal = require('./index');
console.log(cal.add(1.2));
console.log(cal.subtract(1.2));
console.log(cal.multiply(1.2));
console.log(cal.divide(1.2));
Copy the codeEffect:
The end:
This is the end of today’s knowledge points, through these pre-knowledge points, the next time will be modular evolution process;
If you see here or just to help you, hope to point a concern or recommendation, thank you;
There are mistakes, welcome to point out in the comments, the author will see the modification.