前端开发工程师必备的网站,这个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也同样能够给各位前端同行带来收获。