jQuery技术

seajs初尝 加载jquery返回null解决学习日志

字号+ 作者:H5之家 来源:H5之家 2015-10-05 11:22 我要评论( )

seajs初尝 加载jquery返回null解决学习日志

今天早上初尝seajs,发现一个非常蛋疼的事情,使用官方demo中的jquery是没有问题,

下载官方最新版jquery 2.1.1发现console.log($)返回null,百思不得其解!只能求助度娘!

在GitHub发现了玉伯的说明 《 直接调用 jQuery 插件等非标准模块的方法

不过这方法在2.3版本貌似已经不行,seajs.modify方法已在这版本移除!

https://github.com/seajs/seajs/issues/286

这里的标准模块指的是AMD和CMD的定义

引用玉伯在知乎的详细回答

以下引用玉伯的回复大家会更加深入了解

@lifesinger 昨天折腾得太累了,不好意思。后来还是用 RequireJs 解决问题。 另外,我想问问: 1. AMD 是不是容易卡死UI? 2. 为什么采用与 SeaJs同样采用 CMD 规范编写的 NodeJs 模块 不能直接调用——我大概观察了下,好像定义格式不太一样,这也是问题啊,既然遵循同样的规范为什么格式又不一样, 3. 用常规全局变量写法写的脚本经过 shim 配置,在 var ejs = require('ejs') 后会覆盖 ejs 的(全局)定义,但是可以直接 require('ejs'),然后 ejs 会注册到window 名下。 4. 把一个常规脚本,换成 SeaJs 标准格式 跟 RequireJs 转换有什么不同吗? 另另外,感觉RequireJS 的自动加载插件机制挺不错。 @iahu AMD 是一加载就执行,当一次加载很多文件时,意味着会立刻执行大量脚本,这时可能会导致 UI 卡。CMD 的执行是分散的,因此一般来说不会造成 UI 卡。 SeaJS 与 Node.js 的关系,可参考这篇文档:#275 shim 配置后,require('ejs') 得到的 ejs 就是全局那个 ejs,也可以将挂载在 window 上的 ejs 去掉,比如 seajs.config({ plugins: ["shim"], alias: { src: 'path/to/ejs.js', exports: function() { var ejs = window.ejs; window.ejs = undefined; return ejs } }}) RequireJS 的 shim 插件,本质上和 SeaJS 是一样的。

以上提到的方法已过时了,只好继续尝试其他办法!

方法一:

还是玉伯老大的办法《seajs 2.1.1中去掉了seajs.modify 后,如何preload CDN 中的jquery ?》

https://github.com/seajs/seajs/issues/862

整个文章主要是说不修改为CMD模式下在模块内部使用jquery,玉伯老大是不推介这样,但还是可以实现

不过jquery文件就不是在seajs.config里配置了,是直接在head头部引入文件,就像平时那样,然后在seajs内部某个事件机制触发将全局的jQuery对象带到内部module.exports对象;

seajs.on('exec', function(module) { if (module.uri === seajs.resolve('jquery')) { window.$ = window.jQuery = module.exports; } });

方法二:

当然就是按照CMD定义做封装一次jquery,方法也很简单,只要把源代码粘进去,然后返回jquery对象即可;

define(function(){ //jquery源代码 return $.noConflict(); });

这样就可以在seajs.config引入文件在内部其他模块使用,这里返回为什么是$.noConflict(),请看w3c学校介绍

seajs.config({ base : "../sea-modules/", alias : { "jquery" : "jquery.js" } }); define(function(require, exports, module){ var $ = require("jquery"); exports.showObj = function() { console.log($); } });

方法三:

参照seajs官方jquery封装方法

if ( typeof module === "object" && module && typeof module.exports === "object" ) { module.exports = jQuery;} else { if ( typeof define === "function" && define ) { define( "jquery", [], function () { return jQuery; } ); }}if ( typeof window === "object" && typeof window.document === "object" ) { window.jQuery = window.$ = jQuery;} https://github.com/seajs/examples

在目录 sea-modules/jquery 里就有封装好的1.10版本;

https://github.com/seajs/seajs/issues/264

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery.lazyload实现延时加载详解步骤

    jQuery.lazyload实现延时加载详解步骤

    2016-01-16 13:56

  • jQuery实现预加载图片的方法

    jQuery实现预加载图片的方法

    2015-11-19 09:49

  • seajs加载jquery时提示$ is not a function该怎么解决

    seajs加载jquery时提示$ is not a function该怎么解决

    2015-11-15 15:24

  • jquery防淘宝网图片动态加载代码

    jquery防淘宝网图片动态加载代码

    2015-11-13 18:39

网友点评
!