0

0

自己动手,丰衣足食.

php中文网

php中文网

发布时间:2016-08-08 09:32:39

|

1084人浏览过

|

来源于php中文网

原创

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

<spanMicrosoft YaHei';"><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><!--用于PC上调式,不参与合并压缩</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所处的上级目录即为工程目录。这样设计简化了操作,提高了效率。

Otter.ai
Otter.ai

一个自动的会议记录和笔记工具,会议内容生成和实时转录

下载

关于遍历特定的文件,我推荐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!

以上就介绍了自己动手,丰衣足食.,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

46

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

178

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

51

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

92

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

102

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

227

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

532

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

171

2026.03.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 13.4万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 11.3万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 1.0万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号