一押排序 快速排序 var quickSort = function(arr){ if(arr.length === 1){ return arr } var pivotIndex = Math.floor(arr.length / 2) var pivot = arr.splice(pivotIndex,1)[0] var left = [] var right = [] for(var i = 0;i<arr.length;i++>){ if(arr[i] < pivot){ left.push(arr[i]) }else{ right.push(arr[i]) } } return quickSort(left).concat([pivot],quickStor(right)) } 计数排序 const countSort = function(arr){ let hashTable ={} , max = 0 , result = [] for(let i=0; i<arr.length; i++){ if(!(arr[i] in hashTable)){ hashTable[arr[i]] = 1 }else{ hashTable[arr[i]] += 1 } if(arr[i] > max){ max = arr[i] } } for(let j = 0; j<=max; j++){ if(j in hashTable){ for(let i=0; i<hashTable[j]; i++){ result.……

导航守卫是什么 正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 导航守卫全解析 导航守卫分为：全局的，单个路由独享的，组件内的 全局导航守卫 beforeEach , beforeResolve , afterEach 特点：所有路由配置的组件都会触发，触发路由就会触发这些钩子函数 写法如下 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 【beforeEach】 : 在路由跳转钱触发，参数有to,from,next三个，这个钩子主要用于登录验证，就是路由还没跳转前高职，以免跳转了再通知 【beforeResolve】 : 这个钩子与beforeEach类似，也是路由跳转前触发，参数也是to,from,next。 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。 即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。 【afterEach】 : 在路由跳转之后触发，参数有to,from。他发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫，后讲）之前 独享路由 beforeEnter 是指在单个路由配置的时候可以设置的钩子函数 写法如下 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) 【beforeEnter】 : 和beforeEach完全相同，如果都设置了就在beforeEach之后执行。参数为to,from,next……

Vuex是一个专为Vue应用程序开发的状态管理模式 起步 安装vuex yarn add vuex -D 使用vuex // 在main.js中 import vuex from 'vuex' Vue.use(vuex) const store = new vuex.Store({ state :{ count ： 0 }， }) //在根组件注入store给所有的子组件 const app = new Vue({ el: '#app', store }) 核心概念 State const store = new vuex.Store({ state :{ count ： 0 }， }) // 子组件这么拿到state this.$store.state.count ！！！ state中的状态是不能被直接改变的，必须通过提交mutation set的用途 最好提前在store中初始化好需要的属性 如果需要添加新属性时，就要使用到set // 添加obj对象，key为newProp,value为123 Vue.set(obj,'newProp',123) Vue.set === this.$set //true //新对象替换老对象 this.……

准备工作 npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies 单元测试 单元测试就是使用代码验证我们的代码是否正确．这里使用chai这个库 const expect = chai.expect expect(foo).to.be.a('string');　//期待foo是一个string expect(foo).to.equal('bar'); //期待foo等于bar expect(foo).to.have.lengthOf(3);　//期待foo长度是3 expect(tea).to.have.property('flavors') //期待tea有个flavors属性并且长度是3 .with.lengthOf(3); 更多API请查看官方文档 自动化测试 配置Karma Karma的作用是打开浏览器,加载测试脚本，运行测试用例 // 新建 karma.conf.js，内容如下 module.exports = function (config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['mocha', 'sinon-chai'], client: { chai: { includeStack: true } }, // list of files / patterns to load in the browser files: [ 'dist/**/*.……

钩子的意思相当于特殊的函数 常用的生命周期钩子 constructor 组件在创建之后调用constructor 初始化props,state 这个时候不能调用setState shouldComponentUpdate 可以手动判断是否要更新组件 返回true:更新 false:不更新 可是使用PureComponent替代 class Component extends React.PureComponent{ } render 展示视图 return (<div></div>) 这个div不是dom元素，是一个虚拟dom 注意：只能有一个根元素 componentDidMount 在元素挂载到页面后执行代码 加载数据推荐在这里 首次render会执行 componentDidUpdate 视图更新后执行 更新数据在这里 首次渲染不会执行 注意： setState在这里可能会死循环,须添加判断 shouldComponentUpdate返回false 不触发此钩子 componentWillUnmount 组件将被卸载时执行 componentWillReceiveProps 当组件接受新的props是,会触发这个钩子 不过这个钩子被弃用了，不要使用的好 更名为 UNSAFE_componentWillReceiveProps 总结 这里是主要的几个钩子，想了解更多直接去看文档……

今天简单分享一下React中组件的数据读写 类组件 //定义一个类组件 class Component extends React.Component { render() { return ( <div>类组件</div> ); } } //使用类组件 <Component/> 类组件中使用外部数据props //父组件给我传了一个data class Component extends React.Component { constructor(props){ //没有数据时可以省略 super(props) } render() { return ( <div> {this.props.data} </div> ); } } 类组件中读写数据 class Component extends React.Component { constructor(props){ super(props) this.state = { //初始化数据 data : 0 } } add = ()=>{ this.setState({data : this.state.data + 1}) } render() { return ( <div> <button onClick={this.……

React的创建 (我都是使用yarn) 使用CDN (不推荐) react react-dom 两个都要引入 通过webpack引入React (不推荐) yarn add react react-dom //引入 import React from 'react' import ReactDOM from 'react-dom' create-react-app直接创建一个react项目 (就用这个) //安装 yarn add create-react-app //使用 create-react-app my-app cd my-app yarn start //看到react界面说明创建成功了 JSX JSX是什么 JSX说直白点，就是美化了react代码,让我们能更舒服的写react项目，就像是Vue有vue-loader，React有JSX。 JSX怎么使用那 create-react-app 默认会将js 当作jsx webpack里内置的babel-loader 所以直接写 JSX的注意事项 使用className <div className='red'>n</div> 变量,函数要加上大括号 return () （写react在return后面加括号） 想先试试手可以点下面的链接 在线转换JSX……

什么是directive (指令) 以 v- 开头的东西就是指令 Vue指令的主要目的就是原生DOM的操作 常用的directive v-html data.x = <strong>hi</strong> <div v-html='x'></div> //显示粗体的hi v-pre <div v-pre>{{n}}</div> //显示{{n}} v-bind (缩写为 :) data.x = '图片地址' <img :src='x'> // x是一个变量,而不是字符串x v-on (缩写为@) <button @click='add'>按钮</button> //点击会触发methods里的add事件 <button @click='n+1'>按钮</button> //点击会执行n+1 v-if v-else-if v-else <div v-if='x>0'> x大于0 </div> <div v-else-if='x===0'> x等于0 </div> <div v-else='x<0'> x小于0 </div> v-for (必须加上key) <ul> <li v-for='(user,index) in users' :key='index'> {{user.……

computed - 计算属性 当其依赖的值发生变化时，计算属性会重新计算，反之则使用缓存中的属性值 var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { //getter reversedMessage(){ return this.message.split('').reverse().join('') } } }) 因为时getter函数,所以调用不用加括号 watch - 监听 一旦data发生变化,就执行的函数 加上immediate : true　第一次也运行 加deep ： true 监听对象 如果是true 那么对象里面的改变了 也算对象变了 语法 function(value,oldValue){} (){} [f1,f2] //依次执行f1 f2函数 'methodName' //调用methods里的事件 vm.$watch('xxx',fn {deep:true,immediate:true}) mixin - 混入 mixin是一个可以复用的组件 //定义一个mixin组件 const myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.……

这里介绍一下Vue比较简单的，也是一定要知道的属性 el - 挂载点 new Vue({ el : '#App' }) //可以使用$mount代替 new Vue({ }).$mount('#App') data - 内部数据 注意: 在组件中使用data必须是函数 new Vue({ data(){ return { data : 0 } } }) methods - 方法 new Vue({ data{ data : 0 } methods : { add(){ this.data++ } } }) this.add() //1 components - 组件 引入一个vue文件，就是一个组件 声明 Vue.component('Demo',{ template : `<div>组件</div> ` }) 在实例中添加component对象 使用方法……