JavaScript的prototype的使用（以ellipsis函数为例子）

JavaScript字符串截取与prototype应用

最新推荐文章于 2021-10-13 16:13:05 发布

原创最新推荐文章于 2021-10-13 16:13:05 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #javascript #stylesheet #string #jsp #function

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在JavaScript中实现字符串截取功能，并通过prototype技术优化代码效率。包括基本函数实现、调用方法和使用场景展示。

1、一般使用JavaScript函数时，若遇到没有JavaScript的原始函数时，都会自己写一个函数，然后再调用。例如：

在一个数据列表中的一个单元格中显示数据，当要显示的数据长度超过20 位字符串则截取，字符后加。。。

下面去实现：

写一个截取的函数：

/**
 * <pre>
 * 截取一个字符串，若它超过指定的长度，并在其后面增加一个省略号('...')
 * </pre>
 * @param value 需要截取的字符串
 * @param len 允许截取的最大长度
 * @returns 返回转换后的字符串
 */
function ellipsis(value, len){
	if(value && value.length > len){
        return value.substr(0, len-3)+"...";
    }
    return value;
}

在前台界面调用它。

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="./css/ext-all.css" />
	<!-- 导入写好的函数 -->
	<script type="text/javascript" src="./js/format.js"></script>
	<script type="text/javascript">
		function ddd(){
		 var aaa = "GWT-Ext does not distribute ExtJS. Note that GWT-Ext only supports";
		
		var bbb = ellipsis(aaa,20);
		alert(bbb);
		
		/*var ccc = ellipsis(aaa,500);
		alert(ccc);
		
		Ext.onReady(function(){
			var eee = Ext.util.Format.ellipsis(aaa,20);
			Ext.MessageBox.alert("xxx",eee);
			
		}); */
			//var aaa = "GWT-Ext does not distribute ExtJS. Note that GWT-Ext only supports";
			//alert(aaa.ellipsis(20));
		}
		

	</script>
  </head>
  
  <body onload="ddd();">
    This is my JSP page. <br>
    <input type="button" value="showWindow" name="showWindow" onclick="showForm(this);" title="showWindow"></input>
  </body>
</html>

看运行结果：

结果正确。

如果我们想换一种方式，以“.”运算符去调用呢？又该如何实现呢。？

那么我们就要使用到prototype原型了。至于prototype是一个什么意思呢？在这里不作解释。

JavaScript代码：

/**
 * <pre>
 * 使用String的prototype的形式，即可以使用"aa".ellipsis(20);
 * 截取一个字符串，若它超过指定的长度，并在其后面增加一个省略号('...')
 * </pre>
 * @param len 允许截取的最大长度
 * @returns 返回转换后的字符串
 */
String.prototype.ellipsis=function(len){
	if(this && this.length > len){
		return this.substring(0, len-3)+"...";
	}
	return this;
};

前台界面代码：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="./css/ext-all.css" />
	<!-- 导入写好的函数 -->
	<script type="text/javascript" src="./js/format.js"></script>
	<script type="text/javascript">
		function ddd(){
		 var aaa = "GWT-Ext does not distribute ExtJS. Note that GWT-Ext only supports";
		
		//var bbb = ellipsis(aaa,20);
		//alert(bbb);
		
		/*var ccc = ellipsis(aaa,500);
		alert(ccc);
		
		Ext.onReady(function(){
			var eee = Ext.util.Format.ellipsis(aaa,20);
			Ext.MessageBox.alert("xxx",eee);
			
		}); */
			var aaa = "GWT-Ext does not distribute ExtJS. Note that GWT-Ext only supports";
			alert(aaa.ellipsis(20));
		}
		

	</script>
  </head>
  
  <body onload="ddd();">
    This is my JSP page. <br>
    <input type="button" value="showWindow" name="showWindow" onclick="showForm(this);" title="showWindow"></input>
  </body>
</html>

运行结果跟上面的一样。

注意：

prototype的解释：