阿江 2017-10-15 08:06:04 1804次浏览 0条回复 2 0 0

说明

学习Yii Framework 2易2框架的过程是漫长的也是充满乐趣的以下是我学习Yii2框架时对官网英文资料(请参见原文网址)的翻译和代码实现提供了较完整的代码供你参考不妥之处请多多指正

原文网址:

http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html

本文主题:使用客户端脚本(Working with Client Scripts)

现代的Web应用,除了渲染静态HTML页面发送到浏览器之外,还包含了一些用于修改浏览器页面的JavaScript,通过它们处理现有元素,或使用Ajax加载新的内容。本章将介绍Yii提供的向网页添加JavaScript和CSS的方法,这些方法都动态加入的。

1、Registering scripts(注册脚本)

使用yii\web\View对象时,你要吧动态注册前端脚本,这里有两个专用的方法: registerJs(),加载JS代码块(inline scripts) registerJsFile(),加载外部JS文件(external scripts)

Registering inline scripts(注册JS代码块)
$this->registerJs(
	"$('#myButton').on('click',function(){alert('Button clicked!');});"	
	View::POS_READY,
	'my-button-handler'
);

第一个参数是我们要插入到页面中的JS代码块,它将被<script>标签所包含。第二个参数决定在页面的哪个位置插入代码块,可能的值是:

View::POS_HEAD,页面的head块中
View::POS_BEGIN,紧随<body>之后 for right after opening <body>
View::POS_END,紧靠</body>之前 for right before closing </body>
View::POS_READY,在document的ready事件时执行代码,这将自动注册jQuery并包含代码到jQuery中,这是默认位置。
View::POS_LOAD,在document的load事件时执行代码。与前一个相同,这也将自动注册jQuery。

最后一个参数是唯一的脚本ID,用于标识脚本代码块,可用于使用一个新代码块替换相同ID的代码块。如果没有设置此参数,JS代码块会被当作ID,它用于避免多次注册相同的代码。

Registering script files(注册脚本文件)

registerJsFile()的参数与registerCssFile()相似,在下例中,我们将注册main.js文件,并依赖于yii\ewb\JqueryAsset。也就是说main.js文件将在jquery.js文件之后添加。没有这样的依赖定义,main.js和jquery.js的相对顺序将不存在,代码可能会不正常工作。

添加一个外部JS文件的代码如下:

$this->registerJsFile(
	'@web/js/main.js',	
	['depends'=>[\yii\web\JqueryAsset::className()]],
);

这将为应用的基础URL目录下的/js/main.js脚本添加一个标签。 在此强烈推荐使用asset bundles去注册外部JS文件,而不是使用registerJsFile(),因为这样具有更好的灵活性和更多的依赖配置。使用asset bundles允许你合并和压缩多个JS文件,这对于高访问量的网站而言是不错的选择。

2、Registering CSS(注册CSS)

与JavaScript相似,你可以使用registerCss()或registerCssFile()来注册CSS,前者注册CSS代码块,后者外部CSS文件。

Registering inline CSS(注册CSS代码块)
$this->registerCss("body { background: #f00; }");

上句代码将在

中添加如下内容:
<style>
	body { background: #f00 }
</style>

如果你要为

Registering CSS files(注册CSS文件)

注册一个CSS文件的代码如下:

$this->registerCssFile(
	'@web/css/themes/black-and-white.css',
	[
		'depends'=>[\yii\bootstrap\BootstrapAsset::className()],
		'media'=>'print',
	],
	'css-pritn-theme'
);

上述代码将会在

中添加一个连接到/css/themes/black-and-white.css。 第1个参数定义要被注册的CSS文件,本例中的@web是应用的基本URL的别名。 第2个参数为生成的标签定义了HTML属性,属性depends将被特殊处理,它定义了此CSS文件所依赖的资源集。在此处依赖的资源集是BootstrapAsset。也就是说此CSS文件将在BootstrapAsset资源集之后加载。 最后一个参数定义了CSS文件的ID,如果没有定义,CSS文件的URL将被视为ID。

在此强烈推荐使用asset bundles去注册外部CSS文件,而不是使用registerCssFile()。使用asset bundles允许你去合并和压缩多个CSS文件,这对于高访问量的网站而言是很有效的。它也提供了更好的灵活性,应用中所有的资源依赖都在同一个位置去定义。

3、Registering asset bundles(注册资源集)

正如前面提及的,推荐使用注册资源集的方式,而不是直接注册CSS和JavaScript文件。你可以从Assets章节获取更多如何定义资源集的详细信息: http://www.yiiframework.com/doc-2.0/guide-structure-assets.html 要使用已定义好的资源集方法很简单:

\frontend\assets\AppAsset::register($this);

上句代码是在一个视图文件中,AppAsset资源集被注册到了当前的视图(使用$this 来表示)。当在一个小部件中注册资源集时,你应传递小部件所有的视图$view 而不是$this->view。

4、Generating Dynamic Javascript(生成动态Javascript)

在视图文件中通常HTML代码不是直接编写的,而是由PHP根据视图的一些变量生成的。为了使生成的HTML可以被Javascipt维护,JS代码也是包含动态部分的,例如jQuery选择器的ID列表。 要插入PHP变量到JS代码中,它们的值必须被正确转义。特别是当JS代码而不是专用的JS文件被插入到HTML中时。Yii提供了Json的htmlEncode()方法专门用于处理此问题,它的用法将在下例中展示。

Registering a blobal JavaScript configuration(注册一个全局的JavaScript配置)

在本例中,我们将把应用的PHP全局配置参数传递给JS前端代码:

$options=[
	'appName'	=>Yii::$app->name,
	'baseUrl'	=>Yii::$app->request->baseUrl,
	'language'	=>Yii::$app->language,
	//...
];
$this->registerJs(
	"var yiiOptions=".\yii\helpers\Json::htmlEncode($options).";";
	View::POS_HEAD,
	'yiiOptions'
);

上例代码将注册

var yiiOptions={"appName":"My Yii Application","baseUrl":"/basic/web","language":"en"};

在你的JavaScript代码中,你可以获取变量,如yiiOptions.baseUrl或yiiOptions.language

Passing translated messages(传递转换的信息)

你可能会碰到一种情况,你的JavaScript需要打印一条信息以响应一些事件,在多语言的应用中,此条信息必须被翻译成当前应用的语言。要实现此目标,使用Yii提供的语言翻译特性,并将结果传递到JS代码中。

$message=\yii\helpers\Json::htmlEncode(\Yii::t('app','Button clicked!'));
$this->registerJs(<<<JS
	$('#myButton').on('click',function(){alert($message);});
JS	
);

上例代码使用了PHP的Heredoc格式,具有更好的可阅读性。在大多数IDE中此处代码都可以被高亮,这也是编写JavaSctipt的首选方法,对于多于一行的代码块而言更为有用。在PHP中创建了变量$message ,Json::htmlEncode包含了有效的JS格式的字符串,它将被插入到JavaScript代码块中以动态替换alert()中的动态字符串。

注意:当使用Heredoc时要小心,JS代码中使用$ 开始的变量名将被PHP同名变量的内容替换(备注:此时可以在JS中使用转义字符\$ )。jQuery以$( 或$. 开头的函数不会被PHP变量所替换,所以它们是安全的。

Heredoc

PHP的Heredoc格式: http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

5、The yii.js script

注意:本章节还未编写,它将包含yii.js提供的功能的描述: Yii JavaScript CSRF param hadling data-confirm handler data-method handler script filtering redirect handling

(全文完)

    没有找到数据。
您需要登录后才可以回复。登录 | 立即注册