当前位置：首页 > news >正文

成都工信部网站/山东搜索引擎优化

news 2025/7/17 8:35:59

成都工信部网站,山东搜索引擎优化,天元建设集团电话,网站建设优化的作用我最近的“ 增强JavaScript核心对象”文章展示了如何向JavaScript的Array ， Boolean ， Date ， Math ， Number和String核心对象引入新的属性和方法。我遵循其他文章和博客文章（包括下面列出的文章）的传统&a…

我最近的“ 增强JavaScript核心对象”文章展示了如何向JavaScript的Array ， Boolean ， Date ， Math ， Number和String核心对象引入新的属性和方法。我遵循其他文章和博客文章（包括下面列出的文章）的传统，这些文章和博客文章显示了如何使用新功能扩展这些核心对象：

扩展Math.round，Math.ceil和Math.floor以提高精度
扩展JavaScript对象和类
扩展JavaScript的String对象
使用用户定义的方法扩展JavaScript Date对象
JavaScript数组包含

将属性直接添加到核心对象或其原型存在争议。在他的Extending JavaScript Natives博客文章中，Angus Croll解决了这种方法的几个问题。例如，未来的浏览器版本可能会实现效率较高的属性或方法，而该属性或方法会被效率较低的自定义属性/方法所破坏。阅读Croll的博客文章，以获取有关此问题和其他问题的更多信息。

由于核心对象增强功能强大且美观，因此应该有一种方法可以利用此功能，同时避免出现问题。幸运的是，有一种方法可以利用适配器设计模式（也称为包装器模式）来完成此任务。在本文中，我介绍了我的库的新版本，该版本使用包装器来扩展各种核心对象，而不实际对其进行扩展。

探索新的核心对象增强库

我的新核心对象扩充库试图通过利用JavaScript模块模式来最小化其对全局名称空间的影响，该模块将所有库代码置于匿名闭包中。该库当前导出将自身包裹在Date和Math周围的_Date和_Math对象，并且可以通过查询ca_tutortutor_AJSCOLib全局变量来访问该ca_tutortutor_AJSCOLib 。

关于ca_tutortutor_AJSCOLib
ca_tutortutor_AJSCOLib全局变量提供对扩充库的访问。为了使名称与另一个全局变量发生冲突的可能性降到最低，我在AJSCOLib前面加上了反向Internet域名。

清单1展示了我的库的内容，该库的内容存储在ajscolib.js脚本文件中。

