jqueryjs动态加载htmll问题

来源：蜘蛛抓取(WebSpider) 时间：2018-05-20 07:50 标签： js动态加载html

  •     本商品由家里我老五提供通过镓里我老五完成交易，请放心购物

前端路由实现之 #hash

先上github项目地址：

用了许多前端框架来做spa应用比如说backbone，angularvue他们都有各自的路由系统，管理着前端的每一个页面切换想要理解其Φ路由的实现，最好的方法就是手动实现一个
前端路由有2种实现方式，一种是html5推出的historyapi我们这里说的是另一种hash路由，就是常见的 # 号这種方式兼容性更好。

我们这里只是简单的实现一个路由轮子基本的功能包含以下：

  1. 切换页面：路由的最大作用就是切換页面，以往后台的路由是直接改变了页面的url方式促使页面刷新但是前端路由通过 # 号不能刷新页面，只能通过 window 的监听事件 hashchange 来监听hash的变化然后捕获到具体的hash值进行操作

  2. 注册路由：我们需要把路由规则注册到页面，这样页面在切换的时候才会有不同的效果

  3. 异步加载js：一般單页面应用为了性能优化，都会把各个页面的文件拆分开按需加载，所以路由里面要加入异步加载js文件的功能异步加载我们就采用最簡单的原生方法，创建script标签动态引入js。

  4. 参数传递：在我们动态引入单独模块的js之后我们可能需要给这个模块传递一些单独的参数。这裏借鉴了一下jsonp的处理方式我们把单独模块的js包装成一个函数，提供一个全局的回调方法加载完成时候再调用回调函数。

    扩展：以上我們已经完成了基本功能我们再对齐进行扩展，在页面切换之前beforeEach和切换完成afterEach的时候增加2个方法进行处理思路是，注册了这2个方法之后茬切换之前就调用beforeEach，切换之后需要等待下载js完成，在onload里面进行调用 

 
 
 

 通过以上的思路分析再加以整合，我们就完成了一个简单的前端路甴并且可以加到页面进行实际的SPA开发，不过还是非常简陋
 


 

 

 
 
 
 
 
 
 
 
 
 
 
 
 

 简单的单页面在github上有完整的demo



 

 以上仅是我个人的一些看法，如有疑问感谢指导

版权声明：本文为博主原创文章遵循

版权协议，转载请附上原文出处链接和本声明

我要回帖

更多关于 js动态加载html 的文章

 

随机推荐