做h5页面的网站哪个好,无锡互联网公司排名,做外贸网站怎么样,昆明怎样优化网站一.编写JavaScript库要注意的问题 为了让自己的JS库构建的更加优雅、合理#xff0c;我们编写JS库时要注意两方面的内容#xff1a; 1.不要使用版本检测#xff0c;而要使用能力检测 由于浏览器的类型和版本太多#xff0c;以及不断的新的浏览器出现#xff0c;我们不可能…一.编写JavaScript库要注意的问题 为了让自己的JS库构建的更加优雅、合理我们编写JS库时要注意两方面的内容 1.不要使用版本检测而要使用能力检测 由于浏览器的类型和版本太多以及不断的新的浏览器出现我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。浏览器检测也叫版本检测通常被认为是一种错误的做法浏览器检测的最佳实践是能力检测通常也被称为对象检测指的是在代码执行之前检测某个脚本对象or方法是否存在而不是依赖于你对哪个浏览器具有哪些特定的了解。如果必须的对象和方法存在那么说明浏览器能够使用它而且代码也可以按照预期执行。能力检测使用if(xxx.xxxx)的方式 [javascript] view plaincopyprint? // JavaScript Document if(document.body document.body.getElementsByTagName){ //使用document.body.getElementsByTagName的代码 } 2.使用命名空间 当使用多个js库文件时为了避免在调用时不同js库文件的同名函数的冲突一般会使用命名空间来解决。JavaScript支持同名函数但只使用最后一个加载的函数不支持重载不会考虑参数只看函数名字 哪一个最后被加载哪一个就会被调用到。所以不使用命名空间的话就很容易遇到同名函数冲突的问题。 使用命名空间的两点原则唯一性不共享。 唯一性挑选一个独一无二的命名空间的名字如Google Maps在所有的标识符中都添加了G前缀注意js是大小写敏感的。 不共享不共享意味着什么都不共享当你创建自己的$函数时你可能会与著名的库(如Prototype)中的$函数发生冲突而导致Prototype中的$无法使用为了不与著名的一些库jQuery、prototype或者其他已有的一些函数冲突使用匿名函数来实现代码的不共享。如要保证只有你自己使用这个$()函数你可以使用一个JS小技巧。 //匿名函数(function(){//code,运行的代码})();注意()在JavaScript中有两种含义一是运算符二是分隔符。上面匿名函数需要说明两点 ①红色括号里是一个匿名函数红色括号代表分割表示里面的函数是一个部分 ②绿色括号表示一个运算符表示红色括号里面的函数要运行相当于定义完一个匿名函数后就让它直接运行。 二.编写JavaScript库模板 1.可以使用下面的模板来编写自己的JavaScript库 [javascript] view plaincopyprint? span stylefont-family:FangSong_GB2312;//JavaScript库模板代码 (function (){ function $(){ alert(被调用到喽); /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法 其主要用法就是在你自己定义了一定的函数以后通过执行相应的操作 所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/ } //注册命名空间 myNameSpace 到window对象上 window[myNameSpace] {} //把$函数注册到 myNameSpace命名空间中 window[myNameSpace][$]$; })();/span 2.在HTML页面上引用自己JS库中的函数方式 首先执行插入→HTML→脚本对象→脚本搜素自己要插入到此HTML页的js库文件插入到HTML文件标题下方例如 [javascript] view plaincopyprint? span stylefont-size: 18px; span stylefont-family:FangSong_GB2312;titleICTest/title !--此处通过执行插入→HTML→脚本对象→脚本搜素自己要插入到此HTML页的js库文件插入此位置-- script languageJavaScript typetext/javascript srcIC.js/script /span/span 然后在body属性中调用JS库中的函数两种方式 ①body οnlοadmyNameSpace.$()/body //myNameSpace为定义的命名空间可以调用自己构建的JS库文件中到函数了 ②body οnlοadwindow.myNameSpace.$()/body //在命名空间前加上window也可实现调用JS库中的函数 三.编写自己的JavaScript库(实例) 实现一个在网页加载时弹出对话框的简单实例本实例我们采用编程软件Dreamweaver 8。 1.创建自己的JS库此处命名空间我命名为WALY.js。 注意大家可以使用自己喜欢的名字作为命名空间的名字这样使得即使一起使用其他人编写的库时也不会发生相互干扰的情况。 [javascript] view plaincopyprint? span stylefont-size: 18px; span stylefont-family:FangSong_GB2312;//ZAJ.js库代码 (function (){ function $(){ alert(AZJ.js库被调用到喽); } //注册命名空间 AZJ 到window对象上 window[AZJ] {} //把$函数注册到 AZJ命名空间中 window[AZJ][$]$; })();/span/span 2.在HTML页面代码中调用JS库进行验证是否调用到WALY.js中的函数。HTML文件名为WALYTest.html [html] view plaincopyprint? span stylefont-size: 18px; span stylefont-family:FangSong_GB2312;head meta http-equivContent-Type contenttext/html; charsetgb2312 / title调用js库测试/title !--此处通过执行插入→HTML→脚本对象→脚本搜素自己要插入到此HTML页的js库文件插入此位置-- script languageJavaScript typetext/javascript srcAZJ.js/script /head body οnlοadAZJ.$(); !--在页面加载时调用AZJ.js库中的函数这里也可使用body οnlοadwindow.AZJ.$();-- /body/span/span 3.运行网页运行结果如图 四.完善JavaScript库 这里主要在JS库匿名函数中编写两个常用的方法 1.$()方法 2.getElementsByClassName()方法 实例初探:js库中只编写$()方法 1.建立AZJ.js库编写$()方法,代码如下 [javascript] view plaincopyprint? span stylefont-family:FangSong_GB2312;font-size:18px;//ZAJ.js库代码 (function (){ //注册命名空间 AZJ 到window对象上 window[AZJ] {} //$函数等同于getElementByID function $(){ var elementsnew Array(); //将传来的参数进行遍历 for(var i0;iarguments.length;i){ var elementarguments[i]; //若参数为字符串类型则取得该参数的id if(typeof elementstring){ elementdocument.getElementById(element); } //若参数长度为1即只传递进来一个参数则直接返回 if(arguments.length1){ return element; } //若有多个参数传递进来则将处理后的值压入elements数组中 elements.push(element); } //返回处理后的参数 return elements; } //把创建的函数$注册到 window.AZJ命名空间中 window[AZJ][$]$; })();/span 2.在HTML页面进行测试 当从界面只传递一个参数时代码设计 [html] view plaincopyprint? span stylefont-family:FangSong_GB2312;font-size:18px;title调用js库测试/title !--此处通过执行插入→HTML→脚本对象→脚本搜素自己要插入到此HTML页的js库文件插入此位置-- script languageJavaScript typetext/javascript srcAZJ.js/script script languageJavaScript typetext/javascript function testClick(){ var testInputAZJ.$(testID); alert(testInput.value); } /script /head body input typetext valueAZJtest idtestID/ input typebutton valueClick Me οnclicktestClick()/ /body/span 运行结果为点击Click Me按钮弹出网页消息AZJtest 当从界面传递两个参数时代码设计 [html] view plaincopyprint? span stylefont-family:FangSong_GB2312;font-size:18px;title调用js库测试/title !--此处通过执行插入→HTML→脚本对象→脚本搜素自己要插入到此HTML页的js库文件插入此位置-- script languageJavaScript typetext/javascript srcAZJ.js/script script languageJavaScript typetext/javascript function testClick(){ var testInputAZJ.$(testID,testID2); //由于这里是两个参数所以用for语句遍历两个参数分别显示出来 for(var i0;itestInput.length;i){ alert(testInput[i].value); } } /script /head body input typetext valueAZJtest idtestID/ input typetext valueAZJtest2 idtestID2/ input typebutton valueClick Me οnclicktestClick()/ /body/span 运行结果单击Click Me按钮,先弹出AZJtest再弹出AZJtest2 实例深入编写getElementByClassName()方法 1.在AZJ.js库中编写getElementByClassName()方法代码设计如下 [javascript] view plaincopyprint? span stylefont-family:FangSong_GB2312;font-size:18px;//ZAJ.js库代码 (function (){ //注册命名空间 AZJ 到window对象上 window[AZJ] {} //getElementsByClassName包含两个参数类名标签名 function getElementsByClassName(className,tag){ //对tag进行过滤取出所有对象如取出所有input类型对象。 var allTagsdocument.getElementsByTagName(tag); var matchingElementsnew Array(); //正则表达式 className className.replace(/\-/g,\\-); var regex new RegExp((^|\\s) className (\\s|$)); var element; //将取出的tag对象存入数组中。 for(var i0;iallTags.length;i){ element allTags[i]; if(regex.test(element.className)){ matchingElements.push(element); } } return matchingElements; } //把创建的函数getElementsByClassName注册到 window.AZJ命名空间中 window[AZJ][getElementsByClassName]getElementsByClassName; })();/span 2.在HTML页面进行测试 测试方式同上面传递两个参数的方式代码设计如下 [html] view plaincopyprint? span stylefont-family:FangSong_GB2312;font-size:18px;title调用js库测试/title !--此处通过执行插入→HTML→脚本对象→脚本搜素自己要插入到此HTML页的js库文件插入此位置-- script languageJavaScript typetext/javascript srcAZJ.js/script script languageJavaScript typetext/javascript function testClick(){ var testInputAZJ.getElementsByClassName(testme,input); //由于这里是两个参数所以用for语句遍历两个参数分别显示出来 for(var i0;itestInput.length;i){ alert(testInput[i].value); } } /script /head body input typetext valueAZJtest class testme idtestID/ input typetext valueAZJtest2 classtestme idtestID2/ input typebutton valueClick Me οnclicktestClick()/ /body/span 运行结果同上述方法中传递两个参数的情况。 文章写到这里相信您也会编写简单的js库文件了吧编写js库文件是不是很简单呢 转载于:https://www.cnblogs.com/webapplee/p/3842475.html
