ホームページ php教程 php手册 一个简洁的 JavaScript 库

一个简洁的 JavaScript 库

Jun 07, 2016 am 11:44 AM

easy.js 是一个简洁易用的 JavaScript 库,包含了核心库和组件库。核心库有符合 W3C 标准的 CSS3 选择器,常用的 DOM 操作方法,增强的动画模块,支持 promise 模式的 ajax 模块以及优雅便捷的事件处理模块。easy.js 还集成了模块加载器,遵循 AMD 的模块化规范。组件库是基于核心库开发的,目前为止有一些最常见的组件诸如 Drag(对话框)、Switchable(轮播)、Lazyload(延迟加载)、Dialog(对话框)等等,后续还会继续开发更多的常用组件。

后续在放出一套配套的UI库,方便与程序开发实现无需一行CSS代码实现模块化美化快速开发!

简单性
easy.js的组件在 UI(界面) 层面尽量保持简单,开发者可以很方便的通过修改 CSS 样式就可以轻松定制自己想要的样式。
使用一个组件通常情况下只需要寥寥几行 JS 代码。


一致性
组件在接口设计、命名规则上都尽可能的保持一致。通常,你只要使用过任意一个组件,那么其他组件也很容易上手。

模块化
每个组件都是一个独立的符合 AMD 规范的模块,都依赖 easy.js 的核心库,在使用时都可以通过 E.use 来进行加载。

命名空间
所有组件的命名空间都是 E.ui,在组件加载完后都可以通过 E.ui.xxxx 来访问。

实例化
在使用组件时都需要通过 new 关键字来实例化,组件类的首字母都是 大写。
实例化时,第一个参数 都是必需的,该参数通常都是设置需要实例化某个/组 DOM 元素。该参数可以是选择器字符串、DOM 元素以及 easyJS Object 的对象。
实例化时,第二个参数 都是可选的,该参数是一个多选可配置形式的 Object 对象。

事件处理
组件在实例化后都可以通过 on 方法来为组件绑定事件,同样,也可以通过 un 方法来卸载事件。各组件支持的事件类型可以在详细的说明文档中看到。在多选形式的配置参数中,除了可能存在 init 回调函数,不会有任何其他的回调。

销毁实例
组件实例可以通过 destroy 方法进行销毁。

