README

这个PHP类可以帮助您将（真正）简单的jQuery代码转换为纯JavaScript代码。

存在很多问题，它尚未完成，但您可以使用此PHP类将简单的jQuery代码转换为vanilla js，而不是使用jQuery库。

灵感来自 youmightnotneedjquery.com

要适应JavaScript，请也关注以下仓库： https://github.com/aykutkardas/jquery-to-javascript

安装

使用composer安装

composer require tayfunerbilen/jquery-to-javascript-convert dev-master

然后在您的PHP文件中包含 autoload.php 文件。

require __DIR__ . '/vendor/autoload.php';

您就可以开始了。

用法

转换onload函数

$js = <<<JS
$(function(){
	
});
JS;
echo \Erbilen\JqueryToJS::convert($js);

/*
document.addEventListener("DOMContentLoaded", () => {
	
});
*/

转换变量

echo Erbilen\JqueryToJS::convert("var test");
// let test

转换ID选择器

echo Erbilen\JqueryToJS::convert("var test = $('#test')");
// let test = document.getElementById("test")

转换类选择器

echo Erbilen\JqueryToJS::convert("var list = $('.list')");
// let list = document.getElementByClassName("list")

或者

echo Erbilen\JqueryToJS::convert("var list = $('.list li')");
// let list = document.querySelectorAll(".list li")

转换 html() 方法

echo Erbilen\JqueryToJS::convert("var content = $('#content').html()");
// let content = document.getElementById("content").innerHTML

或者

echo Erbilen\JqueryToJS::convert("var content = $('#content').html('new content')");
// let content = document.getElementById("content").innerHTML = 'new content'

转换 text() 方法

echo Erbilen\JqueryToJS::convert("var content = $('#content').text()");
// let content = document.getElementById("content").innerText

或者

echo Erbilen\JqueryToJS::convert("var content = $('#content').text('new content')");
// let content = document.getElementById("content").innerText = 'new content'

转换 val() 方法

echo Erbilen\JqueryToJS::convert("var name = $('#name').val()");
// let name = document.getElementById("name").value

或者

echo Erbilen\JqueryToJS::convert("var name = $('#name').val('Tayfun Erbilen')");
// let name = document.getElementById("name").value = 'Tayfun Erbilen'

转换 show() 方法

echo Erbilen\JqueryToJS::convert("$('#content').show()");
// document.getElementById("content").style.display = ""

转换 hide() 方法

echo Erbilen\JqueryToJS::convert("$('#content').hide()");
// document.getElementById("content").style.display = "none"

转换 remove() 方法

echo Erbilen\JqueryToJS::convert("$('#container').remove()");
/*
let container = document.getElementById("container");
container.parentNode.removeChild(container);
*/

转换 addClass() 方法

echo Erbilen\JqueryToJS::convert("$('#container').addClass('active')");
// document.getElementById("container").classList.add("active")

转换 removeClass() 方法

echo Erbilen\JqueryToJS::convert("$('#container').removeClass('active')");
// document.getElementById("container").classList.remove("active")

转换 hasClass() 方法

echo Erbilen\JqueryToJS::convert("$('#container').hasClass('active')");
// document.getElementById("container").classList.contains("active")

转换 toggleClass() 方法

echo Erbilen\JqueryToJS::convert("$('#container').toggleClass('active')");
// document.getElementById("container").classList.toggle("active")

转换 next() 方法

echo Erbilen\JqueryToJS::convert("$('#test').next()");
// document.getElementById("test").nextElementSibling;

转换 prev() 方法

echo Erbilen\JqueryToJS::convert("$('#test').prev()");
// document.getElementById("test").previousElementSibling;

转换 clone() 方法

echo Erbilen\JqueryToJS::convert("var test = $('#test').clone()");
// let test = document.getElementById("test").cloneNode(true)

转换 $.each() 方法

$js = <<<JS
var list = $('#list li');
$.each(list, function(key, val){
	console.log($(val).html());
});
JS;
echo Erbilen\JqueryToJS::convert($js);
/*
var list = document.querySelectorAll("#list li");
list.forEach(function(val, key){
	console.log(val.innerHTML);
});
*/

