| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
cwsconffer
9年前发布

好好的用好seajs吧!

来自: http://www.famanoder.com/bokes/5675cf20a51cc4280d320a8b

页面加载时,渲染节点同时会执行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 插件):

1 )、

define(function(require,exports,module){ //var $=require(‘jquery’); //jquery插件源码 });

2 )、使用 seajs 的 shim

seajs.config({ plugins:[‘shim’], alias:{ ‘jquery’:{ src : '/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并不难,难得的是真正的在模块化的基础上构建一个由前端管理的结构;

 本文由用户 cwsconffer 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1455410924730.html
SeaJS jQuery JavaScript开发