正确拆分JS代码的方法

简介: 正确拆分JS代码的方法

入行Web前端的难点是什么?如何正确拆分JS代码?JS对于每一个Web前端入门人员都是一个难点知识,涵盖的知识点多且杂,应用更是广泛多变。JS的存在让前端变得入门简单、精通不易,也让越来越多的人选择学习Web前端入行,接下来千锋就给大家分享一下如何正确拆分JS代码。

使用JS你可以做很多事情,比如可以创建活跃的用户界面,可以处理表单,可以让网页更具交互性。不过一个网站该如何以最佳的方式向用户发送资源文件?这其中会存在很多不同的场景,当然就需要用到不同的技术和不同的术语。

根据Webpack术语表,有两种不同的JS文件分割类型:

1、捆绑拆分:创建更多、更小的文件(但每个请求都需要加载它们)以获得更好的缓存效果。捆绑拆分与缓存有关,因此对于首次访问网站的用户来说,有没有拆分其实并没有什么不同。

2、代码拆分:基于路由的动态加载(特定于React),用户只下载他们正在查看的内容所需的代码。

JS截取字符串可使用substring()或者slice()

函数:substring()

定义:substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符。

功能:字符串截取,比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)

例子:

var src="images/off_1.png";

alert(src.substring(7,10));

//弹出值为:off

函数:substr()

定义:substr(start,length)表示从start位置开始,截取length长度的字符串。

功能:字符串截取

例子:

var src="images/off_1.png";

alert(src.substr(7,3));

//弹出值为:off

函数:split()

功能:使用一个指定的分隔符把一个字符串分割存储到数组

例子:

str="jpg|bmp|gif|ico|png";

arr=theString.split("|");

//arr是一个包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的数组

函数:Join()

功能:使用选择的分隔符将一个数组合并为一个字符串

例子:

var delimitedString=myArray.join(delimiter);

var myList=new Array("jpg","bmp","gif","ico","png");

var portableList=myList.join("|");

//结果是jpg|bmp|gif|ico|png

函数:indexOf()

功能:返回字符串中匹配子串的第一个字符的下标

例子:

var myString="JavaScript";

var w=myString.indexOf("v");w will be 2

var x=myString.indexOf("S");x will be 4

var y=myString.indexOf("Script");y will also be 4

var z=myString.indexOf("key");z will be -1

函数:lastIndexOf()
//代码效果参考:http://www.zidongmutanji.com/bxxx/184240.html

定义:lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值(与indexOf相反)

功能:返回字符串索引值

例子:

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

//弹出值依次为:6,15

JS数组拆分方法:

将数组array分成长度为subGroupLength的小数组并返回新数组

function group(array, subGroupLength) {

let index = 0;

let newArray = [];

while(index < array.length) {

newArray.push(array.slice(index, index += subGroupLength));

}

return newArray;

}

相关文章
|
19天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
117 58
|
5天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
18天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
5天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
5天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
6天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
19 3
原生js炫酷随机抽奖中奖效果代码
|
4天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
19 7
|
5天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
11天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
130 4