var ca_tutortutor_AJSCOLib = (function(){var my = {};var _Date_ = Date;function _Date(year, month, date, hours, minutes, seconds, ms){if (year === undefined)this.instance = new _Date_();elseif (month === undefined)this.instance = new _Date_(year);elseif (hours === undefined)this.instance = new _Date_(year, month, date);elsethis.instance = new _Date_(year, month, date, hours, minutes, seconds, ms);this.copy = function(){return new _Date_(this.instance.getTime());};this.getDate =function(){return this.instance.getDate();};this.getDay =function(){return this.instance.getDay();};this.getFullYear =function(){return this.instance.getFullYear();};this.getHours =function(){return this.instance.getHours();};this.getMilliseconds =function(){return this.instance.getMilliseconds();};this.getMinutes =function(){return this.instance.getMinutes();};this.getMonth =function(){return this.instance.getMonth();};this.getSeconds =function(){return this.instance.getSeconds();};this.getTime =function(){return this.instance.getTime();};this.getTimezoneOffset =function(){return this.instance.getTimezoneOffset();};this.getUTCDate =function(){return this.instance.getUTCDate();};this.getUTCDay =function(){return this.instance.getUTCDay();};this.getUTCFullYear =function(){return this.instance.getUTCFullYear();};this.getUTCHours =function(){return this.instance.getUTCHours();};this.getUTCMilliseconds =function(){return this.instance.getUTCMilliseconds();};this.getUTCMinutes =function(){return this.instance.getUTCMinutes();};this.getUTCMonth =function(){return this.instance.getUTCMonth();};this.getUTCSeconds =function(){return this.instance.getUTCSeconds();};this.getYear =function(){return this.instance.getYear();};this.isLeap = function(){var year = this.instance.getFullYear();return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0);};_Date.isLeap =  function(date){if (date instanceof _Date)date = date.instance;var year = date.getFullYear();return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0);};this.lastDay = function(){  return new _Date_(this.instance.getFullYear(), this.instance.getMonth() + 1, 0).getDate();};_Date.monthNames = ["January", "February", "March", "April", "May","June", "July", "August", "September", "October","November", "December"];_Date.parse =function(date){if (date instanceof _Date)date = date.instance;return _Date_.parse(date);};this.setDate =function(date){if (date instanceof _Date)date = date.instance;this.instance.setDate(date);};this.setFullYear =function(date){if (date instanceof _Date)date = date.instance;this.instance.setFullYear(date);};this.setHours =function(date){if (date instanceof _Date)date = date.instance;this.instance.setHours(date);};this.setMilliseconds =function(date){if (date instanceof _Date)date = date.instance;this.instance.setMilliseconds(date);};this.setMinutes =function(date){if (date instanceof _Date)date = date.instance;this.instance.setMinutes(date);};this.setMonth =function(date){if (date instanceof _Date)date = date.instance;this.instance.setMonth(date);};this.setSeconds =function(date){if (date instanceof _Date)date = date.instance;this.instance.setSeconds(date);};this.setTime =function(date){if (date instanceof _Date)date = date.instance;this.instance.setTime(date);};this.setUTCDate =function(date){if (date instanceof _Date)date = date.instance;this.instance.setUTCDate(date);};this.setUTCFullYear =function(date){if (date instanceof _Date)date = date.instance;this.instance.setUTCFullYear(date);};this.setUTCHours =function(date){if (date instanceof _Date)date = date.instance;this.instance.setUTCHours(date);};this.setUTCMilliseconds =function(date){if (date instanceof _Date)date = date.instance;this.instance.setUTCMilliseconds(date);};this.setUTCMinutes =function(date){if (date instanceof _Date)date = date.instance;this.instance.setUTCMinutes(date);};this.setUTCMonth =function(date){if (date instanceof _Date)date = date.instance;this.instance.setUTCMonth(date);};this.setUTCSeconds =function(date){if (date instanceof _Date)date = date.instance;this.instance.setUTCSeconds(date);};this.toDateString =function(){return this.instance.toDateString();};this.toISOString =function(){return this.instance.toISOString();};this.toJSON =function(){return this.instance.toJSON();};this.toLocaleDateString =function(){return this.instance.toLocaleDateString();};this.toLocaleTimeString =function(){return this.instance.toLocaleTimeString();};this.toString = function(){return this.instance.toString();};this.toTimeString =function(){return this.instance.toTimeString();};this.toUTCString =function(){return this.instance.toUTCString();};_Date.UTC =function(date){if (date instanceof _Date)date = date.instance;return _Date_.UTC(date);};this.valueOf =function(){return this.instance.valueOf();};}my._Date = _Date;var _Math = {};var props = Object.getOwnPropertyNames(Math);props.forEach(function(key){if (Math[key]) _Math[key] = Math[key]; });if (!_Math.GOLDEN_RATIO)_Math.GOLDEN_RATIO = 1.61803398874;if (!_Math.rnd || _Math.rnd.length != 1)_Math.rnd = function(limit){if (typeof limit != "number")throw "illegal argument: " + limit;return Math.random() * limit | 0;};if (!_Math.rndRange || _Math.rndRange.length != 2)_Math.rndRange = function(min, max){if (typeof min != "number")throw "illegal argument: " + min;if (typeof max != "number")throw "illegal argument: " + max;return Math.floor(Math.random() * (max - min + 1)) + min;};if (!_Math.toDegrees || _Math.toDegrees.length != 1)_Math.toDegrees = function(radians){if (typeof radians != "number")throw "illegal argument: " + radians;return radians * (180 / Math.PI);};if (!_Math.toRadians || _Math.toRadians.length != 1)_Math.toRadians = function(degrees){if (typeof degrees != "number")throw "illegal argument: " + degrees;return degrees * (Math.PI / 180);};if (!_Math.trunc || _Math.trunc.length != 1)_Math.trunc =function(n){if (typeof n != "number")throw "illegal argument: " + n;return (n >= 0) ? Math.floor(n) : -Math.floor(-n);};my._Math = _Math;return my;}());

清单1：这个独立的扩充库可以扩展为支持所有核心对象

在匿名闭包中声明的所有变量和函数都是该闭包的局部变量。要从闭包外部访问，必须导出变量或函数。要导出变量或函数，只需将其添加到对象中，然后从闭包中返回该对象。在清单1中，该对象称为my ，并被分配了_Date函数引用和_Math对象引用。

