V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
yumemor
V2EX  ›  问与答

使用 pjax 局部刷新时,你们是怎么处理 js 代码的?

  •  
  •   yumemor · 2017-02-09 22:28:15 +08:00 · 8836 次点击
    这是一个创建于 2825 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在加载局部页面几乎抛弃了 iframe ,使用 jquery load 或者 pjax 来加载,但是局部页面上面的 js 逻辑代码你们是怎么处理的呢??

    方案一:全局实现 之前有看过 github 的实现,他们加载局部页面的时候不携带 js 代码。应该是放在全局页面进行处理的,但是这样的话 有些局部页面中的组件需要等待加载后才能初始化 难道每一次加载局部页面都要去初始化一次呢? 还有把所有局部页面的逻辑放在全局中 会不会不好维护呢?

    方案二:局部实现 最简单粗暴, 把局部页面中的逻辑 js 放在局部页面中,

    <div class='container'>
    	Hello
    </div>
    
    <script>
    	$(function(){
    		$('.container').html('World')
    	})
    </script>
    

    这样看起来 js 代码比较好维护,但是在浏览器中每点击一次都会重复的加载一次 js 代码,如果有 on 事件的话会重复进行添加,要解决重复添加 必须在 on 事件之前 取消一次事件绑定。 因为 js 加载到浏览器中没办法进行释放。

    个人感觉第一种方案比较合理,但是不方便维护和开发,第二种方案简单粗暴 但是隐藏的问题很多

    现在 vue 和 angular 好像都是加载局部页面不加载 js 代码 ,所以请教下各位。

    5 条回复    2017-02-17 00:20:38 +08:00
    MinonHeart
        1
    MinonHeart  
       2017-02-09 23:50:15 +08:00 via iPhone
    全局实现用委托就可以了
    2 的话,你更新不会把 div 替换掉?替换就没有重复绑定的问题了。
    最好把逻辑层和行为层(那些事件)分开,事件一般只要绑定一次就行了
    yimity
        2
    yimity  
       2017-02-11 20:56:46 +08:00 via iPhone
    第一没有所谓的 pjax ,第二,第一种方案推荐。好维护,初始化等逻辑都是在 JS 中控制。完全有你
    yumemor
        3
    yumemor  
    OP
       2017-02-15 15:37:15 +08:00
    yimity
        4
    yimity  
       2017-02-16 08:14:41 +08:00
    @yumemor 呵呵,你认为是就就好。
    yumemor
        5
    yumemor  
    OP
       2017-02-17 00:20:38 +08:00
    @yimity 这个东西吧 其实是各个技术相加的简称, ajax + history.pushState = pjax ,无非就是一个局部加载+浏览器路径控制 叫什么名字都无所谓 pjax 是新技术和旧技术的结合名字 存在即合理。

    要说名字别人没有起好 去 github 提 issue 吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   957 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 21:45 · PVG 05:45 · LAX 13:45 · JFK 16:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.