在这里就不介绍 seajs 是啥了,直接来说说在 seajs 中使用jquery 和 jquery 插件遇到的问题:
首先:【index.html 为展示页】【main.js为主体页 】【 jquery.js 为jquery库】【plugins.js为jquery插件】,它们各自是一个页面
index.html
seajs.config({
base:'./static/js/',
alias:{
'main':'main'
}
});
//引用主体js
seajs.use('main');
事先 jquery.js 和plugins.js 需要改造成 seajs 模块代码如下
jquery.js 改造:
(function(factory) { if (typeof define === 'function') { define('/jquery', [], factory); } else { factory(); } })(function(require) { //...jquery 源码 if (require) return $.noConflict(true); });
plugins.js改造:
(function(factory) { if (typeof define === 'function') { // 如果define已被定义,模块化代码 define('plugins', ['jquery'], function(require, exports, module) { factory(require('jquery')); // 初始化插件 return jQuery; // 返回jQuery }); } else { // 如果define没有被定义,正常执行jQuery factory(jQuery); } }(function($) { //jquery 插件代码 注意: 不包括 (function(){})(jQuery);外壳 }));
main.js 引用jquery.js 和plugins.js:
define(function( require , exports , module ){ //引入jquery 和 jquery 插件 seajs.config({ base : './static/js/', alias : { 'jquery':'jquery.sea.js', 'plugins':'plugins.js' } }); //引入jquery 和 jquery 插件 seajs.use(['jquery','plugins'],function($){ //...这里是jquery插件调用 //平时写的代码 $(function(){ $(document).click(function(){ $('body').html(''); }); }); }); });
本文案例参考范文:http://julabs.com/blog/seajs-jquery-and-plugins/