dommy.js入门

Riccardo degni. 经过 Riccardo degni.  |  2018年11月28日

dommy.js. 是一个超级轻量级​​的独立JavaScript库,旨在使用DOM轻松工作,并通过JS生成强大的CSS3动画。

完整披露:我开发了Dommy.js。在本教程中,我想演示如何用来让您的网页保持良好和光线。

dommy.js有一个非常浅的学习曲线;如果您曾使用过旧式风格框架,如jQuery或原型。

dommy.js不是一个下一代框架,如vue.js,反应或角度;这些是使用虚拟DOM,动态模板和数据绑定等新技术的工具;您使用下一代工具来构建异步应用程序。

dommy.js是一个用于编写“经典”JavaScript代码的JavaScript框架,在核心级别使用DOM。像jQuery这样的JavaScript框架是类似的任务,具有三个大差异:

  • jquery. 使用专有的内部引擎来使用选择器并生成动画。此引擎完全基于JavaScript。相反,Dommy.js允许您选择DOM中的任何元素并使用JavaScript和CSS3的现代和超强大的细节创建功能强大的动画。我不需要编写JavaScript引擎来使用DOM和动画。允许您完成它的跨浏览器,灵活和强大的工具已经可用。我只想要一个JavaScript结构,它可以帮助开发人员使用JavaScript语言编写DOM控件和CSS3动画。
  • dommy.js是一个看待未来的JavaScript结构。它是与主要浏览器的一些最新版本的兼容,但我不希望我的代码与IE6 / 7等非常旧的软件兼容。
  • jquery. 和prototype都有基于内部引擎的完整API,Dommy.js为只有两个主要内容提供控件:DOM操作和动画;其他任务可以轻松使用vanilla javascript或扩展Dommy.js Central结构来完成。

所以,Dommy.js是一种跨浏览器,超级轻量级​​(仅限缩小版权只有4KB),超级易于学习,超快执行,JavaScript库。用dommy.js,你可以:

  • 通过选择和使用HTML元素和元素集合,在整个DOM中导航;
  • 创建功能强大的CSS3动画和动画集合;
  • 添加(多个)事件,CSS属性和属性到元素;
  • 使用元素存储来存储和检索特定内容;
  • work structure;
  • 有一个跨浏览器 domready 时尚,您不需要等待资源(如图像和视频)完全加载以便与DOM一起使用。

 

安装dommy.js.

将Dommy.js实现到您的网页中很简单。您只需将脚本包含在内 脚本 标签,你会准备开始。你可以 下载脚本 并在本地使用它或通过项目的网站加载:

<script src="//www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
    // use dommy.js
    $$$(function() {
        // ...
    });
</script>

 

DOM准备好了!

就像我之前所说的那样,使用dommy.js,我们不需要等待页面的资源来加载,以便与DOM一起使用。为此,我们使用 $$$ 功能。当DOM结构(而不​​是“页面”)已准备就绪时,将执行放置在此方便函数内的内容。使用dommy.js编写代码超快。我想创建一个代码段,让我尽可能少的代码,所以我想没有什么比写作更快:

  $$$  (function() {
        // when DOM is ready do this
});

......以独立的方式。当然,您可以使用尽可能多的 domready 根据您想要或需要块:

// block 1 
$$$(function() {
        // when DOM is ready do this
});

// block 2
$$$(function() {
        // when DOM is ready do this
});

// block 3
$$$(function() {
        // when DOM is ready do this
});

 

选择DOM元素

所以现在我们可以开始使用我们的DOM结构。您可以使用HTML“ID”选择所需的元素。这是通过的 $ function:

// select an element by ID. 
// In this case you select the element with ID "myElement"
$('myElement');

您可以使用CSS选择器选择所需元素的集合/列表。这是通过的 $$ function:

// select a collection of elements by CSS selector
$$('#myid div.myclass p')

当然,您也可以使用多个选择器选择多个元素:

// a selection of HTML elements
$$('#myfirstelement, #mysecondelement')

// another selection of HTML elements
$$('#myfirstelement div.myclass a, #mysecondelement span')

DOM选择没有限制。该元素将包含在最终集合中,您可以使用Dommy.js方法使用。

 

添加事件

将事件添加到元素(以跨浏览器方式)非常简单。只是用来 要将事件附加到特定事件的元素集合上的方法:

