스스로 행하고 음식과 의복을 충분히 갖추라.-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

스스로 행하고 음식과 의복을 충분히 갖추라.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 08, 2016 am 09:32 AM

bugcsshtmlindexphp

Grunt는 요즘 매우 인기가 많습니다. 사용하기는 재미있지만 구성이 정말 짜증스럽습니다. 이전에 사용해 본 적이 없고 빨리 익히고 싶다면 일정한 학습 비용이 발생하며 프로젝트 시작 시 패키징을 위해 경량 도구 컴파일러.jar을 선택했습니다. . 원클릭 패키징 도구를 작성하는 방법에 대해 고민해왔습니다. 이전에는 일부 js 파일을 컴파일러.jar 패키징 파일의 요구 사항을 충족하는 배치 파일에 수동으로 연결한 다음 이 배치를 실행하여 필요한 js 및 css 파일을 생성했습니다. js 파일의 수가 많아질수록 이들 파일의 주소를 수동으로 이어붙이는 일은 매우 까다로워지고, 특정 파일을 놓치거나 복제하는 일도 쉽기 때문에 '원클릭 패키징 도구' 작성이 시급해집니다. 다음은 실제 index.html 파일의 일부입니다:

<spanmicrosoft yahei><span><span>DOCTYPE html</span><span>></span>
<span><span>html</span><span>></span>
<span><span>head</span><span>></span>
    <span><span>meta </span><span>charset</span><span>="utf-8"</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>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>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>script </span><span>src</span><span>="lib/LoadMode.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/core/underscore.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/animate/pixi.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/core/isMobile.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/core/nextTick.js"</span><span>></span><span>script</span><span>></span>
    <span><span>script </span><span>src</span><span>="lib/Config.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/core/lang/Function.js"</span><span>></span><span>script</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>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>script </span><span>src</span><span>="lib/core/event/asEvented.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/plugin/cordova.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/plugin/initDatabase.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/plugin/video.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/plugin/tabletPlugin.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/plugin/iap.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/plugin/downloadPlugin.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/plugin/unzipPlugin.js"</span><span>></span><span>script</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>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>script </span><span>src</span><span>="lib/animate/TweenMax.min.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/animate/PptAnimation.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/animate/dragdrop/Draggable.min.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/animate/iscroll.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/animate/SVGIcons/svgicons-config.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/animate/SpriteA.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/util/LocalStorage.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/util/ExecuteSql.js"</span><span>></span><span>script</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>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>script </span><span>src</span><span>="lib/data/Store.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/Main.js"</span><span>></span><span>script</span><span>></span>
    <span><span>script </span><span>src</span><span>="lib/Initialize.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/scenario/SceneFactory.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/LoadScene.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/toolbar/Navbar.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/toolbar/fToolbar.js"</span><span>></span><span>script</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>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>script </span><span>src</span><span>="lib/threadTask/Buffer.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/threadTask/TaskComponents.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/threadTask/TaskContainer.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/pageBase/Collection.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/pageBase/PageBase.js"</span><span>></span><span>script</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>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>script </span><span>src</span><span>="lib/controller/transform/Translation.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/controller/Abstract.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/controller/PageMgr.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/controller/Compiler.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/controller/SwitchPage.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/scheduler/AssignAutoRun.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/scheduler/AssignSuspend.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/scheduler/AssignRecovery.js"</span><span>></span><span>script</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>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>script </span><span>src</span><span>="lib/directives/dir-Content.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/directives/dir-Media.js"</span><span>></span><span>script</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>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>script </span><span>src</span><span>="lib/component/media/Audio.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/component/media/AudioManager.js"</span><span>></span><span>script</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>script </span><span>src</span><span>="lib/component/content/conFilter.js"</span><span>></span><span>script</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></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></spanmicrosoft>

아직 갈 길이 멀다, 벌레, 살아있는 사람이 오줌을 누다 목이 막혀 죽을 수는 없다, 언제나 문제보다는 해결책이 더 많다. 나는 PHP에 대해 조금 알고 있습니다. PHP는 파일 처리에 매우 능숙합니다. 이제 PHP가 그 역할을 하게 될 것입니다. 그래서 PHP를 사용하여 인덱스에서 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 
 * @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);

다음은 프로젝트 디렉토리 구조 다이어그램입니다.

또 다른 작업 렌더링:

마지막 처리 결과 사진입니다:

마침내 더 이상 그런트 구성을 작성하고 노드를 설치할 필요가 없습니다. 이제 업데이트할 때 svn에서 많은 노드 항목을 끌어내리는 것에 대해 걱정할 필요가 없습니다.

프런트엔드 코드를 표시하는 것을 잊어버린 것 같습니다.

<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>

저는 프론트엔드와 백엔드를 모두 알고 있어서 의욕이 넘칩니다. 클릭 한 번으로 걱정은 이제 안녕! 자신만의 도구를 만들고 다른 사람들이 어려운 작업을 하도록 하세요. 정말 쉽습니다!

위 내용은 스스로 할 수 있는 방법과 충분한 음식과 의복을 갖추는 방법에 대한 소개입니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.

성명

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

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 중국어 버전

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

Dreamweaver Mac版

시각적 웹 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.