web前端.js--seajs--非CMD模块的javascript文件兼容封装方案
来源:互联网 发布:java线程停止的方法 编辑:程序博客网 时间:2024/05/08 07:08
随着网站前台页面设计越来越花哨,其实现逻辑也越来越复杂。javascript库百花齐放,各种插件也层出不穷,在使用中,管理各种js文件依赖成为了一个令人头疼的问题。因此我们需要用软件工程的方式来编写javascript“程序”,即模块化编程。在制定中的ECMAScript第六版,也将引入模块这一概念。
目前常见的javascript模块规范有以RequireJS为代表的AMD规范和以SeaJS为代表的CMD规范,这两种都能达成浏览器端模块化开发的目的。
这几天我就在研究最近很火的支付宝大牛玉伯所写的SeaJS。
SeaJS为国人所写,因此中文文档看起来很爽。但不幸的是,很多著名的javascript框架和插件都不支持CMD规范,比如用得最多的jQuery和它的插件。如果想用它们进行模块化开发,就必须手动将他们封装成CMD模块。
对于jquery,一般这样封装:
define(
function
(){
jquery code..
return
$.noConflict(
true
);
});
封装后,jquery就成为标准CMD模块了,可以使用SeaJS的use方法或require方法直接读取:
seajs.use(
"jquery"
,
function
($){
$(
"p"
).css(......)
});
但是,这样封装以后存在隐患。比如某个新来的php程序员不懂这些,他可能像往常一样,引入<script src="jquery.js"></script>,然后$("p")调用,结果只会发现一行报错:$ is not a function。
因为jquery文件模块化以后,全局作用域已经不存在jquery或者$了,当然会报错。
所以我们需要一种兼容非模块化引用的封装方案 :
(
function
(factory) {
if
(
typeof
define ===
'function'
){
define(factory);
}
else
{
factory();
}
})(
function
(require){
jquery code..
if
(require)
return
$.noConflict(
true
);
});
原理看出来了吧,把一个匿名函数当做变量传入闭包,判断有无SeaJS提供的define方法。若有,则为CMD模块读取,返回$.noConflict(true);若无,则为普通的脚本引入,执行原生的jquery代码。
这样封装以后,就不怕程序员的误操作了。同理,其他的javascript文件也可以进行类似的封装。
文章来自:http://www.jackyrao.com/archives/383
- web前端.js--seajs--非CMD模块的javascript文件兼容封装方案
- 非CMD模块的javascript文件兼容封装方案
- web前端.js--seajs--把easyUI改造成功标准CMD模块的方法
- web前端.js--seajs--把jquery改造标准CMD模块的方法
- 支持seaJs和requireJs的前端模块开发方案(四):AMD模式和CMD模式下的config.js
- bootstrap封装成seajs cmd模块
- web前端.js--seajs--加载非模块化js库,及修改非模块化js库
- 前端模块化方案的比较(webpack/require.js/seajs/browserify
- 支持seaJs和requireJs的前端模块开发方案(二):业务页面和入口脚本init.js
- 支持seaJs和requireJs的前端模块开发方案(三):加载器全局配置alias.js
- 支持seaJs和requireJs的前端模块开发方案(一):方案介绍
- 前端js 模块封装
- 再谈 JS中的模块规范(CommonJS,AMD,CMD)来自玉伯的seajs分析
- 再谈 JS中的模块规范(CommonJS,AMD,CMD)来自玉伯的seajs分析
- 前端的四种模块化方案(webpack/require.js/seajs/browserify
- js模块加载seajs
- 88 js AMD CMD seaJS
- 如何封装Node.js和前端通用的模块
- FastDFS_v5.05安装记录
- 数组:php array_filter()删除数组中的空元素
- <Event Handling Guide for iOS> 读书笔记总结
- Ubuntu 14.10 安装subversion 1.6.17版本
- 使用CSS爲內容設定特定的鼠標樣式(cursor)介紹
- web前端.js--seajs--非CMD模块的javascript文件兼容封装方案
- LCD主流显示接口介绍
- Webservice error, "The test form is only available for requests from the local machine"
- C++ 面向对象编程 构造函数
- 简单翻转字符串
- about
- 我的Android案例—计算器
- SpringMVC REST实现入门级的CRUD
- 九度OJ&北邮机试题题解(北邮2010网院)