gQuery.js

简介

gQuery 是一个现代的、注重细节的 JavaScript 函数库。开发初衷是以小体积、多复用来简化并加速原生下开发效率并优化体验。

gQuery 使用链式语法操作 DOM，并封装了丰富的常用函数操作方法。极小的体积非常适合单页面开发，通过几行代码快速实现 MVC，甚至可直接封装于脚本内部。相比 jQuery，并没有用大量代码去实现 IE 兼容，而是在 API 上尽力兼容 jQuery，如果你曾使用过 jQuery，可以很快上手使用甚至直接替换。

当前 gQuery 已结束版本快速迭代期，并已在多个线上环境、Electron、NW.js 中得到充分验证，可放心将该版本用于生产环境。

前提条件

若要使用 gQuery 函数库，请先熟悉下列技术：

  • JavaScript
  • HTML
  • CSS

安装

直接下载并用 script 标签引入，gQuery 与 $ 会被注册为一个全局变量。

<script type="text/javascript" src="/lib/js/gquery.min.js"></script>

快速接触 - DOM

gQuery 的使用离不开全局变量 gQuery 与 $，惯用法为通过 $(selector).action() 选择 DOM 元素并使其执行 action 函数。

gQuery.fn 中通过 extend 封装了许多函数方法以继承 $(selector) 选中的元素来进行后续操作，并且同一个方法通常有多种用法。例如通过 .text(String) 修改其文本内容，通过 .text() 获得其文本内容，甚至还可以通过 .text([]) 将其文本内容转换为数组：

$('h2').text('gQuery');
console.log( $('h2').text() );
console.log( $('h2').text([]) );

在 gQuery 原型链中，可以对多个 DOM 同时进行操作，例如上方的第一行代码在原生 JavaScript 中，应该是这样：

document.querySelectorAll('h2').forEach((elem)=>{
    elem.innerText = 'gQuery';
});

并且，可以通过链式编程将多行命令组合为一行：

$('h2').animate({opacity:0}, 500).wait(1000).animate({opacity:1}, 500).wait(1000).animate({opacity:0}, 500).wait(1000).animate({opacity:1}, 500);

快速接触 - 拓展方法

gQuery 提供了部分常用方法来进一步提升开发效率，如高度封装后的 Cookie、Date、Fetch、Storage、sessionStorage 等，此类函数通过 gQuery.extend 拓展封装。

let arr = [
    {a:'Love',b:'is',c:'Love'},
    ['Love','is','Love'],
    {a:'Love',b:'is',c:'Love'},
    {a:'Love',b:'is',c:'Love'}
];

console.log( $.array.unique(arr) );
/* This will expire in 2 minutes */
$.storage.set('TTL-Msg', {A:'20y',B:'boy',C:'🌈'}, '+2min');
$.storage.get('TTL-Msg');
$.copy('你成功复制了这段话！');

总之，gQuery 是一个非常容易上手的函数库，还有许多巧妙的功能等待你的探索，搭配 GQUI[v2] 框架及组件可轻松完成 H5 自适应开发。

Copyright © 2020 - present, gquery.cn