Microjs:迷你前端开发框架和类库资源收集

前端开发工程师必备的网站,这个Microjs.com网站收集了各种各样的框架和代码,你可以通过下载使用或者借鉴大神的项目是怎么做的,里面还有基础的框架可以参考,你可以借鉴做一个自己的框架,无论是JavaScript框架、CSS框架都行。

我们知道在平时的js开发中,由于JavaScript的兼容性问题,我们常常会使用jQuery这种兼容框架,但有时候我们只需要实现某些小功能,根本不需要用到这么多的东西,Microjs提供了许多类库的框架,你可以按条件方便的搜索需要的类库或者框架,具体包含了这几种类型

  • 基础框架
  • 模板引擎
  • DOM操作
  • CSS动画
  • Javascript动画
  • 数据操作
  • 更多

使用例子:

CSS选择器和DOM操作

/*
Query - Dustin Diaz

https://github.com/ded/qwery

CSS selector engine
*/
query("#myid");
query(".myclass");
query("#myid .myclass div a");
query("a, div, strong");

/* Query Paired with Bonzo - Dustin Diaz https://github.com/ded/bonzo DOM utility */
query("#myid").show();
query(".myclass").offset(50, 100);
query("#myid .myclass div a").addClass("anchorClass");
query("a, div, strong").remove();

事件操作

/*
Events.js - James Brumond

https://github.com/kbjr/Events.js

Event handler library
*/
Events.bind(window, 'load', function(e) {
    //Page loaded, do something
});
//Invoke the page load event
Events.invoke(window, 'load');
//Mouse click event
Events.bind(selectedElements, 'click', function(e) {
    //Mouse has been clicked
});
//Very handy keystroke event
Events.bind(document, 'keystroke.Ctrl+Shift+Alt+S', function(e) {
    saveMySlices();
});

/* Bean - Dustin Diaz https://github.com/fat/bean Event handler library */
bean.add(selectedElements, 'click', function (e) {
    //Mouse has been clicked
});
//DOM has loaded
bean.add(document, 'DOMContentLoaded', function(e){
    //Page loaded, do something
});
//Invoke an event on an element
bean.fire(selectedElement, 'click');
//Remove the event from an element
bean.remove(selectedElement, 'click');

JavaScript的视频看到了表单的这部分了,差不多要开始进入实际案例的部分了,后面我将会逐渐尝试使用这些迷你框架,并把它运用到实际的项目开发中,以此来提高自己的js水平。也许这个就是开源的好处了,感谢Microjs带给我这么多大神的优秀的作品,从明天起我将会逐渐写一些从这些框架中得到启发的代码,并逐步理解掌握,在借鉴中提高自己的js能力。

希望这个Microjs也同样能够给各位前端同行带来收获。

访问官网

原创文章:Microjs:迷你前端开发框架和类库资源收集 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/microjs.html)
评论已关闭。