// add an event to an element that fires when you click the element
$('myElement').on('click', function() {
    log('Hey! You clicked on me!');
});

注意:功能 日志 是一个内置函数,可作为Console.log作为全局交叉浏览器快捷方式运行。如果浏览器不支持控制台对象,则结果将在全局警报框中打印结果。

您当然可以立即添加多个事件:

// add a events to an element
$$('#myElement p').on({
    // CLICK event
    'click': function() {
        log('Hey, you clicked here!');
    },
    
    // MOUSEOUT event
    'mouseout': function() {
        log('Hey you mouseovered here!');
    }
});

如您所见,您无需将Dommy.js方法应用于每个元素。您将方法直接应用于DOM选择的结果,内部引擎将通过HTML元素正确迭代。

您可以通过使用迭代中的“当前”元素进行SIMPY keyword:

 $('demo').on({
     'click': function() {
          this.css({'width': '300px'})
              .html('Done!');
     } 
 });

 

使用属性

以同样的方式,您可以添加,编辑和检索HTML属性的值:

// get an attribute
var title= $('myElement').attr('title');

// set an attribute
$('myElement').attr('title', 'my title');

// set multiple attributes
$('myElement').attr({'title': 'my title', 'alt': 'alternate text'});

景点 方法以三种不同的方式工作:

  • 如果您提供的参数是字符串,则返回指定属性的值;
  • 如果通过两个参数,它将HTML属性设置为新值;
  • 它设置HTML属性的集合如果您通过代表元素属性的键/值对的对象。

 

设置CSS样式

就像HTML属性一样,您可以通过借助设置和获取CSS值 CSS. method:

// set single CSS
$('myElement').css('display', 'block');

// set multiple CSS
$('myElement').css({'display': 'block', 'color': 'white'});

// get single CSS
$('myElement').css('display');

// get multiple CSS
$('myElement').css(['display', 'color']);

正如你可以看到的那样,有了强大的 CSS. method you can:

  • 如果通过两个字符串,请将单个CSS属性设置为新值;
  • 获取CSS属性的值,如果要传递一个字符串;
  • 如果传递键/值对的对象,请设置多个CSS属性;
  • 获取一系列值,如果传递表示CSS属性的字符串数组。

 

获取和设置HTML内容

与之 HTML. 方法您可以设置并获取元素的HTML值:

// set html
$('myElement').html('new content');

// get html
var content = $('myElement').html();

// logs 'new content'
log ( content );
    

 

迭代

如果选择多个元素,则可以在一次呼叫中将Dommy.js方法应用于每个元素。
但是,当您想要手动使用每个元素时,就像您收到内容时(即html内容或存储的内容)一样。在这种情况下,您可以使用方便 Foreach. 以下列方式功能:

// get all divs
var myels = $$('div');

// set a stored content
myels.set('val', 10); 

// ITERATE through each single div and print its attributes
myels.forEach(function(el, i) {
    log(el.attr('id') + el.get('val') + ' \n');
});

Foreach. Funtion是使用Dommy.js通过HTML集合迭代的首选方法。应用于Dommy.js元素时,它使用两个参数:

  • 元素:您正在选择的Dommy.js元素。您可以将每个DOMMY.js方法应用于它;
  • 索引:表示元素集中的元素位置的索引。

 

贮存

存储是一个属于元素的地方,您可以在其中存储尽可能多的值,并在期望的时刻检索它们。您可以使用存储使用存储 得到 方法:

// set storage
var myVal = "hello";
$('myElement').set('myVal', myVal);

// multiple storage
var mySecondVal = "everybody";
$('myElement').set({'myVal': myVal, 'mySecondVal': mySecondVal});

// get   
$('myElement').get('myVal') + $('myel').get('mySecondVal');  
// "hello everybody"

如您所见,您可以立即存储单个项目或多个项目。您存储的项目属于您正在选择的元素。
注意:请记住,如果要选择多个元素,则该项目将存储在每个元素中,即使CSS略有不同,因为Dommy.js识别每个特定元素:

// set an item to div#a and div#b
$$('div#a, div#b').set('myStoredValue', 10);

// get from #a, that of course is the same as div#a
$('a').get('myStoredValue'); // 10

