将其他js类库制作成seajs模块

转载自 http://xbingoz.com/423.html

通过seajs实现前端模块化的过程中,必然需要将原有脚本改成seajs的模块。如果是一段相对独立的脚本,实现模块化的方法会比较简单,只要用define函数将原来的代码包裹起来,然后将主函数或对象用exports输出就可以了。而相比之下,将一些类库制作成模块会稍微复杂一点。比如jQuery的各种插件,实际上是依赖jQuery的,所以在模块化的时候,也必须依赖jQuery的模块。玉伯在博客里介绍了jQuery插件的模块化的方法,例如:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

//以前载入插件,通过载入的先后顺序实现依赖

<script src="jquery.min.js"></script>

<script src="jquery.cookie.js"></script>

//使用sea.js,要将cookie插件制作成模块:

define(function(require, exports, module){

     return function($){

          // 放置插件的源代码

     }

});

//在其他模块里使用该插件的方法:

define(function(require, exports, module){

     //先要载入jQuery的模块

     var $ = require(‘jquery‘);

     //然后将jQuery对象传给插件模块

     require(‘./cookie‘)($);

     //开始使用 $.cookie方法

});

这种方法的思路是将插件作为一个返回函数,放置在define里,伪装成模块。使用该插件时,用reuqire方法将其载入,这时载入的会是一个函数,然后将jQuery对象作为参数传进去,就可以实现在jquery对象上绑定新的插件方法。这种思路非常有效,基本上,任何脚本都可以用这种思路实现模块化。

Bootstrap模块化

Bootstrap的js实际上也是在jQuery对象上扩展新的方法,可以视为jQuery的插件,所以模块化的方法也是按照插件的思路来实现:


1

2

3

4

5

6

7

8

9

10

11

12

13

define(function(require, exports, module){

     return function($){

          //bootstrap.js的源代码

          !(function($){

               ….

          })($)

          /*

               注意:

               bootstrap.js的源代码是由若干!(function($){...})(window.jQuery)段落组成的

               需要将最后传入的参数改成 $

          */

     }

});

Highcharts模块化

Highcharts是非常强大的图表绘制类库,它也需要依赖jQuery,但并不是在jQuery对象上扩展新方法,而是单独创建一个Highcharts对象。但是,Highcharts对象在源码中就是强制创建在全局对象window上的,所以一样不需要exports,使用插件模块化的方法就可以了。只需注意将源码中调用jQuery对象的地方,改成传入的$对象就可以了。

时间: 2024-12-12 13:04:20

将其他js类库制作成seajs模块的相关文章

将kindeditor在线编辑器制作成smarty插件

在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自定义函数. 为什么要制作成自定义函数呢?当然是为了避免写很多重复的代码. {html_kindeditor name="kindcontent"} 假如在模板中调用一个smarty标签,就能生成一个文本编辑器(如上),那开发起来会不会感觉很过瘾呢? 好了,说下流程(本文以集成了smarty

seajs模块压缩问题

在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁闷了. 于是单步调试一把,发现模块一直加不进来.看了一下seajs的原码,明白了是怎么回事. define模块解析依赖有两种途径,一种是从define(id, deps, factory)中的deps来:还有一种是解析define代码,从require中来.来看一下代码: 1 Module.defi

Node.js入门:前后端模块的异同

通常有一些模块可以同时适用于前后端,但是在浏览器端通过script标签的载入JavaScript文件的方式与Node.js不同.Node.js在载入到最终的执行中,进行了包装,使得每个文件中的变量天然的形成在一个闭包之中,不会污染全局变量.而浏览器端则通常是裸露的JavaScript代码片段.所以为了解决前后端一致性的问题,类库开发者需要将类库代码包装在一个闭包内.以下代码片段抽取自著名类库underscore的定义方式. 1 (function () { 2 // Establish the

log4js-Node.js中的日志管理模块使用与封装

开发过程中,日志记录是必不可少的事情,尤其是生产系统中经常无法调试,因此日志就成了重要的调试信息来源. Node.js,已经有现成的开源日志模块,就是log4js,源码地址:点击打开链接 项目引用方法: npm install log4js 1.配置说明(仅以常用的dateFile日志类型举例,更多说明参考log4js-wiki): { "appenders": [ // 下面一行应该是用于跟express配合输出web请求url日志的 {"type": "

seaJS 模块加载过程分析

先看一个seajs的官方example,  以下以seajs.use('main')为例, 解析加载mod main的过程 //app.html seajs.use("main"); //main.js define(function(require) { var Spinning = require('./spinning'); var s = new Spinning('#container'); s.render(); }); //spinning.js define(funct

关于用gulp合并压缩seaJs模块

现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享.在网上搜了下相关的资料,不得不说网上资料很多的坑(都是复制别人的...),说多都是泪.下面总结下已找到的seaJs合并压缩的几种办法,让中坑的人尽快脱坑. 第一种: 在seaJs的官网上有他自带的一个seajs-combo插件.看似不错,和minify差不多.这种方法比较简单粗暴:下载个JS文件引

seajs模块路径解析 简单总结

seajs模块路径解析 最近在试着用seajs + grunt改造现有项目, 遇到的最大的问题就是seajs命名与调用, 简单总结一下. 模块调用 seajs中调用模块有两种方式,seajs.use(ID) . require(ID). ID命名 完整绝对路径 例如 "http://example.com/test/js/jquery/jquery.js" 以 "." 开头 例如 "./home/main" "../main"

把CDLinux制作成U盘启动

因为用下了CDlinux,本来想在虚拟机上运行的.发现虚拟机跑的时候无法识别集成的笔记本网卡,坑爹啊.后来想刻碟的,发现手头上还没有现成的东西,光驱是只读的,又要用到光驱,于是想到了了用U盘,正好手上有个1G的U盘暂时没有用.直接用UltraISO写入HDD+,无法启动linux,(之前用此方法写入WinPE是可以的),看到有人说这个镜像文件是光驱启动的镜像,无法直接用U盘启动.好了步入正题:(高手请绕道,本人菜鸟,把U盘擦写了十几次才学会) 工具 需要的软件有:ULtraISO, Unetbo

封装的一套简单轻量级JS 类库(RapidDevelopmentFramework.JS)

1.最近好久没有更新自己的博客了,一直在考虑自己应该写一些什么.4.2日从苏州回到南京的路上感觉自己的内心些崩溃和失落,我就不多说了? 猛然之间我认为自己需要找一下内心的平衡.决定开发属于自己一套快速开发的JS 框架.因为早前也一直想开发一套快速的JS 框架,但是种种原因一直没用突破点也就不了了之了,开发这套JS 的框架主要是为了方便自己使用以,及其他开发人员的使用.通用的功能包主要括JS 的校验 上传图片 视频 语音  以分页 时间插件的选择 和ajax 请求以及其他的第三方的插件的混合使用等