在变量my的声明之后，该变量被初始化为一个空对象，清单1声明了_Date_变量，该变量引用了Date核心对象。无论_Date_需要从库中访问Date ，我都引用_Date_而不是Date 。我将在本文后面解释这种安排的原因。

清单1现在声明了一个_Date构造函数，用于构造_Date包装器对象。这个构造函数声明同year ， month ， date ， hours ， minutes ， seconds和ms参数为Date核心对象。询问这些参数以确定要调用Date构造函数的哪个变体：

_Date()调用Date()将Date对象初始化为当前日期。通过测试year是否undefined来检测此方案。
_Date(year)调用Date(milliseconds)或Date(dateString)将Date对象初始化为指定的毫秒数或日期字符串-我将其留给Date处理两种情况。通过测试undefined month来检测此方案。
_Date(year, month, date)调用_Date(year, month, date)以将Date对象初始化为指定的年，月和日（日期）。通过测试hour的undefined可以检测到这种情况。
_Date(year, month, day, hours, minutes, seconds, milliseconds)调用Date(year, month, day, hours, minutes, seconds, milliseconds)将Date对象初始化为各个组件所描述的日期。此方案是默认方案。

无论调用哪个构造函数变体 （使用所有或更少参数的构造函数调用），返回的结果都存储在_Date的instance属性中。永远不要直接访问instance ，因为如果Date在将来引入instance属性，则可能需要重命名此属性。不访问库外部的instance会减少代码维护。

在这一点上，上市1寄存器新copy() isLeap()和lastDay()方法，和一个新的monthNames财产_Date 。它还注册Date的方法。以前的方法使用与_Date关联的新功能（而不是Date来增强Date功能，如下所述。后面的方法使用instance访问以前存储的Date实例，通常调用其对应的Date ：

copy()创建调用此方法的Date对象的实例的副本。换句话说，它将克隆Date实例。示例： var d = new Date(); var d2 = d.copy(); var d = new Date(); var d2 = d.copy();
当调用Date对象实例的年份部分表示a年时， isLeap()返回true； isLeap()返回true。否则，返回错误。示例： var d = new Date(); alert(d.isLeap()); var d = new Date(); alert(d.isLeap());
isLeap(date)时的年份部分返回true date表示闰年; 否则，返回错误。示例： alert(Date.isLeap(new Date()));
lastDay()返回调用Date对象实例所在月份的最后一天。示例： var d = new Date(); alert(d.lastDay()); var d = new Date(); alert(d.lastDay());
尽管不是一种方法，但是可以从Date.monthNames数组属性获取基于英语的长月名称。传递从0到11的索引。示例： alert(Date.monthNames[0])

与_Date而不是其实例相关联的方法将直接分配给_Date ，如_Date.UTC = function(date) 。 date参数标识核心Date对象引用或_Date引用。与_Date实例关联的方法已分配给this 。在该方法内，可以通过this.instance访问Date实例。

您将遵循先前的协议来支持Array ， String和其他核心对象（ Math除外）。与其他核心对象不同，您不能构造Math对象。相反， Math只是用于存储静态属性和方法的占位符。因此，我通过声明已初始化为空对象的_Math变量并将属性和方法直接分配给此对象来对Math不同处理。

初始化_Math是调用Object的getOwnPropertyNames()方法（在ECMAScript 5中实现，并且受现代桌面浏览器支持），以返回直接在参数对象（即Math ）上找到的所有属性（无论是否可枚举）的数组。。清单1然后在引入新的属性/方法（如果尚不存在）之前，将每个属性（函数或其他属性）分配给_Math ：

GOLDEN_RATIO是我上一篇文章中提到的黄金分割率的常数。示例： alert(Math.GOLDEN_RATIO);
rnd(limit)返回一个整数，范围是比limit的值小0到1。示例： alert(Math.rnd(10));
rndRange(min, max)返回一个随机整数，范围从min的值到max的值。示例： alert(Math.rndRange(10, 20));
toDegrees(radians)将radians值转换radians以度radians的等效值，并返回该值。示例： alert(Math.toDegrees(Math.PI));
toRadians(degrees)将degrees数值转换为以弧度为单位的等效值，并返回该值。示例： alert(Math.toRadians(180));
trunc(n)从传递给n的正数或负数中除去小数部分，然后返回整个部分。示例： alert(Math.trunc(5.8));

