自己动手，丰衣足食.，自己动手丰衣足食

집

백엔드 개발

PHP 튜토리얼

自己动手，丰衣足食.，自己动手丰衣足食_PHP教程

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 13, 2016 am 10:11 AM

절

自己动手，丰衣足食.，自己动手丰衣足食

时下grunt非常的火啊，用着虽然很爽，但是它的配置确实很烦。如果之前没有用过，想要一下子熟练驾驭它，有一定的学习成本，而且还要装node这个大家伙，项目之初我们选择了compiler.jar这个轻量的工具进行打包。我一直在寻思着，如何编写一键打包工具。之前呢是手工的拼接好有的js文件，做成符合compiler.jar打包文件所要求的批处理文件，然后运行这个批处理，生成我们需要的js和css文件。随着js文件数量的增长，纯手工拼接这些文件的地址就变得非常考验人的耐心了，而且还容易漏掉或重复某些文件，于是“一键打包工具”的编写就变得刻不容缓了。下面是一个真实的index.html文件的一部分：

<span><span><!</span><span>DOCTYPE html</span><span>></span>
<span><</span><span>html</span><span>></span>
<span><</span><span>head</span><span>></span>
    <span><</span><span>meta </span><span>charset</span><span>="utf-8"</span><span>></span>
    <span><</span><span>meta </span><span>http-equiv</span><span>="X-UA-Compatible"</span><span> content</span><span>="IE=edge,chrome=1"</span><span>></span>
    <span><</span><span>meta </span><span>name</span><span>="viewport"</span><span> content</span><span>="target-densitydpi=device-dpi, initial-scale=1, user-scalable=0, maximum-scale=1"</span><span>></span>
     <span><!--</span><span>隐藏浏览器的工具栏和菜单栏,对iso系统起用</span><span>--></span>
    <span><!--用于<strong>PC上</strong>调式，不参与合并压缩</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/data/database.js"</span><span> name</span><span>="noBuild"</span><span>></</span><span>script</span><span>></span>
    <span><!--</span><span>Iframe加载处理</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/LoadMode.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/core/jQuery.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/underscore.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/snap.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/pixi.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/core/Xut.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/isMobile.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/aaronRequire.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/nextTick.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Config.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Object.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Function.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Array.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/video.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 自定义事件，合集处理，iframe通讯 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/event/asEvented.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/message/pms.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span>插件</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/cordova.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/readAssetsFilePlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/initDatabase.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/web.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/video.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/openAppPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/tabletPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/statusbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/iap.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/AppStoreLink.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/downloadPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/xxteManager.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/unzipPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/readPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/deletePlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><!--</span><span> 动画库 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/TweenMax.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/plugins/ThrowPropsPlugin.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/PptAnimation.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/CanvasAnimation.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/dragdrop/Draggable.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/dragdrop/dragdrop.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/iscroll.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/hammer.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/svgicons-config.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/svgicons.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SpriteA.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/util/Utils.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/LocalStorage.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/ScriptLoad.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/ExecuteSql.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/PromptNotice.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/edge.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 配置文件，数据文件，结构文件 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/data/Store.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/data/StoreManager.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 数据初始化 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Main.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Initialize.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneLayout.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneFactory.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneController.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/LoadScene.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Dispatcher.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 工具栏 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/Navbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/sToolbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/fToolbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/searchBar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/bookMark.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 多线程任务片 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/Buffer.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskContents.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskComponents.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskBackground.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskContainer.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Parser.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Collection.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/MultiEvent.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/PageBase.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Page.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Master.js"</span><span>></</span><span>script</span><span>></span>


    <span><!--</span><span> 页面管理模块 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/transform/Translation.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/OverrideApi.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/Abstract.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/Emitter.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/PageMgr.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/MasterMgr.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/Compiler.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/ViewModel.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/SwitchPage.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/EventDrive.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span>热点管理</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignAutoRun.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignTrigger.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignSuspend.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignOriginal.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignRecovery.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/ProcessControl.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/Binding.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 适配器,用于处理热点 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Content.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Widget.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Media.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Action.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-ShowNote.js"</span><span>></</span><span>script</span><span>></span>

     <span><!--</span><span>多媒体对象 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/Audio.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/Video.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/AudioManager.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/VideoManager.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span>文本热点</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/content/conFilter.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/content/conAlgorithm.js"</span><span>></</span><span>script</span><span>></span>
<br /></span>

로그인 후 복사