转换 on() 方法

$js = <<<JS
$('#button').on('click', function (e) {

})
JS;
echo Erbilen\JqueryToJS::convert($js);
/*
document.getElementById("button").addEventListener('click', (e) => {

});
*/

或者

$js = <<<JS
function callback(e){
	console.log(e);
}
$('#button').on('click', callback);
JS;
echo Erbilen\JqueryToJS::convert($js);
/*
function callback(e){
	console.log(e);
}
document.getElementById("button").addEventListener('click', callback);
*/

转换 trigger() 方法

echo Erbilen\JqueryToJS::convert("$('#open-btn').trigger('click')");
/*
var event = document.createEvent('HTMLEvents');
event.initEvent('click', true, false);
document.getElementById("open-btn").dispatchEvent(event);
*/

转换 ajax() 方法

$js = <<<JS
var data = {
	name: "Tayfun",
	surname: "Erbilen"
};

$.ajax({
	type: 'POST',
	url: 'api/contact.php',
	data: data,
	success: function (responseVar) {
		$('#response').html(responseVar);
	},
	error: function (err) {
		$('#error').html(err);
	}
});
JS;
echo Erbilen\JqueryToJS::convert($js);
/*
let data = {
	name: "Tayfun",
	surname: "Erbilen"
};

let request = new XMLHttpRequest();
    request.open('POST', 'api/contact.php', true);

    request.onload = () => {
        if (this.status >= 200 && this.status < 400) {
            let responseVar = this.response;
            document.getElementById("response").innerHTML = responseVar;
        }
    }

    request.onerror = (err) => {
        document.getElementById("error").innerHTML = err;
    }

    request.send(data);
*/

转换 $.getJSON() 方法

$js = <<<JS
$.getJSON( "api/get-articles", function(json) {
	console.log(json);
});
JS;
echo Erbilen\JqueryToJS::convert($js)

/*
let request = new XMLHttpRequest();
request.open('GET', 'api/get-articles', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    let json = JSON.parse(this.response);
    console.log(json);
  }
};

request.send();
*/

您还可以发送数据

$js = <<<JS
var data = {
    query: "harry",
    limit: 5
};
$.getJSON( "api/get-articles", data, function(json) {
	console.log(json);
});
JS;
echo Erbilen\JqueryToJS::convert($js)

/*
let data = {
    query: "harry",
    limit: 5
};
let request = new XMLHttpRequest();
request.open('POST', 'api/get-articles', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    let json = JSON.parse(this.response);
    console.log(json);
  }
};

request.send(JSON.stringify(data));
*/

转换稍微复杂一点的代码

$js = <<<JS
$(function () {

    $('#button').on('click', function (e) {
        var container = $('#container'),
            text = $('#text');
        if (container.hasClass('active')) {
            container.removeClass('active');
            text.html('<b>container hidden</b>');
        } else {
            container.addClass('actived');
            text.html('<b>container showed</b>');
        }
        e.preventDefault();
    });

    $('#load-btn').on('click', function (e) {

        $.ajax({
            type: 'GET',
            url: 'api/load-more',
            success: function (result) {
                console.log(result);
            },
            error: function (err) {
                console.log(err);
            }
        });

        e.preventDefault();
    });

});
JS;

echo \Erbilen\JqueryToJS::convert($js);

/*

document.addEventListener("DOMContentLoaded", () => {

    document.getElementById("button").addEventListener('click', (e) => {
        let container = document.getElementById("container"),
            text = document.getElementById("text");
        if (container.classList.contains("active")) {
            container.classList.remove("active");
            text.innerHTML = '<b>container hidden</b>';
        } else {
            container.classList.add("actived");
            text.innerHTML = '<b>container showed</b>';
        }
        e.preventDefault();
    });

    document.getElementById("load-btn").addEventListener('click', (e) => {

        let request = new XMLHttpRequest();
        request.open('GET', 'api/load-more', true);

        request.onload = () => {
            if (this.status >= 200 && this.status < 400) {
                let result = this.response;
                console.log(result);
            }
        };

        request.onerror = (err) => {
            console.log(err);
        };

        request.send();

        e.preventDefault();
    });

});
*/