README

Wjs 是一个前端开发工具包，旨在通过增强浏览器和服务器之间的交互，支持无页面刷新的完整动态导航，并提供支持插件、关键帧渲染等的高级面向对象编程接口，为网络客户端带来全新的用户体验。Wjs 目前仍在开发中，所有功能尚未完全实现。

现在可以从 microjs.com 访问 Wjs，这是专为娱乐和盈利而设计的精彩微框架和微库。

查看 演示网站，并在其 GitHub 仓库 上进行分支。

您可以在 OpenInitiative、Kickstarter 上支持我们。它实际上是用 JavaScript 编写的客户端部分，用 PHP 编写的服务器部分。它也准备好根据需要翻译成其他任何服务器端语言。

功能

• 带有服务器端包管理的 AJAX 加载
  • 依赖项声明
  • 依赖项自动加载
  • 自动生成 HTML head 链接
  • 支持页面预加载扩展
  • 预加载文件缓存
  • 预加载文件聚合
  • 多种类型的加载器：CSS、JS、文件等...
  • 原生有用方法
    • AudioTrackPlayer
    • AudioTrackPlayerTrack
    • BezierEasing
    • MathEuler
    • MathMatrix4
    • MathQuaternion
    • MathVector3
    • ThreeCamera
    • ThreeObject3d
    • AccelerometerListener
    • 禁用Ctrl+S
    • Math
    • MousePositionListener
    • 队列管理器
    • 滚动管理器
    • webPageKeyboardChange
• Web 组件管理
  • 为每个组件提供独立的文件夹
  • 支持简单的 HTML / CSS 数据
  • 额外文件路径重写
  • 对象描述的混合 API
    • 解析为真正的 JavaScript 继承对象
  • 构造 / 析构方法
  • 局部设置器和获取器
  • 选项管理系统
  • 事件监听器
  • 方法继承
  • 多状态管理
  • 对象之间的状态连接
  • 基本 Clip / Sprite / Stage 对象
    • 居中位置
    • CSS 动画渐变
    • 3D 功能
• 高级 HTML 元素（beta）
  • 插件支持
  • 父 / 子管理
  • 关键帧动画管理
  • 公式对象支持
• 网站 OOP 类（beta）
  • 动态页面加载
  • 库加载
• 源版本或压缩版 - 无服务器支持（无服务器端）

如果您是以下情况，Wjs 就是为您制作的：

• 您是一个非常特殊的人
• 您正在寻找一个懒加载器（用于加载几乎任何类型的数据）
• 您想尝试一种新的方法来创建丰富的网络界面
• 您想为您的用户提供一个新的导航系统
• 您需要支持监听、依赖项管理、动画关键帧等的高级 JavaScript 对象

如果你正在寻找一个仅包含JavaScript的便捷库（如jQuery、Backbone等），Wjs不适合你。我们正在寻找对该项目的贡献者来报告评论、错误、改进或兼容性支持。所有类型的反馈都受到欢迎。

Wjs轻量且无限可扩展，使用自定义扩展声明和依赖关系管理。显然，在之前需要做最小配置。以下安装指南维护得不好，因为库本身的工作量很大，请联系我们获取更多信息。

安装

下载wjs的zip文件或使用npm install wjs。即使你可以通过npm下载wjs，实际上它并不与node.js和require方法一起工作。

配置

与wjs正确工作需要三个重要步骤，并且有不同的实现方式

• 注册要通过AJAX传输的内容
• 配置你的HTML头部
• 在服务器端处理AJAX请求

完成这些步骤后，你将能够使用基本的JavaScript方法

wjs.use("Type", "Name");

创建一个Wjs实例

最快的方法是不带参数实例化wjs。

在服务器端

$wjs = new Wjs();

否则，你可以定义更多配置设置。

在服务器端