后面还有很长，bug,活人不能被尿憋死，办法总比问题多。我是会一点php的，php在处理文件方面是很拿手的，是时候让它发挥点作用了。于是我想到了用php去自动提出index里边的js和css，然后按指定的格式生成批处理文件，在后台用静默方式运行这个批处理，最后把结果返回给显示器。这样我就可以坐享其成了。想想都有点小激动哟，于是简单的写了一个界面.

接下来就是实现功能了，先不着急编写代码，分析下需求：

1. 遍历index.html文件，提取js文件或css文件.

2. 对这文件进行过虑，因为有些是注释掉的，有些是调式用的。

3. 生成对应的批处理文件

4. 执行批处理文件

5. 显示处理结果

即然有两种情况，我就用一个工厂模式来适配，方便以后扩展其它类型，目光要放长远一点。即然工厂都有了，那索性再来一个接口,约定都必需要实现“接收请求”和“输出结果”这两个接口。再想想处理js和css都可能会有相同的功能，让它们继承一个父类可以使代码复用，于是继承也先用上。目前的设计应当可以满足我的要求了，于是开始编写php代码.

<?<span>php
</span><span>header</span>("Content-type: text/html; charset=utf-8"<span>);

</span><span>/*</span><span>*
 * 根据index.html文件中引用的js，生成compressJs.bat
 * @author frog <278500368@qq.com>
 * @date 2014-11-17
 </span><span>*/</span>