当然,Dommy.js内部机制标识“div#a”和“a”/“#a”与同一元素相同的指针,因此您可以以连贯的方式安全地使用Storage和其他DOMMY.js方法。

如果将DOM元素存储在单个变量中,这是使用HTML元素的最佳方法,您可以绕过并发调用并赢取内存空间:

const myEl = $("div#a div");

// store data
myEl.set('myStoredValue', 10);

// get data
myEl.get('myStoredValue');      // 10

 

CSS. 3动画

Dommy.js的皇冠宝石是它的动画引擎。这是基于CSS3动画引擎,因此它适用于所有主要浏览器。动画是通过的 FX. 方法,接受以下参数:

  • 一个对象,表示CSS属性为动画;
  • 一个数字,表示动画的持续时间,以秒为单位。默认值为5秒;
  • 一个函数,表示一旦动画完成后将调用的回调;
  • 布尔,代表是否链接并发动画。默认为false。

让我们看看如何使用 FX. 方法,通过创建两个简单的动画。

// simple animation
$('myel').fx({'width': '300px', 'height': '300px'}, 2);

在这里,我们只是改变CSS属性宽度和高度 #myel. 在2秒内。在以下示例中,我们创建了相同的动画,持续时间为1秒钟,并且具有回调函数,它将编辑元素的HTML内容与“已完成!”。细绳。

您可以使用使用的访问当前元素 keyword:

// simple animation with callback
$('myel').fx({'width': '300px', 'height': '300px'}, 1, function() {
        this.html('Completed!');
});

 

链接

您可以使用“动画链接”创建魔法:通过使用 真的 作为第四个参数的值,您可以根据需要链式链。为此,请在特定选择器上轻松使用FX方法。在以下示例中,我们将多次更改与“.myel”选择器匹配的所有HTML元素的宽度:

var callBack = function() {
    // do something cool
};

// queue animations
$$('.myel').fx({'width': '400px'}, 2, callBack, true);
           .fx({'width': '100px'}, 4, callBack, true);
           .fx({'width': '50px'}, 6, callBack, true);
           .fx({'width': '600px'}, 8, callBack, true);

当然,你可以连锁一切。 dommy.js的结构允许您为元素设置并发调用:

// multiple calls
$$('div#e, #d')
    .fx({'font-size': '40px', 'color': 'yellow'}, 1)
    .fx({'font-size': '10px', 'color': 'red'}, 1)
    .attr('title', 'thediv')
    .attr('class', 'thediv')
    .attr({'lang': 'en', 'dir': 'ltr'});

请记住,链接的呼叫将立即执行。如果您想在特定动画结束时连锁某些东西,则必须为该动画设置回调。

 

创建触发动画的事件处理程序

现在,我们想设置一个在特定元素上生成动画的代码段。当用户将鼠标移动到元素本身以及离开鼠标时,此动画将触发。在每个步骤结束时,将设置适当的HTML内容:

$('myElement').on({
    'mouseover': function() {
        this.fx({'width': '300px'}, 1, function() {
            this.html('Completed!');
        });
    },
    'mouseout': function() {
        this.fx({'width': '100px'}, 1, function() {
            this.html('Back again!');
        });
    } 
});

如您所见,使用Dommy.js非常容易使用CSS3动画。永远记住 指当前元素。

现在,我们要生成一个链式动画,可以在四个不同的步骤中改变一个元素的CSS样式,在用户单击该元素时使用四个不同的回调和启动此动画:

   var clicked = false;
   
   $('myElement').on({
    'click': function() {
        if( !clicked ) {
            clicked = true;
            this.fx({'width': '300px', 'height': '300px', 'background-color': 'red', 'border-width': '10px'}, 1, function() {
                this.html('1');
            }, true)
            .fx({'height': '50px', 'background-color': 'yellow', 'border-width': '4px'}, 1, function() {
                this.html('2');
            }, true)
            .fx({'width': '100px', 'background-color': 'blue', 'border-width': '10px'}, 1, function() {
                this.html('3');
            }, true)
            .fx({'height': '100px', 'background-color': '#3dac5f', 'border-width': '2px'}, 1, function() {
                this.html('4');
                clicked = false;
            }, true); 
        }
    } 
  });

您可以直接在行动中看到这些片段 演示部分 dommy.js项目。