// Add only option that you explicitly need,
// any option are required.
$wjs = new \Wjs(array(
  // Optional, by default use "master" version (minified),
  // Accepts also "jQuery" or "source" for debug mode.
  'subversion'          => $subversion,
  // Response path define the URL used by AJAX
  // to retrieve extensions on your server, you
  // obviously need to handle the path on server
  // side, see bellow.
  'clientPathResponse'  => $yourCustomResponsePath,
  // If you want to use static cache, you have
  // to specify route for the local directory,
  // it will be filled by all aggregated javascript and responses.
  'serverPathCache'     => $yourCustomCacheDirectory,
  // Caching will generate aggregated javascript
  // file and will place it into given directory
  // according to pushed data for requested url.
  'staticFilesEnabled'  => $staticFilesEnabled,
  // Force to regenerate existing files.
  'staticFilesFlush'    => $staticFilesFlush,
  // Allow to merge all preloaded extensions
  // and core js files into one js file.
  'aggregationEnabled'  => $aggregationEnabled,
  'aggregationFlush'    => $aggregationFlush,
  // You can specify a file for main
  // javascript file for complete page rendering,
  // All files will be aggregated into one file,
  // remember that this file content can completely change
  // from one page to another, so think to name it accordingly.
  'aggregationFileName' => $yourCustomCacheFileName,
  // You can also specify a extra string
  // for cache files naming. Useful to enforce
  // to flush browsers caches.
  'cacheToken'          => $yourCustomCacheToken,
  'paramInc'            => 'wjs-test'
));

注册你的扩展

注册扩展不是将它们推送到前端，只是定义客户端可能检索到的扩展。常见的用法是注册库以供正常和AJAX响应使用，并为每个上下文分别定义推送数据。你还可以查看扩展注册的摘要以获取更多信息。

注册的数据还取决于每个加载器的行为，有关加载器特定部分的更多信息。

在服务器端

$this->wjs->extensionAdd('JsArray', 'myJsArrayCustomName', array(
  0 => 'MyItem',
));

链接JavaScript

将JavaScript添加到你的HTML页面中，以便在服务器和客户端环境之间建立连接。由于加载器、预加载扩展或wjs可以包含的平台的不同，页面之间的包含文件可能会有很大差异。wjs中包含了一些工具来帮助你实现这一点。要快速开始使用wjs，只需将以下PHP代码放入你的文档的“head”部分

print $wjs->renderHeader(4);

如果你想要更多控制集成链接的方式，有一个更详细的方法可以使用

// Retrieve list of files used by core
$files = $wjs->jsFiles();

此方法将返回核心使用的js文件，根据使用的核心版本、定义的加载器和所需内容而异。

现在你可以将这些链接包含到你的HTML页面中。下一个要点是初始化wjs。此操作将解包PHP中的推送内容，并执行启动函数（请参阅“ready”方法）。在客户端

new WjsProto(<?php print $wjs->initPackage(); ?>);

处理请求

你现在已经连接了客户端和服务器wjs实例，你也定义了允许传输哪些数据。太棒了。现在，你可以处理客户端到服务器的要求数据。wjs请求通过GET方法使用设置中定义的查询字符串名称进行制作。已经提供了一个简单的方法来快速处理客户端请求，但在使用之前，始终考虑过滤get数据。

$wjs->response($_GET);

因此，你可以过滤和管理返回的内容。

// Think about always make some verification on requested content.
if (isset($_GET['wjs']['JsArray']) && $_GET['wjs']['JsArray'] === 'myJsArrayName') {
  // Manage which data to retrieve.
  $wjs->import('JsArray', 'myJsArrayName');
  // When response is ready to be sent,
  // this function will add json headers,
  // print package content, then exit.
  $wjs->response();
}

远程加载

Wjs使用加载器从服务器检索数据，并解析它。wjs核心中包含了几种加载器，你也可以构建自己的加载器类型。AJAX请求默认是异步的，它让你可以将请求集成到你的脚本流程中，但你也可以选择异步加载你的脚本，并使用“complete”回调继续你的操作。

简单的JavaScript对象

在服务器端

// Add array as a JsObject.
$this->wjs->extensionAdd('JsObject', 'testObject', array(
  'thisIs'        => 'ATest',
  'thisIsAlso'    => 'AnOtherTest',
  'thisIsANumber' => 123,
  'thisIsAnArray' => array('foo' => 'bar')
));

在客户端

wjs.use('JsObject', 'testObject', function () {
  continueCallback();
});

简单的JavaScript数组

与对象类似，你还可以将数据作为JavaScript数组附加。请注意，如果键不是数字，则键将转换为索引，因为JavaScript数组不支持字符串索引（否则请使用JsObjects）。

在服务器端

