README

#YepnopeSilverStripe#

一个模块，允许使用条件加载器yepnopejs来加载JavaScript和CSS。

作者：Loz Calver & Colin Richardson - Bigfork Ltd.

##关于yepnope:##

"yepnope是一个异步条件资源加载器，它非常快，并且允许你只加载用户需要的脚本。"

##安装:##

###Composer:###

require: "kinglozzer/yepnopesilverstripe": "dev-master"

###下载:###

简单地克隆或下载此存储库，并将其放入SilverStripe安装文件夹中名为'yepnopesilverstripe'的文件夹中，然后运行dev/build。

##示例:##

###添加文件:### 添加文件（或多个文件），无论是JavaScript还是CSS，最简单的方法是使用Page_Controller中的add_files()函数

class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		/* Add a single file */
		Yepnope::add_files('themes/yourtheme/js/yourjavascript.js');

		/* Add an array of files */
		Yepnope::add_files(
			array(
				'themes/yourtheme/css/adminstyles.css',
				'themes/yourtheme/css/extrauserstyles.css'
			)
		);
	}

}

上面的示例将输出以下内容

yepnope([{
	load: ['themes/yourtheme/js/yourjavascript.js']
}, {
	load: ['themes/yourtheme/css/adminstyles.css', 'themes/yourtheme/css/extrauserstyles.css']
}]); 

###回调函数:### 你可以通过将第二个和第三个参数传递给add_files()函数来指定一个回调函数（对于每个加载的文件调用）和/或一个complete函数（所有文件加载后调用）

class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		$myFiles = array(
			'themes/yourtheme/js/filea.js',
			'themes/yourtheme/js/fileb.js'
		);

		/* Will log 'loaded file' to console twice, once for each resource loaded */
		Yepnope::add_files($myFiles, "console.log('loaded file')");

		/* Will log 'loaded file' to console once, after both resources have been loaded */
		Yepnope::add_files($myFiles, null, "console.log('loaded file')");

		/* Will log 'loaded file' twice and 'loaded all files' once to the console */
		Yepnope::add_files($myFiles, "console.log('loaded file')", "console.log('loaded all files')");
	}

}

上面的示例将输出以下内容

yepnope([{
	load: ['themes/yourtheme/js/filea.js', 'themes/yourtheme/js/fileb.js'],
	callback: console.log('loaded file'),
	complete: console.log('loaded all files')
}]); 

###测试:### 你可以使用yepnope的test功能与add_test()函数结合使用。必须按照以下顺序传递参数

Yepnope::add_test($test, $yep=null, $nope=null, $load=null, $callback=null, $complete=null);

• $test - 要评估的测试
• $yep - 如果测试返回true则加载的文件（或文件数组）
• $nope - 如果测试返回false则加载的文件（或文件数组）
• $load - 无论测试返回true还是false都要加载的文件（或文件数组）
• $callback - 每次加载资源后调用的函数
• $complete - 所有资源加载后调用的函数
• $id - 测试的唯一标识符 - 下面将说明

示例测试

class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		Yepnope::add_test(
			'Modernizr.geolocation',			// Test if geolocation functionality exists
			'regular-styles.css',				// If it does (test returns true), load regular style
			'geolocation-polyfill.js',			// If it doesn't (test returns false), load extra file
			'standardfunctions.js',				// Load these files regardless of test outcome
			"console.log('loaded file')",		// Call this function upon loading each resource
			"console.log('all files loaded')"	// Call this function when all files have been loaded
		);
	}

}

上面的示例将输出以下内容

yepnope([{
	test: Modernizr.geolocation,
	yep: ['regular-styles.css'],
	nope: ['geolocation-polyfill.js'],
	load: ['standardfunctions.js'],
	callback: console.log('loaded file'),
	complete: console.log('all files loaded')
}]); 

传递给函数的文件列表可以是字符串、数组或null（例如，如果不需要为'yep'参数加载额外的文件）。

