前端基础进阶(10):面向对象实战之封装拖拽对象

2017/04/02 · JavaScript
·
面向对象

原文出处: 波同学   

图片 1

终于

前面几篇文章,我跟大家分享了JavaScript的一些基础知识,这篇文章,将会进入第一个实战环节:利用前面几章的所涉及到的知识,封装一个拖拽对象。为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽。

  • 不封装对象直接实现;
  • 利用原生JavaScript封装拖拽对象;
  • 通过扩展jQuery来实现拖拽对象。

本文的例子会放置于codepen.io中,供大家在阅读时直接查看。如果对于codepen不了解的同学,可以花点时间稍微了解一下。

拖拽的实现过程会涉及到非常多的实用小知识,因此为了巩固我自己的知识积累,也为了大家能够学到更多的知识,我会尽量详细的将一些细节分享出来,相信大家认真阅读之后,一定能学到一些东西。

复制代码 代码如下:

JavaScript常用脚本汇总(三)

 本文给大家分享的常用脚本有通过数组,拓展字符串拼接容易导致性能的问题、页面
视口
滚动条的位置的辅助函数、调节元素透明度的函数、获取鼠标位置的几个通用的函数、使用cssdisplay属性来切换元素可见性的一组函数、样式相关的通用函数、获取元素当前的高度和宽度。

 

 

通过数组,拓展字符串拼接容易导致性能的问题

 

代码如下:

function StringBuffer() {
this.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
return this;
}
StringBuffer.prototype.toString = function () {
return this.__strings__.join(“”);
}
var buffer = new StringBuffer();
buffer.append(“Hello “).append(“javascript”);
var result = buffer.toString();
alert(result); //Hello javascript

页面 视口 滚动条的位置的辅助函数

 

代码如下:

/*确定当前页面高度和宽度的两个函数*/
function pageHeight() {
return document.body.scrollHeight;
}
function pageWidth() {
return document.body.scrollWidth;
}
/*确定滚动条水平和垂直的位置*/
function scrollX() {
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft) ||
document.body.scrollLeft;
}
function scrollY() {
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) ||
document.body.scrollTop;
}
/*确定浏览器视口的高度和宽度的两个函数*/
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) ||
document.body.clientHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) ||
document.body.clientWidth;
}

调节元素透明度的函数

 

代码如下:

/*调节元素透明度的函数*/
function setOpacity(elem, level) {
//IE处理透明度
if (elem.filters) {
elem.style.filters = ‘alpha(opacity=’ + level + ‘)’;
} else {
elem.style.opacity = level / 100;
}
}

获取鼠标位置的几个通用的函数

 

代码如下:

/*两个通用函数,用于获取鼠标相对于整个页面的当前位置*/
function getX(e) {
e = e || window.event;
return e.pageX || e.clientX + document.body.scrollLeft;
}
function getY(e) {
e = e || window.event;
return e.pageY || e.clientY + document.body.scrollTop;
}
/*两个获取鼠标相对于当前元素位置的函数*/
function getElementX(e) {
return (e && e.layerX) || window.event.offsetX;
}
function getElementY(e) {
return (e && e.layerY) || window.event.offsetY;
}

使用cssdisplay属性来切换元素可见性的一组函数

 

代码如下:

/**
* 使用display来隐藏元素的函数
* */
function hide(elem) {
var curDisplay = getStyle(elem, ‘display’);

 

if (curDisplay != ‘none’) {
elem.$oldDisplay = curDisplay;
}
elem.style.display = ‘none’;
}
/**
* 使用display来显示元素的函数
* */
function show(elem) {
elem.style.display = elem.$oldDisplay || ”;
}

样式相关的通用函数

 

代码如下:

