jslite/jslite

与jQuery有着类似的api，让web开发更迅速，下载执行更快、量级更轻，针对现代高级浏览器的JavaScript库。

JSLite

   __     ______     __         __     ______   ______    
  /\ \   /\  ___\   /\ \       /\ \   /\__  _\ /\  ___\   
 _\_\ \  \ \___  \  \ \ \____  \ \ \  \/_/\ \/ \ \  __\   
/\_____\  \/\_____\  \ \_____\  \ \_\    \ \_\  \ \_____\ 
\/_____/   \/_____/   \/_____/   \/_/     \/_/   \/_____/ 

让web开发更迅速，下载执行更快、量级更轻，针对现代高级浏览器的JavaScript库。 推进前端开发标准对于攻城师来说，人人有责。

如有疑问欢迎到这些地方交流：

segmentfault社区 | 官方网站

1. jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。
2. 而 JSLite 只针对先进浏览器(支持HTML5,CSS3)、移动端浏览器编写，使用js新方法实现jQuery API，因此体积更小、效率更高.
3. 更重要的是，JSLite 的 API 完全仿照 jQuery ，所以学习成本也很低。
4. JSLite与jQuery有着绝大部分类似的api，通用库只有5-10k，手机上每一kb都是钱。
5. 让web开发更迅速，下载执行更快、量级更轻，针对现代高级浏览器的JavaScript库。 推进前端开发标准对于攻城师来说，人人有责。

100% compatibility with common browsers - 主要兼容的浏览器(100% 的兼容)

此兼容，是根据我使用的一些js方法函数的支持情况来判断的。设备过少，部分是根据developer.mozilla.org的方法函数兼容数据来判断的，下面的我们的主要兼容目标

Safari 6+ (Mac)
Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)
iOS 5+ Safari Android 2.3+ Browser
Internet Explorer 10+ (Windows, Windows Phone)

Installation - 安装

您需要在系统上安装 Node.js的。

#npm 下载到 node_modules
$ npm install jslite

#bower 下载到 bower_components
$ bower install jslite

#安装grunt依赖
$ npm install

#启动grunt自动压缩合并，进入开发模式.... 
#默认合并所有模块生成到一个build目录中
$ npm start

Test - 测试

测试需要在系统上安装 Node.js的 4.x 以上版本。

# 安装全局的 gulp
$ npm install gulp -g && npm install 

# 先生成新的 压缩版本的JSLite
$ gulp  

# 在命令行中 － 查看测试结果
# 进行单元测试
$ npm test 

# 在浏览器中查看 － 编写预览测试结果
# 打开 test/index.html

JSLite模块

JSLite 模块中的 src/ 目录的各个文件。

模块	默认加载	描述
JSLite	✔	核心模块，包含大多数方法。
function	✔	内部函数调用
polyfill	-	支持桌面浏览器IE和移动端 Windows Phone 8。
form	-	表单方法。
event	-	事件处理。
ajax	-	异步请求的方法，发起任意Ajax请求。

默认合并 polyfill function JSLite 。上面打 ✔ 都为默认加载的核心模块。其它均可选择性加载。

# 运行下面任务请确认依赖是否安装 安装方法 `npm install`
# 模块选择合并，做一个自定义生成
# 默认不传环境变量全部合并
$ MODULES="polyfill event" gulp

# on Windows
c:\JSLite> SET MODULES=polyfill event
c:\JSLite> gulp

生成map文件

gulp map

传统方法

1. 去官网下载JSLite
2. 页面Head标签内引用 JSLite.js

<script type="text/javascript" src="JSLite.js"></script>

Usage - 用法

$("#box") //⇒ 返回节点数组  //⇒ [<div>​…​</div>​]
$("<div></div>") //⇒ 生成div节点
//JSLite(func) 相当于ready
JSLite(function($){
    console.log("在节点加载完成之后执行")
})
//$(func) 相当于ready
$(function($){
    console.log("在节点加载完成之后执行")
})

贡献

快快来贡献😄。

jslite's Issues

是否能添加animate()方法

添加animate()方法,类似于jQuery 或者 Zepto的animate()方法都可以。

最近发现 data 方法用得也是很多的希望可以加上

最近发现 data 方法用得也是很多的 ，有时候发data 方法也是不可缺少的， 希望可以加上！

xml find方法解析错误

用Jquery OK，换成JSLite报错误信息如下
SyntaxError: DOM Exception 12: An invalid or illegal string was specified.
querySelectorAllJSLite.js:299
（匿名函数）JSLite.js:299
initJSLite.js:301
JSLiteJSLite.js:272
successjxml.html:14
onreadystatechangeJSLite.js:1093

document.querySelectorAll(selector) JSLite.js:300

serializeArray非form元素输出报错

非form元素 this.get(0).elements 对象不存在

JSONP调用失败

官网介绍说 可以实现 jsonp, 但看了源码没有这部分的处理啊,感觉补上吧

requireJs引入报错

如题,帮忙看看

可以添加load方法吗

因本库没有touch事件tap，singleTap，longTap等事件，也是手机端很有必要的

一、click 和 tap 比较
两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。
singleTap和doubleTap 分别代表单次点击和双次点击。

二、关于tap的点透处理
在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。

所以也希望咋们这个库有这些个事件来解决延迟响应！

on不支持监听子元素

jq可以.on('click','.div',func)
谢谢,闪人