###清除文件和测试:### add_files()和add_test()方法都接受一个可选的唯一标识符的最后参数（分别对应第4个和第7个参数）。然后可以使用此标识符在特定页面上删除测试。在下面的示例中，假设您想在除具有'ContactPage'页面类型的页面外的所有页面上加载文件

// Page.php
class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		$myFiles = array(
			'themes/yourtheme/js/filea.js',
			'themes/yourtheme/js/fileb.js'
		);

		Yepnope::add_files($myFiles, null, null, 'MyFiles'); // Set the id 'MyFiles'
	}

}

// ContactPage.php
class ContactPage_Controller extends Page_Controller {

	public function init() {
		parent::init();

		Yepnope::clear_test('MyFiles'); // Clear the test with id 'MyFiles'
	}

}

###重写测试参数：### 如果您为测试指定了标识符，您可以重写现有测试的个别参数。以下示例将在具有“Page”页面类型的页面上使用 pageInit() 函数，在具有“ContactPage”页面类型的页面上使用 contactPageInit() 函数。

// Page.php
class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		$myFiles = array('themes/yourtheme/js/filea.js');

		Yepnope::add_files($myFiles, null, 'function() { pageInit(); }', 'default'); // Set the id 'default'
	}

}

// ContactPage.php
class ContactPage_Controller extends Page_Controller {

	public function init() {
		parent::init();

		Yepnope::get_test('default')->setComplete('function() { contactPageInit(); }'); // Override 'complete' function
	}

}

重写测试属性时可以使用的列表如下

• [获取/设置]ID()
• [获取/设置]Test()
• [获取/设置]Yep()
• [获取/设置]Nope()
• [获取/设置]Load()
• [获取/设置]Callback()
• [获取/设置]Complete()

###资源回调标签：### 从 yepnope.js 的 1.5 版本开始，回调中使用的键会自动从文件的 basename 生成。如果您需要在回调函数中使用键，请按照以下示例使用这些生成的键

yepnope({
	load: ["https:/­/my-cdn.com/jquery.min.js?v=1.7.1", "https:/­/my-cdn.com/jquery-ui.min.js?v=1.8.16"],
	callback: {
		"jquery.min.js": function () {
			console.log("jquery loaded!");
		},
		"jquery-ui.min.js": function () {
			console.log("jquery-ui loaded!");
		}
	}
});

###自定义：### 如果您已经使用 yepnope 或 modernizr 并且不需要包含 yepnope.js，您可以使用以下方法删除要求（或将其设置为使用不同的脚本）

class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		Yepnope::set_yepnope(false) // Removes built-in requirement for yepnope.js script
		Yepnope::set_yepnope('themes/yourtheme/js/modernizr.min.js'); // Set to use a custom script
	}

}

如果您想指定自定义错误超时长度（yepnope 的默认值为 10 秒），可以使用 set_timeout() 方法。请注意，时间以毫秒为单位

class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		Yepnope::add_files('themes/yourtheme/js/yourjavascript.js');
		Yepnope::set_timeout(2000); // Sets error timeout to be 2 seconds
	}

}

YepnopeSilverStripe 在 Controller::init() 之后自动评估测试，使用 Controller->onAfterInit() 扩展钩子。可以通过调用 Yepnope::set_automatically_evaluate(false); 禁用此行为。然后，您可以通过调用 Yepnope::eval_yepnope()（可选参数为 'customScriptID'）手动评估您的Yepnope测试（YepnopeSilverStripe 使用 Requirements::customScript()）。

###提示：### 如果您的 测试、回调 函数或 完成 函数相当长，则将它们放在 PHP 文件中既难看又难以维护。一种替代方法是存储原始 JavaScript 代码在一个模板中（确保在创建任何模板后进行 ?flush=1），然后使用以下方法加载它

class Page_Controller extends ContentController {

	public function init() {
		parent::init();

		Yepnope::add_files('themes/simple/javascript/somescript.js', $this->renderWith('MyCallback'));
	}

}

MyCallback.ss 将包含您的原始 JavaScript 代码（不需要任何 HTML 标签或任何内容）。

###待办事项：###

• 更简单的“最终完成”函数支持 - 查看 SlexAxton/yepnope.js#29