jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
举个例子。
<span style="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<h3 class="ye">new soul</h3>
<h3 class="ye">new soul</h3>
<h3 class="ye">new soul</h3>
<h3 class="ye">new soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jQuery.fn.myPlugin = function(options) {
$options = $.extend( {
html: "no messages",
css: {
"color": "red",
"font-size":"14px"
}},
options);
return $(this).css({
"color": $options.css.color, }).html($options.html);
} $('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}});
</script>
</body>
</html>
</span>
好的,上面你也看到了一点点$.extend()的用法。
1.合并多个对象。
这里使用的就是$.extend()的嵌套多个对象的功能。
所谓嵌套多个对象,有点类似于数组的合并的操作。
但是这里是对象。举例说明。
<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}
</span>
2.深度嵌套对象。
<span style="font-size:18px;"> jQuery.extend(
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果:
// => { name: “John”, last: “Resig”, location: { state: “MA” } }
// 新的更深入的 .extend()
jQuery.extend( true,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果
// => { name: “John”, last: “Resig”,
// location: { city: “Boston”, state: “MA” } }
</span>
3.可以给jQuery添加静态方法。
// 使用特定模块
Layui.prototype.use = function(apps, callback, exports, from) {var that = this;var dir = config.dir = config.dir ? config.dir : getPath; // 获取路径var head = doc.getElementsByTagName('head')[0]; // 获取第一个header// 对传入的 apps 参数进行处理apps = function(){// 传入字符串时, 应转为数组 layui.use('form',...)if(typeof apps === 'string'){return [apps];}// 第一个参数为 function 时, 则自动加载所有内置模块,且执行的回调即为该 function 参数else if (typeof apps === 'function') {callback = apps;return ['app'];}return apps;}(); // 立即执行// 如果页面已经存在 jQuery 1.7+ 库且所定义的模块依赖 jQuery,则不加载内部 jquery 模块if(win.jQuery && jQuery.fn.on) {that.each(apps, function(index, item){// 找到内部 jquery, 并删除if(item === 'jquery'){apps.splice(index, 1);}});layui.jquery = layui.$ = jQuery; // layui 为实例对象}var item = apps[0]; // 获取 apps 数组第一位元素var timeout = 0; // 初始化超时时间为 0exports = exports || [];// 获取静态资源hostconfig.host = config.host || (dir.match(/\/\/([\s\S]+?)\//)||['//'+ location.host +'/'])[0]// 加载完毕function onScriptLoad(e, url){var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/; // 根据平台选择正则表达式// 当前文件已经加载完毕if(e.type === 'load' || (readyRegExp.test(e.currentTarget || e.srcElement).readyState)){config.modules[item] = url; // 存储模块真实路径head.removeChild(node); // 从 head 中移除 node(function poll(){// 判断 timeout > 2500 ?if(++timeout > config.timeout * 1000 / 4) {// 超时报错return error(item + ' is not a valid module', 'error'); // 记得 return, 停止执行}// 判断当前模块状态是否为 true ,为 true 执行 onCallback, 否则轮询config.status[item] ? onCallback() : setTimeout(poll, 4);})()}}// 回调函数function onCallback(){// 向 exports 中推入模块exports.push(layui[item]); // layui 为实例对象中除了 v 属性标识版本号, 其余全为模块apps.length > 1? that.use(apps.slice(1), callback, exports, from): ( typeof callback === 'function' && function(){// 保证文档加载完毕再执行调用if(layui.jquery && typeof layui.jquery === 'function' && from !== 'define' ) {return layui.jquery(function (){callback.apply(layui, exports);});}callback.apply(layui, exports);}());}// 如果引入了聚合板,内置的模块则不必重复加载if(apps.length === 0 || (layui['layui.all'] && modules[item])){return onCallback(), that;}// 获取加载的模块 URL// 如果是内置模块, 则按照 dir 参数拼接模块路径// 如果是扩展模块, 则判断模块路径值是否以 {/} 开头,// 如果路径值是 {/} 开头, 则模块路径即为后面紧跟的字符。// 否则, 则按照 base 参数拼接模块路径var url = (modules[item] ? (dir + 'modules/'): (/^\{\/\}/.test(that.modules[item]) ? '' : (config.base || ''))) + (that.modules[item] || item) + '.js';url = url.replace(/^\{\/\}/, '');// 如果扩展模块(即:非内置模块)对象已经存在,则不必再加载if(!config.modules[item] && layui[item]){config.modules[item] = url; // 并记录起该扩展模块的 url}// 首次加载模块if(!config.modules[item]){var node = doc.createElement('script'); // 创建scriptnode.async = true; // 异步node.charset = 'utf-8'; // 文件格式// 请求的文件后面添加版本号node.src = url + function(){// 是否存在版本var version = config.version === true? (config.v || (new Date()).getTime()): (config.version || '');return version ? ('?v=' + version) : '';}();head.appendChild(node); // 挂载节点// 对 IE 添加监听if(node.attachEvent && !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) && !isOpera){node.attachEvent('onreadystatechange', function(e){onScriptLoad(e, url);});} else {node.addEventListener('load', function(e){onScriptLoad(e, url);}, false)}config.modules[item] = url;} else { // 非首次加载(function poll(){if(++timeout > config.timeout * 1000 / 4) {return error(item + ' is not a valid module', 'error');};// 已加载到模块中(typeof config.modules[item] === 'string' && config.status[item])? onCallback(): setTimeout(poll, 4);}()); // 轮询 必须是立即执行函数}return that;
}