$this->wjs->extensionAdd('JsArray', 'myJsArrayName', array(
  0           => 'ATest',
  1           => 'AnOtherTest',
  'keysWill'  => 123,
  'disappear' => array(0 => 'bar')
));

在客户端

// Will return : ["ATest", "AnOtherTest", 123, Array[1]]
wjs.use('JsArray', 'myJsArrayName', function (arrayContent) {
  continueYourScript(arrayContent);
});

JavaScript代码

你可以轻松添加简单的JavaScript代码供自己使用。

在服务器端

// Add a remote file.
$this->wjs->extensionAdd('JsScript', 'testScriptFile', $filePath);
// Add an inline code.
$this->wjs->extensionAdd('JsScript', 'testScriptInline', 'window.jsScriptInlineLoaded = true;');
// Add reloadable script,
// it will increment global var at each pull, with the reload:true option.
$this->wjs->extensionAdd('JsScript', 'jsScriptReloadable', 'window.jsScriptReloadCount===undefined ? window.jsScriptReloadCount = 0 : window.jsScriptReloadCount++;');

在客户端

// If loader do not exists, it will be loaded first.
wjs.use('JsScript', 'testScriptFile', function () {
  console.log(window.jsScriptFileLoaded); // true
  // Inline script will be executed as well.
  wjs.use('JsScript', 'testScriptInline', function () {
    console.log(window.jsScriptInlineLoaded); // true
    continueYourScript();
  });
});

JavaScript方法

您可以使用wjs异步或不异步地加载简单的JavaScript方法，并在您的代码中执行它。一些方法已包含在wjs核心中，例如。

在服务器端

// Add javascript method from a file.
$this->wjs->extensionAdd('JsMethod', 'testMethod', $path);

您的Js文件也必须被包装，这允许wjs捕获它。

[FILE:projects/wjs/tests/objects/JsMethod/testMethod.js]

在客户端

// The retrieved method will return the length of an object.
var length = wjs.use('JsMethod', 'testMethod', function (reg) {
  var length;
  var method = reg.JsMethod.testMethod;
  //console.log(reg);
  var testObject = {
    'lorem': 'ipsum',
    'dolor': 'sit',
    'amet': 'poireau'
  };
  // Return 3
  length = method(testObject);
  // Or
  length = wjs.testMethod(testObject);
  continueYourScript();
});

图片加载

您还可以使用wjs检索图片，并且只有在加载完成后才能使用。图片不需要在服务器端打包。

在客户端

// We load the HTML5 Image Logo
wjs.use('Image', 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png', {
  complete: yourCustomCallback
});

音频加载

您还可以使用wjs检索音频，并且只有在加载完成后才能使用。图片不需要在服务器端打包。

在客户端

// We load an mp3 or ogg file.
wjs.use('Audio', audioUrl, {
  complete: yourCustomCallback
});

JavaScript链接

wjs还可以将脚本链接附加到您的页面上。

在客户端

// We load an external js.
wjs.use('JsLink', pathToYourJsFile, {
  complete: yourCustomCallback
});

但也可以添加几个链接，如果您需要在客户端以特定顺序添加它们。

// If several links are declared from an array,
// All links are loaded, in order. Each link wait for
// the previous one to be loaded.
wjs.use({JsLink: [
  pathToYourJsFile2,
  pathToYourJsFile3
]
}, yourCustomCallback2);

CSS链接

就像.js一样，您也可以检索CSS链接，作为链接标签。它们将被附加到您的文档头部。

在客户端

// We load an external js.
wjs.use('CssLink', pathToYourCssFile, {
  complete: yourCustomCallback
});

并且对于多个CSS，在客户端。

// If several links are declared from an array,
// All links are loaded, in order. Each link wait for
// the previous one to be loaded,
// wrong css links do not block the process.
wjs.use({
  CssLink: [pathToYourCssFile2, pathToYourCssFile3]
}, yourCustomCallback2);

PHP方法

您可以加载PHP经典方法。

加载器

现在进入wjs的疯狂世界。您还可以将加载器作为扩展加载。这允许您仅使用wjs和核心wjsLoader加载您的页面，然后稍后加载您需要的每个加载器。

在服务器端

[PULL_WJSLOADER_PHP]

在客户端