Ajax方法设定同步无效

逻辑需要使用ajax同步方法来控制顺序，但是使用了async : false设定同步，没有起作用，根据翻ajax模块源代码，发现下面一行代码中，并没有真正使用这个参数进行设定，而是写死了为异步。
xhr.open(settings.type, settings.url, true);

根据前面的代码，我修改为了下面：
xhr.open(settings.type, settings.url, settings.async);
已经可以使用同步方法了，但是在Chrome下会报一个警告，不知道是否有影响，请求本身是可以正常返回的：
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

.package.json 中的bugs 配置错误

prop，removeProp 这2个方法还是很有必要的

attribute和property都可以翻译为属性，为了以示区别，通常把这两个单词翻译为属性与特性。attribute和property共享数据，attribute更改了会对property造成影响，反之亦然，但是两者的自定义属性是独立的数据，即使name一样，也互不影响，对于值是true/false的property，类似于input的checked attribute等，attribute取得值是HTML文档字面量值，property是取得计算结果，property改变并不影响attribute字面量，但attribute改变会一向property计算。
所以prop，removeProp 这2个方法还是很有必要的，博主不知可否考虑加上！

文档中最好明确指出兼容到IE几

这样才能更好的编写及其应用

Sizzle的功能限制querySelectorAll都已经实现么?

问下:)

Support index filter with function 'lt' and 'gt'

Now, 'eq' works well, like boxUl.children().eq(1).removeAttr('draggable');
but 'lt' and 'gt' doesn't work.
I hope than can be supported.

JSLite-touch --- Tap的方法

Tap的使用方法

$("#ontouch").on("tap",function(){
    alert("我是 .on(tap) 方式");
    $(this).css({width:"200px",height:"100px",border:"1px red solid"});
})
$("#mytap").tap(function(){
    alert("我是 .tap() 方式");
    $(this).css({width:"300px",height:"30px",border:"1px blue solid"});
})

点击查看Tap方法

$([selector,[context]])实现

1.【zepto实现的效果】创建带有属性的元素

$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} })

2.【jQuery实现的效果】如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。context： 作为待查找的 DOM 元素集、文档或 jQuery 对象。

在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。

$("input:radio", document.forms[0]);

在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。

$("div", xml.responseXML);

三星Note 2 Android ajax无法发起

最近在使用的时候，在三星note2（android 4.3）原生浏览器页面中发起ajax请求，抛出了异常，
ReferenceError：name is not defined。
根据错误提示，定位到JSLite.js原始代码为：
for (name in headers) nativeSetHeader.apply(xhr, headers[name]);
在JSLite.min.js中是对应这行代码压缩后的代码报错。

根据实验，使用未压缩的JSLite.js可以正常运行，但是使用压缩好的JSLite.min.js会抛出异常。

然后我通过在线JS压缩工具压缩JSLite.js，这样压缩后的js也可以正常运行。

所以怀疑是不是压缩时的一些策略会导致Android系统的原生浏览器（Android版微信浏览器存在同样的问题）上出现问题。

map优化

使用Array的map优化map方法

Array.prototype.map 

与Zepto的区别

看起来和Zepto很类似，请问JSLite有什么区别或者优点？
http://zeptojs.com/

对CSS这个方法进行了优化

对CSS这个方法进行了优化，有优化不好的请多多指教，下面是优化的内容

css:function(property, value){
    var cssNumber = { 'column-count': 1, 'columns': 1,'box-flex':1,'line-clamp':1, 'font-weight': 1, 'opacity': 1, 'z-index': 1, 'zoom': 1 }    
    var toLower = function(str) { return str.replace(/::/g, '/').replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2').replace(/([a-z\d])([A-Z])/g, '$1_$2').replace(/_/g, '-').toLowerCase()}      
    var addPx = function (name, value) {  return (typeof value == "number" && !cssNumber[toLower(name)]) ? value + "px" : value}
    var camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) }
    //获取指定的样式
    if (arguments.length < 2 && typeof property == 'string'){ 
        return this[0] && (this[0].style[camelize(property)] || getComputedStyle(this[0], '').getPropertyValue(property))
    }
    //设置样式
    var css = '',key;
    if ($.type(property) == 'string') {
        if (!value && value !== 0){ //当value的值为非零的可以转成false的值时如(null,undefined)，删掉property样式
            this.each(function () {
                //style.removeProperty 移除指定的CSS样式名(IE不支持DOM的style方法)
                this.style.removeProperty(toLower(property))
            })
        }else{ css = toLower(property) + ":" + addPx(property, value)}
    } else {
        //当property是对象时
        for (key in property){
            if (!property[key] && property[key] !== 0){
            //当property[key]的值为非零的可以转成false的值时，删掉key样式
                this.each(function () {
                    this.style.removeProperty(toLower(key))
                })
            }else{ css += toLower(key) + ':' + addPx(key, property[key]) + ';'}
        }
    }
    //设置
    return this.each(function () {
        css ? this.style.cssText += ';' + css :"";
        if (value == ""){this.style.removeProperty(property)}
    })
}

hi 请问和zepto有什么区别？

$(ele).on(event, selector, callback) selector error

事件会绑定到ele上，但冒泡时没有做对selector的过滤，需添加从selector及其子节点的判断

对CSS这个方法改了一下，不加px也可以了

对CSS这个方法进行了优化 ，看下面链接：
#19