搜索到
19
篇与
的结果
-
git工作流 Git常见工作流Git三中常见的工作流：Git Flow、GitHub Flow、GitLab FlowGit FlowGit Flow是最早诞生也是最早被广泛使用的工作流程。在Git Flow中，有两个长期存在且不会被删除的分支：master和develop。在这两个分支中，master主要用于对外发布稳定的新版本，该分支时常保持着软件可以正常运行的状态，由于要维护这一状态，所以不允许开发者直接对master分支的代码进行修改和提交。其他分支的开发工作进展到可以发布的程度后，将会与master分支进行合并，并且这一合并只在发版时进行，发布时会附加版本编号的Git标签。develop则用来存放我们最新开发的代码，这个分支是我们开发过程中代码的中心分支，这个分支也不允许开发者直接进行修改和提交。程序员要以develop分支为起点新建feature分支，在feature分支中进行新功能的开发或者代码的修正，也就是说develop分支维系着开发过程中的最新代码，以便程序员创建feature分支进行自己的工作。注意：develop合并的时候，不要使用fast-farward merge，建议加上 --no-ff 参数，这样在master上就会有合并记录。除了这两个永久分支，还有三个临时分支：feature、hotfixes和releasefeature这个是特性分支，也叫功能分支，当你需要开发一个新的功能的时候，可以新建一个feature-xxx的分支，在里边开发新功能，这也是我们日常工作的大本营，开发完成后，合并到develop分支中，如下图：hotfixes这个分支开名字就是用来修复bug的，当我们的项目上线后，发现有bug需要修复，那么就从master上拉一个名为fixbug-xxx的分支，然后进行bug修复，修复完成后，再将代码合并到master和develop两个分支中，然后删除hotfix分支，如下图：release这个是发版的时候拉的分支，当我们所有的功能做完之后，准备将代码合并到master的时候，从develop上拉一个release-xxx分支出来，这个分支一般处理发版前的一些提交以及客户体验之后小bug的修复（bug修复也可以合并进develop），不要在这个里面去开发功能，在预发布结束后，将该分支合并进develop以及master，然后删除release，如下图：GItHub FlowGitHub Flow相比与Git Flow就要容易多了，GitHub Flow也是GitHub上使用的工作流程，如果你想参与GitHub上的某一个开源项目，那么不妨看看GitHub Flow。官方给的GitHub Flow流程如下：第一步：根据需求，从master拉出新分支，不区分功能分支或补丁分支。第二步：新分支开发完成后，或者需要讨论的时候，就向master发起一个pull request。第三步：pull request即是一个通知，让别人注意到你的请求，又是一种对话机制，大家一起评审和讨论你的代码。对话过程中，你还可以不断提交代码。第四步：你的pull request被接受，合并进master，重新部署后，原来你拉出来的那个分支就被删除。（先部署再合并也可）GItHub工作流虽然用这很简单，但是它的问题也很明显，就是没有对常见的工作场景中的问题提出解决办法。GitHub Flow这种方式，要保证高质量，对于贡献者的素质要求很高，换句话说，就是代码贡献者素质不那么高，质量就无法得到保证。GitLab FlowGitLab Flow是Git Flow与GitHub Flow的结合。它吸取了两者的优点，既有适应不同开发环境的弹性，又有单一主分支的简单和便利。他是GitLab.com推荐的做法。GitLab Flow的最大原则叫做“上游优先”，即只存在一个主分支master，它是所有其他分支的“上游”。只有上游分支采纳的代码变化，才能应用到其他分支。对于“持续发布”的项目，它建议在master分支以外，再建立不同的环境分支。比如，“开发环境”的分支是master，“预发环境”的分支是pre-production，“生产环境”的分支是production。只有紧急情况，才允许跳过上游，直接合并到下游分支。对于“版本发布”的项目，建议的做法是每一个稳定版本，都要从master分支拉出一个分支，比如2-3-stable、2-4-stable等等。GitLab Flow如何处理hotfix？Git Flow之所以这么复杂，一大半原因就是把hotfix考虑的太周全了。hotfix的意思是，当代码部署到环境之后发现的问题，需要火速fix。GitLab Flow可以基于后续分支，修改后上线。采用GitLab Flow工作流程新的迭代开始，所有开发人员从主干master拉个人分支开发特性，分支命名规范feature-name开发完成后，在迭代结束前，合入master分支master分支合并后，自动cicd到dev环境开发自动通过后，从master拉取药发布的分支，release-$version，将这个分支部署到测试环境测试测试的bug，通过从release-$version拉出分支进行修复，修复完成后，再合入release-$version正式发布版本，如果上线后，又有bug，根据5的方式处理等发布版本稳定后，将release-$versin反合入主干转自：https://www.jianshu.com/p/7eba1f0b5b42 -
Vue常见面试题 vue-router导航守卫有哪些？全局前置钩子：beforeEach、beforeResolve、afterEach路由独享守卫：beforeEnter组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave为什么Vue3.0采用了Proxy，抛弃了Object.defineProperty？Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。Vue2是通过递归+遍历data对象来实现对数据的监控的。如果属性值也是对象那么就需要深度遍历，显然如果能劫持一个完整的对象才是更好的选择。Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。V-for为什么要加key？如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/服用相同类型元素的算法。key是Vue中vnode的唯一标记，通过这个key，可以让diff操作可以更准确、更快速。如何从真实DOM到虚拟DOM？涉及到Vue中的模板编译原理，主要过程：将模板转换成ast树，ast用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）优化树将ast树生成代码为什么Vue采用异步渲染？Vue是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能，Vue会在本轮数据更新后，在异步更新视图。核心思想nextTick。为什么Vue组件中的data必须是一个函数？对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data也会被修改。而使用返回对象的函数，由于每次返回的都是一个新对象，引用地址不同，则不会出现这个问题。MVC和MVVM的区别？MVCmvc全名是Model View Controller，是模型-视图-控制器的缩写，一种软件设计典范Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。View（视图）：是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的。Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据，mvc的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话就是在Controller里面把Model的数据赋值给View。MVVMmvvm新增了vm类ViewModel层：做了两件事达到了数据的双向绑定，将模型转化成视图，即将后端传递额数据转化成所看到的页面。实现的方式是：数据绑定。将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。mvvm与mvc的最大区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作DOM元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。Vue data中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？不会立即同步执行重新渲染。Vue实现响应式并不是数据发生变化后DOM立即变化，而是按一定的策略进行DOM的更新。Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。Vue的优点轻量级框架，只关注视图层，是一个构建数据的视图集合简单易学双向数据绑定组件化视图、数据、结构分离，使数据的更改更为简单虚拟DOM运行速度更快nextTick是什么？Vue实现响应式并不是在数据发生变化后立即更新DOM，使用nextTick是在下次DOM更新循环结束之后立即执行延迟回调。在修改数据之后使用则可以在回调中获取更新后的DOM。Vue的生命周期beforeCreate：实例初始化之后，数据观测之前调用created：实例创建完成之后调用beforeMount：挂载之前调用mounted：挂载完成调用beforeUpdate：数据更新之前调用updated：数据更新之后调用beforeDestroy：实例销毁之前调用destroyed：实例销毁之后调用v-if和v-show的共同点和不同点？共同点：都能控制元素的显示和隐藏。不同点：v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过display:none来控制元素的显示和隐藏。如何让CSS只在当前组件中起作用？在组件中的style标签中加上scoped<keep-alive></keep-alive>的作用是什么？keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。Vue中常用的指令和它的用法v-model 双向数据绑定v-for 循环v-if v-show 显示与隐藏v-on 绑定事件v-once 只绑定一次vue-loader是什么？ 使用它的用途有哪些？vue文件的一个解析器，将template、js、style转换成js模块。用途：js可以写生es6，style样式可以scss或less，template可以加jade等。v-model的使用v-model用于表单数据的双向绑定，其实它就是一个语法糖，背后做了两个操作：v-bind绑定一个value属性，v-on指令给当前元素绑定input事件。分别简述computed和watch的使用场景computed：当一个属性受多个属性影响的时候就需要用到computed。watch：当一条数据影响多条数据的时候就需要用watch。v-on可以监听多个方法吗？可以，用{}对象的写法。渐进式框架的理解主张最少，可以根据不同的需求选择不同的层级。v-if和v-for的优先级v-if和v-for一起使用时，v-for比v-if的优先级更高，这意味着v-if将分别重复运行于每个v-for循环中，所以不推荐v-if和v-for同时使用。Vue常用修饰符.stop 等同于JavaScript中的event.stopPropagation()，防止事件冒泡.prevent 等同于JavaScript中的event.preventDefault()，防止执行预设的行为（标签的默认行为）.capture 与事件冒泡的方向相反，事件捕获由外到内.self 只会触发自己范围内的事件，不包含子元素.once 指挥触发一次Vue的两个核心点数据驱动，组件系统数据驱动：ViewModel，保证数据和视图的一致性。组件系统：应用类UI可以看作全部是由组件书构成的。SPA首屏加载慢如何解决？安装动态懒加载所需插件，使用动态懒加载。使用CDN资源。axios的特点有哪些？支持Promise API可以拦截请求和响应转换请求数据和响应数据取消请求自动换成json封装Vue组件的过程？建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。准备好组件的数据输入。即分析好逻辑，定好props里面的数据，类型。准备好组件的数据输出。即根据组件逻辑，做好要暴漏出来的方法。params和query的区别query在浏览器中显示参数，params不显示参数。query刷新页面之后不会丢失数据。params刷新页面会丢失数据。Vue初始化页面闪动的问题在Vue初始化之前，由于div是不归Vue管的，所有在代码还没有解析的情况下会容易出现花屏现象。解决方案：在css里加上 [v-cloak] { display:none }，如果没有彻底解决问题，则在根元素加上加上 style="display:none"Vue更新数组是触发视图更新的方法push()、pop()、shift()、unshift()、splice()、sort()、reverse()什么是Vue生命周期？ 有什么作用？每个Vue实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这个用户在不同阶段添加自己代码的机会，方便用户做一些逻辑处理。$route和$router的区别$router是VueRouter的实例，在script标签中想要导航到不同的URL，使用$router.push方法等。$route为当前router跳转对象，里面可以获取到当前路由的各种参数信息。VueX有哪几种属性？有5中，分别是state、getter、mutation、action、modulestate：基本数据，数据源存放地getters：从基本数据派生出来的数据mutations：提交更改数据的方法，同步更新action：像一个装饰器，包裹mutations，实现数据的异步更新modules：模块化VueX
-
JavaScript宏任务和微任务简单理解 宏任务 - macro task，又称为task，包括：script代码块I/OxhrsetTimeoutsetIntervalsetImmediateUI交互事件postMessage浏览器为了能够使得JS引擎跟UI引擎有序配合执行，会在每一个宏任务执行结束后，在下一个宏任务执行前，对页面进行重新渲染，执行流程为macro task(JS引擎) -> render(UI引擎) -> macro task(JS引擎)微任务 - micro task包括：Promise.thenawaitprocess.nextTickMutaionObserver执行流程为：micro task -> micro task -> ...注意：微任务总是在宏任务执行过程中产生的任务，它不能单独存在（微任务实际上是宏任务的一个步骤），可以理解为宏任务是微任务寄生的环境在同一个层级的任务中，微任务执行优先级要高于宏任务的优先级，如果不考虑同一个层级，那么比较微任务和宏任务的执行级别毫无意义在宏任务执行过程中产生的微任务，会在该宏任务结束前一次执行完毕微任务实际是宏任务的一个步骤，所有微任务会在下一个宏任务之前全部执行完毕在微任务执行过程中产生的微任务会直接添加到微任务队列的末端，并在下一个宏任务执行之前全部执行掉如果在微任务执行过程中产生的宏任务，则会进入到宏任务队列末尾，按照宏任务顺序在后面的事件循环中执行process.nextTick会在当前执行站的末尾，下一次Event loop之前出发回调函数，也就是说，它指定的任务总是发生在所有异步任务之前setTimeout单线程运行机制，同一时间只能做一件事。不管怎样，都是要等主线线程的流程中兴完毕后才会进行，且按照setTimeout设置的顺序进行排队执行。该函数指定的任务为宏任务，优先级低于process.nextTick()process.nextTick()nodejs的一个异步执行函数，效率比setTimeout更高，执行顺序要早于setTimeout,在主逻辑的末尾任务队列调用之前执行。setInterval()setInterval定时器函数，按照指定的周期不断调用函数。等主线程执行完毕后调用。和setTimeout执行时间一致时，按照设置的顺序来执行。process.nextTick和PromiseNode执行完所有同步任务，接下来就会执行process.nextTick的任务队列。如果你希望异步任务尽可能快地执行，那就使用process.nextTick。根据语言规格，Promise对象的回调函数，会进入异步任务里面的“微任务”(microtask)队列。微任务队列追加在process.nextTick队列的后面，也属于本轮循环。process.nextTick跟setImmediate区别可以把process.nextTick理解为往已经存在的事件队列头部插入任务，而setImmediate可以理解为吧任务添加到已经存在事件队列的末端。
-
JavaScript中的防抖和节流函数 防抖函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次重复请求。应用场景按钮提交场景：防止多次提交按钮，只执行最后提交的一次服务端验证场景：表单验证需要服务端配合，只窒执行一段连续的输入事件的最后一次，还有搜索联想词功能类似生存环境请用lodash.debounce防抖函数的实现function debounce(fn, wait) { let timer = null; return function() { let context = this,args = [...arguments]; // 如果此时存在定时器的话，则取消之前的定时器重新计时 if (timer) { clearTimeout(timer); timer = null; } // 设置定时器，使事件间隔指定时间后执行 timer = setTimeout(() => { fn.apply(context, args); }, wait) } }节流函数节流是指规定一个单位事件，在这个单位时间内，只能有一次触发事件的回调函数执行，如果同一个单位时间内某事件被触发多次，只能由一次能生效。节流可以使用在scroll函数的事件监听上，通过事件节流来降低事件调用频率。应用场景拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动缩放场景：监控浏览器resize动画场景：避免短时间内多次触发动画引起性能问题节流函数的实现时间戳版function throttle(fn, delay) { let preTime = Date.now(); return function() { let context = this,args = [...arguments],nowTime = Date.now(); // 如果两次时间间隔超过了指定时间，则执行函数。 if (nowTime - preTime >= delay) { preTime = Date.now(); return fn.apply(context, args); } } }定时器版function throttle(fun, wait) { let timeout = null; return function() { let context = this; let args = [...arguments]; if (!timeout) { timeout = setTimeout(() => { fun.apply(context, args) timeout = null }, wait) } } }
-