每个方法在检测到非Number类型的参数时都会引发异常，表示非法参数。

为什么要创建一个扩充库而不是创建单独的实用程序对象（如DateUtil或MathUtil ）呢？该库充当大量填充程序的角色，可在各个浏览器之间提供一致的功能。例如，Firefox 25.0的Math对象公开了trunc()方法，而Opera 12.16中不提供此方法。我的库确保了trunc()方法始终可用。

测试和使用新的核心对象增强库

现在，您已经有机会探索该库了，您将需要尝试一下。我创建了一对脚本来测试各种新的_Date和_Math功能，并创建了两个更实用的脚本来更充分地使用该库。清单2提供了一个HTML文档，该文档嵌入了用于测试_Date的脚本。

<!DOCTYPE html>
<html><head><title>Augmented Date Tester</title><script type="text/javascript" src="ajscolib.js"></script></head><body><script>var Date = ca_tutortutor_AJSCOLib._Date;var date = new Date();alert("Current date: " + date);alert("Current date: " + date.toString());var dateCopy = date.copy();alert("Copy of current date: " + date.toString());alert("Current date == Copy of current date: " + (date == dateCopy));alert("Isleap " + date.toString() + ": " + date.isLeap());alert("Isleap July 1, 2012: " + Date.isLeap(new Date(2012, 6, 1)));alert("Last day: "+ date.lastDay());alert("Month names: " + Date.monthNames);</script></body>
</html>

清单2：测试“增强型” Date对象

使用此库时，您将不需要指定ca_tutortutor_AJSCOLib._Date并且可能也不想指定_Date 。相反，您将要指定Date ，就好像您正在使用核心对象本身一样。您无需更改代码即可将Date引用更改为其他内容。幸运的是，您不必这样做。

脚本的第一行将ca_tutortutor_AJSCOLib._Date分配给Date ，从而有效地删除了对Date核心对象的所有访问。这就是指定var _Date_ = Date;的原因var _Date_ = Date; 在图书馆。如果我在库代码中使用Date而不是_Date_ ，则会发现“递归过多”（可能还有其他问题）。

其余的代码对于使用Date人来说似乎很熟悉。但是，有一个小小的打ic。调用alert("Current date: " + date);会得到什么？？如果使用的是Date核心对象，则将观察Current date:后跟Current date:的字符串表示形式。但是，在当前上下文中，您会看到“ Current date:后跟一个数字毫秒值。

toString()与valueOf()
查看JavaScript中的对象到原始转换，以了解为什么alert("Current date: " + date); 结果在一个字符串或数字表示date 。

让我们将“增强型” Date对象用于一些实际用途，例如创建日历页面。该脚本将使用document.writeln()基于<table>元素输出此页面的HTML。将使用_Date构造函数的两个变体以及getFullYear() ， getMonth() ， getDay() ， lastDay()和getDate()方法，以及monthNames属性。查看清单3。

<!DOCTYPE html>
<html><head><title>Calendar</title><script type="text/javascript" src="ajscolib.js"></script></head><body><script>var Date = ca_tutortutor_AJSCOLib._Date;var date = new Date();var year = date.getFullYear();var month = date.getMonth();document.writeln("<table border=1>");document.writeln("<th bgcolor=#eeaa00 colspan=7>");document.writeln("<center>" + Date.monthNames[month] + " " + year + "</center>");document.writeln("</th>");document.writeln("<tr bgcolor=#ff7700>");document.writeln("<td><b><center>S</center></b></td>");document.writeln("<td><b><center>M</center></b></td>");document.writeln("<td><b><center>T</center></b></td>");document.writeln("<td><b><center>W</center></b></td>");document.writeln("<td><b><center>T</center></b></td>");document.writeln("<td><b><center>F</center></b></td>");document.writeln("<td><b><center>S</center></b></td>");document.writeln("</tr>");var dayOfWeek = new Date(year, month, 1).getDay();var day = 1;for (var row = 0; row < 6; row++){document.writeln("<tr>");for (var col = 0; col < 7; col++){var row;if ((row == 0 && col < dayOfWeek) || day > date.lastDay()){document.writeln("<td bgcolor=#cc6622>");document.writeln(" ");}else{if (day == date.getDate())document.writeln("<td bgcolor=#ffff00>");elseif (day % 2 == 0)document.writeln("<td bgcolor=#ff9940>");elsedocument.writeln("<td>");document.writeln(day++);}document.writeln("</td>");}document.writeln("</tr>");}document.writeln("</table>");</script></body>
</html>

