javascript模版封装

环太平洋 2016-02-29 09:06:09

最近在做个附件上传控件的封装，里面有个javascript的template，想封装后在其它模块也能引用，想请问下这类文件应该怎么封装，封装成什么类型文件呢？然后如何引用？



<script type="text/template" id="qq-template">

        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">

            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>

                <span class="qq-upload-drop-area-text-selector"></span>

            </div>

            <div class="qq-upload-button-selector qq-upload-button">

                <div>上传文件</div>

            </div>

            <span class="qq-drop-processing-selector qq-drop-processing">

                <span>Processing dropped files...</span>

                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>

            </span>

            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">

                <li>

                    <div class="qq-progress-bar-container-selector">

                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>

                    </div>

                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>

                    <span class="qq-upload-file-selector qq-upload-file"></span>

                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>

                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">

                    <span class="qq-upload-size-selector qq-upload-size"></span>

                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">取消</button>

                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">重试</button>

                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">删除</button>

                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>

                </li>

            </ul>

</script>