<span>interface</span><span> ICompress {
    </span><span>/*</span><span>*
     * 处理用户请求
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span><span> request();

    </span><span>/*</span><span>*
     * 处理输出结果
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span><span> render();
}

</span><span>class</span><span> BaseCompress {
    </span><span>public</span> <span>$content</span><span>;
    </span><span>public</span> <span>$outPath</span><span>;
    </span><span>public</span> <span>$isAuto</span><span>;

    </span><span>public</span> <span>function</span> __construct(<span>$isAuto</span>=<span>false</span><span>){
        </span><span>$outPath</span> = '_file'<span>;
        </span><span>if</span>(!<span>is_dir</span>(<span>$outPath</span><span>)){
            </span><span>mkdir</span>(<span>$outPath</span><span>);
        }
        </span><span>$this</span>->outPath = <span>$outPath</span><span>;
        </span><span>$this</span>->isAuto = <span>$isAuto</span><span>;
    }


    </span><span>/*</span><span>*
     * 运行批处理
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span> runBat(<span>$name</span><span>){

    }
}

</span><span>/*</span><span>*
 * 压缩javascript文件
 * 合并javascript文件
 </span><span>*/</span>
<span>class</span> CompressJS <span>extends</span> BaseCompress <span>implements</span><span> ICompress {

    </span><span>/*</span><span>*
     * 处理用户请求
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span><span> request(){

    }

    </span><span>/*</span><span>*
     * 处理输出结果
     * @return [type] [description]
     </span><span>*/</span>
        <span>public</span> <span>function</span><span> render(){}

}

</span><span>/*</span><span>*
 * 压缩样式文件
 </span><span>*/</span>
<span>class</span> CompressCSS <span>extends</span> BaseCompress <span>implements</span><span> ICompress {

    </span><span>public</span> <span>function</span><span> request(){
 
    }

    </span><span>/*</span><span>*
     * 处理输出结果
     * @return [type] [description]
     </span><span>*/</span>
         <span>public</span> <span>function</span><span> render(){}
     
}

</span><span>/*</span><span>*
 * 工厂类
 </span><span>*/</span>
<span>class</span><span> Factory {

    </span><span>public</span> <span>static</span> <span>function</span> create(<span>$type</span>,<span>$isAuto</span><span>){
        </span><span>$ob</span> = <span>null</span><span>;
        </span><span>switch</span> (<span>$type</span><span>) {
            </span><span>case</span> 'js':
                <span>$ob</span> = <span>new</span> CompressJS(<span>$isAuto</span><span>);
                </span><span>break</span><span>;
            </span><span>case</span> 'css':
                <span>$ob</span> = <span>new</span> CompressCSS(<span>$isAuto</span><span>);
                </span><span>break</span><span>;
            </span><span>default</span>:
                <span>#</span><span> code...</span>
                <span>break</span><span>;
        }
        </span><span>return</span> <span>$ob</span><span>;
    }
}</span>

로그인 후 복사

然后是调用处理：

<span>//</span><span>处理ajax请求</span>
<span>if</span>(<span>isset</span>(<span>$_POST</span>['submit'<span>])){
    </span><span>//</span><span>是否自动执行批处理</span>
    <span>$isAuto</span> = <span>$_POST</span>['zip'] === 'true' ? <span>true</span> : <span>false</span><span>;
    </span><span>//</span><span>处理类型</span>
    <span>$type</span> = <span>$_POST</span>['type'<span>];

    </span><span>$c</span> = Factory::create(<span>$type</span>,<span>$isAuto</span><span>);<br />
    //接口方法
    </span><span>$c</span>-><span>request();
    </span><span>$c</span>-><span>render();

}</span><span>else</span><span>{
    </span><span>echo</span> '请使用静态页访问本程序:<a href="index.html">点此进入</a>'<span>;
}</span>

로그인 후 복사

大致的骨架就出来了。具体的填码过程就比较简单了。稍微有点难度的就是执行批处理这个一方法.

是网上提供的方法，以后可能用的上，这里特意贴一下：

<span>public</span> <span>function</span> runBat(<span>$name</span><span>){
        </span><span>if</span>(!<span>file_exists</span>(<span>$name</span>) || !<span>$this</span>-><span>isAuto){
            </span><span>return</span><span>;
        }
        </span><span>//</span><span>转入后台处理</span>
        @<span>exec</span>(<span>pclose</span>(<span>popen</span>("start /B ". <span>escapeshellcmd</span>(<span>$name</span>), "r"<span>)));
    }</span>

로그인 후 복사

在前面的index.html中，有一个name="noBuild"这个是我人为添加的，这是因为我要过滤这种标识的js文件，这样以后要过滤别的文件，也只要添加这个标识就可以了，不用改php代码。由于是内部使用，没有做表单项来指定工程的路径，默认就是index.html所处的上级目录即为工程目录。这样设计简化了操作，提高了效率。

关于遍历特定的文件，我推荐glob函数，很简洁的方案：

<span>$files</span> = <span>glob</span>(<span>$path</span>.'/*.css',GLOB_NOSORT);

로그인 후 복사

下面是工程目录结构图：

再来一张运行效果图：

最后是处理结果图：

终于不用写grunt的配置和安装node这个家伙了，再也不担心更新的时候，从svn上拉下来一堆node的东西，是时候和它们说再见了：

好像忘了展示前端代码了：

<span>/*</span><span>*
 * 选项卡类
 * @param {string} id 选项卡的ID
 </span><span>*/</span>
<span>function</span><span> Tabs(id){
    </span><span>var</span> node = document.querySelector('#'+<span>id);
    </span><span>var</span> selected = node.querySelector('.selected'<span>);
    </span><span>this</span>.selected =<span> selected;
    </span><span>this</span>.node =<span> node;
    </span><span>this</span><span>.bindEvent();
}

</span><span>/*</span><span>*
 * 切换选项卡
 * @param  {object} event 事件
 * @return {[type]}   [description]
 </span><span>*/</span><span>
Tabs.prototype.change </span>= <span>function</span><span>(event){
    </span><span>var</span> element =<span> event.target;
    </span><span>if</span>(element.tagName.toLowerCase()=='li'<span>){
        </span><span>if</span>(element.className=='selected'<span>){
            </span><span>return</span><span>;
        }
    }</span><span>else</span><span>{
        </span><span>while</span>(element != <span>this</span><span>.node){
            element </span>=<span> element.parentNode;
            </span><span>if</span>(element.tagName.toLowerCase()=='li'<span>){
                </span><span>break</span><span>;
            }
        }
        </span><span>if</span>(element == <span>this</span>.node) <span>return</span><span>;
    }
    </span><span>this</span>.selected.removeAttribute('class'<span>);
    element.className </span>= 'selected'<span>;
    </span><span>this</span>.selected =<span> element;
    </span><span>this</span><span>.content();
}

Tabs.prototype.content </span>= <span>function</span><span>(){
  </span><span>var</span> form =<span> document.form1;

    </span><span>switch</span>(<span>this</span><span>.getTabType()){
      </span><span>case</span> 'js'<span>:
        form.style.display </span>= 'block'<span>;
        form.children[</span>0].innerHTML = '自动压缩JS'<span>;
        </span><span>break</span><span>;
      </span><span>case</span> 'css'<span>:
        form.style.display </span>= 'block'<span>;
        form.children[</span>0].innerHTML = '自动压缩CSS'<span>;
        </span><span>break</span><span>;
      </span><span>default</span><span>:
    }
}</span>

로그인 후 복사

会前端和后端，就是这么任性。轻轻一点，告别烦恼！造自己的工具，让别人去苦逼吧，So easy!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7681

Cakephp 튜토리얼

1393

C# 튜토리얼

1209

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

ALIPAY PHP SDK 전송 오류 : '클래스 부호 데이터를 선언 할 수 없음'의 문제를 해결하는 방법은 무엇입니까? Apr 01, 2025 am 07:21 AM

Alipay PHP ...

세션 납치는 어떻게 작동하며 PHP에서 어떻게 완화 할 수 있습니까? Apr 06, 2025 am 12:02 AM

세션 납치는 다음 단계를 통해 달성 할 수 있습니다. 1. 세션 ID를 얻으십시오. 2. 세션 ID 사용, 3. 세션을 활성 상태로 유지하십시오. PHP에서 세션 납치를 방지하는 방법에는 다음이 포함됩니다. 1. 세션 _regenerate_id () 함수를 사용하여 세션 ID를 재생산합니다. 2. 데이터베이스를 통해 세션 데이터를 저장하십시오.

JWT (JSON Web Tokens) 및 PHP API의 사용 사례를 설명하십시오. Apr 05, 2025 am 12:04 AM

JWT는 주로 신분증 인증 및 정보 교환을 위해 당사자간에 정보를 안전하게 전송하는 데 사용되는 JSON을 기반으로 한 개방형 표준입니다. 1. JWT는 헤더, 페이로드 및 서명의 세 부분으로 구성됩니다. 2. JWT의 작업 원칙에는 세 가지 단계가 포함됩니다. JWT 생성, JWT 확인 및 Parsing Payload. 3. PHP에서 인증에 JWT를 사용하면 JWT를 생성하고 확인할 수 있으며 사용자 역할 및 권한 정보가 고급 사용에 포함될 수 있습니다. 4. 일반적인 오류에는 서명 검증 실패, 토큰 만료 및 대형 페이로드가 포함됩니다. 디버깅 기술에는 디버깅 도구 및 로깅 사용이 포함됩니다. 5. 성능 최적화 및 모범 사례에는 적절한 시그니처 알고리즘 사용, 타당성 기간 설정 합리적,

확실한 원칙과 PHP 개발에 적용되는 방법을 설명하십시오. Apr 03, 2025 am 12:04 AM

PHP 개발에서 견고한 원칙의 적용에는 다음이 포함됩니다. 1. 단일 책임 원칙 (SRP) : 각 클래스는 하나의 기능 만 담당합니다. 2. Open and Close Principle (OCP) : 변경은 수정보다는 확장을 통해 달성됩니다. 3. Lisch의 대체 원칙 (LSP) : 서브 클래스는 프로그램 정확도에 영향을 미치지 않고 기본 클래스를 대체 할 수 있습니다. 4. 인터페이스 격리 원리 (ISP) : 의존성 및 사용되지 않은 방법을 피하기 위해 세밀한 인터페이스를 사용하십시오. 5. 의존성 반전 원리 (DIP) : 높고 낮은 수준의 모듈은 추상화에 의존하며 종속성 주입을 통해 구현됩니다.

시스템 재시작 후 UnixSocket의 권한을 자동으로 설정하는 방법은 무엇입니까? Mar 31, 2025 pm 11:54 PM

시스템이 다시 시작된 후 UnixSocket의 권한을 자동으로 설정하는 방법. 시스템이 다시 시작될 때마다 UnixSocket의 권한을 수정하려면 다음 명령을 실행해야합니다.

phpstorm에서 CLI 모드를 디버그하는 방법은 무엇입니까? Apr 01, 2025 pm 02:57 PM

phpstorm에서 CLI 모드를 디버그하는 방법은 무엇입니까? PHPStorm으로 개발할 때 때때로 CLI (Command Line Interface) 모드에서 PHP를 디버그해야합니다 ...

PHP에서 늦은 정적 결합을 설명하십시오 (정적 : :). Apr 03, 2025 am 12:04 AM

정적 바인딩 (정적 : :)는 PHP에서 늦은 정적 바인딩 (LSB)을 구현하여 클래스를 정의하는 대신 정적 컨텍스트에서 호출 클래스를 참조 할 수 있습니다. 1) 구문 분석 프로세스는 런타임에 수행됩니다. 2) 상속 관계에서 통화 클래스를 찾아보십시오. 3) 성능 오버 헤드를 가져올 수 있습니다.