seajs模块化jQuery与jQuery插件【转】
把jQuery修改成SeaJs的模块代码非常简单,就是用下面这段语句将jQuery源代码包裹起来:
define('jquery',[],function(require, exports, module){
//这里放jQuery源代码
module.exports = jQuery;
});
也可以加一个判断,如果define已经被定义,就把jQuery模块化,如果define没有被定义,正常执行jQuery代码:
/*
* http://julabs.com
*/
(function(factory) {
if (typeof define === 'function') {
define('/jquery', [], factory);
}
else {
factory();
}
})(function(require) {
//这里放jQuery源代码
if (require) return $.noConflict(true);
});
如果你用的是jQuery1.7版本以上的,那就更方便了。可以看下jQuery源码的最后几行,你会发现类似下方的代码:
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
如果判断语句为真,那么jQuery就会自动模块化。所以改下判断语句,只留typeof define === "function"
,jQuery便可以自动模块化:
if ( typeof define === "function") {
define( "jquery", [], function () { return jQuery; } );
}
模块化后的调用代码如下:
<script src="/script/sea.js"></script>
<script>
/*
* http://julabs.com
*/
seajs.config({
'base':'/script',
'alias':{
'jquery':'jquery.sea.js'
}
});
seajs.use(['jquery'],function($){
console.log($);
});
</script>
jQuery插件的模块化:
以一个简单的插件为例:
/*!
* http://julabs.com
*/
(function($){
$.sayHello = function(){
console.log("Hello");
};
})(jQuery)
一般模块化代码像下面这样:
/*!
* http://julabs.com
*/
(function (factory) {
if (typeof define === 'function') {
// 如果define已被定义,模块化代码
define('jquerySayHello',['jquery'], function(){
// 返回构造函数
return factory
});
} else {
// 如果define没有被定义,正常执行插件代码
factory(jQuery);
}
}(function ($) {
// 这里才是插件真正的构造函数
console.log('init'); // 注意这行代码
$.sayHello = function(){
console.log("Hello");
};
}));
使用插件的代码如下:
seajs.config({
'base':'/script',
'alias':{
'jquery':'jquery.sea.js',
'jquerySayHello':'jquery.sayHello.sea.js'
}
});
seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
jquerySayHello($); // 初始化插件
$.sayHello();
});
seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
jquerySayHello($); // 初始化插件
$.sayHello();
});
注意我在插件构造函数里面写的console.log('init');
这段代码,可以看到,如果我请求两次插件,插件就要初始化两次。这个虽然可以让代码只在使用时才执行,减少了资源消耗,但如果一个页面中多处需要这个插件的话,就要执行很多次。如果改成下面这种,直接在本模块里就执行:
/*!
* http://julabs.com
*/
(function (factory) {
if (typeof define === 'function') {
// 如果define已被定义,模块化代码
define('jquerySayHello',['jquery'], function(require,exports,moudles){
factory(require('jquery')); // 初始化插件
return jQuery; // 返回jQuery
});
} else {
// 如果define没有被定义,正常执行jQuery
factory(jQuery);
}
}(function ($) {
console.log('init');
$.sayHello = function(){
console.log("Hello");
};
}));
使用插件的代码如下:
/*
* http://julabs.com
*/
seajs.config({
'base':'/script',
'alias':{
'jquery':'jquery.sea.js',
'jquerySayHello':'jquery.sayHello.sea.js'
}
});
seajs.use(['jquery','jquerySayHello'],function($){
$.sayHello();
});
seajs.use(['jquery','jquerySayHello'],function($){
$.sayHello();
});
可以看到,插件的构造函数只执行了一次。
seajs模块化jQuery与jQuery插件【转】的更多相关文章
- ***使用jQuery去封装插件(组件化、模块化的思想),即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题
没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 提升用户体验的最佳免费 jQuery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery 人脸识别插件,支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- 推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
随机推荐
- Typora基础使用
Markdown学习 标题 三级标题 四级标题 字体 Hello,World! Hello,World! Hello,World! Hello,World! 引用 选择狂神说Java,走向人生巅峰 分 ...
- 【小白学PyTorch】12 SENet详解及PyTorch实现
文章来自微信公众号[机器学习炼丹术].我是炼丹兄,有什么问题都可以来找我交流,近期建立了微信交流群,也在朋友圈抽奖赠书十多本了.我的微信是cyx645016617,欢迎各位朋友. 参考目录: @ 目录 ...
- flutter权限管理permission_handler
flutter权限管理permission_handler 添加依赖 #权限 permission_handler: ^3.0.0 使用 在android的mainfest中添加权限: <use ...
- swagger2注解详细说明
@Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界面上也看到,所以不需要配置&q ...
- Jmeter(二十四) - 从入门到精通 - JMeter函数 - 中篇(详解教程)
1.简介 在性能测试中为了真实模拟用户请求,往往我们需要让提交的表单内容每次都发生变化,这个过程叫做参数化.JMeter配置元件与前置处理器都能帮助我们进行参数化,但是都有局限性,为了帮助我们能够更好 ...
- 刷题[安洵杯 2019]easy_web
前置知识 md5碰撞: %4d%c9%68%ff%0e%e3%5c%20%95%72%d4%77%7b%72%15%87%d3%6f%a7%b2%1b%dc%56%b7%4a%3d%c0%78%3e% ...
- spring aop 源码分析(三) @Scope注解创建代理对象
一.源码环境的搭建: @Component @Scope(scopeName = ConfigurableBeanFactory.SCOPE_SINGLETON,proxyMode = ScopedP ...
- spring给容器注册组件 的几种方式
环境搭建: 新建一个maven项目,引入依赖 <dependency> <groupId>org.springframework</groupId> <art ...
- webservice了解一下!!
(1)什么是webservice? webservice是一种可以跨编程语言和跨平台进行远程调用的一种技术,是同步进行. webservice主要分为两种,一种是基于浏览器的瘦客户端应用程序,一种是基 ...
- Vue 组件的基础介绍
1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html ...