【javascript详细说明】js封装插件的方法
第一种方法：生成对象的原始模式
一个对象添加实例方法和属性，我们可以采用上述的方式，即使用prototype关键字进行赋值，格式如下：
对象名称.prototype = {
属性一 : 属性值,
属性二 : 属性值,
方法一 : function(参数列表) {
方法体;
},
方法二 : function(参数列表) {
方法体;
}
}
可以按照如上方式对一个对象进行多个属性和方法的定义，这样在new一个对象后，就可以使用实例名称.属性或方法来获取属性或执行方法了。
相当于
var XX= new Object();
XX.yy = 'dd';
XX是Onject对象的实例
注意：new Object()：创建一个对象，可以理解为创建一个对象并传入一个参数，只是这个参数没有而已。构造函数
//封装成JS插件 var whir = window.whir || {}; whir.res = { pageVersion: "", loadJs:function(name,url,callback){}, linkJs:function(url){} } //调用该插件 <script> whir.res.pageVersion = "1002"; //页面版本，用于检测是否需要更新缓存 whir.res.loadJs("jquery", "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", function () { whir.res.loadJs("turntable", "/gfdzp201508257998/Turntable/Script/whir.turntable.js", null); }); whir.res.linkJs("/gfdzp201508257998/Turntable/Style/css_whir.css"); </script>
文章来自：http://blog.csdn.net/a497785609/article/details/48321405
第二种插件方法：$.fn.YouPlugin定义这类插件
定义这类插件的开发框架是：
$.fn.YouPlugin = function (options) {...}
为了防止一些偷懒的人，我们需要设置一些默认值，当它没有设置的时候，我们就用这些默认值。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
那默认值和用户传进来的值是怎么联合在一起的呢？这个就需要我们在开篇的时候讲到的$.extend()知识了。
var obj = $.extend(defaultVal, options);
这样子的话，就把用户自定义的值覆盖了默认用户的值。如果用户没定义值，就用系统自定义的。
//封装对象方法的插件,$.fn对象后面增加一个属性名 $.fn.scrollpage = function(options) { //options 经常用这个表示有许多个参数。 var defaultoption = { 'preClass':'pre', 'nextClass':'next', 'scrollClass':'widget-content', 'scrollWidth':300, 'totalWidth':1200, 'autoScroll':false }; //默认值 options = $.extend(defaultoption, options || {}); //用户自定义的值覆盖了默认用户的值 //下面就是写代码阶段 var $wrapper = $(this), $pre = $wrapper.find('.' + options.preClass), $next = $wrapper.find('.' + options.nextClass), $scrollblock = $wrapper.find('.' + options.scrollClass), $scrollleft = Math.abs($scrollblock.position().left) || 0, $left = 0, timeid = ''; $scrollblock.width(options.totalWidth); $pre.on('click', function(){ if (!$scrollleft) { return; }else if ($scrollleft <= options.scrollWidth) { $left = 0; }else { $left += options.scrollWidth; } $scrollblock.animate({'left': $left},'normal', function(){ $scrollleft = Math.abs($left); if (options.autoScroll && timeid) { clearInterval(timeid); autoScroll(); } }); return false; }); $next.on('click', function(){ if ($scrollleft >= options.totalWidth - options.scrollWidth) { return; }else if (parseInt($scrollleft) + parseInt(options.scrollWidth)*2 > options.totalWidth) { $left = -options.totalWidth + options.scrollWidth; }else { $left -= options.scrollWidth; } $scrollblock.animate({'left': $left},'normal', function(){ $scrollleft = Math.abs($left); if (options.autoScroll && timeid) { clearInterval(timeid); autoScroll(); } }); return false; }); var autoScroll = function() { timeid = setInterval(function(){ if ($scrollleft >= options.totalWidth - options.scrollWidth) { $left = 0; }else if (parseInt($scrollleft) + parseInt(options.scrollWidth)*2 > options.totalWidth) { $left = -options.totalWidth + options.scrollWidth; }else { $left -= options.scrollWidth; } $scrollblock.animate({'left': $left},1000, function(){ $scrollleft = Math.abs($left); }); }, 4000); }; if (options.autoScroll) { autoScroll(); } }; //调用该插件方法 <script> $(document).ready(function () { $('#div1').scrollpage({ 'preClass': 'pre', 'nextClass': 'next', 'scrollClass': 'widget-content' }); $('#div2').scrollpage({ 'autoScroll': true }); }); </script>
文章来自：http://www.jb51.net/article/30071.htm
第三种方法：Prototype属性用法
;( function( window ) { function mobilecheck() { ...//可以加 个函数 } function UISearch(el,options){ this.el=el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } //用prototype给对象添加函数 UISearch.prototype={ _initEvents:function(){ var self=this, initSearchFn=function(ev){ ev.stopPropagation(); self.inputEl.value = self.inputEl.value.trim(); if(!classie.has(self.el,'sb-search-open')){ //open it ev.preventDefault(); self.open(); }else if(classie.has(self.el,'sb-search-open') && /^\s*$/.test( self.inputEl.value )){ //close it //任何空白字符 ev.preventDefault(); self.close(); } }; this.el.addEventListener('click',initSearchFn); this.el.addEventListener('touchstart',initSearchFn); this.inputEl.addEventListener('click',function(ev){ ev.stopPropagation();}); this.inputEl.addEventListener('touchstart',function(ev){ ev.stopPropagation();}) }, open:function(){ var self=this; classie.add(this.el,'sb-search-open'); //focus the input if(!mobilecheck){ this.inputEl.focus(); } //close the search input if body is chicked var bodyFn=function(ev){ self.close(); this.removeEventListener('click',bodyFn); this.removeEventListener('touchstart',bodyFn); }; document.addEventListener('click',bodyFn); document.addEventListener('touchstart',bodyFn); }, close:function(){ this.inputEl.blur(); classie.remove(this.el,'sb-search-open'); } } window.UISearch = UISearch; } )( window );
第二种方式:
( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass,addClass,removeClass; if('classList' in document.documentElement){ hasClass=function(elem,c){ return elem.classList.contains(c); }; addClass=function(elem,c){ elem.classList.add(c); }; removeClass=function(elem,c){ elem.classList.remove(c); }; }else{ hasClass=function(elem,c){ return classReg(c).test(elem.className); }; addClass=function(elem,c){ if(!hasClass(elem,c)){ elem.className=elem.className+' ' + c; } }; removeClass=function(elem,c){ elem.className=elem.className.replace(classReg(c),' '); }; } function toggleClass(elem,c){ var fn=hasClass(elem,c) ? removeClass : addClass; fn(elem,c); } var classie={ //full names hasClass:hasClass, addClass:addClass, removeClass:removeClass, toggleClass:toggleClass, //short names has:hasClass, add:addClass, remove:removeClass, toggle:toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else { // browser global window.classie = classie; } })( window );
原文来自：svn/app/plug/Document/demo.html
文章来自：http://www.cnblogs.com/mindsbook/archive/2009/09/19/javascriptYouMustKnowPrototype.html
中间件的支持node、AMD、CMD
if (typeof(module) !== 'undefined') { module.exports = pluginName; } requirejs(AMD) support if (typeof define === 'function' && define.amd) { define([], function () { 'use strict'; return pluginName; }); } seajs(CMD) support if (typeof define === 'function') { define([], function () { 'use strict'; return pluginName; }); }
原文来自：http://www.jb51.net/article/61694.htm
第三种方法：jQuery插件开发精品（更深层的剥折精品）
文章来自：http://www.jb51.net/article/74491.htm
