`
zhouyrt
  • 浏览: 1158783 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

如何定制你自己的jQuery

阅读更多

jQuery随着版本的不断升级代码量也随之增加,从1.0.0的不到两千行到现在的1.10.2已经突破1万行。

新的API不断增加,但有些在项目中并没有用到。jQuery团队很早就考虑到这一点,按模块来划分,并可以按需定制自己的jQuery。

 

jQuery从1.9开始构建工具迁移到grunt。grunt是基于node的,因此需要安装node,下面详细介绍。

一、安装node

很简单,这里有入门参考

 

二、安装grunt

也很简单,这里有入门参考

 

三、去github下载jQuery源码

使用命令: git clone git://github.com/jquery/jquery.git

下载后的目录


 

可以看到安装了一堆lib,uglify、gzip.js、requirejs等。至此,所有安装都已完毕。

 

五、编译源码到dest目录

非常简单,cd到jquery目录,敲grunt,如图



此时jquery目录里多了一个dest目录



dest目录有三个文件,未压缩的jquery.js,压缩的jquery.min.js和souremap(jquery.min.map需浏览器支持),这就是最终生产环境用到jquery版本。和你在官网下载的没有任何区别。

 

注意:

默认编译的是的2.x版本,2.x不支持IE6,7,8,如果想编译1.x的版本,使用git命令 git checkout 命令,如下将切换的 1.10.0

git checkout 1.10.0



所有的tag可通过命令 git tag 查看


 

六、定制你自己的jQuery

上面编译的是完整版的jQuery,如果想定制自己的jQuery,比如你不需要动画模块,或者不需要ajax模块等。

查看jquery目录下的src目录,可以看到jQuery自身是分模块开发的,各个模块在独立的目录或文件里,如下图



除了 核心模块(core)和 选择器(selector),其它模块都可以定制(包含或排除)。

比如你的项目中没有用到ajax模块,那么通过以下命令编译的jquery.js将不包含$.ajax, $.get, $.getJSON等。

cd到jquery目录,输入 grunt custom:-ajax



时查看dest目录下的jquery.js会发现代码只有7千多行,少了许多。这个版本的jquery版本号也很特殊,如下


 

不想包含多个模块,以逗号分隔即可,如

不包含ajax和动画:grunt custom:-ajax,-effects

不包含css、位置、包裹:grunt custom:-css,-offset,-wrap

 

七、修改jQuery的AMD模块名

我们知道jQuery可以做为AMD的一个模块存在,它默认的模块名是 "jquery"。

如果不想使用该名称,通过命令 grunt custom --amd="my-jquery" 即可完成修改

 

 

这时jquery的模块名称就变为 "my-jquery" 了,jquery.js源码中体现如下

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

 

此时当你的模块require时,需要改为 require('my-jquery'),通过define传递依赖时也需要改下。

特殊情况下你可能要使用一个匿名模块,使用命令 grunt custom --amd="",关于AMD及模块化请猛击 Modular JS

  • 大小: 4.7 KB
  • 大小: 23.9 KB
  • 大小: 11.8 KB
  • 大小: 13.3 KB
  • 大小: 5.1 KB
  • 大小: 3.7 KB
  • 大小: 11.8 KB
  • 大小: 2.5 KB
  • 大小: 8.9 KB
分享到:
评论

相关推荐

    JQUERY-UI中文定制版

    jQuery UI 支持通过 ThemeRoller 工具创建和定制主题,使得开发者可以根据自己的需求和品牌风格调整界面的视觉效果。中文定制版可能提供了更加友好的中文版 ThemeRoller 或相关指南,帮助用户更便捷地设计符合中国...

    [精华]网站论坛源码C# Jquery,完全自制,有很多jquery自己写的插件

    这表明开发者不仅构建了论坛的基础框架,还可能对Jquery进行了深度定制,创建了适用于特定论坛场景的交互功能或特效。 【标签】列举了五个关键词:“C#”,“Jquery”,“论坛”,“源码”,“插件”。这些标签帮助...

    制作属于自己的jQuery参考文档

    通过以上步骤,你可以定制一份符合自己需求的jQuery参考文档,不仅可以作为学习资料,也可以在实际工作中快速查找API用法,提高开发效率。同时,这也是一个很好的实践项目,可以帮助你深入理解XML、XSLT以及文件处理...

    可定制jquery写的div下拉框

    标题中的“可定制jquery写的div下拉框”指的是使用JavaScript库jQuery实现的一种交互式下拉菜单,它允许用户根据需求自定义下拉内容和样式。这种下拉框通常用于网页表单、导航菜单等场景,提供更丰富的用户体验。 ...

    jquery-ui.css、jquery-ui.js下载

    此外,jQuery UI支持Themeroller工具,允许开发者轻松创建和定制自己的主题。 接着,`jquery-ui.js`是jQuery UI的核心JavaScript库,它包含了所有UI组件的实现。这个文件包含了实现交互性和动态效果的代码,如拖放...

    自定制主机jQuery滑块 自定制主机jQuery滑块网页特效.zip

    通过深入理解和学习这个“自定制主机jQuery滑块”特效,开发者可以提升其前端技能,掌握如何创建具有专业水准的网页滑块,同时也可以借鉴其中的设计思路,将其应用到自己的项目中,提升用户体验。

    jQuery插件,jQuery插件

    2. **扩展jQuery**:然后,使用`.fn`(即`jQuery.fn`)来扩展jQuery的原型,这样你的函数就能作为jQuery的一个方法被调用。例如: ```javascript (function($) { $.fn.myPlugin = function(options) { // 插件...

    可定制高度画廊jquery插件.rar

    【标题】可定制高度画廊jquery插件是一个用于创建灵活且可自定义高度的图片展示画廊的jQuery插件。这种插件在网页设计中非常常见,尤其适用于那些需要展示大量图片并希望保持布局整洁、视觉效果吸引人的场景。通过...

    Jquery多选下拉列表插件jquery multiselect

    jQuery Multiselect是由Luis Almeida开发的一个开源插件,它基于jQuery库,可以将传统的多选`<select>`元素转换为一个可定制、交互性强的多选下拉框。通过这个插件,你可以轻松地实现分组、搜索、排序等高级功能,...

    JQuery desktop 基本JQuery 的虚拟桌面

    通过阅读代码和官方文档,了解其架构和API,结合示例进行实践,逐渐掌握如何在自己的项目中集成和定制jQuery Desktop。 总之,jQuery Desktop是一个创新的前端解决方案,它利用JavaScript和jQuery的力量,为Web应用...

    Jquery插件,JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了一系列可定制的用户界面组件,如对话框(Dialog)、日历(Datepicker)、拖放(Draggable)和排序(Sortable)。它还包括主题生成器,允许开发者自定义外观,以...

    jquery多选框

    1. `jquery-ui.css` 和 `jquery-ui-1.7.2.custom.css`:这是jQuery UI库的样式文件,jQuery UI是一个扩展了jQuery功能的库,提供了许多可交互的UI组件,包括可定制的多选框。这里可能包含自定义的多选框样式。 2. `...

    jquery ui messager 消息框

    它依赖于jQuery,提供了丰富的样式和定制选项。 3. **消息框(Message Box)**:消息框是一种常见的用户界面元素,用于向用户显示信息、警告、确认或询问。jQuery UI Messager允许开发者自定义消息框的样式、内容和...

    jquery jquery控件 时间控件 时分秒控件

    cal.js可能是一个定制的日期时间选择器,包含了与jQuery时间控件相关的逻辑和样式。 在实际应用中,使用jQuery时间控件通常涉及到以下几个步骤: 1. 引入jQuery库和时间控件插件:首先,你需要在HTML页面中引入...

    jquery alert 提示框、动态加载提示框、jquery插件

    jQuery Alert插件则提供了一种更加灵活和可定制的方式来创建提示框。它允许开发者自定义提示框的外观、内容、按钮布局等,增强了用户体验。通过使用jQuery的DOM操作和事件处理功能,我们可以轻松地调用这些自定义...

    jquery回到顶部插件jquery.goup.js

    jquery.goup.js的优点在于简洁易用,兼容性好,但缺点可能在于功能相对简单,对于有特殊需求的项目,可能需要额外的定制工作。 总结,jquery.goup.js作为一款实用的jQuery插件,以其简洁的代码、灵活的配置和良好的...

    jquery-confirm.js和jquery-form.js

    `jquery-confirm.js`是一个功能丰富的提示框插件,它替代了浏览器原生的确认对话框,提供了更美观且可定制化的提示方式。这个插件通常用于在用户进行删除、确认操作或其他重要决策时显示警告或确认消息。通过使用`...

    jquery时间控件时分秒

    总结起来,"jquery时间控件时分秒"是基于jQuery的Timepicker插件,它提供了一个方便的、可定制的时间选择界面,使得用户能够轻松地输入或选择时间。通过理解和掌握这个插件的使用,开发者可以为自己的网站或应用增添...

    ,jqueryui jquery ui包 效果不错,只是为了自己保存

    要开始使用jQuery UI,你需要熟悉jQuery的基本语法,然后可以查阅官方文档了解各个组件的API和示例。在实际项目中,可以通过引入所需的组件,减少不必要的文件加载,优化页面性能。 总之,jQuery UI是前端开发中的...

Global site tag (gtag.js) - Google Analytics