javascriptcore 封装 js封装插件四个步骤

转载

代码工匠传奇 2023-07-22 22:58:26

文章标签 javascriptcore 封装 Math 默认值自定义 文章分类 JavaScript 前端开发

第一种方法：生成对象的原始模式

一个对象添加实例方法和属性，我们可以采用上述的方式，即使用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>

文章来自：

第二种插件方法：$.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>

第三种方法：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

文章来自：

中间件的支持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;
   });
 }

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。