// First we load loader,
// this action is also for example,
// in real life, wjs make this action
// automatically when using a script.
wjs.use('WjsLoader', 'JsArray', function (reg) {
  // Then we load script.
  wjs.use('JsArray', 'load_wjsLoader_testArray', continueCallback);
});

显然，您应该在单独的JavaScript文件中声明您的加载器。有关更多信息，请参阅wjs核心。

Web组件

WebComp类型允许检索由CSS、HTML和JavaScript组成的基本Web组件。

Web页面

WebPage类型是WebComp的子类，旨在管理高级页面集成和URL管理。此类由Website类用作页面渲染的默认对象。

Web表单

Web表单为您提供的Web组件提供了一个服务器端验证系统。

Web页面

库与WebPages相关联，并包含当前加载页面的额外所需功能。

组

组接受一个数组作为参数，其中包含来自所有其他类型的扩展列表。

缓存链接

缓存链接是核心JsLinks，无法从请求中排除。

JsClass

用于检索JavaScript对象类，目前处于开发中。

JsClass

静态类仅在页面中实例化一次。这是一种方便的方法，可以在一个类实例中定义一组函数。

Binder

扩展了事件监听方法。

Element

Binder具有更多功能，支持插件、子元素和动画播放过程。

插件

为元素添加功能改进。

公式

用作参数，公式可以定义变量数值，例如：鼠标位置。

依赖关系

定义和控制依赖关系可以使您在单个请求中检索多个扩展，从而提高请求效率。一个"A"扩展可以带来一个"B"或一个"C"扩展，如果您在推送数据之前定义了它。

定义需求

一个简单的函数允许您将一个扩展连接到另一个扩展。

在服务器端

// Extension of type JsObject > testObject,
// will be loaded with  JsObject > testObject2 when asked.
$this->wjs->extensionAddRequire('JsObject', 'nameOfJsObjectWithDependencies', 'JsObject', 'nameOfJsObjectWithDependencies2');

排除依赖关系

依赖关系的危险点是在请求中多次检索相同的扩展。如果"A"和"B"需要"C"扩展，您可能会加载它两次。您可以在请求上定义选项，请求不检索依赖项。如果您知道所需的扩展已经加载，这很有用。

在客户端

// We don't want any dependency.
object = wjs.use('JsObject', 'nameOfExtensionWithDependencies', {
  exclude: true,
  complete: continueCallback
});

或者更确切地说，在客户端。

// We don't want multiple dependencies, but we allow others.
object = wjs.use('JsObject', 'nameOfExtensionWithDependencies', {
  // We don't want these dependencies.
  exclude: {
    JsObject: ['nameOfExtensionWithDependencies2'],
    JsArray: ['nameOfArrayWithDependencies2']
  },
  complete: continueCallback
});

网站管理

您可以使用网站类来管理整个网站。它将为您配置wjs并使用WebPage扩展。在这种情况下，wjs必须始终放置在当前工作目录的根目录下，以便能够解析css和js文件的客户端路径。可以使用符号链接，但在此情况下，必须在加载核心.inc文件之前定义WESITE_ROOT变量，因为PHP总是解析符号链接，否则网站将无法自行检测到它。

文档就绪

为了在使用wjs之前等待其加载，您应该将脚本包裹在wjs.ready(callback);函数中。这确保回调在页面加载后以及wjs初始化后执行。在客户端

WjsProto.ready(function(){ 
  console.log("Ready to pull !"); 
  // Place here your wjs.use() requests.
})

原型设计

wJs允许您轻松实例化类原型。该方法由wJs内部使用并可重用。此方法尊重javascript getters和setters的声明。

在客户端

// Registers a new class prototype.
wjs.classExtend("className",{ ... });
// Create a new registered class instance.
var instance = (new wjs.classProto("className"))(arguments);

版权

版权所有 Romain WEEGER 2010 / 2015
http://www.wexample.com

许可协议为MIT和GPL

• https://open-source.org.cn/licenses/mit-license.php
• https://gnu.ac.cn/licenses/gpl.html

感谢

我想感谢所有信任和鼓励我的人，无论是有意还是无意。他们并不多。像我的所有项目一样，这个程序是许多问题、疑惑、痛苦的结果，但也有很多快乐和爱。我真诚地希望您会喜欢它。感谢Carole的不可思议的爱。