第八章 vue.js-自定义指令（基础篇）

在第五章中我们已经介绍了需要Vue内置的指令，比如v-if、v-show等，这些丰富的内置指令能满足我们的绝大部分的业务需求，不过在需要一些特殊功能时，我们仍然希望对DOM进行底层的操作，这个时候就需要用到自定义指令。

8.1基本用法

自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus的指令，用于、元素初始化时自动获得焦点，两种写法分别是：</p> <blockquote> <p>//全局注册</p> <p>Vue.directive('focus',{</p> <p> //指令选项</p> <p>});</p> </blockquote> <blockquote> <p>//局部注册</p> <p>var app= new Vue({</p> <p> el:'#app',</p> <p> directives:{</p> <p> focus:{</p> <p> //指令选项</p> <p> }</p> <p> }</p> <p>})</p> </blockquote> <p> 写法与组件基本类似，只是方法名由component改为了directive。上例值是注册了自定义指令v-focus,还没有实现具体功能，下面具体介绍自定义指令的各个选项。</p> <p> 自定义指令的选项是由几个钩子函数组成的，每个都是可选的。</p> <blockquote> <p> bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。</p> <p> inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在与document中）.</p> <p> update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。</p> <p> componentUpdated：被绑定元素所在模板完成一次更新周期时调用。</p> <p> unbind：指令只调用一次，指令与元素解绑时调用。</p> </blockquote> <p> 可以根据需求在不同的钩子函数内完成逻辑代码，例如上面的v-focus，我们希望在元素插入父节点时就调用，那用到的最好是inserted，示例代码如下：</p> <blockquote> <p><div id="app"></p> <p> <input type="text" v-focus></p> <p></div></p> <p><script></p> <p> Vue.directive('v-focus',{</p> <p> inserted:function(el){</p> <p> el.focus();//聚焦元素</p> <p> }</p> <p> });</p> <p> var app = new Vue({</p> <p> el:'#app'</p> <p> })</p> </blockquote> <p> 每个钩子函数都有几个参数可用，比如上面我们用到了el。它们的含义如下：</p> <blockquote> <p> el：指令所绑定的元素，可以用来直接操作DOM。</p> <p> binding：一个对象，包含以下属性：</p> <p> name 指令名，不包括v-前缀。</p> <p> value 指令的绑定值，例如v-my-directive="1+1“，value的值是2.</p> <p> oldValue 指令绑定的前一个值，仅在update和componentUpdated的钩子中可用，无论值是否改变都可用。</p> <p> expression 绑定值的字符串形式，例如v-my-directive="1+1",expression的值是”1“。</p> <p> arg 传给指令的参数，例如v-my-directive:foo,arg的值是foo。</p> <p> modifiers 一个包含修饰符的对象，例如v-my-directive.foo.bar。修饰符对象modifiers的值是{foo:true,bar:true}.</p> <p> vnode ：Vue编译生成的虚拟节点，在进阶篇中介绍。</p> <p> oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中使用。</p> </blockquote> <p> 下面是结合了以上参数的一个具体示例，代码如下：</p> <p><div id="app"></p> <p> <div v-test:msg.a.b="message"></div></p> <p></div></p> <p><script></p> <p> Vue.directive('test',{</p> <p> bind:function(){</p> <p> var key = {};</p> <p> for (var i in vnode){</p> <p> key.push(i);</p> <p> }</p> <p> el.innerHTML =</p> <p> 'name' +biding.name +'<br>'+</p> <p> 'value' +biding.value+'<br>'+</p> <p> 'expression' +biding.expression+'<br>'+</p> <p> 'argument' +biding.arg+'<br>'+</p> <p> 'modifiers' +JSON.stringify(biding.modifiers) +'<br>'+</p> <p> 'vnode' +keys.join(',')</p> <p> }</p> <p> });</p> <p> var app = new Vue({</p> <p> el:'#app',</p> <p> data:{</p> <p> message:'some text'</p> <p> }</p> <p>})</p> <p></script></p> <p>执行后，<div>的内容会使用inner HTML重置，结果为：</p> <p>name:test</p> <p>value:some text</p> <p>expression:message</p> <p>argument:msg</p> <p>modifiers:{"a":true,"b":true}</p> <p>vnode keys:</p> <p>tag,data,children,text.elm,ns,context,functionalContext,key,componentOptions,componentInstance,parent,raw,isStatic,isRootInsert,isComment,isCloned,isOnce</p> <p> 在大多数场景，我们会在bind钩子里绑定一些事件，比如在document上用addEventListener绑定，在unbind里用removeEventListener解绑，比较典型的示例就是让这个元素随着鼠标拖曳。在后面的8.2章节中，我们会详细介绍到。</p> <p> 如果需要多个值，自定义指令也可以传入一个JavaScript对象字面量，只要是合法类型的JavaScript表达式都是可以的。示例代码如下：</p> <blockquote> <p><div id="app"></p> <p> <div v-test="{msg:'hello',name:'Lmz'}"></div></p> <p></div></p> <p><script></p> <p> Vue.directive('test',{</p> <p> bind:function(el,binding,vnode){</p> <p> console.log(binding.value.msg);</p> <p> console.log(binding.value.name);</p> <p> }</p> <p>});</p> <p> var app = new Vue({</p> <p> el:'app'</p> <p> })</p> </blockquote> <p>Vue2.x移除了大量Vue1.x自定义指令的配置。在使用自定义指令时，应该充分理解业务需求，因为很多时候你需要的可能并不是自定义指令，而是组件。在下一节中，我们结合两个经典的示例在进一步了解自定义指令的使用场景和用法。</p> <hr> <p><b>8.2实战</b></p> <p><b>8.2.1开发一个可从外部关闭的下拉菜单</b></p> <p> 网页中有很多常见的下拉菜单。点击某个按钮会弹出一个下拉菜单，然后点击页面中其它空白区域（除了菜单本身外），菜单就关闭了。本示例就用自定义指令来实现这样的需求。</p> <p> 先来分析一下如何实现。</p> <p> 该示例有两个特点，一是下拉菜单本身是不会关闭的，二是点击下拉菜单以外的所以区域都要关闭。点击所有区域可以在document上绑定click事件来实现，同时只要过滤出是否点击的是目标元素内部的元素即可。</p> <p> 首先初始化各个文件：</p> <p><b>index.html</b></p> <blockquote> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p> <meta charset="utf-8"></p> <p> <title>可从外部关闭的下拉菜单</title></p> <p> <lin rel="stylesheet" type="text/css" href="style.css">/</p> <p></head></p> <p><body></p> <p> <div id="app" v-cloak></div></p> <p> <script src="https:unpkg.com/vue/dist/vue.min.js"></script></p> <p> <script src="clickoutside.js></script></p> <p> <script src="index.js></script></p> <p></body></p> <p></html></p> </blockquote> <p><b>index.js</b></p> <blockquote> <p>var app = new Vue({</p> <p> el:'#app'</p> <p>});</p> </blockquote> <p><b>clickoutside.js</b></p> <blockquote> <p> Vue.directive('clickoutside',{</p> <p>});</p> </blockquote> <p>利用组件的基本知识很容易完成index.html和index.js的逻辑：</p> <blockquote> <p><div id="app" v-cloak"></p> <p> <div class="main" v-clickoutside="handleClose"></p> <p> <button @click="show =!show">点击显示下拉菜单</button></p> <p> <div class="dropdown" v-show="show"></p> <p> <p>下拉框的内容，点击外面区域可以关闭</p></p> <p> </div></p> <p> </div></p> <p></div></p> <p>var app = new Vue({</p> <p> el:'#app',</p> <p> data:{</p> <p> show:false</p> <p> },</p> <p> methods:{</p> <p> handleClose:{</p> <p> this.show=false;</p> <p> }</p> <p> }</p> <p>});</p> </blockquote> <p> 逻辑很简单，点击按钮时显示class为dropdown的div元素。</p> <p> 自定义指令v-clickoutside绑定了一个函数handleClose，原来关闭菜单。先来看一下clickoutside.js中的内容：</p> <blockquote> <p>Vue.directive('clickoutside',{</p> <p> bind:function(el,binding,vnode){</p> <p> function doucumentHandler(e){</p> <p> if(el.contains(e.target)){</p> <p> return false;</p> <p> }</p> <p> if(binding.expression){</p> <p> binding.value(e);</p> <p> }</p> <p> el._vueClickOutside_ = documentHandler;</p> <p> document.addEventListener('click',documentHandler);</p> <p> },</p> <p> unbind:function(el,binding){</p> <p> document.removeEventListener('click',el._vueClickOutside_);</p> <p> delete el._vueClickOutside_;</p> <p> }</p> <p> }</p> <p>});</p> </blockquote> <p> 之前分析过，要在document上绑定click事件，所以在bind钩子内声明了一个函数documentHandler，并将它作为句柄绑定在document的click事件上。documentHandler函数做了两个判断，第一个是判断点击的区域是否是指令所在的元素内部，如果是，就跳出函数，不往下继续执行。</p> <p>TIPS:contains方法是用来判断元素A是否包含了元素B，包含返回true，不包含返回false，示例代码如下：</p> <blockquote> <p><body></p> <p> <div id="parent"></p> <p> 父元素</p> <p> <div id="children">子元素</div></p> <p> </div></p> <p> <script type="text/javascript"></p> <p> var A =document.getElementById('parent');</p> <p> var B =document.getElementById('children');</p> <p> console.log(A.contains(B));//true</p> <p> console.log(B.contains(A));//false</p> <p> </script></p> <p></body></p> </blockquote> <p> 第二个判断的是当前的指令v-clickoutside有没有写表达式，在该自定义指令中，表达式应该是一个函数，在过滤了内部元素后，点击外面任何区域应该执行用户表达式中的函数，所以binding.value()就是用来执行当前上下文methods中指定的函数的。</p> <p> 与Vue1.x不同的是，在自定义指令中，不能再用this.xxx的形式在上下文中声明一个变量。所以用el._vueClickOutside_引用了doucumentHandler，这样就可以在unbind钩子里移除对document的click事件监听。如果不移除，当组件或元素销毁时，它仍然存在于内存中。</p> <p> 以上代码分解完整代码基本一致，不再重复提供。下面是style.css的代码：</p> <blockquote> <p>[v-cloak]{</p> <p>display:none;</p> <p>}</p> <p>.main{</p> <p>width:125px;</p> <p>}</p> <p>button{</p> <p>display:block;</p> <p>width:100%;</p> <p>color:#fff;</p> <p>background-color:#39f;</p> <p>border:0;</p> <p>padding:6px;</p> <p>text-align:center;</p> <p>font-size:12px;</p> <p>border-radius:4px;</p> <p>cussor:pointer;</p> <p>outline:none;</p> <p>position:relative;</p> <p>}</p> <p>button:active{</p> <p>top:1px;</p> <p>left:1px;</p> <p>}</p> <p>.dropdown{</p> <p>width:100%;</p> <p>height:150px;</p> <p>margin:5px 0;</p> <p>}</p> </blockquote> <hr> <p><b>8.2.2开发一个实时事件转换指令v-time</b></p> <p> 在一些社区，比如微博、朋友圈等，发布的动态会有一个相对本机时间转换后的相对时间。（2小时前，11天前等）.</p> <p> 一般在服务器的存储事件格式是Unix时间戳，比如2017-01-01 00:00:00的时间戳是1483200000.前端在拿到数据后，将它转换为可读的时间格式再显示出来。为了显出实时性，在一些社交类产品中，甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式，这样比直接转换为年、月、日、时、分、秒更友好。本示例就来实现这样一个自定义指令v-time，将表达式传入的时间戳实时转换为相对时间。</p> <p> 便于演示效果，我们初始化时定义了两个时间。</p> <p><b>index.html</b></p> <blockquote> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p> <meta charset="utf-8"></p> <p> <title>时间转换指令</title></p> <p></head></p> <p><body></p> <p> <div id="app" v-cloak></p> <p> <div v-time="timeNow"></div></p> <p> <div v-time="timeBefore"></div></p> <p> </div></p> <p> <script src = "https://unpkg.com/vue/dist/vue.min.js"></script></p> <p> <srript src="time.js"></script></p> <p> <script src="index.js"></script></p> <p></body></p> <p></html></p> </blockquote> <p><b>index.js</b></p> <p>var app = new Vue({</p> <p> el:'#app',</p> <p> data:{</p> <p> timeNow:(new Date().getTime(),</p> <p> timeBefore:1488930695721</p> <p> }</p> <p>})</p> <p>timeNow是目前的时间，timeBefore是一个写死的时间：2017-03-08.</p> <p>TIP:本示例所用的时间戳都是毫秒级，如服务端返回秒级时间戳需要乘以1000后再使用。</p> <p> 分析一下时间转换逻辑：</p> <p> 1分钟以前，显示“刚刚”</p> <p> 1分钟-1小时之间，显示“xx分钟前”。</p> <p> 1小时-24小时之间，显示："xx小时前“。</p> <p> 1天-一个月（31天）间，显示："xx天前”。</p> <p> 大于1个月，显示“xx年xx月xx日”。</p> <p> 为了使判断逻辑更简单，统一使用时间戳进行时间大小判断。在写指令v-time之前，需要先写一系列与时间相关的函数，我们声明一个对象Time，把它们都封装在里面。</p> <p><b>time.js</b></p> <blockquote> <p> var time = {//获取当前时间戳</p> <p> getUnix:function(){</p> <p> var date = new Date();</p> <p> return date.getTime();</p> <p> }，</p> <p> //获取今天0点0分0秒的时间戳</p> <p> getTodayUnix:function(){</p> <p> var date = new Date();</p> <p> date.setHours(0);</p> <p> date.setMinutes(0);</p> <p> date.setSeconds(0);</p> <p> date.setMilliSeconds(0);</p> <p> return .date.getTime();</p> <p> }，</p> <p> //获取今年1月1日0点0分0秒的时间戳</p> <p> getYearUnix:function(){</p> <p> var date = new Date();</p> <p> date.setMonth(0);</p> <p> date.setDate(0);</p> <p> date.setHours(0);</p> <p> date.setMinutes(0);</p> <p> date.setSeconds(0);</p> <p> date.setMilliSeconds(0);</p> <p> return .date.getTime();</p> <p> }，</p> <p> // 获取标准年月日</p> <p> getYearUnix:function(){</p> <p> var date = new Date(time);</p> <p> var month =date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1;</p> <p> var day = date.getDate()<10?'0'+date.getDate():date.getDate();</p> <p> return .date.getFullYear()+'-'+month +'-'+day;</p> <p> }，</p> <p> //转换时间</p> <p> getFormatTime:function(){</p> <p> var now = this.getUnix();//当前时间戳</p> <p> var today=this.getTodayUnix();//今天0点时间戳</p> <p> var year = this.getYearUnix();//今年0点时间戳</p> <p> var timer = (now -timestamp)/1000;//转换为秒级时间戳</p> <p> var tip='';</p> <p> if(timer < =0){</p> <p> tip='刚刚';</p> <p> }else if(Math.floor(timer/60)<=0){</p> <p> tip='刚刚';</p> <p> }else if(timer<3600){</p> <p> tip=Math.floor(timer/60)+'分钟前';</p> <p> }else if(timer >=3600 &&(timestamp - today > =0)){</p> <p> tip=Math.floor(timer/3600)+'小时前';</p> <p> }else if(timer /86400<=31)){</p> <p> tip=Math.floor(timer/86400)+'天前';</p> <p> }else{</p> <p> tip =this.getLastDate(timetamp);</p> <p> }</p> <p> return tip;</p> <p> }</p> <p>};</p> </blockquote> <p> Time.getFormatTime()方法就是自定义指令v-time所需要的，入参为毫秒级时间戳，返回已经整理号事件格式的字符串。</p> <p> 最后在time.js里补全生于代码：</p> <blockquote> <p> Vue.directive('time',{</p> <p> bind:function(el,binding){</p> <p> el.innerHTML=Time.getFomatTime(binding.value);</p> <p> el._timeout_=setInterval(function(){</p> <p> el.innerHTML=Time.getFomatTime(binding.value);</p> <p> },60000);</p> <p> },</p> <p> unbind:function(el){</p> <p> clearInterval(el._timeout_);</p> <p> delete el._timeout_;</p> <p> }</p> <p> });</p> </blockquote> <p> 在bind钩子里，将指令v-time表达式的值binding.value作为参数传入Time.getFormatTime()方法得到格式化时间，再通过el/innerHTML写入指令坐在元素。定时器el._timeout_每分钟出发一次，更新时间，并且在unbind钩子里清除掉。</p> <p> 总结：在编写自定义指令时，给DOM绑定一次性事件等初始条件，建议在bind钩子内完成。同时要在unbind钩子内解除相关绑定。在自定义指令里，理论上可以任意操作DOM，但这又违背了Vue.js的初衷，所以对于大幅度 DOM变动，应该使用组件。</p> <hr> <p>上一章：vue.js组件详解（基础篇）</p> <p>下一章：Render函数（进阶篇）-未更新</p> </article> </div> </div> </div>  <div id="SOHUCS" sid="1245929003232120832"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(第八章 vue.js-自定义指令（基础篇）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1829767818913083392.htm" title="《超越自卑》第八章：青春期" target="_blank">《超越自卑》第八章：青春期</a> <span class="text-muted">苹果树lqh1</span> <div>1.几乎对每个孩子而言，青春期中最重要的一件事就是，他必须证明他已经不再是孩子了。我们可以设法让孩子相信，这是一件理所当然的事。2.青春期有许多行为都是出自想表现独立性和与成人平等、男子气概或女人作风等欲望。这些表现的方向决定于儿童对“成长”的意义抱持何种看法。假使“成长”的意思是指不受控制，孩子就会开始反抗各种拘束。3.大部分孩子到了青春期都会享有较多的自由和独立。假使父母想再继续监督他们，他们</div> </li> <li><a href="/article/1829633943813582848.htm" title="Redis基础篇 -Redis事务详解及其ACID特性分析" target="_blank">Redis基础篇 -Redis事务详解及其ACID特性分析</a> <span class="text-muted">ChineHe</span> <a class="tag" taget="_blank" href="/search/Redis/1.htm">Redis</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>文章目录1关于Redis事务1.1官网介绍1.2解释2事务操作2.1事务命令2.3操作示例2.3错误处理2.3.1命令排队失败的处理2.3.2命令执行失败的处理3Redis事务的ACID特性分析3.1ACID3.2A原子性分析3.3C一致性分析3.4I隔离性分析3.5D持久性分析参考文档1关于Redis事务1.1官网介绍Redis事务(transaction)允许在单个步骤中执行一组命令，并保证了</div> </li> <li><a href="/article/1829618694452506624.htm" title="高级java每日一道面试题-2024年8月30日-基础篇-你对泛型了解多少?" target="_blank">高级java每日一道面试题-2024年8月30日-基础篇-你对泛型了解多少?</a> <span class="text-muted">java我跟你拼了</span> <a class="tag" taget="_blank" href="/search/java%E6%AF%8F%E6%97%A5%E4%B8%80%E9%81%93%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">java每日一道面试题</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%AF%87/1.htm">基础篇</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">高级面试题</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7/1.htm">高级</a> <div>如果有遗漏,评论区告诉我进行补充面试官:你对泛型了解多少?我回答:泛型的基本概念泛型是一种编程语言特性，它允许在类、接口或方法定义时使用类型参数（TypeParameters）。类型参数允许在编译时指定具体的类型，从而避免了运行时类型检查和转换带来的性能开销，并且增强了代码的类型安全性。语法类型参数通常用大写字母表示，如T、E等。在类或接口定义时，类型参数放在类名或接口名后面，用尖括号包围。在方法</div> </li> <li><a href="/article/1829368965323911168.htm" title="Vue3_指令(内置和自定义)" target="_blank">Vue3_指令(内置和自定义)</a> <span class="text-muted">开心小老虎</span> <a class="tag" taget="_blank" href="/search/vue3%E7%9F%A5%E8%AF%86%E7%82%B9%2B%E7%BB%84%E4%BB%B6/1.htm">vue3知识点+组件</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>目录一、内置指令1.v-text2.v-html3.v-show4.v-if5.v-else6.v-else-if7.v-for8.v-on9.v-bind10.v-model11.v-slot12.v-pre13.v-once14.v-memo（3.2+）15.v-cloak二、自定义指令1.规则2.钩子一、内置指令1.v-text更新元素的文本内容。{{msg}}2.v-html更新元素的in</div> </li> <li><a href="/article/1829366696100589568.htm" title="vue.js-指令" target="_blank">vue.js-指令</a> <span class="text-muted">mengyang.</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>Vue.js指令表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用{{}}语法，而是需要指令在vue中，指令是一个带有v-前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的表达式，不同的指令有不同的作用，vue内置了一些常用的指令，后期我们还可以自定义属于自己的指令内容输出循环逻辑属性绑定事件其它内容输出通过{{}}我们可以很方便的中模板中输出数据，但是这种方</div> </li> <li><a href="/article/1829197288870866944.htm" title="第八章：范围解析操作符（::）" target="_blank">第八章：范围解析操作符（::）</a> <span class="text-muted">快乐的bug制造者</span> <div>范围解析操作符（也可称作PaamayimNekudotayim）或者更简单地说是一对冒号，可以用于访问静态成员，类常量，还可以用于覆盖类中的属性和方法。当在类定义之外引用到这些项目时，要使用类名。自PHP5.3.0起，可以通过变量来引用类，该变量的值不能是关键字（如self，parent和static）。在类的外部使用::操作符：self，parent和static这三个特殊的关键字是用于在类定义</div> </li> <li><a href="/article/1829123019008733184.htm" title="《Python语言程序设计》第八章学习笔记" target="_blank">《Python语言程序设计》第八章学习笔记</a> <span class="text-muted">Kinno酱</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>《Python语言程序设计》学习笔记笔记选自《Python语言程序设计》[美]梁勇著本篇笔记没有记录用python绘画的turtle库第8章更多字符串和特殊方法创建字符串s1=str()s2=str("Welcome")#Python提供了简单语法，通过使用字符串值创建一个字符串s1=""s2="Welcom"一个str对象是不可变的：一旦创建一个字符串对象出来，那么它的内容就不会再改变。Pyth</div> </li> <li><a href="/article/1829101745008111616.htm" title="我们的青春年华‖第八章变数" target="_blank">我们的青春年华‖第八章变数</a> <span class="text-muted">将上</span> <div>如果钞票目不转睛的盯着我，我一定会将眼角的皱纹扯给它看。不是为了炫耀，也不是为了赞美，只想想说，年少无知和年富力强之时，我都为钞票忙碌着，看得见的褶子也是事实，金钱并不能时刻诱惑我，而我对它的热爱也放在心底。50块钱，板正的样子歌颂着李想一天忙碌，心里有满意，又有些难过，她也讲不清，和吹过的夏日的风一样，看不见的时候，它依旧在吹，一刻也没有停下。高子明看了一眼被沉默困住的李想，试图把她拯救出来，“</div> </li> <li><a href="/article/1829012848999755776.htm" title="【前端基础篇】JavaScript之jQuery介绍" target="_blank">【前端基础篇】JavaScript之jQuery介绍</a> <span class="text-muted">Trouvaille ~</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/1.htm">前端基础</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E4%BB%B6/1.htm">事件</a><a class="tag" taget="_blank" href="/search/%E9%80%89%E6%8B%A9%E5%99%A8/1.htm">选择器</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>文章目录前言JQuery基本介绍和使用方法引入依赖jQuery语法jQuery选择器jQuery事件操作元素获取/设置元素内容获取/设置元素属性获取/返回css属性添加元素删除元素总结：常用的jQuery方法-详细解释与示例事件处理拓展-详细解释与示例其他拓展内容前言在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔JQuery基本介绍和使用方法W3C标准给我们提供了⼀系列</div> </li> <li><a href="/article/1828982725479067648.htm" title="高级java每日一道面试题-2024年8月28日-基础篇-ArrayList的底层工作原理?" target="_blank">高级java每日一道面试题-2024年8月28日-基础篇-ArrayList的底层工作原理?</a> <span class="text-muted">java我跟你拼了</span> <a class="tag" taget="_blank" href="/search/java%E6%AF%8F%E6%97%A5%E4%B8%80%E9%81%93%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">java每日一道面试题</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/ArrayList/1.htm">ArrayList</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%AF%87/1.htm">基础篇</a> <div>如果有遗漏,评论区告诉我进行补充面试官:ArrayList的底层工作原理?我回答:在Java高级面试中，了解ArrayList的底层工作原理是非常重要的，因为ArrayList是Java中最常用的数据结构之一。下面是ArrayList的底层工作原理的详细解释，包括其实现细节、扩容机制、线程安全性和性能特点等方面。1.数据结构ArrayList内部使用了一个Object类型的数组（Object[]e</div> </li> <li><a href="/article/1828906201946091520.htm" title="Java必知必会-基础篇" target="_blank">Java必知必会-基础篇</a> <span class="text-muted">探索星辰大海</span> <a class="tag" taget="_blank" href="/search/Java%E5%BF%85%E7%9F%A5%E5%BF%85%E4%BC%9A/1.htm">Java必知必会</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>说明：《Java必知必会》是一档专为Java学习者设计的专栏，旨在帮助读者系统地掌握Java编程语言的核心知识，从基础语法到高级特性，从理论应用到实战演练，一站式解决你的Java学习难题。可在我的专栏里订阅，该专栏一共有15篇，本篇是第二篇。会先教会大家如何使用，并给出相应的练习题示例作业习题是帮助大家巩固所学内容，需要大家独立完成学完入门篇和基础篇就算掌握Java的常用基础知识了，下一篇开始学习</div> </li> <li><a href="/article/1828902922549817344.htm" title="一文带你读懂vue3中directive指令的那些事" target="_blank">一文带你读懂vue3中directive指令的那些事</a> <span class="text-muted">Jinuss</span> <a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>概述vue3中内置了很多丰富实用的指令，如v-show、v-if/v-else或v-model等，但是实际开发中可能我们还需要某些统一的处理，比如交互按钮的防抖，输入框的自动focus等，这时我们就可以通过vue3的directive注册自定义指令。指令指令钩子vue3的自定义指令通常情况下是由一个包含类似组件生命周期钩子函数的对象，在DOM节点不同的时期，执行不同的钩子函数，而我们就可以在对应的</div> </li> <li><a href="/article/1828702593031958528.htm" title="《非暴力沟通》第八章思维导图：倾听的力量" target="_blank">《非暴力沟通》第八章思维导图：倾听的力量</a> <span class="text-muted">一聿</span> <div>第八章：倾听的力量痊愈身心面对自己的弱点非暴力沟通鼓励我们表达自己最深的感受和需要通过倾听我们将意识到他人的人性及彼此的共通之处，这会使自我表达变得容易些我们越是倾听他人语言背后的感受和需要，就越不怕与他们坦诚的沟通我们最不愿意示弱的时候往往是因为担心失去控制想显得强硬的时候当我们将对方的话看作是羞辱或攻击，我们会觉得自己收到了伤害，这时就可能因为过于恼怒或害怕而无法倾听对方。这时我们需要先离开现</div> </li> <li><a href="/article/1828424012930314240.htm" title="详解cuda by example中第八章图形互操作性代码" target="_blank">详解cuda by example中第八章图形互操作性代码</a> <span class="text-muted">肖肥羊xy</span> <a class="tag" taget="_blank" href="/search/cuda/1.htm">cuda</a><a class="tag" taget="_blank" href="/search/by/1.htm">by</a><a class="tag" taget="_blank" href="/search/example/1.htm">example</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a> <div>这两天学到第八章了，发现第八章内容有部分是关于图形学的内容于是就把我对第八章关于图形互操作的代码理解也写一下，仅供学习，如果大家有发现不对的地方欢迎指正。（文章代码顺序按照官方示例代码顺序给出，可按顺序食用）1.引入头文件#include"../common/book.h"#include"../common/cpu_bitmap.h"#include"cuda.h"#include"cuda_g</div> </li> <li><a href="/article/1828080788017606656.htm" title="2024年最新Flink教程,从基础到就业，大家一起学习--Flink DataStream API-第一篇+源码讲解" target="_blank">2024年最新Flink教程,从基础到就业，大家一起学习--Flink DataStream API-第一篇+源码讲解</a> <span class="text-muted">长风清留扬</span> <a class="tag" taget="_blank" href="/search/flink/1.htm">flink</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/flink/1.htm">flink</a> <div>本文涉及到大量的底层原理知识，包括运行机制图解都非常详细，还有一些实战案例，所以导致本篇文章会比较长，内容比较多，由于内容太多，很多目录可能展示不出来，需要去细心的查看，非常适合深入了解学习flink的小伙伴们，如果你们喜欢这篇文章可以多多关注，大家一起学习，还可以在评论区留言谈论一下问题。往期回顾：2024年最新Flink教程,从基础到就业，大家一起学习--基础篇_flinktutorials提</div> </li> <li><a href="/article/1827922659552358400.htm" title="读《阅人无数——突破沟通中的艰难时刻》笔记（2021年7月9日）" target="_blank">读《阅人无数——突破沟通中的艰难时刻》笔记（2021年7月9日）</a> <span class="text-muted">敏于事而慎于言</span> <div>昨晚和今早阅读了本书的第八章内容。这一章的主题为：狮子——领导能力是每个人生存发展的硬技能。在人际互动的“动物模型”中，狮子代表着领导他人。其实，从领导能力这个角度说，这个“他人”不仅是指传统意义上的另外一个人，也包括自己。关于领导能力，作者的重要观点如下：一、领导能力需要建立在其他人际能力之上。没有人能强行领导他人。的确，有时某人会被放在管理者的位置上，但大家心里清楚他是否信得过，是否值得跟随。</div> </li> <li><a href="/article/1827878790756397056.htm" title="【前端基础篇】JavaScript之BOM介绍" target="_blank">【前端基础篇】JavaScript之BOM介绍</a> <span class="text-muted">Trouvaille ~</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/1.htm">前端基础</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a><a class="tag" taget="_blank" href="/search/BOM/1.htm">BOM</a><a class="tag" taget="_blank" href="/search/Window/1.htm">Window</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>文章目录浏览器对象模型（BOM）介绍1.什么是BOM？2.Window对象2.1弹出框2.1.1警告框2.1.2确认框2.1.3提示框2.2定时事件2.2.1延时器2.2.2定时器2.3Window对象其他常用属性与方法2.3.1获取窗口尺寸2.3.2打开新窗口与关闭窗口2.3.3移动与调整窗口大小3.Navigator对象3.1判断浏览器类型3.2navigator对象及方法详细解释：4.Loc</div> </li> <li><a href="/article/1827819406693068800.htm" title="正向人生观015—心想事成的核心秘密（1）" target="_blank">正向人生观015—心想事成的核心秘密（1）</a> <span class="text-muted">娟姐的心语话廊</span> <div>娟姐在喜马拉雅开通了一个专辑每周共读一本好书，然而喜马拉雅把部分内容认定为涉及宗教、灵修等内容而违反了平台规则被被下架。为此，娟姐决定把本书分几个篇章，将作者的良苦用心提炼出来，为您展示心想事成的核心秘密。理论基础篇（科学发现）科学发现之一：有一个连结万事万物的能量场存在，这个能量场让宇宙以及所有的一切有序运作。科学发现之二：这个能量场为我们内在的信念，扮演了容器、桥梁和镜子的角色。科学发现之三：</div> </li> <li><a href="/article/1827803251190362112.htm" title="2021-02-18" target="_blank">2021-02-18</a> <span class="text-muted">内蒙陈艳杰</span> <div>早上好家人们！今天是我们同步学习第一天，学习的内容有：1.赵宗瑞老师新浪博客文章《传统文化与身心健康》教育体系简介2.《传统文化与身心健康》高级研修基础篇讲座概述，3.赵老师在管理群的讲话《改变命运最好的方法》。祝福大家：学习愉快！福慧双增！</div> </li> <li><a href="/article/1827765981955584000.htm" title="电气工程师自学成才手册基础篇+提高篇+精通篇,蔡杏山著" target="_blank">电气工程师自学成才手册基础篇+提高篇+精通篇,蔡杏山著</a> <span class="text-muted">weixin_45800371</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a> <div>《电气工程师自学成才手册》分为基础篇、提高篇、精通篇三册，具有基础起点低、内容由浅入深、语言通俗易懂、结构安排符合学习认知规律的特点。基础篇适合作电气工程师入门的自学图书，也适合作职业学校和社会培训机构的电工技术入门教材；提高篇适合作为电气工程师中级阶段的自学图书，也可作为职业学校和社会培训机构中级层次的电工技术教材；精通篇适合作电气工程师高级阶段的自学图书，也适合作职业学校和社会培训机构高级层次</div> </li> <li><a href="/article/1827745194682970112.htm" title="Matlab基础篇：数据输入输出" target="_blank">Matlab基础篇：数据输入输出</a> <span class="text-muted">小魏冬琅</span> <a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a> <div>前言数据输入和输出是Matlab数据分析和处理的核心部分。良好的数据输入输出能够提高工作效率，并确保数据处理的准确性。本文将详细介绍Matlab数据输入输出的各种方法，包括导入和导出数据、数据处理和数据可视化。一、导入数据Matlab提供了多种方法导入外部数据文件，包括文本文件、Excel表格、数据库等。以下是几种常用的导入数据方法。导入文本文件使用load函数导入简单的文本文件：data=loa</div> </li> <li><a href="/article/1827700064840151040.htm" title="Redis—基础篇" target="_blank">Redis—基础篇</a> <span class="text-muted">启航1999</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>Redis基础1.Redis简介2.Redis应用3.Redis数据结构3.1String3.2hash3.3list3.4set3.5sortedset4.Redis为什么快？5.RedisI/O多路复用6.Redis6.0多线程1.Redis简介Redis是一种基于键值对的NoSQL数据库Redis中的value支持string、hash、list、set、zset、Bitmaps（位图）、H</div> </li> <li><a href="/article/1827668635695542272.htm" title="每日一词 126| tailspin" target="_blank">每日一词 126| tailspin</a> <span class="text-muted">枫林悦读_Diana</span> <div>tailspin1.认识这个词（基础篇）词：tailspin英英释义：anoccasionwhensomethingorsomeonesuddenlygetsintoaverybadstate例句：Theworldeconomygoesintoatailspin.2.体会这个词（进阶篇）“tailspin”是个名词，字面意思是“尾巴旋转”，表示飞机失控坠落时的情况。它也常用来表示“突然变得糟糕”，</div> </li> <li><a href="/article/1827619775442939904.htm" title="爬虫技巧分享：掌握高效数据抓取的艺术" target="_blank">爬虫技巧分享：掌握高效数据抓取的艺术</a> <span class="text-muted">shiming8879</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>爬虫技巧分享：掌握高效数据抓取的艺术在当今数据驱动的世界里，爬虫技术成为了获取网页信息、分析数据不可或缺的工具。无论是学术研究、市场调研，还是商业智能，爬虫都扮演着重要的角色。然而，要编写出高效、稳定的爬虫，并非易事。本文将为你分享一系列爬虫技巧，帮助你更好地掌握数据抓取的艺术。一、基础篇：构建稳健的爬虫基础选择合适的库和工具在开始编写爬虫之前，选择合适的库和工具至关重要。Python作为一门简洁</div> </li> <li><a href="/article/1827591410661027840.htm" title="如何写好一篇SCI论文" target="_blank">如何写好一篇SCI论文</a> <span class="text-muted">kkk12344</span> <a class="tag" taget="_blank" href="/search/%E5%86%99%E8%AE%BA%E6%96%87/1.htm">写论文</a> <div>前言：写好一篇论文对新手来说是个不小的难题。咬破笔头终于凑够了字数，又犹犹豫豫感觉漏洞百出，最后投稿时感觉自己左支右绌，反正整个过程都充满了磕磕盼盼。正文：写好一篇论文需要注意的点有哪些？基础篇：1.杜绝错别字。对于英文文献来说，不要出现病句。（比如无主语的句子，最好不要使用祈使句和疑问句，在全文内部，包括图和引用文献，请统一语言，如果投英文期刊，一定不要出现汉语。写科技文需要牢记写作目的：展示自</div> </li> <li><a href="/article/1827562769923272704.htm" title="Him的救赎第八章" target="_blank">Him的救赎第八章</a> <span class="text-muted">WtMeln</span> <div>卢娜忽然被颠簸醒了。她迷迷糊糊地睁开眼睛，发现自己躺在奔跑着的马背上。她连忙坐起来，惊慌地看着快速移动的地面。她看了看右边，艾利克斯睡在一匹黑马上，而自己则是在一匹白马上。卢娜抬起头看了看前面，黑衣人坐在一匹棕白色的马上，奔驰得飞快。黑衣人此刻感慨万千，明知道奔到吐血也跑不到丛林去，他还是得带着这两个人疯狂地逃离这个地方。他却一如既往地沉默着，唯一不同的是，他把面罩摘了下来。卢娜心急地想看看这个黑</div> </li> <li><a href="/article/1827562183471493120.htm" title="C++primer plus 习题+答案" target="_blank">C++primer plus 习题+答案</a> <span class="text-muted">未央吖</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>第八章1.哪种函数适合定义为内联函数？解释：一般来说，调用一个函数流程为：当前调用命令的地址被保存下来，程序将跳转到所调用的函数并执行该函数，最后跳转回之前所保存的命令地址。对于经常需要调用的小函数来说，这大大降低了程序运行效率。所以，新增了内联函数。关键字inline告诉编译器，任何地方只要调用内联函数，就直接把函数的机器码插入到调用它的地方。这样程序执行更有效率，就好像将内联函数中的语句直接插</div> </li> <li><a href="/article/1827525055995801600.htm" title="4D习书第八章" target="_blank">4D习书第八章</a> <span class="text-muted">刘彦坤</span> <div>通过这章的学习一场热闹的讨论肯定会随之而来我关注的内容：如何使用4D调整项目心态的颜色；调整心态颜色以后的改变。我的情绪：希望使用本章中所提到的心态颜色能够在团队当中如期运用。让自己变得更好的行动：尽可能的练习这个项目；让自己和学员都会做此项练习期待的结果：早些做这个工作，让团队取得最终成功。</div> </li> <li><a href="/article/1827480119090966528.htm" title="Vue.js 中的指令（Vue自定义指令）" target="_blank">Vue.js 中的指令（Vue自定义指令）</a> <span class="text-muted">码农键盘上的梦</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js中的指令作用在Vue.js[1]中，指令是个非常重要的概念，它可以用来扩展Vue.js的功能，提供了丰富的指令来简化开发者的工作。本文将对除了内置指令外，Vue.js还支持自定义指令，开发者可以根据自己的需求扩展Vue.js的指令库。Vue.js3.x相较于Vue.js2.x在自定义指令方面进行了一些改进，本文将介绍Vue.js3.x中自定义指令的使用方法。什么是自定义指令1.概念介绍</div> </li> <li><a href="/article/1827458039687507968.htm" title="《发展心理学-儿童和青少年》笔记（5）" target="_blank">《发展心理学-儿童和青少年》笔记（5）</a> <span class="text-muted">dear心理咨询师黄倩雯</span> <div>第八章认知发展：信息加工儿童的信息加工过程：短时记忆能力（硬件）加工速度（硬件，cpu）策略的运用（软件）儿童对思维的理解（元认知，或执行功能）（软件）儿童的知识基础——指儿童对他所思考的事情的了解程度儿童的注意——对即将进入信息加工系统的环境刺激进行选择的过程成人的理解广度平均约为3.5个数字，四年级的儿童约为3个数字，一年级的儿童约为2.5个数字。记忆广度（memoryspan）：短时记忆能保</div> </li> <li><a href="/article/24.htm" title="tomcat基础与部署发布" target="_blank">tomcat基础与部署发布</a> <span class="text-muted">暗黑小菠萝</span> <a class="tag" taget="_blank" href="/search/Tomcat+java+web/1.htm">Tomcat java web</a> <div>从51cto搬家了，以后会更新在这里方便自己查看。做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。一、Tomcat安装安装方式：①运行.exe安装包 &n</div> </li> <li><a href="/article/151.htm" title="网站架构发展的过程" target="_blank">网站架构发展的过程</a> <span class="text-muted">ayaoxinchao</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a> <div>1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何</div> </li> <li><a href="/article/278.htm" title="[信息与安全]数据库的备份问题" target="_blank">[信息与安全]数据库的备份问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div> 如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢? 是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢? &n</div> </li> <li><a href="/article/405.htm" title="使用maven tomcat plugin插件debug关联源代码" target="_blank">使用maven tomcat plugin插件debug关联源代码</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/debug/1.htm">debug</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/1.htm">查看源码</a><a class="tag" taget="_blank" href="/search/tomcat-plugin/1.htm">tomcat-plugin</a> <div>*首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的</div> </li> <li><a href="/article/532.htm" title="大访问量高并发" target="_blank">大访问量高并发</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AE%BF%E9%97%AE%E9%87%8F%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">大访问量高并发</a> <div>大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。 </div> </li> <li><a href="/article/659.htm" title="cache 服务器" target="_blank">cache 服务器</a> <span class="text-muted">小猪猪08</span> <a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>Cache 即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。　　1.Cache 是怎么样工作的? 　　Cache 是分配在服务器上</div> </li> <li><a href="/article/786.htm" title="mysql存储过程" target="_blank">mysql存储过程</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch</div> </li> <li><a href="/article/913.htm" title="CSS的class、id、css文件名的常用命名规则" target="_blank">CSS的class、id、css文件名的常用命名规则</a> <span class="text-muted">agevs</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div> CSS的class、id、css文件名的常用命名规则 (一)常用的CSS命名规则　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right </div> </li> <li><a href="/article/1040.htm" title="全局数据源" target="_blank">全局数据源</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a><a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a> <div>实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l</div> </li> <li><a href="/article/1167.htm" title="MYSQL的随机查询的实现方法" target="_blank">MYSQL的随机查询的实现方法</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，</div> </li> <li><a href="/article/1294.htm" title="JAVA的getBytes()方法" target="_blank">JAVA的getBytes()方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a> <div> 在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！ String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "</div> </li> <li><a href="/article/1421.htm" title="AngularJS中操作Cookies" target="_blank">AngularJS中操作Cookies</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Cookies/1.htm">Cookies</a> <div> 如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎</div> </li> <li><a href="/article/1548.htm" title="[Maven学习笔记五]Maven聚合和继承特性" target="_blank">[Maven学习笔记五]Maven聚合和继承特性</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>Maven聚合在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use</div> </li> <li><a href="/article/1675.htm" title="【JVM七】JVM知识点总结" target="_blank">【JVM七】JVM知识点总结</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div> 1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler </div> </li> <li><a href="/article/1802.htm" title="linux下查看nginx、apache、mysql、php的编译参数" target="_blank">linux下查看nginx、apache、mysql、php的编译参数</a> <span class="text-muted">ronin47</span> <div>在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/</div> </li> <li><a href="/article/1929.htm" title="unity中运用Resources.Load的方法？" target="_blank">unity中运用Resources.Load的方法？</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a> <div>问：unity中运用Resources.Load的方法？答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件</div> </li> <li><a href="/article/2056.htm" title="线段树-入门" target="_blank">线段树-入门</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%AE%B5%E6%A0%91/1.htm">线段树</a> <div> /** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna</div> </li> <li><a href="/article/2183.htm" title="全选与反选" target="_blank">全选与反选</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E5%85%A8%E9%80%89/1.htm">全选</a> <div> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title> </div> </li> <li><a href="/article/2310.htm" title="vim一些简单记录" target="_blank">vim一些简单记录</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>mac在/usr/share/vim/vimrc linux在/etc/vimrc 1、问：后退键不能删除数据，不能往后退怎么办？答：在vimrc中加入set backspace=2 2、问：如何控制tab键的缩进？答：在vimrc中加入set tabstop=4 (任何</div> </li> <li><a href="/article/2437.htm" title="Sublime Text 快捷键" target="_blank">Sublime Text 快捷键</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/sublime/1.htm">sublime</a> <div>[size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：</div> </li> <li><a href="/article/2564.htm" title="php 引用(&)详解" target="_blank">php 引用(&)详解</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址变量的引用 PHP 的引用允许你用两个变量来指向同一个内容复制代码代码如下: <? $a="ABC"; $b =&$a; echo</div> </li> <li><a href="/article/2691.htm" title="SVN中trunk,branches,tags用法详解" target="_blank">SVN中trunk,branches,tags用法详解</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a> <div>Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。</div> </li> <li><a href="/article/2818.htm" title="对软件设计的思考" target="_blank">对软件设计的思考</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>软件设计的宏观与微观软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传</div> </li> <li><a href="/article/2945.htm" title="同步、异步、阻塞、非阻塞" target="_blank">同步、异步、阻塞、非阻塞</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/%E9%9D%9E%E9%98%BB%E5%A1%9E/1.htm">非阻塞</a> <div>同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。实现：</div> </li> <li><a href="/article/3072.htm" title="Reverse SSH Tunnel 反向打洞實錄" target="_blank">Reverse SSH Tunnel 反向打洞實錄</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 fred@myhost.com # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1</div> </li> <li><a href="/article/3199.htm" title="Hibernate中的缓存" target="_blank">Hibernate中的缓存</a> <span class="text-muted">Josh_Persistence</span> <a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">一级缓存</a><a class="tag" taget="_blank" href="/search/Hiberante%E7%BC%93%E5%AD%98/1.htm">Hiberante缓存</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E7%BC%93%E5%AD%98/1.htm">查询缓存</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">二级缓存</a> <div>Hibernate中的缓存一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存</div> </li> <li><a href="/article/3326.htm" title="对象关系行为模式之延迟加载" target="_blank">对象关系行为模式之延迟加载</a> <span class="text-muted">home198979</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD/1.htm">延迟加载</a> <div>形象化设计模式实战 HELLO!架构一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。二、实现延迟加载实现Lazy Load主要有四种方法：延迟初始化、虚</div> </li> <li><a href="/article/3453.htm" title="xml 验证" target="_blank">xml 验证</a> <span class="text-muted">pengfeicao521</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xml%E8%A7%A3%E6%9E%90/1.htm">xml解析</a> <div>有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str = "Jamey친Ñ&#1282</div> </li> <li><a href="/article/3580.htm" title="div设置半透明效果" target="_blank">div设置半透明效果</a> <span class="text-muted">spjich</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8D%8A%E9%80%8F%E6%98%8E/1.htm">半透明</a> <div>为div设置如下样式： div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci</div> </li> <li><a href="/article/3707.htm" title="你真的了解单例模式么？" target="_blank">你真的了解单例模式么？</a> <span class="text-muted">w574240966</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div> 单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。一，单例模式的5中写法。（回字的四种写法，哈哈。） 1，懒汉式（1）线程不安全的懒汉式 public cla</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>