如何使用:
定义一个模块,将以下代码保存成 hello.js 文件:define(function(){<br>     // 该模块返回一个由easyJS封装的div元素   <br>     return E( '<div>hello easy.js !</div>' );<br> });使用该模块:var btn = E( '#demoHelloBtn' );<br> // 为按钮绑定一个一次性的事件<br> btn.one( 'click', function( e ){<br>     // 加载hello模块<br>     E.use( 'hello', function( helloDiv ){<br>         var win = E( window );<br>         // 将模块中的div插入到body中<br>         E( 'body' ).append( helloDiv );       <br>         // 设置div出现在页面的左下角<br>         helloDiv.css( 'top', win.scrollTop() + win.height() - 150 + 'px' )<br>             // 动画效果展示<br>             .anim({<br>                 to : { left : '0px' },<br>                 easing : 'doubleSqrt'<br>             });           <br>     });       <br>     e.preventDefault();        <br> });运行

开源
easy.js 遵循 MIT 协议,个人和企业都可以免费使用,easy.js on github。

一个简洁的 JavaScript 库一个简洁的 JavaScript 库一个简洁的 JavaScript 库

附件 easyjs.components.zip ( 1.73 MB 下载:115 次 )

AD:真正免费,域名+虚机+企业邮箱=0元

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Python プログラミングの入門コード例について学びます。 Python プログラミングの入門コード例について学びます。 Jan 04, 2024 am 10:50 AM

入門コード例で Python プログラミングについて学ぶ Python は、習得が簡単でありながら強力なプログラミング言語です。初心者にとって、Python プログラミングの入門コード例を理解することは非常に重要です。この記事では、すぐに始めるのに役立つ具体的なコード例をいくつか紹介します。 Print HelloWorldprint("HelloWorld") これは、Python の最も単純なコード例です。 print()関数は、指定された内容を出力するために使用されます。

Go 言語プログラミングの例: Web 開発のコード例 Go 言語プログラミングの例: Web 開発のコード例 Mar 04, 2024 pm 04:54 PM

「Go 言語プログラミングの例: Web 開発におけるコード例」 インターネットの急速な発展に伴い、Web 開発はさまざまな業界で不可欠な部分になりました。 Go 言語は、強力な機能と優れたパフォーマンスを備えたプログラミング言語として、Web 開発の開発者にますます好まれています。この記事では、読者が Go 言語をより深く理解し、Go 言語を使用して独自の Web アプリケーションを構築できるように、具体的なコード例を通じて Web 開発に Go 言語を使用する方法を紹介します。 1. シンプルな HTTP サーバー まず、

PHP 変数の実際の使用: 10 の実際の使用例 PHP 変数の実際の使用: 10 の実際の使用例 Feb 19, 2024 pm 03:00 PM

PHP 変数はプログラムの実行中に値を保存し、動的でインタラクティブな WEB アプリケーションを構築するために重要です。この記事では、PHP 変数を詳しく説明し、10 個の実際の例を使用して実際に動作する様子を示します。 1. ユーザー入力の保存 $username=$_POST["username"];$passWord=$_POST["password"]; この例では、フォーム送信からユーザー名とパスワードを抽出し、その後の処理のために変数に保存します。 2. 構成値 $database_host="localhost";$database_username="username";$database_pa を設定します。

Java は単純なバブルソートコードを実装します Java は単純なバブルソートコードを実装します Jan 30, 2024 am 09:34 AM

Java バブル ソートの最も簡単なコード例 バブル ソートは一般的な並べ替えアルゴリズムであり、その基本的な考え方は、並べ替える順序を、隣接する要素の比較と交換を通じて順序付けされた順序に徐々に調整することです。次に、バブル ソートの実装方法を示す簡単な Java コード例を示します。 publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

初心者から熟練者まで: Go 言語で一般的に使用されるデータ構造のコード実装 初心者から熟練者まで: Go 言語で一般的に使用されるデータ構造のコード実装 Mar 04, 2024 pm 03:09 PM

タイトル: 初心者から熟練者まで: Go 言語で一般的に使用されるデータ構造のコード実装 データ構造はプログラミングにおいて重要な役割を果たし、プログラミングの基礎です。 Go 言語には、一般的に使用されるデータ構造が多数あり、これらのデータ構造の実装をマスターすることは、優れたプログラマーになるために重要です。この記事では、Go 言語で一般的に使用されるデータ構造を紹介し、読者がこれらのデータ構造を使い始めて習熟するのに役立つ、対応するコード例を示します。 1. 配列 配列は基本的なデータ構造であり、同じ型のグループです。

Huawei Cloud Edge Computing Interconnection Guide: インターフェースを迅速に実装するための Java コード例 Huawei Cloud Edge Computing Interconnection Guide: インターフェースを迅速に実装するための Java コード例 Jul 05, 2023 pm 09:57 PM

Huawei クラウド エッジ コンピューティング相互接続ガイド: インターフェイスを迅速に実装するための Java コード サンプル IoT テクノロジーの急速な発展とエッジ コンピューティングの台頭により、ますます多くの企業がエッジ コンピューティングのアプリケーションに注目し始めています。 Huawei Cloud はエッジ コンピューティング サービスを提供し、企業に信頼性の高いコンピューティング リソースと便利な開発環境を提供し、エッジ コンピューティング アプリケーションの実装を容易にします。この記事では、Java コードを通じて Huawei Cloud エッジ コンピューティング インターフェイスを迅速に実装する方法を紹介します。まずは開発環境を準備する必要があります。 Java Development Kit がインストールされていることを確認してください (

PHPを使用して在庫管理システムに在庫管理機能コードを記述する方法 PHPを使用して在庫管理システムに在庫管理機能コードを記述する方法 Aug 06, 2023 pm 04:49 PM

PHP を使用して在庫管理システムの在庫管理機能コードを記述する方法 在庫管理は多くの企業にとって不可欠な部分です。複数の倉庫を持つ企業にとって、在庫管理機能は特に重要です。在庫を適切に管理および追跡することで、企業は異なる倉庫間で在庫を割り当て、運用コストを最適化し、コラボレーション効率を向上させることができます。この記事では、PHP を使用して在庫倉庫管理機能のコードを記述する方法を紹介し、関連するコード例を示します。 1. 在庫倉庫管理機能のコードを書き始める前に、データベースを確立します。

ガイダンスと例: Java で選択ソート アルゴリズムを実装する方法を学習します。 ガイダンスと例: Java で選択ソート アルゴリズムを実装する方法を学習します。 Feb 18, 2024 am 10:52 AM

Java 選択ソート方法のコード記述ガイドと例 選択ソートは、シンプルで直観的なソート アルゴリズムです。そのアイデアは、ソートされていない要素から毎回最小 (または最大) の要素を選択し、すべての要素がソートされるまで交換することです。この記事では、選択項目の並べ替えのためのコード作成ガイドを提供し、特定の Java サンプル コードを添付します。アルゴリズム原理 選択ソートの基本原理は、ソート対象の配列をソート済み部分とソートされていない部分の 2 つの部分に分割し、その都度、未ソート部分から最小 (または最大) の要素が選択され、ソート済み部分の最後に配置されます。上記を繰り返します

See all articles