哈哈n
哈哈n

【vue学习】动态组件和异步组件

动态组件

【vue学习】动态组件和异步组件_第1张图片

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

【vue学习】动态组件和异步组件_第2张图片

is

上述内容可以通过 Vue 的 元素加一个特殊的 is 特性来实现

<component v-bind:is="currentTabComponent">component>

在上述示例中，currentTabComponent 可以包括

  • 已注册组件的名字，或
  • 一个组件的选项对象
  • component中绑定参数的方式和普通组件一样
    【vue学习】动态组件和异步组件_第3张图片
  • 解析 DOM 模板时的注意事项：有些 HTML 元素，诸如
      、
        、 和 和 ，只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
        <table>
  <blog-post-row>blog-post-row>
table>
        • 这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：
        <table>
  <tr is="blog-post-row">tr>
table>

        keep-alive

        当组件切换时，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题
        【vue学习】动态组件和异步组件_第4张图片
        上图中，你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，不会继续展示之前选择的文章。因为你每次切换时，Vue 都创建了一个新的 currentTabComponent 实例。

        重新创建动态组件的行为通常非常有用，但该案例中，我们更希望标签的组件实例能够被缓存下来。我们可以用 元素将其动态组件包裹起来。
        【vue学习】动态组件和异步组件_第5张图片
        【vue学习】动态组件和异步组件_第6张图片

        注意这个 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

        组件中的name选项有什么作用？

        根据上面的注意事项，延伸出该问题，下面来看个网上的回答：

        vue组件name的作用小结

        1. 当项目使用keep-alive时，可搭配组件name进行缓存过滤
        //假设我们有个组件命名为detail,
//其中dom加载完毕后我们在钩子函数mounted中进行数据加载
export default {
  name:'Detail'
}，
mounted(){
  this.getInfo();
}，
methods:{
  getInfo(){
     axios.get('/xx/detail.json',{
       params:{
        id:this.$route.params.id 
       }
     }).then(this.getInfoSucc)
   }
 }
 /**
 在App.vue中使用了keep-alive导致
 我们第二次进入的时候页面不会重新请求，
 即不会再次触发mounted函数。

 有两个解决方案：
 一个增加activated()函数,每次进入新页面的时候再获取一次数据。
 还有个方案就是在keep-alive中增加一个过滤exclude：
 */
 <div id="app"> 
 <keep-alive exclude="Detail">
  <router-view/>
 </keep-alive>
</div>
        1. DOM做递归组件时
        <div>
    <div v-for="(item,index) of list" :key="index">
      <div>
        <span class="item-title-icon">span>
        {{item.title}}
      div>
      <div v-if="item.children" >
      
        <detail-list :list="item.children">detail-list>
      div>
    div>
 div>