/**
* 获取指定元素(elem)的样式属性(name)
* */
function getStyle(elem, name) {
//如果存在于style[]中,那么它已被设置了(并且是当前的)
if (elem.style[name]) {
return elem.style[name];
}
//否则,测试IE的方法
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
//或者W3C的方法
else if(document.defaultView &&
document.defaultView.getComputedStyle){
name = name.replace(/(A-Z)/g, “-$1”);
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, “”);
return s && s.getPropertyValue(name);
}
//否则,用户使用的是其他浏览器
else {
return null;
}
}

获取元素当前的高度和宽度

 

代码如下:

/**
* 获取元素的真实高度
* 依赖的getStyle见上面的函数。
* */
function getHeight(elem) {
return parseInt(getStyle(elem, ‘height’));
}
/**
* 获取元素的真实宽度
* 依赖的getStyle见上面的函数
* */
function getWidth(elem) {
return parseInt(getStyle(elem, ‘width’));
}

以上就是本文分享的javascript常用脚本了,希望大家能够喜欢。

本文给大家分享的常用脚本有通过数组,拓展字符串拼接容易导致性能的问题、页面
视口 滚动条的位置的辅助…

1、如何让一个DOM元素动起来

我们常常会通过修改元素的top,left,translate来其的位置发生改变。在下面的例子中,每点击一次按钮,对应的元素就会移动5px。大家可点击查看。

点击查看一个让元素动起来的小例子

由于修改一个元素top/left值会引起页面重绘,而translate不会,因此从性能优化上来判断,我们会优先使用translate属性。

//获取元素的样式值。
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,”-$1″);
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,””);
return s&&s.getPropertyValue(name);
}else{
return null
}
}
//获取元素相对于这个页面的x和y坐标。
function pageX(elem){
return
elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
return
elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
//获取元素相对于父元素的x和y坐标。
function parentX(elem){
return
elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return
elem.parentNode==elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}
//获取使用css定位的元素的x和y坐标。
function posX(elem){
return parseInt(getStyle(elem,”left”));
}
function posY(elem){
return parseInt(getStyle(elem,”top”));
}
//设置元素位置。
function setX(elem,pos){
elem.style.left=pos+”px”;
}
function setY(elem,pos){
elem.style.top=pos+”px”;
}
//增加元素X和y坐标。
function addX(elem,pos){
set(elem,(posX(elem)+pos));
}
function addY(elem,pos){
set(elem,(posY(elem)+pos));
}
//获取元素使用css控制大小的高度和宽度
function getHeight(elem){
return parseInt(getStyle(elem,”height”));
}
function getWidth(elem){
return parseInt(getStyle(elem,”width”));
}
//获取元素可能,完整的高度和宽度
function getFullHeight(elem){
if(getStyle(elem,”display”)!=”none”){
return getHeight(elem)||elem.offsetHeight;
}else{
var
old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var h=elem.clientHeight||getHeight(elem);
restoreCss(elem,old);
return h;
}
}
function getFullWidth(elem){
if(getStyle(elem,”display”)!=”none”){
return getWidth(elem)||elem.offsetWidth;
}else{
var
old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var w=elem.clientWidth||getWidth(elem);
restoreCss(elem,old);
return w;
}
}
//设置css,并保存旧的css
function resetCss(elem,prop){
var old={};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i]=prop[i];
}
return old;
}
function restoreCss(elem,prop){
for(var i in prop){
elem.style[i]=prop[i];
}
}
//显示和隐藏
function show(elem){
elem.style.display=elem.$oldDisplay||” “;
}
function hide(elem){
var curDisplay=getStyle(elem,”display”);
if(curDisplay!=”none”){
elem.$oldDisplay=curDisplay;
elem.style.display=”none”;
}
}
//设置透明度
function setOpacity(elem,num){
if(elem.filters){
elem.style.filter=”alpha(opacity=”+num+”)”;
}else{
elem.style.opacity=num/100;
}
}
//滑动
function slideDown(elem){
var h=getFullHeight(elem);
elem.style.height=”0px”;
show(elem);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){elem.style.height=(pos/100*h)+”px”;},(pos*10));
}
}
}
//渐变
function fadeIn(elem){
show(elem);
setOpacity(elem,0);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){setOpacity(elem,pos);},(pos+1)*10);
}
}
}
//获取鼠标光标相对于整个页面的位置。
function getX(e){
e=e||window.event;
return e.pageX||e.clientX+document.body.scrollLeft;
}
function getY(e){
e=e||window.event;
return e.pageY||e.clientY+document.body.scrollTop;
}
//获取鼠标光标相对于当前元素的位置。
function getElementX(e){
return (e&&e.layerX)||window.event.offsetX;
}
function getElementY(e){
return (e&&e.layerY)||window.event.offsetY;
}
//获取页面的高度和宽度
function getPageHeight(){
var de=document.documentElement;
return document.body.scrollHeight||(de&&de.scrollHeight);
}
function getPageWidth(){
var de=document.documentElement;
return document.body.scrollWidth||(de&&de.scrollWidth);
}
//获取滚动条的位置。
function scrollX(){
var de=document.documentElement;
return
self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
}
function scrollY(){
var de=document.documentElement;
return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
}
//获取视口的高度和宽度。
function windowHeight() {
var de = document.documentElement;
return self.innerHeight||(de &&
de.offsetHeight)||document.body.offsetHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth||( de && de.offsetWidth
)||document.body.offsetWidth;
}

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • 隐性调用php程序的方法
  • 浅谈JavaScript中的Math.atan()方法的使用
  • JavaScript中反正弦函数Math.asin()的使用简介
  • JavaScript中的acos()方法使用详解
  • 介绍JavaScript中Math.abs()方法的使用
  • JavaScript中Math.SQRT2属性的使用详解