清单3：使用“增强型” Date对象生成日历页面

要创建一个逼真的日历页面，我们需要知道每月的第一天发生在一周的哪一天。表达式new Date(year, month, 1).getDay()为我们提供了所需的信息（0代表星期日，1代表星期一，依此类推），该信息已分配给dayOfWeek 。列索引小于dayOfWeek的第一行上的每个正方形均保留为空白。

图1显示了一个示例日历页面。

图1：当天以黄色突出显示。

清单4提供了一个HTML文档，该文档嵌入了用于测试_Math的脚本。

<!DOCTYPE html>
<html><head><title>Augmented Math Tester</title><script type="text/javascript" src="ajscolib.js"></script></head><body><script>var Math = ca_tutortutor_AJSCOLib._Math;alert("Math.GOLDEN_RATIO: " + Math.GOLDEN_RATIO);try{alert("Math.rnd(null): " + Math.rnd(null));}catch (err){alert("null value not supported.");}alert("Math.rnd(10): " + Math.rnd(10));for (var i = 0; i < 10; i++)alert(Math.rndRange(5, 9));try{alert("Math.toDegrees(null): " + Math.toDegrees(null));}catch (err){alert("null degrees not supported.");}alert("Math.toDegrees(Math.PI): " + Math.toDegrees(Math.PI));try{alert("Math.toRadians(null): " + Math.toRadians(null));}catch (err){alert("null radians not supported.");}alert("Math.toRadians(180): " + Math.toRadians(180));try{alert("Math.trunc(null): " + Math.trunc(null));}catch (err){alert("null value not supported.");}alert("Math.trunc(10.83): " + Math.trunc(10.83));alert("Math.trunc(-10.83): " + Math.trunc(-10.83));</script></body>
</html>

清单4：测试“增强型” Math对象

让我们将“增强型” Math对象投入实际使用，例如显示心形曲线 ，这是一个平面曲线，该平面曲线由围绕相同半径的固定圆滚动的圆周长上的点跟踪。该脚本将使用Math的rndRange() ， toRadians() ， cos()和sin()方法。查看清单5。

<!DOCTYPE html>
<html><head><title>Cardioid</title><script type="text/javascript" src="ajscolib.js"></script></head><body><canvas id="canvas" width="300" height="300">canvas not supported</canvas><script>var Math = ca_tutortutor_AJSCOLib._Math;var canvas = document.getElementById("canvas");var canvasctx = canvas.getContext("2d");var width = document.getElementById("canvas").width;var height = document.getElementById("canvas").height;canvasctx.fillStyle = "#000";canvasctx.fillRect(0, 0, width, height);canvasctx.fillStyle = "RGB(" + Math.rndRange(128, 255) + "," +Math.rndRange(128, 255) + "," +Math.rndRange(128, 255) + ")";canvasctx.beginPath();for (var angleDeg = -180.0; angleDeg < 180.0; angleDeg += 0.1){var angle = Math.toRadians(angleDeg);// Evaluate cardioid curve equation. This produces radius for// given angle. Note: [r, angle] are the polar coordinates.var r = 60.0 + 60.0 * Math.cos(angle);// Convert polar coordinates to rectangular coordinates. Add// width / 2 and height / 2 to move curve's origin to center// of canvas. (Origin defaults to canvas's upper-left corner.)var x = r * Math.cos(angle) + width / 2;var y = r * Math.sin(angle) + height / 2;if (angle == 0.0)canvasctx.moveTo(x, y);elsecanvasctx.lineTo(x, y)}canvasctx.closePath();canvasctx.fill();</script></body>
</html>

清单5：使用“增强型” Math对象生成心形曲线

清单5使用HTML5的canvas元素和API来呈现心形曲线，该曲线通过画布上下文的beginPath() ， moveTo() ， lineTo()和closePath()方法构造为多边形。曲线填充颜色的每个分量都是通过rndRange()随机选择的。它的参数确保组件不会太暗。通过画布上下文的fill()方法fill()曲线。

图2显示了彩色心形曲线。

重新加载页面以更改曲线的颜色。