<script>
export default {
  name:'DetailList',//递归组件是指组件自身调用自身
  props:{
    list:Array
    /**
    const list = [{
     "title": "A",
     "children": [
     {"title": "A-A","children": [{"title": "A-A-A"}]},
     {"title": "A-B"}]
    }, {
     "title": "B"
    }, {
     "title": "C"
    }, {
     "title": "D"
    }]
    */
  }
}
script>

        迭代结果如下：
        【vue学习】动态组件和异步组件_第7张图片
        3. 当你用vue-tools时：该调试工具里显示的组见名称是由vue中组件name决定的

        异步组件

        在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

        为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。

        Vue 只有在这个组件需要被渲染时才会触发该工厂函数，且会把结果缓存起来供未来重渲染

        知识点

        • 如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。

        • 这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：
          【vue学习】动态组件和异步组件_第8张图片

        • 你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以写成这样：
          【vue学习】动态组件和异步组件_第9张图片

        组件之间的循环引用

        • 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：
          【vue学习】动态组件和异步组件_第10张图片

        • vue处理边界情况中有一种情况是：组件之间的循环引用，这里就涉及到了异步加载组件问题：
          【vue学习】动态组件和异步组件_第11张图片

        • 当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！
          当通过 Vue.component 全局注册组件的时候，这个悖论会被自动解开。
          如果你是这样做的，那么你可以跳过这里。

        • 然而，如果你使用一个模块系统依赖/导入组件，例如通过 webpack 或 Browserify，你会遇到一个错误：
          【vue学习】动态组件和异步组件_第12张图片

        • 这里我们可以异步import（具体的我们可以在处理边界情况一节中具体再学习）
          【vue学习】动态组件和异步组件_第13张图片

        处理加载状态

        2.3.0+ 新增：这块的具体应用后续再更新…

        这里的异步组件工厂函数也可以返回一个如下格式的对象：

        const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

        注意如果你希望在 Vue Router 的路由组件中使用上述语法的话，你必须使用 Vue Router 2.4.0+ 版本。

        Vue异步组件处理路由组件加载状态的解决方案

        • 在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。
        • 但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，那么该段时间内，我们的应用就会处于无响应的状态，用户体验极差。
        • 【解决方案】这种情况，我们一方面可以缩小路由模块代码的体积，静态资源使用cdn存储等方式缩短加载时间，另一方面则可以路由组件上使用异步组件，显示loading和error等状态，使用户能够得到清晰明了的操作反馈。
        • 【具体实现】声明方法，基于Vue动态组件工厂函数来返回一个Promise对象
          【vue学习】动态组件和异步组件_第14张图片
          调用：
          【vue学习】动态组件和异步组件_第15张图片

        你可能感兴趣的:(VUE学习)

        • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
          VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
        • 第五天Vue学习 余心不忍 vue.js学习elementui
          v-for的相关使用1.v-for的基本使用循环遍历，值，索引值，key都可以一般需要使用索引值。{{index+":"+item}}index表示索引，item表示当前遍历的元素。{{item}}{{key+'----'+i}}varapp=newVue({el:'#app',data:{books:['化学','物理','英语','数学','语文'],person:{name:'张三',age
        • Vue学习笔记 一 涔溪 vuevue.js学习笔记
          Vue学习笔记1、Vue基础指令1.1什么是Vue?Vue.js是一套响应式的JavaScript开发库。Vue.js自问世以来所受关注度不断提高，在现在的市场上，Vue.js是非常流行的JavaScript技术开发框架之一。Vue是一款国产前端框架，它的作者尤雨溪（EvanYou）是一位美籍华人，2014年2月，尤雨溪开源了一个前端开发库Vue.js，2015年发布1.0.0版本，2016年4月
        • day38-测试平台搭建之前端vue学习-ES6 开测开测 开发语言测试自动化测试测试开发vscodevuees6
          一、为什么要学习ES6？1.1.ES5语言的先天性不足。比如变量提升、内置对象的方法不灵活、模块化实现不完善等等1.2.为了后面vue、尤其是react框架做好了准备1.3.目前大部分公司的项目都在使用es6二、ES6新特性2.1.let和const命令let和const//var//vara=2//1.let声明变量，没有变量提升//console.log(a);//leta=10;//cons
        • VUE学习笔记—Vue运行时渲染 前端姑娘 VUEvue.js前端javascript
          前言有一个需求：能不能让用户自制组件，从而达到定制渲染某个区域的目的。在线DOME预览大致说一下项目的背景：我们做了一个拖拉拽生成界面的系统，通过拖拽内置的组件供用户定制自己的界面，但毕竟内置的组件有限，可定制性不高，那么给用户开放一个自定义代码组件，让用户自己通过写template+js+css的方式自由定制岂不是妙哉。那么该怎么实现呢？我们先来看一vue官方的介绍很多时候我们貌似已经忽略了渐进
        • Chapter 06 axios使用指南 Heaven645 vue.js前端Vueaxios
          欢迎大家订阅【Vue2+Vue3】入门到实践专栏，开启你的Vue学习之旅！文章目录前言一、导入二、发送GET请求三、发送POST请求四、处理响应前言在现代前端开发中，与后端API进行数据交互是至关重要的。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。本文详细介绍了Axios的基本用法。一、导入导入官网提供的axios在线地址：二、发送GET请求axios.get(
        • Vue学习笔记-组件通信 赵客缦胡缨v吴钩霜雪明
          最近公司需要开发酒店客房管理的OTA系统，我们使用vue.js2.0+ElementUI开发时，就遇到了问题:一个页面有很多表单,我试图将表单写成一个单文件组件,但是表单(子组件)里的数据和页面(父组件)按钮交互的时候,vue组件之间的通信让我感到崩溃:点击importdialogfrom'./components/dialog.vue'exportdefault{data(){return{sh
        • vue学习的第三天小结 微文殇却卟丢气质
          回顾：```Object.definePropertyletobj={a:10}leta=10;Object.defineProperty(obj,'a',{get(){//拦截了对于obj对象a属性获取的操作returna;},set(val){//拦截对于obj对象a赋值的操作a=val;}})obj.a=20;new一个vue实例data:{a:{a:{b:{}}}}vue自动遍历（递归）,
        • vue学习笔记:v-model指令的修饰符 子非余不知渔之乐 web前端vue学习笔记vue
          v-model指令的修饰符有三个，分别是：1.number作用：自动将用户的输入值转为数值类型。示例：2.trim作用：自动忽略输入内容的首尾空白字符示例：3.lazy作用：双向绑定时，当光标离开时才更新对应的变量示例：
        • Vue路由模式 几何心凉 前端小常识vue.js前端javascript
          聚沙成塔·每天进步一点点本文内容⭐专栏简介路由模式1.Hash模式2.History模式选择路由模式的考虑因素⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对Vue.js技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握Vue.js的核心概念和技术。订阅这个专栏，让我们一同踏上更深入
        • Vue的个人笔记 Purple Coder 笔记
          Vue学习小tipsctrl+s---->运行alt+b链接插值表达式指令
        • vue学习笔记 北京理工大学软件工程 vue.js学习笔记
          通常，使用VueCLI（Vue的命令行工具）来创建Vue.js项目会自动生成package.json文件。如果你没有使用VueCLI或者其他类似工具，那么可能需要手动创建这个文件。以下是一些建议的步骤，帮助你解决这个问题：确认你使用的是VueCLI：确保你使用的是VueCLI来创建项目。你可以通过运行vue--version来检查VueCLI是否已经安装以及安装的版本。使用VueCLI创建项目：如
        • 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 丁咚Dingdong 学习笔记前端Vue2.xVue3.0Vue
          尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通Vue2.0部分1.Vue核心部分1.1Vue简介1.1.1Vue是什么？1.1.2Vue作者1.1.3Vue的特点1.1.4Vue学习的JavaScript前备知识点1.1.5Vue使用指南1.1.6搭建Vue开发环境1.2初识Vue1.2.1Hello小实例1.2.2分析Hello案例1.3Vue模板语法1.4数据绑定1.5el
        • Vue学习笔记（三）常用指令、生命周期 老李笔记 vuevue指令vue生命周期vue常用指令
          Vue学习笔记（三）常用指令vue指令：html标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。常用指令：指令作用v-for列表渲染，遍历容器的元素或者对象的属性v-bind为html标签绑定属性值，如设置href，css样式等v-if/v-else-if/v-else条件性的渲染某元素，判定为true时渲染，否则不渲染v-show根据条件展示某元素，区别在于切换的是d
        • vue学习笔记 张豆豆94 【HBuilder学习篇】前端uni-appvue
          组件通信prop是用于父组件向子组件传递数据。$ref是父组件调用子组件的属性和方法。$emit是子组件告知父组件调用父组件的方法并可以从子组件传递参数到父组件。父组件（使用公共组件的地方）这是父组件importMyComponentfrom'@/components/my-component/my-component.vue';exportdefault{components:{MyCompon
        • vue学习的第一天小结 微文殇却卟丢气质
          ##Vue官网官网：https://cn.vuejs.org/命令行：https://cli.vuejs.org/zh/##Vue安装流程1.npminstall-g@vue/cli#ORyarnglobaladd@vue/cli2.npminstall-g@vue/cli-init#`vueinit`的运行效果将会跟`[email protected]`相同vueinitwebpackmy-project3
        • VUE学习——事件处理 BUG批量生产者 VUE学习vue.js前端
          事件分为内联事件和方法事件。我们可以使用【v-on】（简写：@）来处理。内联按钮按钮{{count}}方法
        • vue学习回顾第一天 xinhongwu
          为什么要学习vue为什么学习vue.png什么是mvvmMVVM.pngvue常用系统指令vue的使用Title{{message}}//2创建vue实例letvm=newVue({//3.通过el属性指定vue实例的监管范围，它的值是一个idel:"#app",//4data属性保存数据data:{message:"helloworld"}})插值表达式Title表达式{{name+"xin"}
        • Vue学习——计算属性与监视属性 王猪精也 Vue学习笔记vue.jsvue.jsjavascript
          一、计算属性什么是计算属性定义：要用的属性不存在，需要用已存在的属性计算得来。原理：底层借助了Object.defineProperty提供的getter和setter。get函数什么时候执行（1）初次读取计算属性时（2）计算属性所依赖的数据发生变化时计算属性内部有缓存机制，效率更高。备注：（1）计算属性放在vm身上，直接读取使用即可（2）如果要对计算属性进行修改，需要配置set函数，并且要在se
        • Vue学习——计算属性（17） Calendo Vuevue.js学习前端
          引入计算属性指通过一系列运算之后，最终得到一个属性值这个动态计算出来的属性值可以被模板结构或methods方法使用v-model进行双向绑定实现监听输入（即在开发者选项内能实时同步输入）.number则是将输入的字符串全部转化为数字（这里是rgb需要）然后写一个box颜色的计算公式，也就是利用v-bind将输入实时显示在文字上（v-bind后面被vue认为是javascript）其中，${}是动态
        • 尚硅谷Vue学习——计算属性 才疏学浅的小缘同学 Vue学习vue.js学习前端
          1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Pbject.defineproperty方法提供的getter和setter。3.get函数什么时候执行？初次读取时会执行一次。当依赖的数据产生变化时会再次调用4.优势：与methods方法相比，内部具有缓存的机制，效率更高，调试方便5.备注：计算属性最终会出现在vm上，直接读取使用即可。如果计算属性需要被修改，则必须去写s
        • vue学习笔记——计算属性传参 小怪兽_v 学习
          首先，计算属性，它是被当做属性来用的，一般不给它传参，直接接收它返回的值,但是有时候开发过程中不得不去传参来获取特定的值，可是直接往计算属性中传参根本没用，所以最后考虑到一个折中的办法，那就是返回一个回调函数,此时调用计算属性时给它传递的参数就到了回调函数中：computed:{showZT_top(){return(index)=>{returnindex*2}}}但是这样也是有弊端的，以返回函
        • Vue学习——计算属性、监听属性、动画 Elainerui 动画vue.jsjavascript
          Vue学习——计算属性、监听属性、动画一、计算属性1.引入当模板不再是简要的声明式逻辑时，而是需要对其进行一些操作时会显得难以处理。因此，对于任何复杂逻辑，应当使用“计算属性”。例子：{{firstName+''+lastName}}{{firstName}}{{lastName}}//两者等价{{getFullName()}}constapp=newVue({el:'#app',data:{fi
        • VUE学习——计算属性 BUG批量生产者 VUEvue.js学习javascript
          {{name.length>0?true:false}}{{commputedValue}}exportdefault{data(){return{name:"vue"}},methods:{},computed:{commputedValue(){returnthis.name.length>0?true:false;}}}使用computed对象。在methods可实现相同的结果。
        • VUE学习——事件参数 BUG批量生产者 VUEvue.js学习javascript
          接前一节，事件绑定之后，我们需要传递参数。{{item}}exportdefault{data(){return{items:["明神","博子","饼子"]}},methods:{getNameHandler(msg,e){console.log(msg);e.target.innerHTML="name:"+msg;}}}这个的传递参数getNameHandler(msg,e)，可以只传弟第一
        • VUE学习——事件修饰符 BUG批量生产者 VUEvue.js学习javascript
          阻止默认事件baidubaiduexportdefault{data(){return{}},methods:{onClickHandle(e){e.preventDefault();}}}其中e.preventDefault();，和@click.prevent作用一样。阻止冒泡事件父级和子级相互嵌套时，只触发子级，而不触发父级。.stopVUE官方文档
        • VUE学习——数组变化侦测 BUG批量生产者 VUE学习vue.js前端
          官方文档变更方法：使用之后，ui可以直接发生改变。改变原数组替换数组：使用之后需要接受重新赋值，不然ui不发生改变。不改变原数组
        • VUE学习笔记 父子组件传值 刀钝刃乏
          父组件通过props向下传递数据给子组件；子组件通过events给父组件发送消息。子组件向父组件传值子组件使用this$emit（'自定义事件名',要传送的数据）向父组件传递数据。1.template模块里面直接使用this$emit（'自定义事件名',要传送的数据）2.事件里面使用this$emit，使代码结构更清晰//这是子组件editData.vue$emit('saveEdit',this
        • Vue学习笔记5--前端工程化 UtilMan
          前端工程化完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ模块化相关规范概述传统开发问题命名冲突文件依赖模块化含义：把单独的一个功能封装到一个模块（文件）中,模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块好处：方便代码重用，提升开发效率，方便后期维护浏览器端模块化规范AMD（Require.js）CMD（Sea.js）服务器端模块化规范Comm
        • 学习vue.config.js 结合 webpack 未来可期wlkq webpackjavascriptvue.js
          webpack处理图片，将小于10kb的图片转成base64（字符串格式）减少http请求，因为当图片过大，转base64反而大很多，页面加载会变慢多线程-多线程基础多线程-多线程基础参考链接happyPack注意：webpack4已经融合了多线程机制，因此happypack的作用不是很明显。如果你使用的版本是<4，那么还是可以继续使用HappyPack。happyPack参考链接vue学习文章，
        • iOS http封装 374016526 ios服务器交互http网络请求
          程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
        • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
            那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
        • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
          转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
        • Informatica参数及变量 18289753290 Informatica参数变量
          下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
        • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
          php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
        • Hibernate的总结 永夜-极光 Hibernate
          1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
        • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
          刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
        • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
          俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
        • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
          创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
        • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
          js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
        • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
          一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
        • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
          1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
        • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
          本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
        • 提高职业素养，做好人生规划 白糖_ 人生
            培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
        • 国外的网站你都到哪边看？ bozch 技术网站国外
          学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
        • 编程之美-光影切割问题 bylijinnan 编程之美
          package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
        • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
          跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
        • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
                  现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
        • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
          The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
        • 关于 CAS SSO 文章声明 denger SSO
          由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
        • 初二上学期难记单词 dcj3sjt126com englishword
          lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
        • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
          #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
        • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
          /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
        • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
          页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
        • spring中少用的注解@primary解析 jackyrong primary
          这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
        • Java几款性能分析工具的对比 lbwahoo java
          Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
        • JVM参数配置大全 nickys jvm应用服务器
          JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
        • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
          （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
        • Spring缓存注解@Cache使用 tom_seed spring
          参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
        • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
          java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio