成为VIP
入行Web前端的难点是什么？如何正确拆分JS代码？JS对于每一个Web前端入门人员都是一个难点知识，涵盖的知识点多且杂，应用更是广泛多变。JS的存在让前端变得入门简单、精通不易，也让越来越多的人选择学习Web前端入行，接下来千锋就给大家分享一下如何正确拆分JS代码。
使用JS你可以做很多事情，比如可以创建活跃的用户界面，可以处理表单js切割字符串，可以让网页更具交互性。不过一个网站该如何以最佳的方式向用户发送资源文件?这其中会存在很多不同的场景，当然就需要用到不同的技术和不同的术语。
根据Webpack术语表，有两种不同的JS文件分割类型：
1、捆绑拆分：创建更多、更小的文件(但每个请求都需要加载它们)以获得更好的缓存效果。捆绑拆分与缓存有关，因此对于首次访问网站的用户来说js切割字符串，有没有拆分其实并没有什么不同。
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()
定义：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;
}
如果你想了解更多Web前端相关的知识，让自己能够快递进入前端开发行列，选择专业的学习是很好的方式。
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
htebazile
