在Web端打开文件选择和保存对...-JS实现函数重载-javascript，函数声明和函数表达式

当前位置: 编程技术>WEB前端

本页文章导读:

▪在Web端打开文件选择和保存对话框总体介绍文件的选择、保存对话框，使用Java 很容易达成。如果想在Web端使用的话，可以用Applet 达成。但如果想使用HTML, js 达成的话，也是可以的。文件选择框通用方式最常用的就是.........

▪JS实现函数重载不想写太多的方法名，网上百度的：JavaScript 语言的方法声明中，不能明确指定参数的类型和个数，所以不能实现方法的重载，但是我们可以用其他的方法来实现重载的效果。在 JavaScript 的方.........

▪javascript，函数声明和函数表达式在javascript中有两种函数的定义法：函数声明，函数表达式。函数声明：function doSomthing(){ return "hello"; }函数表达式：var f1 = function doSomthing(){ return "hello";};函数声明和函数表达式在执行效.........

[1]在Web端打开文件选择和保存对话框

来源: 互联网发布时间: 2013-11-06

总体介绍

文件的选择、保存对话框，使用Java 很容易达成。

如果想在Web端使用的话，可以用Applet 达成。

但如果想使用HTML, js 达成的话，也是可以的。

文件选择框通用方式最常用的就是使用如下方式：

<input type="file" />

这是HTML的标签，基本适用所有的浏览器。产生的效果是带有一个文本框和一个浏览按钮。(在各浏览器的实际效果可能不一样)

点击"浏览" 按钮就可以打开文件选择的dialog 了，选择文件后，文件路径就保存在这个 input 的 value的属性里了。如下例子：

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
  function getSelectFile()
  {
      var fileName = document.getElementById("fileSelect").value;
      alert(fileName);
  }
</script>
</HEAD>

<BODY>
 <input id="fileSelect" type="file" />
 <input value="Get File" type="button" onclick="getSelectFile();"/>
</BODY>
</HTML>

文件保存对话框

你可能会问，既然选择对话框有了，为什么还需要保存的对话框呢？
因为在选择对话框里，不能选择(或输入)一个不存在文件名，所以这对于保存来说不适用。
1. 方式一：使用ActiveX控件，仅支持 IE

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
  function  saveFile()  
  {  
      fileDialog.CancelError=true;  
      try{  
       fileDialog.Filter="HTM   Files   (*.html)|*.html|Text   Files   (*.txt)|*.txt";  
       fileDialog.ShowSave();  
      }  
      catch(e){}  
  }  
</script>
</HEAD>

<BODY>
 <object   id="fileDialog"   width="0px"   height="0px"   classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB"     codebase="http://activex.microsoft.com/controls/vb5/comdlg32.cab">  
 </object>  
  <input   type=button   value="Save"   onclick="saveFile()"
</BODY>
</HTML>

2. 使用document.execCommand('SavaAs'), 仅支持 IE

<!--Add by oscar999-->
<html>
<head>
   <title> New Document </title>
</head>
<body>
   <input type="button" value="Save" onclick="document.execCommand('SaveAs')">
</body>
</html>

除了IE,其他浏览器貌似都没有打开保存的窗口，用替代方案，直接填入路径：

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>  
	function   smt(){  
		path   =   prompt("Please Input Path",""); 
	}   
</script>
</HEAD>

<BODY>
  <input   type="button"   value="Save"   onclick="smt()">   
</BODY>
</HTML>

获取路径后的处理
获取保存路径后，如何创建文件可以参考：

JavaScript创建与读写本地文件(IE&Firefox)

作者：oscar999 发表于2013-3-20 14:08:42 原文链接

阅读：0 评论：0 查看评论

[2]JS实现函数重载

来源: 发布时间: 2013-11-06

不想写太多的方法名，网上百度的：

JavaScript 语言的方法声明中，不能明确指定参数的类型和个数，所以不能实现方法的重载，但是我们可以用其他的方法来实现重载的效果。

在 JavaScript 的方法内，有个叫做 arguments 的变量数组，它是只读的，所有实际传入的参数变量都
放在了里面，通过它，我们可以对传入的参数进行类型检查，从而实现重载的效果。

判断一个变量的类型有两种方法

用 typeof 语句：
function check(){
if(typeof arguments[0] == 'string')
alert('你传入的参数是个字符串');
else if(typeof arguments[0] == 'number')
alert('你传入的参数是个数字');
}

用所有 JavaScript 变量都带有的一个属性 constructor,这个属性指向用来构造该变量的构造函数：
function check(){
if(arguments[0].constructor == String)
alert('你传入的参数是个字符串');
else if(arguments[0].constructor == Number)
alert('你传入的参数是个数字');
}

对照表：

typeof constructor ---------------------------

string String

number Number

object Object

function Function

boolean Boolean

object Array

object User

一个新的函数重载模式。代码如下

应用：

TINY.page = function () {
            var isNull = function () {
                if (document.getElementById("txtPEnterprise_NO").value == "") {
                    return true;
                }
                else
                    return false;
            };
            return {
                 select: function () {
                    if (isNull()) {
                        top.Dialog.alert("请您输入追溯码！");
                        return false;
                    }
                    else {
                        return true;
                    }
                },
                confirm: FunctionH.overload({
                    'string': function () {
                        if (isNull()) {
                            top.Dialog.alert("请您输入追溯码！");
                            return false;
                        }
                        if (!confirm(arguments[0])) {
                            return false;
                        }
                        return true;
                    },
                    'object': function () {
                        if (isNull()) {
                            top.Dialog.alert("请您输入追溯码！");
                            return false;
                 &

[3]javascript，函数声明和函数表达式

来源: 发布时间: 2013-11-06

在javascript中有两种函数的定义法：函数声明，函数表达式。

函数声明：

function doSomthing(){
return "hello";
}

函数表达式：

var f1 = function doSomthing(){
return "hello";
};

函数声明和函数表达式在执行效果上是等价的，但是解析器在向执行环境中加载数据对函数声明和函数表达式的处理确实不同的。

1.对于函数声明

在代码开始执行之前，解析器通过函数声明提升（function declaration hoisting）的过程，读取并将函数声明添加到了执行环境中并放置于源代码书的顶部。

因此，即使声明函数在调用代码之后，代码也能顺利执行。

alert(doSomthing());

function doSomthing(){
return "hello";
}

//执行OK

2.对于函数表达式

在一个初始化语句中生成一个函数，并用一个变量引用该函数。在这种情况下，不会经历函数声明提升过程，在执行到函数表达式所在语句之前，引用函数的变量是不会保存有对函数的引用。

下面的代码解析器直接报错："undefined is not a function"，不会执行到函数表达式。

alert(f1());

var f1 = function doSomthing(){
return "hello";
};

总结：

函数声明：定义和执行顺序无关。

函数表达式：先定义后执行。

本文链接