相关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

2、如何获取当前浏览器支持的transform兼容写法

transform是css3的属性,当我们使用它时就不得不面对兼容性的问题。不同版本浏览器的兼容写法大致有如下几种:

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']

因此我们需要判断当前浏览器环境支持的transform属性是哪一种,方法如下:

JavaScript

// 获取当前浏览器支持的transform兼容写法 function getTransform() { var
transform = ”, divStyle = document.createElement(‘div’).style, //
可能涉及到的几种兼容性写法,通过循环找出浏览器识别的那一个 transformArr
= [‘transform’, ‘webkitTransform’, ‘MozTransform’, ‘msTransform’,
‘OTransform’], i = 0, len = transformArr.length; for(; i < len; i++)
{ if(transformArr[i] in divStyle) { // 找到之后立即返回,结束函数
return transform = transformArr[i]; } } //
如果没有找到,就直接返回空字符串 return transform; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取当前浏览器支持的transform兼容写法
function getTransform() {
    var transform = ”,
        divStyle = document.createElement(‘div’).style,
        // 可能涉及到的几种兼容性写法,通过循环找出浏览器识别的那一个
        transformArr = [‘transform’, ‘webkitTransform’, ‘MozTransform’, ‘msTransform’, ‘OTransform’],
 
        i = 0,
        len = transformArr.length;
 
    for(; i < len; i++)  {
        if(transformArr[i] in divStyle) {
            // 找到之后立即返回,结束函数
            return transform = transformArr[i];
        }
    }
 
    // 如果没有找到,就直接返回空字符串
    return transform;
}

该方法用于获取浏览器支持的transform属性。如果返回的为空字符串,则表示当前浏览器并不支持transform,这个时候我们就需要使用left,top值来改变元素的位置。如果支持,就改变transform的值。

您可能感兴趣的文章:

  • jQuery常用知识点总结以及平时封装常用函数
  • 基于jquery封装的一个js分页
  • jquery数组封装使用方法分享(jquery数组遍历)
  • Jquery封装tab自动切换效果的具体实现
  • jquery自动将form表单封装成json的具体实现
  • jquery
    datatable后台封装数据示例代码
  • jQuery焦点图切换特效插件封装实例
  • 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
  • jQueryUI的Dialog的简单封装
  • 【经典源码收藏】基于jQuery的项目常见函数封装集合

帮客评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注