最近公司的一个小项目,需求只有几个页面;但是要做成单页面应用;用框架有点浪费资源,只能自己做一个简单的单页面功能;
原生JS实现路由跳转
function getEle(){
let S = document.getElementById("app").querySelectorAll("*"), res = [];
S.forEach(e =>{
e.dataset.path ? res.push(e) : null
});
return res
}
window.Vue = {
//监听路由变化
tabPath(){
let routers = getEle();
let path = window.location.href.split("#")[1]?window.location.href.split("#")[1].split("?")[0]:"/"
routers.forEach(e =>{
e.innerHTML = "";
e.dataset.path === path ? e.style.display = "block" : e.style.display = "none"
})
},
//路由跳转
Router(options){
let type = typeof options, path = "";
if(type === "string"){
path = options
} else if(type === "object"){
path = options.path
}
window.location.hash = path
},
//初始化
init(fn){ //此处的fn相当于生命周期,传入对应path所需要执行的回调
window.onload = () =>{
this.tabPath();
typeof fn==="function"?fn():null;
};
window.onhashchange = () =>{
this.tabPath();
typeof fn==="function"?fn():null;
}
}
};
html 部分 需要先把需要的组件现在页面中
<div id="app">
<div data-path="/" id="index"></div>
<div data-path="/product" id="product">
</div>
<div data-path="/customItem" id="custom">
</div>
</div>
虽然缺点很多,但是简单的路由跳转功能还是能实现;
总结了一下缺点;
- 没有使用webpack所以应用外部资源要用到绝对路径“http://host/path”这样的;不然路径会报错;所以我把css、html、js都放到了index.html文件中;开发过程中要分区并且明确注释;一个文件的代码实在太多,一两千行;图片资源和ajax的路径都要使用“http://host/path”这样的格式;
- 组件的所有内容都要动态去创建;html代码中写的不管用,因为在切换路由的时候需要把组件里面的内容全部清空;不然等这个组件下一次出现的时候动态创建的内容就会重复;
- 数据双向绑定还没有完成;应该项目中数据交互不是很平凡;所以都是通过事件驱动数据;
- 毕竟是原生实现;所以细节比较多;也比较麻烦;不过接触的基础点多,也学习了不少之前没有注意到的东西;比如在事件中使用forEach处理数据,满足条件时结束代码运行,这时候return不管用了,这就是forEach的特性:break、return都无法阻止遍历;
优点: - 没有使用任何插件和框架还有UI等等,所以项目上线时打包的代码会很少,大概也就几十K的样子;
- 开发的时候比较自由;所有的效果都能通过自己封装的东西来实现;不收框架限制;也不用怕代码太多影响性能
- 比较适合只有几个页面的微型服务;