haxe实现jquery(1)

最新推荐文章于 2024-09-18 20:39:31 发布

harrietlq

最新推荐文章于 2024-09-18 20:39:31 发布

阅读量369

点赞数

分类专栏： javascript haxe 文章标签： jquery function import class html 优化

本文链接：https://blog.csdn.net/harrietlq/article/details/8061659

版权

javascript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

haxe

1 篇文章 0 订阅

订阅专栏

一直很讨厌js无用得顺手的ide，如果flashdevelop能让我写js，那就爽歪歪了
haxe可以做到，而且haxe里面的语法和as3类似，上手也挺快，今天就来研究下把w3school里面jquery教程，挨个移植到haxe实现,Let’s start!
原生jquery实现点击一个元素，然后隐藏它:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>
 
<body>
<p>If you click on me, I will disappear.</p>
</body>
 
</html>

Haxe实现点击一个元素，然后隐藏它:

package ; 
import js.JQuery;
/**
 * ...
 * @author amyflash.com
 */
 
class Main 
{
     
    static function main() 
    {
        new JQuery(null).ready
        (
            function(e:JqEvent)
            {
                var domElem = new JQuery("p");
                var clickHandlerFunction = function (e)
                {
                    JQuery.cur.hide();
                }
                domElem.bind( "click", clickHandlerFunction );
            }
        ); 
    }  
}

首先要安装haxejquery库:
haxelib install jquery

对应的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>myjquery</title>
    <meta name="description" content="" />
</head>
<body>
    <p>If you click on me, I will disappear.</p>
    <div id="haxe:trace"></div>
    <script src="myjquery.js"></script>
</body>
</html>

看起来是Main.hx编译成了myjquery.js，我的乖乖居然有98k，真要商业应用的话还是挺大的，需要优化再压缩，不过自己玩玩，或者对文件大小要求不严格而对时间要求很严格的商业应用的话，这个东东还是非常好的！