js实现html、css、js代码高亮显示并且可拖拽效果代码
代码语言:html
所属分类:其他
代码描述:js实现html、css、js代码高亮显示并且可拖拽效果代码
代码标签: 、 css 、 js 高亮 显示 并且 可拖 拽 效果 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <style> * { box-sizing: border-box; } html { height: 100%; } body { overflow-x: hidden; font-family: sans-serif; color: white; background: #343436; padding: 0; margin: 0; line-height: 1.35; min-height: 100%; display: flex; } .panel-accordion { position: absolute; top: 0; right: 0; left: 0; min-height: 100%; border-top: 1px solid #666; border-left: 1px solid rgba(0, 0, 0, 0.5); display: flex; } .code-panel { padding-left: 20px; width: 33.333%; float: left; position: relative; min-height: 100%; background: #1D1F20; display: flex; flex-direction: column; flex-grow: 1; } .box { position: relative; height: 100%; width: 100%; flex-grow: 1; } .code-panel-dragbar { position: absolute; left: 0; top: 0; width: 20px; height: 100%; background-color: #505050; background-image: linear-gradient(to right, #505050, #383838); cursor: col-resize; border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.5); } .code-panel-titlebar { background-color: #1A1C1D; padding: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .code-panel-titlebar-title { font-weight: bold; font-size: 18px; display: inline-block; transition: transform 0.2s; transform-origin: left center; } .is-horiz-skinny .code-panel-titlebar-title { transform: translate(-16px, -5px) rotate(90deg) scale(0.9); pointer-events: none; } .code-panel-content { padding: 10px; font-size: 14px; white-space: pre-wrap; margin: 0; border-top: 1px solid hsla(0, 0%, 100%, 0.1); min-width: 200px; color: #DEF; } [id^="codepen-syntax-demo-"] { padding: 0.5em; min-height: 100%; } .CodeMirror-code pre { margin-top: 0; margin-bottom: 0; } </style> <style> .box pre { font-family: 'Source Code Pro', Monaco, Consolas, monospace, "Andale Mono", "lucida console", "Courier New"; } .box, .editor .top-boxes, .CodeMirror-gutter-wrapper, #example-embed { background: hsl(250, 14%, 18%); /* e.g. // comments */ } .box .cm-tag.cm-bracket, .editor .top-boxes .cm-tag.cm-bracket, .CodeMirror-gutter-wrapper .cm-tag.cm-bracket, #example-embed .cm-tag.cm-bracket, .box .cm-operator, .editor .top-boxes .cm-operator, .CodeMirror-gutter-wrapper .cm-operator, #example-embed .cm-operator, .box .cm-string-2, .editor .top-boxes .cm-string-2, .CodeMirror-gutter-wrapper .cm-string-2, #example-embed .cm-string-2 { color: hsl(250, 12%, 46%); } .box pre, .editor .top-boxes pre, .CodeMirror-gutter-wrapper pre, #example-embed pre { color: hsl(250, 24%, 74%); } .box .cm-attribute, .editor .top-boxes .cm-attribute, .CodeMirror-gutter-wrapper .cm-attribute, #example-embed .cm-attribute { color: hsl(250, 98%, 86%); } .box .cm-def, .editor .top-boxes .cm-def, .CodeMirror-gutter-wrapper .cm-def, #example-embed .cm-def { color: hsl(30, 100%, 66%); } .box .cm-variable-2, .editor .top-boxes .cm-variable-2, .CodeMirror-gutter-wrapper .cm-variable-2, #example-embed .cm-variable-2 { color: hsl(250, 98%, 86%); } .box #html-box .cm-atom, .editor .top-boxes #html-box .cm-atom, .CodeMirror-gutter-wrapper #html-box .cm-atom, #example-embed #html-box .cm-atom, .box .cm-string, .editor .top-boxes .cm-string, .CodeMirror-gutter-wrapper .cm-string, #example-embed .cm-string { color: hsl(30, 100%, 80%); } .box .cm-property, .editor .top-boxes .cm-property, .CodeMirror-gutter-wrapper .cm-property, #example-embed .cm-property, .box .cm-meta, .editor .top-boxes .cm-meta, .CodeMirror-gutter-wrapper .cm-meta, #example-embed .cm-meta { color: hsl(250, 96%, 78%); } .box .cm-tag, .editor .top-boxes .cm-tag, .CodeMirror-gutter-wrapper .cm-tag, #example-embed .cm-tag { color: hsl(250, 100%, 96%); } .box .cm-variable, .editor .top-boxes .cm-variable, .CodeMirror-gutter-wrapper .cm-variable, #example-embed .cm-variable, .box .cm-keyword, .editor .top-boxes .cm-keyword, .CodeMirror-gutter-wrapper .cm-keyword, #example-embed .cm-keyword, .box .cm-qualifier, .editor .top-boxes .cm-qualifier, .CodeMirror-gutter-wrapper .cm-qualifier, #example-embed .cm-qualifier, .box #css-box .cm-tag, .editor .top-boxes #css-box .cm-tag, .CodeMirror-gutter-wrapper #css-box .cm-tag, #example-embed #css-box .cm-tag { color: hsl(250, 100%, 96%); } .box .cm-keyword, .editor .top-boxes .cm-keyword, .CodeMirror-gutter-wrapper .cm-keyword, #example-embed .cm-keyword, .box .cm-atom, .editor .top-boxes .cm-atom, .CodeMirror-gutter-wrapper .cm-atom, #example-embed .cm-atom, .box #css-box .cm-variable, .editor .top-boxes #css-box .cm-variable, .CodeMirror-gutter-wrapper #css-box .cm-variable, #example-embed #css-box .cm-variable { color: hsl(30, 100%, 80%); } .box .cm-number, .editor .top-boxes .cm-number, .CodeMirror-gutter-wrapper .cm-number, #example-embed .cm-number { color: hsl(30, 100%, 80%); } .box .cm-comment, .editor .top-boxes .cm-comment, .CodeMirror-gutter-wrapper .cm-comment, #example-embed .cm-comment { color: hsla(250, 12%, 46%, 0.8); } .box .CodeMirror-linenumber, .editor .top-boxes .CodeMirror-linenumber, .CodeMirror-gutter-wrapper .CodeMirror-linenumber, #example-embed .CodeMirror-linenumber { color: hsla(250, 14%, 30%, 0.5); } .box .cm-strong, .editor .top-boxes .cm-strong, .CodeMirror-gutter-wrapper .cm-strong, #example-embed .cm-strong, .box .cm-em, .editor .top-boxes .cm-em, .CodeMirror-gutter-wrapper .cm-em, #example-embed .cm-em, .box .cm-builtin, .editor .top-boxes .cm-builtin, .CodeMirror-gutter-wrapper .cm-builtin, #example-embed .cm-builtin, .box .cm-header, .editor .top-boxes .cm-header, .CodeMirror-gutter-wrapper .cm-header, #example-embed .cm-header, .box .cm-unit, .editor .top-boxes .cm-unit, .CodeMirror-gutter-wrapper .cm-unit, #example-embed .cm-unit { color: red; text-decoration: underline; } </style> </head> <body translate="no" > <div class="panel-accordion"> <div class="code-panel code-panel-1"> <div class="code-panel-dragbar"></div> <header class="code-panel-titlebar"> <span class="code-panel-titlebar-title">HTML</span> </header> <section id="codepen-syntax-demo-html" class="box box-html"> <!--[if lt IE]> <style type="text/css"> body { display: none; } </style> <![endif]--> <div id="html-box" class="CodeMirror-code"> <pre><span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">class</span>=<span class="cm-string">"class-name"</span> <span class="cm-attribute">id</span>=<span class="cm-string">"id-name"</span><span class="cm-tag cm-bracket">></span><br> <span class="cm-comment"><!--[if lt IE]></span><br> <span class="cm-comment"><style type="text/css">body { display: none; }</style></span><br> <span class="cm-comment"><![endif]--></span><br> <br> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>Heading<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span><br> <br> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Hello world!<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span><br> <br> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span><br> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"first"</span><span class="cm-tag cm-bracket">></span>Lorem ipsum dolor sit amet, conse.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span><br> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"second"</span><span class="cm-tag cm-bracket">></span>Aliquam tincidunt mauris eu risus.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span><br> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"third"</span><span class="cm-tag cm-bracket">></span>Vestibulum auctor dapibus neque.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span><br> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span><br> <br> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">img</span> <span class="cm-attribute">src</span>=<span class="cm-string">"path/to/reallyCoolImage.jpg"</span> <span class="cm-attribute">alt</span>=<span class="cm-string">"Cool Image"</span> <span class="cm-tag cm-bracket">/></span><br><span class="cm-tag cm-bracket"></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span><br><br><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"js/vendor/jquery-1.11.3.min.js"</span><span class="cm-tag cm-bracket">></span><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></pre> </div> </section> </div> <div class="code-panel code-panel-2"> <div class="code-panel-dragbar"></div> <header class="code-panel-titlebar"> <span class="code-panel-titlebar-title">CSS</span> </header> <section id="codepen-syntax-demo-css" class="box box-css"> <div id="css-box" class="CodeMirror-code"> <pre><span class="cm-tag">html</span>, <span class="cm-tag">body</span> {<br> <span class="cm-property">font-size</span>: <span class="cm-number">10px</span>;<br> <span class="cm-property">box-sizing</span>: <span class="cm-atom">border-box</span>;<br>}<br><br><span class="cm-variable-2">@variable</span>: <span class="cm-atom">#ff0000</span>;<br><span class="cm-variable-2">@var2</span>: <span class="cm-keyword">blue</span>;<br><span class="cm-variable-2">@var3</span>: <span class="cm-number">33.3333%</span>;<br><br><span class="cm-qualifier">.box</span> {<br> <span class="cm-property">background</span>: <span class="cm-variable-2">@variable</span>;<br> <span class="cm-property">width</span>: <span class="cm-variable-2">@var3</span>;<br> <span class="cm-property">text-justify</span>: <span class="cm-variable">distribute-all-lines</span>;<br> <span class="cm-property">min-height</span>: <span class="cm-number">100%</span>;<br> <span class="cm-property">position</span>: <span class="cm-atom">absolute</span>;<br> <span class="cm-property">top</span>: <span class="cm-number">0</span>;<br> <span class="cm-property">left</span>: <span class="cm-number">0</span>;<br> <span class="cm-property">padding</span>: <span class="cm-number">2px</span>;<br> <span class="cm-property">font-size</span>: <span class="cm-number">2rem</span><span class="cm-keyword">!important</span>;<br><br> <span class="cm-def">@media</span> <span class="cm-keyword">only</span> <span class="cm-attribute">screen</span> <span class="cm-keyword">and</span> (<span class="cm-property">max-width</span>: <span class="cm-number">529px</span>) {<br> <span class="cm-property">width</span>: <span class="cm-number">100%</span>;<br> }<br>}<br><br><span class="cm-comment">// Add a line break between succeeding elements</span><br>* + * { <span class="cm-property">margin-top</span>: <span class="cm-number">1.5em</span> }<br><br><span class="cm-tag">h2</span>:<span class="cm-variable-3">after</span> {<br> <span class="cm-property">content</span>: <span class="cm-string">"\00a9"</span>;<br> <span class="cm-property">display</span>: <span class="cm-atom">block</span>;<br> <span class="cm-property">height</span>: <span class="cm-number">1px</span>;<br> <span class="cm-property">box-shadow</span>: <span class="cm-number">0</span> <span class="cm-number">1px</span> <span class="cm-number">1px</span> <span class="cm-atom">rgba</span>(<span class="cm-number">0</span>,<span class="cm-number">0</span>,<span class="cm-number">0</span>, <span class="cm-number">0.2</span>);<br> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>( <span class="cm-atom">to</span> <span class="cm-atom">right</span>,<br> <span class="cm-keyword">red</span>, <span class="cm-keyword">green</span>);<br>}</pre> </div> </section> </div> <div class="code-panel code-panel-3"> <div class="code-panel-dragbar"></div> <header class="code-panel-titlebar"> <span class="code-panel-titlebar-title">JS</span> </header> <section id="codepen-syntax-demo-js" class="box box-js"> <div id="js-box" class="CodeMirror-code"> <pre><span class="cm-variable">module</span>.<span class="cm-property">exports</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>( <span class="cm-def">grunt</span> ) {<br> <span class="cm-string">"use strict"</span>;<br><br> <span class="cm-keyword">function</span> <span class="cm-def">readOptionalJSON</span>( <span class="cm-def">filepath</span> ) {<br> <span class="cm-keyword">var</span> <span class="cm-def">data</span> <span class="cm-operator">=</span> {};<br> <span class="cm-keyword">try</span> {<br> <span class="cm-variable-2">data</span> <span class="cm-operator">=</span> <span class="cm-variable">JSON</span>.<span class="cm-property">parse</span>( <span class="cm-variable">stripJSONComments</span>(<br> <span class="cm-variable">fs</span>.<span class="cm-property">readFileSync</span>( <span class="cm-variable-2">filepath</span>, { <span class="cm-property">encoding</span>: <span class="cm-string">"utf8"</span> } )<br> ) );<br> } <span class="cm-keyword">catch</span> ( <span class="cm-def">e</span> ) {}<br> <span class="cm-keyword">return</span> <span class="cm-variable-2">data</span>;<br> }<br><br> <span class="cm-keyword">var</span> <span class="cm-def">fs</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>( <span class="cm-string">"fs"</span> ),<br> <span class="cm-def">stripJSONComments</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>( <span class="cm-string">"strip-json-comments"</span> ),<br> <span class="cm-def">gzip</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>( <span class="cm-string">"gzip-js"</span> ),<br> <span class="cm-def">srcHintOptions</span> <span class="cm-operator">=</span> <span class="cm-variable-2">readOptionalJSON</span>( <span class="cm-string">"src/.jshintrc"</span> ),<br> <span class="cm-def">newNode</span> <span class="cm-operator">=</span> <span class="cm-operator">!</span><span class="cm-string-2">/^v0/</span>.<span class="cm-property">test</span>( <span class="cm-variable">process</span>.<span class="cm-property">version</span> ),<br><br> <span class="cm-comment">// Allow to skip jsdom-related tests in Node.js < 1.0.0</span><br> <span class="cm-def">runJsdomTests</span> <span class="cm-operator">=</span> <span class="cm-variable-2">newNode</span> <span class="cm-operator">||</span> ( <span class="cm-keyword">function</span>() {<br> <span class="cm-keyword">try</span> {<br> <span class="cm-variable">require</span>( <span class="cm-string">"jsdom"</span> );<br> <span class="cm-keyword">return</span> <span class="cm-atom">true</span>;<br> } <span class="cm-keyword">catch</span> ( <span class="cm-def">e</span> ) {<br> <span class="cm-keyword">return</span> <span class="cm-atom">false</span>;<br> }<br> } )();<br><br> <span class="cm-comment">// The concatenated file won't pass onevar</span><br> <span class="cm-comment">// But our modules can</span><br> <span class="cm-keyword">delete</span> <span class="cm-variable-2">srcHintOptions</span>.<span class="cm-property">onevar</span>;<br><br> <span class="cm-keyword">if</span> ( <span class="cm-operator">!</span><span class="cm-variable-2">grunt</span>.<span class="cm-property">option</span>( <span class="cm-string">"filename"</span> ) ) {<br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">option</span>( <span class="cm-string">"filename"</span>, <span class="cm-string">"jquery.js"</span> );<br> }<br><br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">initConfig</span>( {<br> <span class="cm-property">pkg</span>: <span class="cm-variable-2">grunt</span>.<span class="cm-property">file</span>.<span class="cm-property">readJSON</span>( <span class="cm-string">"package.json"</span> ),<br> <span class="cm-property">dst</span>: <span class="cm-variable-2">readOptionalJSON</span>( <span class="cm-string">"dist/.destination.json"</span> ),<br> <span class="cm-string cm-property">"compare_size"</span>: {<br> <span class="cm-property">files</span>: [ <span class="cm-string">"dist/jquery.js"</span>, <span class="cm-string">"dist/jquery.min.js"</span> ],<br> <span class="cm-property">options</span>: {<br> <span class="cm-property">compress</span>: {<br> <span class="cm-property">gz</span>: <span class="cm-keyword">function</span>( <span class="cm-def">contents</span> ) {<br> <span class="cm-keyword">return</span> <span class="cm-variable-2">gzip</span>.<span class="cm-property">zip</span>( <span class="cm-variable-2">contents</span>, {} ).<span class="cm-property">length</span>;<br> }<br> },<br> <span class="cm-property">cache</span>: <span class="cm-string">"build/.sizecache.json"</span><br> }<br> },<br> <span class="cm-property">babel</span>: {<br> <span class="cm-property">options</span>: {<br> <span class="cm-property">sourceMap</span>: <span class="cm-string">"inline"</span>,<br> <span class="cm-property">retainLines</span>: <span class="cm-atom">true</span><br> },<br> <span class="cm-property">nodeSmokeTests</span>: {<br> <span class="cm-property">files</span>: {<br> <span class="cm-string cm-property">"test/node_smoke_tests/lib/ensure_iterability.js"</span>:<br> <span class="cm-string">"test/node_smoke_tests/lib/ensure_iterability_es6.js"</span><br> }<br> }<br> },<br> <span class="cm-property">build</span>: {<br> <span class="cm-property">all</span>: {<br> <span class="cm-property">dest</span>: <span class="cm-string">"dist/jquery.js"</span>,<br> <span class="cm-property">minimum</span>: [<br> <span class="cm-string">"core"</span>,<br> <span class="cm-string">"selector"</span><br> ],<br><br> <span class="cm-comment">// Exclude specified modules if the module matching the key is removed</span><br> <span class="cm-property">removeWith</span>: {<br> <span class="cm-property">ajax</span>: [ <span class="cm-string">"manipulation/_evalUrl"</span>, <span class="cm-string">"event/ajax"</span> ],<br> <span class="cm-property">callbacks</span>: [ <span class="cm-string">"deferred"</span> ],<br> <span class="cm-property">css</span>: [ <span class="cm-string">"effects"</span>, <span class="cm-string">"dimensions"</span>, <span class="cm-string">"offset"</span> ],<br> <span class="cm-string cm-property">"css/showHide"</span>: [ <span class="cm-string">"effects"</span> ],<br> <span class="cm-property">sizzle</span>: [ <span class="cm-string">"css/hiddenVisibleSelectors"</span>, <span class="cm-string">"effects/animatedSelector"</span> ]<br> }<br> }<br> },<br> <span class="cm-property">npmcopy</span>: {<br> <span class="cm-property">all</span>: {<br> <span class="cm-property">options</span>: {<br> <span class="cm-property">destPrefix</span>: <span class="cm-string">"external"</span><br> },<br> <span class="cm-property">files</span>: {<br> <span class="cm-string cm-property">"sizzle/dist"</span>: <span class="cm-string">"sizzle/dist"</span>,<br> <span class="cm-string cm-property">"sizzle/LICENSE.txt"</span>: <span class="cm-string">"sizzle/LICENSE.txt"</span>,<br><br> <span class="cm-string cm-property">"npo/npo.js"</span>: <span class="cm-string">"native-promise-only/npo.js"</span>,<br><br> <span class="cm-string cm-property">"qunit/qunit.js"</span>: <span class="cm-string">"qunitjs/qunit/qunit.js"</span>,<br> <span class="cm-string cm-property">"qunit/qunit.css"</span>: <span class="cm-string">"qunitjs/qunit/qunit.css"</span>,<br> <span class="cm-string cm-property">"qunit/LICENSE.txt"</span>: <span class="cm-string">"qunitjs/LICENSE.txt"</span>,<br><br> <span class="cm-string cm-property">"qunit-assert-step/qunit-assert-step.js"</span>:<br> <span class="cm-string">"qunit-assert-step/qunit-assert-step.js"</span>,<br> <span class="cm-string cm-property">"qunit-assert-step/MIT-LICENSE.txt"</span>:<br> <span class="cm-string">"qunit-assert-step/MIT-LICENSE.txt"</span>,<br><br> <span class="cm-string cm-property">"requirejs/require.js"</span>: <span class="cm-string">"requirejs/require.js"</span>,<br><br> <span class="cm-string cm-property">"sinon/fake_timers.js"</span>: <span class="cm-string">"sinon/lib/sinon/util/fake_timers.js"</span>,<br> <span class="cm-string cm-property">"sinon/LICENSE.txt"</span>: <span class="cm-string">"sinon/LICENSE"</span><br> }<br> }<br> },<br> <span class="cm-property">jsonlint</span>: {<br> <span class="cm-property">pkg</span>: {<br> <span class="cm-property">src</span>: [ <span class="cm-string">"package.json"</span> ]<br> }<br> },<br> <span class="cm-property">jshint</span>: {<br> <span class="cm-property">all</span>: {<br> <span class="cm-property">src</span>: [<br> <span class="cm-string">"src/**/*.js"</span>, <span class="cm-string">"Gruntfile.js"</span>, <span class="cm-string">"test/**/*.js"</span>, <span class="cm-string">"build/**/*.js"</span><br> ],<br> <span class="cm-property">options</span>: {<br> <span class="cm-property">jshintrc</span>: <span class="cm-atom">true</span><br> }<br> },<br> <span class="cm-property">dist</span>: {<br> <span class="cm-property">src</span>: <span class="cm-string">"dist/jquery.js"</span>,<br> <span class="cm-property">options</span>: <span class="cm-variable-2">srcHintOptions</span><br> }<br> },<br> <span class="cm-property">jscs</span>: {<br> <span class="cm-property">src</span>: <span class="cm-string">"src"</span>,<br> <span class="cm-property">gruntfile</span>: <span class="cm-string">"Gruntfile.js"</span>,<br><br> <span class="cm-comment">// Check parts of tests that pass</span><br> <span class="cm-property">test</span>: [<br> <span class="cm-string">"test/data/testrunner.js"</span>,<br> <span class="cm-string">"test/unit/animation.js"</span>,<br> <span class="cm-string">"test/unit/basic.js"</span>,<br> <span class="cm-string">"test/unit/tween.js"</span>,<br> <span class="cm-string">"test/unit/wrap.js"</span><br> ],<br> <span class="cm-property">build</span>: <span class="cm-string">"build"</span><br> },<br> <span class="cm-property">testswarm</span>: {<br> <span class="cm-property">tests</span>: [<br><br> <span class="cm-comment">// A special module with basic tests, meant for</span><br> <span class="cm-comment">// not fully supported environments like Android 2.3,</span><br> <span class="cm-comment">// jsdom or PhantomJS. We run it everywhere, though,</span><br> <span class="cm-comment">// to make sure tests are not broken.</span><br> <span class="cm-string">"basic"</span>,<br><br> <span class="cm-string">"ajax"</span>,<br> <span class="cm-string">"animation"</span>,<br> <span class="cm-string">"attributes"</span>,<br> <span class="cm-string">"callbacks"</span>,<br> <span class="cm-string">"core"</span>,<br> <span class="cm-string">"css"</span>,<br> <span class="cm-string">"data"</span>,<br> <span class="cm-string">"deferred"</span>,<br> <span class="cm-string">"deprecated"</span>,<br> <span class="cm-string">"dimensions"</span>,<br> <span class="cm-string">"effects"</span>,<br> <span class="cm-string">"event"</span>,<br> <span class="cm-string">"manipulation"</span>,<br> <span class="cm-string">"offset"</span>,<br> <span class="cm-string">"queue"</span>,<br> <span class="cm-string">"selector"</span>,<br> <span class="cm-string">"serialize"</span>,<br> <span class="cm-string">"support"</span>,<br> <span class="cm-string">"traversing"</span>,<br> <span class="cm-string">"tween"</span><br> ]<br> },<br> <span class="cm-property">watch</span>: {<br> <span class="cm-property">files</span>: [ <span class="cm-string">"<%= jshint.all.src %>"</span> ],<br> <span class="cm-property">tasks</span>: [ <span class="cm-string">"dev"</span> ]<br> },<br> <span class="cm-property">uglify</span>: {<br> <span class="cm-property">all</span>: {<br> <span class="cm-property">files</span>: {<br> <span class="cm-string cm-property">"dist/<%= grunt.option('filename').replace('.js', '.min.js') %>"</span>:<br> <span class="cm-string">"dist/<%= grunt.option('filename') %>"</span><br> },<br> <span class="cm-property">options</span>: {<br> <span class="cm-property">preserveComments</span>: <span class="cm-atom">false</span>,<br> <span class="cm-property">sourceMap</span>: <span class="cm-atom">true</span>,<br> <span class="cm-property">sourceMapName</span>:<br> <span class="cm-string">"dist/<%= grunt.option('filename').replace('.js', '.min.map') %>"</span>,<br> <span class="cm-property">report</span>: <span class="cm-string">"min"</span>,<br> <span class="cm-property">beautify</span>: {<br> <span class="cm-string cm-property">"ascii_only"</span>: <span class="cm-atom">true</span><br> },<br> <span class="cm-property">banner</span>: <span class="cm-string">"/*! jQuery v<%= pkg.version %> | "</span> <span class="cm-operator">+</span><br> <span class="cm-string">"(c) jQuery Foundation | jquery.org/license */"</span>,<br> <span class="cm-property">compress</span>: {<br> <span class="cm-string cm-property">"hoist_funs"</span>: <span class="cm-atom">false</span>,<br> <span class="cm-property">loops</span>: <span class="cm-atom">false</span>,<br> <span class="cm-property">unused</span>: <span class="cm-atom">false</span><br> }<br> }<br> }<br> }<br> } );<br><br> <span class="cm-comment">// Load grunt tasks from NPM packages</span><br> <span class="cm-variable">require</span>( <span class="cm-string">"load-grunt-tasks"</span> )( <span class="cm-variable-2">grunt</span> );<br><br> <span class="cm-comment">// Integrate jQuery specific tasks</span><br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">loadTasks</span>( <span class="cm-string">"build/tasks"</span> );<br><br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">registerTask</span>( <span class="cm-string">"lint"</span>, [ <span class="cm-string">"jsonlint"</span>, <span class="cm-string">"jshint"</span>, <span class="cm-string">"jscs"</span> ] );<br><br> <span class="cm-comment">// Don't run Node-related tests in Node.js < 1.0.0 as they require an old</span><br> <span class="cm-comment">// jsdom version that needs compiling, making it harder for people to compile</span><br> <span class="cm-comment">// jQuery on Windows. (see gh-2519)</span><br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">registerTask</span>( <span class="cm-string">"test_fast"</span>, <span class="cm-variable-2">runJsdomTests</span> <span class="cm-operator">?</span> [ <span class="cm-string">"node_smoke_tests"</span> ] : [] );<br><br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">registerTask</span>( <span class="cm-string">"test"</span>, [ <span class="cm-string">"test_fast"</span> ].<span class="cm-property">concat</span>(<br> <span class="cm-variable-2">runJsdomTests</span> <span class="cm-operator">?</span> [ <span class="cm-string">"promises_aplus_tests"</span> ] : []<br> ) );<br><br> <span class="cm-comment">// Short list as a high frequency watch task</span><br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">registerTask</span>( <span class="cm-string">"dev"</span>, [ <span class="cm-string">"build:*:*"</span>, <span class="cm-string">"lint"</span>, <span class="cm-string">"uglify"</span>, <span class="cm-string">"remove_map_comment"</span>, <span class="cm-string">"dist:*"</span> ] );<br><br> <span class="cm-variable-2">grunt</span>.<span class="cm-property">registerTask</span>( <span class="cm-string">"default"</span>, [ <span class="cm-string">"dev"</span>, <span class="cm-string">"test_fast"</span>, <span class="cm-string">"compare_size"</span> ] );<br>};</pre> </div> </section> </div> </div> <script > /*! * EventEmitter v4.2.11 - git.io/ee * Unlicense - http://unlicense.org/ * Oliver Caldwell - https://oli.me.uk/ * @preserve */ ;(function () { 'use strict'; /** * Class for managing events. * Can be extended to provide event functionality in other classes. * * @class EventEmitter Manages event registering and emitting. */ function EventEmitter() {} // Shortcuts to improve speed and size var proto = EventEmitter.prototype; var exports = this; var originalGlobalValue = exports.EventEmitter; /** * Finds the index of the listener for the event in its storage array. * * @param {Function[]} listeners Array of listeners to search through. * @param {Function} listener Method to look for. * @return {Number} Index of the specified listen.........完整代码请登录后点击上方下载按钮下载查看
网友评论0