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也同样能够给各位前端同行带来收获。

访问官网


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流