jQuery修改成SeaJs的模块代码非常简单,就是用下面这段语句将jQuery源代码包裹起来:

  1. define('jquery',[],function(require, exports, module){
  2. //这里放jQuery源代码
  3. module.exports = jQuery;
  4. });

也可以加一个判断,如果define已经被定义,就把jQuery模块化,如果define没有被定义,正常执行jQuery代码:

  1. /*
  2. * http://julabs.com
  3. */
  4. (function(factory) {
  5. if (typeof define === 'function') {
  6. define('/jquery', [], factory);
  7. }
  8. else {
  9. factory();
  10. }
  11. })(function(require) {
  12. //这里放jQuery源代码
  13. if (require) return $.noConflict(true);
  14. });

如果你用的是jQuery1.7版本以上的,那就更方便了。可以看下jQuery源码的最后几行,你会发现类似下方的代码:

  1. if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  2. define( "jquery", [], function () { return jQuery; } );
  3. }

如果判断语句为真,那么jQuery就会自动模块化。所以改下判断语句,只留typeof define === "function"jQuery便可以自动模块化:

  1. if ( typeof define === "function") {
  2. define( "jquery", [], function () { return jQuery; } );
  3. }

模块化后的调用代码如下:

  1. <script src="/script/sea.js"></script>
  2. <script>
  3. /*
  4. * http://julabs.com
  5. */
  6. seajs.config({
  7. 'base':'/script',
  8. 'alias':{
  9. 'jquery':'jquery.sea.js'
  10. }
  11. });
  12. seajs.use(['jquery'],function($){
  13. console.log($);
  14. });
  15. </script>

jQuery插件的模块化:

以一个简单的插件为例:

  1. /*!
  2. * http://julabs.com
  3. */
  4. (function($){
  5. $.sayHello = function(){
  6. console.log("Hello");
  7. };
  8. })(jQuery)

一般模块化代码像下面这样:

  1. /*!
  2. * http://julabs.com
  3. */
  4. (function (factory) {
  5. if (typeof define === 'function') {
  6. // 如果define已被定义,模块化代码
  7. define('jquerySayHello',['jquery'], function(){
  8. // 返回构造函数
  9. return factory
  10. });
  11. } else {
  12. // 如果define没有被定义,正常执行插件代码
  13. factory(jQuery);
  14. }
  15. }(function ($) {
  16. // 这里才是插件真正的构造函数
  17. console.log('init'); // 注意这行代码
  18. $.sayHello = function(){
  19. console.log("Hello");
  20. };
  21. }));

使用插件的代码如下:

  1. seajs.config({
  2. 'base':'/script',
  3. 'alias':{
  4. 'jquery':'jquery.sea.js',
  5. 'jquerySayHello':'jquery.sayHello.sea.js'
  6. }
  7. });
  8. seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
  9. jquerySayHello($); // 初始化插件
  10. $.sayHello();
  11. });
  12. seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
  13. jquerySayHello($); // 初始化插件
  14. $.sayHello();
  15. });

注意我在插件构造函数里面写的console.log('init');这段代码,可以看到,如果我请求两次插件,插件就要初始化两次。这个虽然可以让代码只在使用时才执行,减少了资源消耗,但如果一个页面中多处需要这个插件的话,就要执行很多次。如果改成下面这种,直接在本模块里就执行:

  1. /*!
  2. * http://julabs.com
  3. */
  4. (function (factory) {
  5. if (typeof define === 'function') {
  6. // 如果define已被定义,模块化代码
  7. define('jquerySayHello',['jquery'], function(require,exports,moudles){
  8. factory(require('jquery')); // 初始化插件
  9. return jQuery; // 返回jQuery
  10. });
  11. } else {
  12. // 如果define没有被定义,正常执行jQuery
  13. factory(jQuery);
  14. }
  15. }(function ($) {
  16. console.log('init');
  17. $.sayHello = function(){
  18. console.log("Hello");
  19. };
  20. }));

使用插件的代码如下:

  1. /*
  2. * http://julabs.com
  3. */
  4. seajs.config({
  5. 'base':'/script',
  6. 'alias':{
  7. 'jquery':'jquery.sea.js',
  8. 'jquerySayHello':'jquery.sayHello.sea.js'
  9. }
  10. });
  11. seajs.use(['jquery','jquerySayHello'],function($){
  12. $.sayHello();
  13. });
  14. seajs.use(['jquery','jquerySayHello'],function($){
  15. $.sayHello();
  16. });

可以看到,插件的构造函数只执行了一次。

seajs模块化jQuery与jQuery插件【转】的更多相关文章

  1. ***使用jQuery去封装插件(组件化、模块化的思想),即扩展方法

    如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){}  ②使用:$.方法(有参数的 ...

  2. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  3. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  4. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  5. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  6. jQuery 人脸识别插件,支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  7. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  8. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  9. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

随机推荐

  1. Skywalking Php注册不上问题排查

    Skywalking是一款分布式追踪应用,具体介绍可以参考 skywalking. 最近公司的一个Php应用在Skywalking后台查不到数据了: 登录到某台服务器上发现注册不上,启动时就报错了: ...

  2. CBV、正则

    CBV(源码分析) from flask import Flask, views app = Flask(__name__) class IndexView(views.MethodView): me ...

  3. Docker:三、深入Docker容器&Asp.net发版

    各位看官,我们前面已经有过两篇文章的研究了,哈哈,都是皮毛... 今天我们来看看docker容器内部,一探究竟... 一.进入docker容器 进入Linux容器非常简单,直接使用如下命令即可: do ...

  4. 深入理解HDFS分布式文件系统

    深入理解HDFS:Hadoop分布式文件系统: https://blog.csdn.net/bingduanlbd/article/details/51914550

  5. sping ioc 源码分析(二)-- refresh()方法分析

    测试环境代码: @Configuration @ComponentScan("com.yang.xiao.hui.ioc") @Conditional(MyCondition.cl ...

  6. WordPress用户角色权限

    [转自:群燕小站(http://www.zqunyan.com):原文链接: http://www.zqunyan.com/158.html] WordPress默认的用户角色有5个:订阅者,投稿者, ...

  7. Apache CXF基本使用

    一.服务端开发 1.创建web项目 2.导入jar包 3.web.xml中配置Servlet 1 <!-- 配置CXF框架提供的Servlet --> 2 <servlet> ...

  8. 046 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 08 for循环的注意事项

    046 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 08 for循环的注意事项 本文知识点:for循环的注意事项 for循环的注意事项 for循环有3个 ...

  9. 02 C语言最简单快速上手的IDE

    不要让开发环境 成为学习路上的拦路虎,先培养学习兴趣和学习路上的成就感,这个对于激励自己持续学习很重要. 等真正从小白入门了,甚至成为大牛了,能解决诸多困难问题了,安装个开发环境还会再是个什么难事吗? ...

  10. WebStrom配置TypeScript开发环境

    安装NodeJS node.js下载地址:https://nodejs.org/en/download/ 安装TypeScript npm install typescripot -g 新建tscon ...