Laravel使用laracasts/utilities转换PHP变量为JavaScript变量

laracasts/utilities是开源的项目,项目地址:https://github.com/laracasts/PHP-Vars-To-Js-Transformer。

它提供了将PHP变量转换为JavaScript变量的工具。

安装

使用composer安装:

composer require laracasts/utilities
  • Laravel 4: 安装~1.0
  • Laravel 5: 安装~2.0

安装成功后,需要注册绑定。Laravel 5.5+会自动注册。对于低于Laravel 5.5,可以使用JavaScriptServiceProvider来注册:

config/app.php配置provider如下:

'providers' => [
    '...',
    'Laracasts\Utilities\JavaScript\JavaScriptServiceProvider'
];

使用

安装完后,我们既可以使用laracasts/utilities提供的门面JavaScript。

Laravel 5在controller顶部添加:

use JavaScript;

在controller使用:

public function index()
{
    JavaScript::put([
        'foo' => 'bar',
        'user' => User::first(),
        'age' => 29
    ]);

    return View::make('hello');
}

在index方法里把php的变量转换为JavaScript变量,默认情况下,这些JavaScript变量添加到“footer”视图,所以要在JavaScript引用这些变量需要在页面包含“footer”视图:

<body>
    <h1>My Page</h1>

    @include ('footer') // <-- Variables prepended to this view
</body>

接着我们就可以在JavaScript引用:

console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29

配置

默认laracasts/utilities会把变量添加到“footer”视图的window对象下。它也提供了修改默认值的方式。

首先需要publish默认的配置:

php artisan vendor:publish

// 或者

php artisan vendor:publish --provider="Laracasts\Utilities\JavaScript\JavaScriptServiceProvider"

它会生成一个新的配置:config/javascript.php,内容如下:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | View to Bind JavaScript Vars To
    |--------------------------------------------------------------------------
    |
    | Set this value to the name of the view (or partial) that
    | you want to prepend all JavaScript variables to.
    |
    */
    'bind_js_vars_to_this_view' => 'footer',

    /*
    |--------------------------------------------------------------------------
    | JavaScript Namespace
    |--------------------------------------------------------------------------
    |
    | By default, we'll add variables to the global window object. However,
    | it's recommended that you change this to some namespace - anything.
    | That way, you can access vars, like "SomeNamespace.someVariable."
    |
    */
    'js_namespace' => 'window'

];

可以看到,配置里有两个配置项:bind_js_vars_to_this_view和js_namespace。

  • bind_js_vars_to_this_view:配置javascript变量添加到的视图,默认为"footer"
  • js_namespace:配置javascript变量添加为哪个对象的属性,默认为window

版权声明:著作权归作者所有。

相关推荐

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

Shell:如何在awk脚本里使用变量

在awk里用变量最好的方法是使用-v选项。使用方式awk -v var= 单个变量~]$ v1="变量1" ~]$ awk -v var1="$v1" 'BEGIN {print var1}' 变量1 多个变量使用多个-v var=xxx来接收多个变量~]$&

Linux下查看进程所使用的环境变量

在Linux下直接执行env命令即可获取当前的环境变量[xxxx ~]$$ env HOSTNAME=iZ94lykym6iZ TERM=linux SHELL=/bin/bash HISTSIZE=1000 ... 进程的环境变量可以在/proc/<pid>/environ查看,其中<pid>为进程id获取进程id使用ps获取pid[xxxx 

TypeScript:变量声明之解构赋值

解构(Destructuring)是ES6新增的特性。数组和对象(Object)的一个作用是把一些值组合打包在一起。与之相对,解构就类似把数组里的值或对象的属性解包。使用解构赋值语法可以很简便地把数组的值或对象的属性赋值给单独的变量。语法var a, b, rest; [a, b] = [10, 20]; console.log

TypeScript:let和const变量声明

在开始介绍let和const变量声明前,有必要先了解下JavaScript里的var变量声明。var变量声明全局声明var声明在函数体外,所声明的变量为全局变量。var name = "张三"; var所声明的全局变量会作为window的一个属性,可以使用"."来引用。如上例的name引用:console.log(window.