README

用于 Laravel 的脚本（如 jQuery, JavaScript...）管理器。简化并组织应用脚本的视图。

安装

通过 composer

composer required wiidoo/scriptshelper

默认情况下，脚本模板目录是 resources/scripts，这可以在配置文件中更改。

创建文件加载目录

mkdir resources/scripts

可以使用 blade 模板。为了避免错误，需要创建一个编译目录。默认情况下，我们使用 storage/scripts。

mkdir storage/scripts

此目录需要读写权限。

配置文件

您可以在 config/wiidoo.php 中更改此库的默认配置（Illuminate\Support\Facades\Config::get("wiidoo.scripts")）。在此文件中，您可以为此库中所有类的公共（public）和受保护（protected）属性创建默认值。

示例

<?php

return [
    'scripts' => [
        'templatePath' => resource_path('scripts'), // padrão
        'compiled' => storage_path('scripts') // padrão
    ]
];

scriptsHelper.php

教程

假设我们正在制作一个图像上传视图，并使用 picZone 来实现这一点。

首先需要创建脚本的模板，包括输入（将被脚本调用的对象）和脚本声明。

输入

在 resources/scripts 中创建一个名为 piczone.input.blade.php 的文件，内容如下

<input id="{{ $id }}" type="file" value="" class="{{ $class }}">

这是我们输入文件的模板。这里可以放置任何其他与脚本相关的声明标签。

现在将其合并... 在将 css 和 js 文件合并到布局之后，我们可以创建如下所示的表单

<form action="" method="post" enctype="multipart/form-data">
   {!! scriptHelper()->type('piczone')->input() !!}
   <button type="submit">Submit</button>
</form>

运行视图以查看结果。如果没有错误，您将在页面上看到一个 input file。

脚本

现在在 resources/scripts 中创建我们的脚本文件，命名为 piczone.script.blade.php。

<script>
   $(function () {
       $('#{{ $id }}').picZone({!! json_encode($params) !!});
   })
</script>

在此文件中，我们将返回合并的 jQuery 插件和前面示例中生成的数据。

将其添加到我们的视图中... 看看包含 script() 指令的更完整的示例。

<html>
<head>
    <link rel="stylesheet" href="bower_components/piczone/css/piczone.css">
</head>
<body>

<formmethod="post" enctype="multipart/form-data">
    {!! scriptHelper()->type('piczone')->input() !!}
    <button type="submit">Submit</button>
</form>

<script type="text/javascript" src="bower_components/jquery-dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/piczone/i18n/en.i18n.piczone.js"></script>
<script type="text/javascript" src="bower_components/piczone/js/piczone.js"></script>
{!! scriptHelper()->script() !!}

</body>
</html>

完成！我们的助手将为该脚本生成一个唯一的 ID。

传递参数

我们可以轻松地为我们 piczone.input.blade.php 或 piczone.script.blade.php 传递自定义参数，以下是一个示例

scriptHelper()->type('piczone')->class('picZone')->camera(false)->lang('pt_BR')->widthMax(600)->keepCalm('beba um café')->input()

上述示例的结果将是

<!-- scriptHelper()->type('piczone')->class('picZone')->camera(false)->lang('pt_BR')->widthMax(600)->keepCalm('beba um café')->input() -->
<input id="piczone-0" type="file" class="picZone">

<!-- scriptHelper()->script() -->
<script>
    $(function () {
        $('#piczone-0').picZone({
        'camera' : false,
        'lang' : 'pt_BR',
        'widthMax' : 600,
        'keepCalm' : 'beba um café'
        })
    })
</script>

是的，这有点神奇。 scriptHelper 捕获了您声明的函数，并将所有内容放入 $params 变量中，这样就可以直接在 PHP 中处理 JavaScript 指令。另一个示例

piczone.script.blade.php

<script>
    $(function () {
        $('#{{ $id }}').picZone({
            'camera' : {{ (isset($camera) and $camera)  ? 'true' : 'false' }},
            'lang' : {{ (isset($ptbr) and $ptbr)  ? 'pt_BR' : 'en' }}
        })
    })
</script>

index.blade.php

<!-- scriptHelper()->type('piczone')->camera(false)->ptbr(true)->input() -->
<input id="piczone-0" type="file">

<!-- scriptHelper()->script() -->
<script>
    $(function () {
        $('#piczone-0').picZone({
        'camera' : false,
        'lang' : 'pt_BR'
        })
    })
</script>

在这个例子中，我们没有使用任何预定义的方法创建 ptbr()，并传递了 true，然后在 piczone.script.blade.php 中处理它，就这样。

wiidoo / scripts-helper

维护者

详细信息

README

安装

配置文件

scriptsHelper.php

教程

输入

脚本

传递参数