继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

好好的用好seajs吧!

花满楼的小前端a
关注TA
已关注
手记 42
粉丝 111
获赞 2213

页面加载时,渲染节点同时会执行script块内的JS和外部加载的无包装JS,这两种JS的安全执行,要保证涉及到的相关节点已被渲染到页面;所以外部JS要想安全的早于DOMReady执行,要放在页面底部;所以全部JS放到底部最好,不使用DOMReady也能最早执行;

对于外部加载的有包装的JS,包括ready内的,seajs模块内的,onload内的,执行顺序依次为:ready早于seajs早于onload;

有种情况是ready在seajs里:

define(function(require,exports,module){

   var $=require(‘jquery’);

   $(function(){

      console.log(‘seajs-ready’);

   });

});

你会发现他会在onload后面执行,不信你试试,所以不推荐这样;

一般情况下,我们都希望节点渲染完就执行JS,我们也会使用seajs来组织那一堆堆的模块,seajs只有屈指可数的几个api,一般的前端都能很容易的上手使用,但经常容易忽略一个问题:如何通过seajs真正的实现模块化?

seajs是个模块加载器,他是用来组织你那一堆堆模块的,而不是用seajs那种写法来装逼的,经常看到很多项目下,script的src下既有seajs还有其他框架,最多的就是jquery,而seajs里也有require(‘jquery’),很明显,这是一种‘混合模式’,半模块化半零散状态,甚至那些seajs加载的模块,也不具有模块的独立性,而只是define或exports了一下,页面内另加载一个非模块化的jquery,来补充一部分JS;每次看到这种搞法,顿时觉得好无力啊!

对于一个页面,只需要define一个主模块(页面模块),在里面require其他基础模块,来实现一个页面调用一个JS文件;所以jquery应该是一个基础模块,而不应该单独加载;

1、 模块化jquery:

define(function(require,exports,module){

   //jquery源码

   module.exports=$.noConflict(true);

});

2、 模块化插件(主要是jquery插件):

define(function(require,exports,module){

         //var $=require(‘jquery’);

   //jquery插件源码

});

(2)、使用seajs的shim

seajs.config({

    plugins:[‘shim’],

    alias:{

        ‘jquery’:{

             src: ‘jquery’:’/path/jquery.js’

        },

        ‘jquery.easing’:{

             src:’/path/jquery.easing.js’,

             deps:[‘jquery’]

        }

    }

});

实现前后端的彻底分离,将静态资源从后台程序中分离出来,页面要加载哪些js,怎么加载,什么时候加载,由你决定,而不是叫后台去写到某个位置;因为复杂的项目中经常会有静态资源被写到后台的配置文件中,这对于前端来说不是那么好的做法,首先容易被滥用,其次不利于前端结构的维护,除非你的前端没有结构,还有就是失去了前端的独立性,难以实现结构上的前后端分离;

已成型项目怎么使用seajs完成模块化的结构转型呢?首先要解决以下问题:

(1)、独立出基础模块;

(2)、完成每个页面的模块化改造;

(3)、在最少依赖后台的情况下,将每个页面的主模块写入页面;

对于已成型的项目,第三点恐怕是最难的,哪怕你已将每个页面主模块拆分好了,但又不得不叫后台更新每个页面,来加载你的模块,这恐怕比较难,也说明你的结构还不够好;

前面说了,要实现前后端的彻底分离,将静态资源从后台程序中独立出来;怎么做呢,我这样想的,也在自己的博客系统中试着实现过:再建一个模块,作为所有页面模块的主模块,在这个模块里,写个页面与页面模块对应的配置json,将所有页面的要加载的页面主模块配置到这里,那么以后要新增页面,要增减JS只需要弄那个页面模块和这个公共主模块了,这样就能把所有JS文件从后台配置中抽离出来,由这个公共主模块来配置,现在问题的第三点也就好解决了,后台并不需要太多改动,JS文件全是你的了,由你分配!每个页面只会出现两个script的src,一个是seajs.js一个是main.js;

seajs是为前端的模块化而生的,如果你的项目结构没有实现模块化,那么你没必要使用它,我想对于一个前端来说,使用seajs并不难,难得的是真正的在模块化的基础上构建一个由前端管理的结构;

本文为慕课网作者原创,转载请标明【原文作者及本文链接地址】。侵权必究,谢谢合作!
打开App,阅读手记
6人推荐
发表评论
随时随地看视频慕课网APP