JavaScript代码优化与应用实践-优快云博客

本文深入探讨了JavaScript代码的优化方法，包括合理布局代码、合并文件、压缩代码等技术手段，同时展示了如何通过JavaScript获取并操作网页元素，实现动态改变样式及执行复杂任务。文章覆盖了从基础语法到高级应用的多个方面，旨在帮助开发者提高代码效率和网站性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var a=null==undefined?1:"abc";

var b=typeof(a);

var c=typeof(b);

var d=typeof(null);

console.log(a);

console.log(b);

console.log(c);

console.log(d);

写出a,b,c,d结果值

var a=null==undefined?1:"abc";//1

var b=typeof(a);//number

var c=typeof(b);//string

var d=typeof(null);//object

var s="aBaCaD";

var r1=s.relace("a","#");

var r2=s.replace(/a/,"#");

var r1=s.replace(/a/g,"#");

console.log(s);

console.log(r1);

</script>

写出s和r1,r2,r3的值

var r1=s.relace("a","#");//只替换第一个a,结果是:#BaCaD

var r2=s.replace(/a/,"#");//正则表达式，但也只是替换第一个a，结果：#BaCaD

var r1=s.replace(/a/g,"#");//正则表达式，全局替换。#B#C#D

有字符串“15,30-40;50”，写JavaScript代码获得数值15,30,40,50.

var myStr="15,30-40;50";

var pattern=/[0-9]{2}/g;//gloabl

var result=myStr.match(pattern);

for(var i=0;i<result.length;i++){

console.log(result[i]);

}

</script>

<html>

<head>Test Question</head>

.aBox{

width:100px;

height:100px;

background:#ffcc00;

}

</style>

<body>

<div>

<div id="abc">This is a test content!</div>

</div>

</body>

</html>

通过方法取得class="aBox"的div的宽度和高度，并且设置其背景色为红色。

思路：1.使用JavaScript取得页面嵌入样式，动态改变元素的嵌入样式。

<!DOCTYPE>

<html>

<head>

<title>Test Question</title>

</head>

.aBox{

width:100px;

height:100px;

background:#ffcc00;

}

</style>

<body>

<div>

<div id="abc">This is a test content!</div>

</div>

window.onload=function(){

var abcDiv=document.getElementById("abc");

var aBoxDiv=abcDiv.parentNode;

var divWidth=0;

var divHeight=0;

if(aBoxDiv.currentStyle){

divWidth=aBoxDiv.currentStyle["width"];

divHeight=aBoxDiv.currentStyle["height"];

}else{

var styleArray=aBoxDiv.ownerDocument.defaultView.getComputedStyle(aBoxDiv,null);

divWidth=styleArray["width"];

divHeight=styleArray["height"];

}

console.log(divWidth);

console.log(divHeight);

//JavaScript动态修改"嵌入样式"

var oStyleSheet=document.styleSheets[0];

var oRule=oStyleSheet.cssRules[0];

oRule.style.backgroundColor="red";

}

</script>

</body>

</html>

参考网址：

http://www.jb51.net/article/19577.htm

http://hi.baidu.com/qqljsevpepbhilq/item/827857272410ae9db6326353

http://www.w3cschool.cn/dom_cssstylesheet.html

5.谈谈你对Javascript代码的使用，优化方法。

常见的优化方法

1.将不是页面一加载就用到的JS放在body闭合之前。

2.合并多个JS文件

3.压缩文件使用工具：http://javascriptcompressor.com/

转载于:https://www.cnblogs.com/liminjun88/archive/2013/03/09/2951703.html

前端知识小结