餐饮网站开发性能需求分析长沙建站找有为太极环境遵

餐饮网站开发性能需求分析,长沙建站找有为太极环境遵,景县网站建设,个人社保缴费信息查询最近行情太差#xff0c;卷全栈开发时写了一个属于程序员的网站#xff0c;代码开源#xff0c;欢迎大家参观吐槽#xff1a;CodingLife。 一#xff1a;JavaScript 1、闭包是什么#xff1f;利弊#xff1f;如何解决弊端#xff1f; 闭包是什么#xff1a;JS中内层…最近行情太差卷全栈开发时写了一个属于程序员的网站代码开源欢迎大家参观吐槽CodingLife。一JavaScript1、闭包是什么利弊如何解决弊端闭包是什么JS中内层函数可以访问外层函数的变量外层函数无法操作内存函数的变量的特性。我们把这个特性称作闭包。闭包的好处隔离作用域保护私有变量有了闭包才有局部变量要不然都是全局变量了。让我们可以使用回调操作其他函数内部变量长期驻扎在内存中不会被内存回收机制回收即延长变量的生命周期闭包的弊端内层函数引用外层函数变量内层函数占用内存。如果不释放内存过多时易引起内存泄露。解决办法无法自动销户就及时手动回收使用后将函数的引用赋null。2、深度拷贝1、深拷贝与浅拷贝的区别拷贝的层级不同深拷贝是指每一层数据的改动都不会影响原对象和新对象浅拷贝只有第一层的属性变动不互相影响深层的数据变动还会互相影响。2、实现拷贝的方法有哪些浅拷贝数组可以用拓展运算符\[...arr\]或者slice().浅拷贝对象可以用Object.assign({},obj) 深拷贝JSON.parse(JSON.stringify(obj))或封装递归方法或使用第三方库的方法比如 JQuery的$.extend({},obj)或者lodash 的cloneDeep3、JSON.parse(JSON.stringify(obj))处理的缺点如果对象中有属性是function或者undefined处理后会被过滤掉如果属性值是对象且由构造函数生成的实例对象会丢弃对象的constructor3、如何判断空对象如何区分数据类型判断空对象1、用JSON的stringify转成字符串后跟’{}对比2、用ES6判断Object.keys(targetObject)返回值数组的长度是否为03、用ES5判断Object.getOwnPropertyNames(targetObject)返回的数组长度是否为0区分数据类型let a [1,2] Object.prototype.toString.call(a) // [object Array]4、如何改变this指向区别call/applycall 和 apply 都是可以改变this 指向的问题, call 方法中传递参数要求一个 一个传递参数。 但是apply 方法要求传递参数是一个数组形式。let a { name: sunq, fn:function(action){ console.log(this.name love action); } } let b {name:sunLi} // 正常的this指向 a.fn(basketball); // sunq love basketball // 改变this指向并体现call与apply的区别 a.fn.apply(b,[football]); // sunLi love football a.fn.call(b,football); // sunLi love footballbind还是上面的示例bind也可以实现call和apply的效果。bind的不同之处在于bind会返回一个新的函数。如果需要传参需要再调用该函数并传参a.fn.bind(b)(piano); // sunLi love piano5、沙箱隔离怎么做使用iframe可以实现变量隔离6、浏览器存储他们的区别localStorage永久保存以键值对保存存储空间5MsessionStorage关闭页签/浏览器时清空cookie随着请求发送通过设置过期时间删除session保存在服务端localStorage/sessionStorage是window的属性cookie是document的方法7、常用的数组方法有哪些改变原数组push、pop、shift、unshift、sort、splice、reverse不改变原属组concat、join、map、forEach、filter、sliceslice和splice的区别slice切片的意思根据传入的起始和终止下标获取该范围数组。splice可根据传入参数个数不同实现删除、插入操作直接操作原数组。第1个参数为起始下标第2个为删除个数第3个为要增加的数据。数组如何滤重\[...new Set(arr)\]8、Dom事件流的顺序什么是事件委托当页面上的一个元素被点击时先从document向下一层层捕获到该元素。然后再向上冒泡一层层触发。事件委托是将事件写在父级元素上e.target是事件捕获时那个最小的元素即选中的元素。所以可以根据e.target操作选中的元素。这样不需要给每个子元素绑定事件代码更加简约。9、对原型链的认识js通过原型链模拟实现面向对象比如通过实例化一个构造函数可以给每个对象挂载自己专属的属性通过给类的prototype上赋方法是所有对象所共有的方法。每次实例化不再赋值原型链上的方法。10、防抖/节流的区别区别防抖只会在最后一次事件后执行触发函数节流不管事件多么的频繁都会保证在规定时间段内触发事件函数。防抖:原理是维护一个定时器将很多个相同的操作合并成一个。规定在delay后触发函数如果在此之前触发函数则取消之前的计时重新计时**只有最后一次操作能被触发。**例如实时搜索的input一直输入就不发送。let input document.querySelector(input); let time null;//time用来控制事件的触发 input.addEventListener(input,function(){ //防抖语句把以前的定时删除只执行最后一次 if(time ! null){ clearTimeout(time); } time setTimeout(() { console.log(this.value);//业务实现语句这里的this指向的是input },500) })节流原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。例如在指定的时间内多次触发无效//节流 function throttle(fn, time) {//连续触发事件 规定的时间 let flag false; return function () { //使用标识判断是否在规定的时间内重复触发了函数没有就触发有就不触发 if (!flag) {//不为假时 执行以下 fn();//触发事件 flag true;//为真 setTimeout(() {//超时调用在规定的时间内只执行一次 flag false; }, time); } } } mybtn.onclick throttle(btn, 3000);//单击事件 节流(btn,3s时间)使用场景两者主要区别在于时间间隔的处理方式和触发函数的执行时机。防抖是等待一段时间后执行事件如果在这段时间内再次触发事件会重新等待而节流是每隔一定时间执行一次事件不管这段时间内触发了多少次事件。防抖适合处理连续触发的事件例如输入框的实时搜索而节流适合限制高频触发的事件例如滚动事件、鼠标移动事件。11、ES5ES6如何实现继承在 JavaScript 中可以使用原型继承、构造函数继承和组合继承等方式来实现继承。下面分别介绍这些方式的实现方法1. 原型继承原型继承是 JavaScript 中最基本的继承方式通过将一个对象的原型设置为另一个对象来实现继承。function Parent() { this.name Parent; } Parent.prototype.sayHello function() { console.log(Hello from Parent); }; function Child() { this.name Child; } Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; const child new Child(); child.sayHello(); // 输出Hello from Parent2. 构造函数继承构造函数继承通过在子类构造函数中调用父类构造函数来实现继承。这种方式可以实现实例属性的继承但无法继承父类原型上的方法。function Parent(name) { this.name name; } function Child(name, age) { Parent.call(this, name); this.age age; } const child new Child(Child, 10); console.log(child.name); // 输出Child3. 组合继承组合继承结合了原型继承和构造函数继承的优点通过在子类构造函数中调用父类构造函数并设置子类原型为父类实例来实现继承。function Parent(name) { this.name name; } Parent.prototype.sayHello function() { console.log(Hello from Parent); }; function Child(name, age) { Parent.call(this, name); this.age age; } Child.prototype new Parent(); Child.prototype.constructor Child; const child new Child(Child, 10); child.sayHello(); // 输出Hello from Parent4. ES6 Class 继承ES6 引入了 Class 语法提供了更加简洁和易读的继承语法。class Parent { constructor(name) { this.name name; } sayHello() { console.log(Hello from Parent); } } class Child extends Parent { constructor(name, age) { super(name); this.age age; } } const child new Child(Child, 10); child.sayHello(); // 输出Hello from Parent12、讲讲什么是作用域13、常用操作字符串方法有哪些是否更改自身14、break/continue/return的使用场景break用于结束整个循环for、while、do-whilecontinue用于结束循环中的当前层循环进入下一层循环return用户结束整个函数二Html1、重绘和重排回流/重构/重载是什么如何优化样式的调整会引起重绘比如字体颜色、背景色调整等Dom的变动会引起重排比如定位改动、元素宽高调整避免循环插入dom比如table的行。可以js循环生成多个dom后一次性插入。2、html5有哪些新特性本地存储比如localStorage、sessionStorage语义化标签如header、footer、nav等使代码结构清晰利于seocanvassvgweb worker在主线程外再创建一个线程可与主线程交互拖放功能三CSS1、如何实现一个宽度不固定的上下左右居中的弹框方法一 .pop{ width: 300px; height: 300px; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid red; } 方法二 .chartLengend { // 父元素 width: 60px; height: 40px; position: relative; .line { // 子元素 width: 100%; height: 3px; background-color: #DEA182; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 2px; } }2、伪类和伪元素区别伪类本质上用于弥补常规css选择器的不足因为如果没有我们可能需要多写一个class所以叫伪类.class:last-child{} .class:first-child{} a:link {color:green;} a:visited {color:green;} a:hover {color:red;} a:active {color:yellow;}伪元素本质上是创建了一个有内容的虚拟元素如::before ::after。因为相当于多了一个元素/节点所以叫为元素// :before用于在某个元素之前插入某些内容。 // :after用于在某个元素之后插入某些内容。 css p:before{ content:Read this: ; } html: pI live in Ducksburg/p 页面展示 Read this: I live in Ducksburg F12看dom中 before Read this: I live in Ducksburg伪类和伪元素配合使用帮每个指标后面添加一个分割竖线且最后一个指标后面不要分割线.quota-item { flex: 1; text-align: center; position: relative; } .quota-item:not(:last-child)::after { content: ; position: absolute; top: 30%; right: 0; width: 1px; height: 40%; background-color: #aeaeae9d; }四Vue1、单页面应用是什么优缺点如何弥补缺点单页面对一个入口DOM通过路由去更改内容整个应用只有一个html页面SPA优点用户体验好没有页面切换就没有白屏情况SPA缺点首屏加载慢不利于SEOSPA弥补通过压缩、路由懒加载缓解首屏慢通过SSR 服务器端渲染解决SEO问题2、组件及通信方式有哪些2.1、什么是组件组件是可复用的 Vue 实例且带有一个名字在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中把这个组件作为自定义元素来使用声明组件// 定义一个名为 button-counter 的新组件 Vue.component(button-counter, { data: function () { return { count: 0 } }, template: button v-on:clickcountYou clicked me { { count }} times./button })使用组件把组件当作自定义元素div idcomponents-demo button-counter/button-counter /div引入组件new Vue({ el: #components-demo })2.2、父向子传值Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中组件内部声明propVue.component(blog-post, { props: [title], template: h3{ { title }}/h3 })父组件里调用并给prop赋值传递到组件内部blog-post titleMy journey with Vue/blog-post2.3、父组件监听子组件事件其实就是通过在父组件声明方法并绑定在子组件上。以子组件内部触发方法的形式向父组件传参实现子向父传值的效果。如下父组件中声明方法并绑定在子组件上template lineChart v-on:getQuotaValgetQuotaVal/lineChart /template script methods: { // 本事件用来监听折线图子组件从子组件拿到指标数据 getQuotaVal:function(obj){ this.lineDateType obj.lineDateType; // 这样父组件就拿到了子组件的obj数据 } }, /script子组件触发方法that.val {}; that.$emit(getQuotaVal,that.val); // 将子组件的数据发送过去2.4、兄弟组件间交互兄弟组件间交互可以通过三种方式具体如下通过共同父组件传递使用EventBus通过Vuex传递1、通过共同父组件传递比如兄弟组件A和B有一个共同父组件P。A要向B发送数据可以先发消息给P(this.$emit)P接收到消息(P绑定在A上的方法接收方法)。P再发消息给BP修改B组件的自定义属性的值B接收数据(Props变量接收)。2、使用EventBus事件总线vue.$bus.on和emit方法。初始化——全局定义可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.//main.js Vue.prototype.$EventBus new Vue();触发事件this.$EventBus.$emit(eventName, param1,param2,...)监听事件this.$EventBus.$on(eventName, (param1,param2,...){ //需要执行的代码 })移除监听事件为了避免在监听时事件被反复触发通常需要在页面销毁时移除事件监听。或者在开发过程中由于热更新事件可能会被多次绑定监听这时也需要移除事件监听。this.$EventBus.$off(eventName);3、通过Vuex实现交互比如兄弟组件A和BA为发送方。则A改动Vuex state中的变量(this.$store.commit(‘set’,{name:xx}))B组件中通过computed和watch配合使用(this.$store.state.name)监听name变动即可。3、v-if和v-show区别v-if控制Dom是否存在v-show控制样式4、vuex是什么使用步骤大概说下vuex是一个状态管理工具集中式的管理所有组件的状态数据。统一的去管理组件。比如组件A、B、C需要交互变量name、sex。可以将name、sex放在Vuex的state属性中。限制A组件通过commit方法触发mutation里的函数来改变组件状态。组件B、C使用computed、watch监听数据的变化进行操作(接收数据)。如下举个loading组件的栗子loading组件与路由区域平级loading组件内部根据Loading数据控制DOM显隐template div classcover v-showLoading div加载中/div /div /template script import Store from ../../store export default { name: Loading, computed:{ Loading(){ return Store.state.Loading; } } } /scriptvuex集中管理状态创建一个叫store的js文件import Vuex from vuex; Vue.use(Vuex); export default new Vuex.Store({ state: { // Loading组件 Loading:false, }, mutations: { // Loading组件 ChangeLoading:function (State,Value) { State.Loading Value; } }, });需要跟loading组件交互的组件中直接去操作Vuex的状态即可import Store from ../../store Store.commit(ChangeLoading,true);5、vuex中 mutation和action的区别和使用Mutation用于执行简单的同步操作比如直接修改state的值。Action用于执行更复杂的异步操作比如发起API请求或批量的异步操作并可以在异步操作完成后再触发mutation来修改状态。Mutation用于修改state中的状态通过执行mutation来实现对状态的同步修改。只能执行同步操作一般用于处理简单的状态修改。在组件中通过commit()方法来触发mutation的执行。接收一个参数state即当前的state对象以及可选的payload参数作为载荷传入。在mutation中直接修改state的值将其作为一个原子操作。Action用于执行异步操作可以包含任意的异步操作逻辑例如发起API请求、异步数据处理等。可以用于处理复杂的业务逻辑和流程控制。在组件中通过dispatch()方法来触发action的执行。接收一个参数context即一个和store实例具有相同方法和属性的context对象可以通过context去调用其他的action、mutation等。通过commit方法触发mutation来修改state的值实现对状态的同步修改。6、vue watch和computed区别computedcomputed中的属性本质上是一个变量。一个特殊的变量它由其他变量计算或者说赋值而来。它依赖于其他变量的变化无需也无法像普通变量一样直接赋值修改。watchwatch用来监听某个变量当被监听的值发生变化时执行相关操作。与computed的区别是computed是一个变量watch用来监听变量。computed监听构成它的变量的变化导致自己这个变量变化。watch单纯监听某个变量变化触发事件。computed方法体内只能返回构成它的变量构成而watch里可以进行任何操作。data(){ return{ first:2 } }, watch:{ first(){ console.log(this.first) } },7、Vue的虚拟Dom是什么谈一谈对vue diff算法的认识key的作用8、谈谈对vue的双向绑定原理的理解双向绑定主要指修改数据时无须操作DOM视图会自动刷新。操作视图时绑定的数据也会跟随变动。vue数据双向绑定是通过数据劫持结合订阅者发布者的方式来实现的通过Object.defineProperty()来劫持各个属性的setter,getter,当数据变动时发布消息给订阅者触发相应的监听回调数据 视图vue在初始化实例时会用Object.defineProperty方法给所有的数据添加setter函数实现对数据变更的监听。当数据被修改时生成新的虚拟DOM树跟老的虚拟DOM对比根据对比结果找出需要更新的节点进行更新。视图 数据从视图到数据较为简单视图变化后触发监听如oninput等在绑定的方法中修改数据。9、vue首屏优化怎么做使用较轻量的组件比如echart对应有vue-chartvue-cli开启打包压缩 和后台配合 gzip访问分割打包 按需加载打包时配置删掉log日志资源过大可以使用cdn模式引入不再打包到本地首屏优化是个细活一时半会干不完三言两语说不完三四千字写不完。我结合平时的实践单独总结了一篇请移步首屏优化与Lighthouse10、vue2的缺陷是什么如何解决vue2.0数组中某一项改变页面不改变的情况缺陷数据如果为对象直接新增属性如果为数组通过下标操作数组项页面无法触发更新。原因 Vue 会在初始化实例时对 property 执行 getter/setter 转化所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。关于数组作者通过重写push/pop/shift/unshift/splice/reverse/sort这些方法来实现数据的相应绑定其余的操作无法触发页面更新对策关于对象可以通过Vue.s e t ( o b j , k e y , v a l u e ) 组件中通过 t h i s . set(obj,key,value)组件中通过this.set(obj,key,value)组件中通过this.set(obj,key,value)实现新增修改属性vue可以相应更新视图。关于数组也可以通过Vue.$set(obj,key,value)或者作者重写的那些方法来操作11、异步操作放在created还是mouted如果有些数据需要在初始化时就渲染的比如select下拉框的下拉内容在mouted中请求。好处如下页面初始化速度更快减少用户等待时间放在 created 中有助于一致性因为ssr 不支持 beforeMount 、mounted 钩子函数12、vue-router的钩子函数生命周期有哪些路由守卫可以在全局范围内设置也可以在单个路由配置中设置。在 Vue Router 中路由守卫可以分为以下几种类型全局前置守卫Global Before Guardsrouter.beforeEach(to, from, next)在路由导航触发之前调用。可以用于全局的权限验证、导航控制等。全局解析守卫Global Resolve Guardsrouter.beforeResolve(to, from, next)在导航被确认之前调用也就是在beforeEach之后调用但在路由组件渲染之前。只在导航被确认之前调用一次。全局后置钩子Global After Hooksrouter.afterEach(to, from)在每次路由导航完成之后调用不关心导航的成功与否。路由独享守卫Per-Route GuardbeforeEnter(to, from, next)在单个路由配置中使用用于对特定路由进行拦截。组件内的导航守卫Component’s Navigation GuardsbeforeRouteEnter(to, from, next)在路由进入前在组件实例化之前调用。beforeRouteUpdate(to, from, next)在当前路由改变但是该组件被复用时调用。beforeRouteLeave(to, from, next)在路由离开前调用导航离开该组件的对应路由时调用。13、页面如何跳转如何跨页面传参数router-link标签跳转路由如下跳转顺便把参数传了。如下this.$router.push({ path: /url, query: { par:parid } })接受参数var parid this.$route.query.par;14、vue子组件的生命周期子元素在什么时候挂载父beforeCreate 首先初始化父原素父created 父原素挂载数据父beforeMounte 父原素开始挂载domtpl里遇到子组件子beforeCeate 子组件开始挂载数据子created 子元素数据挂载成功子beforeMount 子元素开始挂载dom子mounted 子元素dom挂载结束父mounted 父原素dom挂载结束父beforeUpdate 下面开始类似于dom事件流子beforeUpdate子updated父updated父beforeDestory子beforeDestory子destroyed父destoryed子元素在父元素挂载dom时开始加载。子元素一直到加载完毕dom后父原素结束dom挂载。后面就类似于dom事件流了。15、vue的import和node的require区别?JS支持两种模块化方式commonjs和ES6。commonjs用于nodejs同步加载模块。ES6的import为了不卡顿异步加载模块。新版Nodejs也支持使用import但是需要修改文件后缀名为.mjs或者在package.json中制定type字段为module。17、vuex如何解决数据丢失Vuex 存储的状态是在内存中保存的当页面刷新或者跳转时状态会被重置。为了避免数据丢失你可以考虑使用持久化存储如 localStorage 或 sessionStorage来保存状态在页面加载时从持久化存储中恢复状态。18、爷爷组件跟孙子组件如何交互Provide 和 Inject可以将父组件传给所有后代组件在 Vue 3 中provide和inject是响应式的但在 Vue 2 中它们不是响应式的。1Vue 3 中的响应式在 Vue 3 中使用provide和inject提供的数据是响应式的这意味着如果提供的数据发生变化所有依赖这些数据的组件都会自动更新。这种响应式是通过 Vue 3 中的响应式系统来实现的。2Vue 2 中的非响应式在 Vue 2 中provide和inject提供的数据不是响应式的这意味着如果提供的数据发生变化依赖这些数据的组件不会自动更新。这是因为 Vue 2 中的provide和inject是基于原型链来实现的而不是响应式系统。19、说说vue的生命周期vue的生命周期是vue实例从创建到销毁的一系列过程。每个过程都有相对应的钩子函数分为 beforeCreate创建前created创建后beforeMount加载前mounted加载后beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后。当使用keep-alive时有activated和 deactivated两个钩子函数。当组件用keep-alive包裹时切换文件时不会进行销毁而是进行缓存并执行deactivated 钩子函数组件被激活时执行actived 钩子函数。20. data为什么是一个函数为保证组件的可重用性和独立性。如果直接使用一个对象作为data则不同的组件将共享同一个data对象如果某个组件修改了data则会影响到其他组件导致数据混乱。所以data必须是一个函数每个组件实例都有自己的独立的data数据。这样每次创建组件都会返回一个新的data对象就避免了组件间共享问题。21.vue中常见指令v-textv-htmlv-modelv-bindv-onv-forv-if v-elsev-showv-slot22.vue常用修饰符.prevent阻止默认事件.stop阻止冒泡事件.self只在自己本身触发.once只触发一次.capture捕获模式.lazy懒加载模式.trim去除首尾空格.number格式化为数字类型五ES61、箭头函数与es5函数区别箭头函数的this指向是固定的普通的this指向是可变的let a { name: sunq, fn:function(action){ console.log(this.name love action); } } let b {name:sunLi} // 正常的this指向调用他的对象 a.fn(basketball); // sunq love basketball // 改变this指向 a.fn.apply(b,[football]); // sunLi love football // 如果将a对象的fn函数改成箭头函数this.name会是undefined // 箭头函数的this指向不会改变且总是指向函数定义生效时所在的对象。不可以当作构造函数不可以对箭头函数使用new命令否则会抛出一个错误。var Person function(name){ this.name name; } let sunq new Person(sq); // {name: sq} var Person (name) { this.name name; } let sunq new Person(sq); // 报错 Person is not a constructor无arguments对象不可以使用yield命令因此箭头函数不能用作 Generator 函数。2、ES6提供的解决异步交互的新方法区别Promise、Genarate、async\await3、宏任务和微任务有哪些执行顺序4、先并行请求2个接口后再请求第3个接口如何处理使用Promise.all()方法将两个promise传入all方法拿到异步结果再请求第三个明明知道的语法面试官一问我偏偏就是跟实际场景联系不到一块5、js的数据类型string number null undefined boolean object bigInt symbol6、说几个ES6新增的数组的方法 详情map 实例方法类似于forEach但是返回新数组find和findIndex 实例方法传入一个匿名函数ruturn出符合条件的项或下标… 拓展运算符 基本功能是将一个数组转为用逗号分隔的参数序列7、for in和for of的区别for in适合遍历对象遍历数组拿到的是下标for of适合遍历数组遍历数组直接拿到数组的项。for of只能遍历具备iterator接口的类型。8、多个数据请求如何顺序执行使用promise的then方法或者写多个promiseasync中使用await顺序执行。9、proxy的理解与defineProperty的区别proxy直接给所有属性设置拦截defineProperty只给指定的设置proxy拦截后要用Proxy实例调用defineProperty可以直接使用原对象// es6的proxy let obj {name:1,sex:2} let p new Proxy(obj,{ get:(value,key){ return sq的obj[key] } }); p.name // sq的1 p.sex // sq的2 // es5的代理 let newObj {name:1,sex:2} Object.defineProperty(newObj,name,{ get:function(val){ //defineProperty中get函数没有入参 return sq的 val } }) newObj.name // sq的undefined newObj.sex // 210、谈谈promise的原理六ElementUI1、如果需要修改样式怎么做再写一个样式表引入!important覆盖样式穿透2、如何通过继承扩展 element-ui 组件的功能通过继承扩展 element-ui 组件的功能_elementui扩展组件_在厕所喝茶的博客-CSDN博客七Jquery1、如何获取同一个cl下最后一个li$(#id).children().eq(3).remove(); // 获取多个class中的某一个 $(.className).eq(n).attr(class) // 可行 $(.className)[n].attr(class) // 不可行2、window.load和$(document).ready()的区别执行先后顺序window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行不必等到加载完毕。通常简写为$()总结ready事件在load事件加载之前完成。3、如何绑定一个点击事件// 方式一 $(#id).on(click,function(){}); // 方式二 $(#id).click(function(){}); // 方式三 $(#id).bind(click,function(){});4、Jquery常用动画八Git的使用1、常用哪些语句pull、commit、push、reset、merge、log、branch、stashstash如何使用git stash -m ‘xxx’git stash pop2、版本回退语句soft和hard区别git reset --soft 版本号git reset --hard 版本号soft会退后代码改动在本地还保存的有。hard会删除本地改动彻底抹去该版本的痕迹。详情3、合并分支注意事项将自己分支合到目标分支前最好先将目标分支合到自己分支上处理完冲突再将自己的分支合回目标分支。4、如何进行分支管理九敏捷开发1、什么是敏捷开发个人理解敏捷开发就是把一个大需求拆为多个独立的小需求。每个小需求可独立开发、测试、上线循序渐进的完成整个系统。每个版本的周期可能比较短比如2周或者4周。比如某公司需要开发维护一个巨大的平台可能把平台外包给多个公司干。如果用如上方法并行开发可显著缩减工期。如果想要保证每个版本又快又顺利的上线需要有完善的角色支持和流程规范。2、敏捷开发的好处个人理解当团队稍大工期很紧时如何有条不紊的保证版本质量就需要一套有效的流程了。比如一个团队同时收到3个需求每个需求分发给多个前后端开发。作为版本负责人或者项目负责人如何把控每个人的代码质量、完成进度、过程留痕、风险规避其实是有难度的。一个需求如果经过需求澄清、方案设计、设计评审、需求传递、版本排期/评审、开发划分、版本开发、测试用例评审、内部测试、代码评审、灰度试用测试、版本发布、业务验收等完整的流程可以有效地降低犯错的几率。也方便后期的查找责任人总结各环节的问题提升团队的工作效率使交付越来越平稳。十加分项1、开源项目部分公司面试要求中有写维护有开源项目且具有50个star者优先。我业余时间有开发维护一个具备管理后台/用户端/服务端的个人网站Coding Life目前github获得300多个star**。**具体架构如下如果有个人开源项目面试过程中无话可说时可以拿出来聊聊。我在面试过程中有试过部分面试官现场看了网站效果评价网站整体风格简约唯美。觉得我有独立学习的能力和摸索尝试的习惯知识面较宽得到过一些鼓励。博客的代码完全开源源码Github地址​​​​ 欢迎大家fork后作为自己的项目体验地址Coding Life2、不止前端软件行业越来越不景气为了多一些竞争力哥们在找到稳定工作后开始对比着js学习java计划用一年时间做到全栈能力。本次的学习路线是直接从公司的现网产品源码开始看倒推着学习。看的过程中去了解需要掌握的知识再针对性的学习。我设了一个专栏会把装备JAVA能力的过程一点点的总结下来方便自己也方便大家JAVA从工作到入门十一计算机网络1、http和https的区别HTTP 明文传输数据都是未加密的安全性较差HTTPSSSLHTTP 数据传输过程是加密的安全性较好。使用 HTTPS 协议需要到 CACertificate Authority数字证书认证机构 申请证书一般免费证书较少因而需要一定费用。证书颁发机构如Symantec、Comodo、GoDaddy 和 GlobalSign 等。HTTP 页面响应速度比 HTTPS 快主要是因为 HTTP 使用 TCP 三次握手建立连接客户端和服务器需要交换 3 个包而 HTTPS除了 TCP 的三个包还要加上 ssl 握手需要的 9 个包所以一共是 12 个包。http 和 https 使用的是完全不同的连接方式用的端口也不一样前者是 80后者是 443。HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议所以要比较 HTTPS 比 HTTP 要更耗费服务器资源。2、常见状态码200成功返回304网页未更改有缓存未重新请求404请求资源不在500服务器内部错误503服务器超时3、tcp与udp的区别TCP面向连接如打电话要先拨号建立连接提供可靠的服务UDP是无连接的即发送数据之前不需要建立连接UDP尽最大努力交付即不保证可靠交付。UDP具有较好的实时性工作效率比TCP高适用于对高速传输和实时性有较高的通信或广播通信。每一条TCP连接只能是一对一的UDP支持一对一一对多多对一和多对多的交互通信。UDP分组首部开销小TCP首部开销20字节UDP的首部开销小只有8个字节。TCP面向字节流实际上是TCP把数据看成一连串无结构的字节流UDP是面向报文的一次交付一个完整的报文报文不可分割报文是UDP数据报处理的最小单位。UDP适合一次性传输较小数据的网络应用如DNSSNMP等。十二webpack1、dependencies和devDependencies区别安装时 --save -dev会放在devDependencies中–save放在dependenciesdevDependencies中安装的是开发环境使用的包比如eslint、vue-cli-servedependencies中安装的是生产和开发环境下都需要使用的包比如vue、element、vant等devDependencies中的依赖模块在生产环境下不会被打入包内2、使用过哪些loader?3、webpack具备哪些功能十三页面优化1、某个页面加载较慢从哪些方向分析、解决问题传统页面首先判断是接口慢还是页面慢。如果接口慢后端优化。如果前端页面加载慢看是否是因为图片等资源过大尝试替换不同格式体积的图片。定位是否是某些数据处理的函数比较耗时。或者是否循环操作DOMjs生成dom后再批量插入。如果页面直接卡死就需要分析是否内存泄漏。比如大屏展示的定时刷新卡死排查思路可如下使用chrome的任务管理器操作页面观察的内存占用的变化。定位到是哪些操作哪块代码导致内存占用飙升。因为js并没有直接释放缓存的语法只有靠浏览器的垃圾回收机制自动清理。我们需要做的是及时给不需要的变量赋空。特别注意大数据的循环实例化后变量是否及时赋空。定时器等闭包方法中是否存在内存泄漏循环渲染地图时是否先将之前地图数据清空等。单页面应用单页面一般不会某个页面加载慢一般都集中在首屏加载时白屏较久。处理方法可参考上文中。2、使用缓存有些接口没必要每次打开页面都请求可用cookie计时。某个时间段内不重新获取。某些数据初始化时加载一次即可可通过cookie计时某个时间段内不用请求。某些数据可用localstorage存储默认填充input更新时才重写缓存。这个只是用户体验好些十四Node.js1、用过哪些插件express中间件cors 解决express的跨域问题body-parser 解析post数据mongoClient mongodb官方提供的Node.js驱动crypto 用来加密添加签名nodemailer 用来发邮件2、mongodb和mysql的区别mongodb是文档型非关系型数据库mysql是关系型数据库mongodb以json形式存储数据字段可以随意添加mysql的字段需要提前确定好mysql多表之间只能通过外键建立关系mysql可以多层嵌套也可拆表并关联3、是否了解nvm?十五Linux1、查找文件的命令是什么findfind命令用于在指定目录下递归搜索文件。find [路径] [选项] [表达式] find /home/user -name *.txtlocatelocate命令通过搜索数据库来快速定位文件。注意locate命令搜索的是预先建立的数据库因此可能会比find命令快速但可能不会返回最新创建或修改的文件。locate [文件名] locate myfile.txtgrepgrep命令用于在文件中搜索特定的文本模式。grep [选项] 模式 [文件] grep pattern file.txtwhereiswhereis命令用于定位二进制、源代码和帮助文件。whereis [选项] 文件名 whereis pythonwhichwhich命令用于查找命令的执行路径。which [命令] which python2、解压/压缩命令是什么在Linux中常见的解压文件的命令通常取决于文件的压缩格式。以下是一些常用的解压命令解压.tar文件使用tar命令。tar -xvf 文件名.tar解压 gzip 文件gzip -d 文件名.gz解压 zip 文件unzip 文件名.zip解压 rar 文件unrar x 文件名.rar十六计算机原理1、进程和线程的关系进程Process和线程Thread是操作系统中两个重要的概念它们之间存在密切的关系。进程进程是程序执行的实例是操作系统资源分配的基本单位。每个进程都有独立的地址空间、代码、数据和系统资源。进程之间相互独立彼此不受影响。线程线程是进程内的执行单元是操作系统调度的基本单位。同一进程内的多个线程共享相同的地址空间和系统资源。线程之间可以方便地进行通信和数据共享。关系一个进程可以包含多个线程这些线程共享进程的资源包括内存、文件句柄等。同一进程内的线程之间可以通过共享的内存空间进行通信和数据交换这使得线程间的协作变得更加高效。总的来说进程和线程之间是包含关系一个进程可以拥有多个线程而线程则是在进程内执行的单元。通过线程的使用可以更加高效地利用系统资源提高程序的并发性和响应性。十七Android为什么要使用superWebview?十八数据可视化1、大屏类的项目怎么做屏幕自适应使用响应式布局Responsive Layout使用相对单位如百分比来定义元素的尺寸和位置以便它们可以根据屏幕大小进行调整。使用 CSS 媒体查询Media Queries来根据不同的屏幕尺寸应用不同的样式以确保页面在不同的设备上具有良好的布局和显示效果。弹性布局Flexbox和网格布局Grid Layout使用 Flexbox 和 Grid Layout 可以轻松地创建灵活的布局以适应不同尺寸的屏幕。这些布局技术提供了更直观、更有效的方式来管理项目的布局并且能够自适应屏幕的大小和方向。Viewport视口设置使用meta标签来设置视口的宽度和缩放选项以确保页面在移动设备上正确显示并且具有良好的可读性和可操作性。例如可以使用以下代码来设置视口流式布局Fluid Layout使用流式布局设计页面使得页面元素能够根据浏览器窗口大小的变化而自动调整布局。通过设置百分比宽度或最大宽度等方式来实现流式布局。测试和调试在不同尺寸和分辨率的设备上进行测试和调试确保页面在各种设备上都有良好的显示效果。使用浏览器开发者工具或者第三方的模拟工具来模拟不同设备的显示效果并进行布局的优化和调整。2、大屏类项目如何实现定时刷新JavaScript 定时器使用 JavaScript 的setInterval()函数可以创建定时器定期拉取数据WebSocket 实时更新使用 WebSocket 技术实现实时通信服务器端有新数据时即时推送给客户端从而实现数据的实时更新。当服务器端有新数据时使用 WebSocket 发送更新通知给客户端客户端接收到通知后更新页面内容。使用框架或库的自动刷新功能许多前端框架或库如React、Vue、Angular等都提供了自动刷新页面的功能可以在开发环境中实现热重载也可以在生产环境中定期更新页面。十九算法有空刷刷Leetcode很多好公司一面前先让写两道算法题。这种情况下如果没有一点算法积累上面的问题咱都没机会被问。二十最近面还未来及整理的1、除了ajax还有哪些请求await、aysic、table2、url输入框后发生什么事3、加密方式有哪些对称、非对称4、mongodb好处2025开年AI技术打得火热正在改变前端人的职业命运阿里云核心业务全部接入Agent体系字节跳动30%前端岗位要求大模型开发能力腾讯、京东、百度开放招聘技术岗80%与AI相关……大模型正在重构技术开发范式传统CRUD开发模式正在被AI原生应用取代最残忍的是业务面临转型领导要求用RAG优化知识库检索你不会带AI团队微调大模型要准备多少数据你不懂想转型大模型应用开发工程师等相关岗没项目实操经验……这不是技术焦虑而是职业生存危机曾经React、Vue等热门的开发框架已不再是就业的金钥匙。如果认为会调用API就是懂大模型、能进行二次开发那就大错特错了。制造、医疗、金融等各行业都在加速AI应用落地未来企业更看重能用AI大模型技术重构业务流的技术人。如今技术圈降薪裁员频频爆发传统岗位大批缩水相反AI相关技术岗疯狂扩招薪资逆势上涨150%大厂老板们甚至开出70-100W年薪挖掘AI大模型人才不出1年 “有AI项目开发经验”或将成为前端人投递简历的门槛。风口之下与其像“温水煮青蛙”一样坐等被行业淘汰不如先人一步掌握AI大模型原理应用技术项目实操经验“顺风”翻盘大模型目前在人工智能领域可以说正处于一种“炙手可热”的状态吸引了很多人的关注和兴趣也有很多新人小白想要学习入门大模型那么如何入门大模型呢下面给大家分享一份2025最新版的大模型学习路线帮助新人小白更系统、更快速的学习大模型2025最新版CSDN大礼包《AGI大模型学习资源包》免费分享**一、2025最新大模型学习路线一个明确的学习路线可以帮助新人了解从哪里开始按照什么顺序学习以及需要掌握哪些知识点。大模型领域涉及的知识点非常广泛没有明确的学习路线可能会导致新人感到迷茫不知道应该专注于哪些内容。我们把学习路线分成L1到L4四个阶段一步步带你从入门到进阶从理论到实战。L1级别:AI大模型时代的华丽登场L1阶段我们会去了解大模型的基础知识以及大模型在各个行业的应用和分析学习理解大模型的核心原理关键技术以及大模型应用场景通过理论原理结合多个项目实战从提示工程基础到提示工程进阶掌握Prompt提示工程。L2级别AI大模型RAG应用开发工程L2阶段是我们的AI大模型RAG应用开发工程我们会去学习RAG检索增强生成包括Naive RAG、Advanced-RAG以及RAG性能评估还有GraphRAG在内的多个RAG热门项目的分析。L3级别大模型Agent应用架构进阶实践L3阶段大模型Agent应用架构进阶实现我们会去学习LangChain、 LIamaIndex框架也会学习到AutoGPT、 MetaGPT等多Agent系统打造我们自己的Agent智能体同时还可以学习到包括Coze、Dify在内的可视化工具的使用。L4级别大模型微调与私有化部署L4阶段大模型的微调和私有化部署我们会更加深入的探讨Transformer架构学习大模型的微调技术利用DeepSpeed、Lamam Factory等工具快速进行模型微调并通过Ollama、vLLM等推理部署框架实现模型的快速部署。整个大模型学习路线L1主要是对大模型的理论基础、生态以及提示词他的一个学习掌握而L3 L4更多的是通过项目实战来掌握大模型的应用开发针对以上大模型的学习路线我们也整理了对应的学习视频教程和配套的学习资料。二、大模型经典PDF书籍书籍和学习文档资料是学习大模型过程中必不可少的我们精选了一系列深入探讨大模型技术的书籍和学习文档它们由领域内的顶尖专家撰写内容全面、深入、详尽为你学习大模型提供坚实的理论基础。书籍含电子版PDF三、大模型视频教程对于很多自学或者没有基础的同学来说书籍这些纯文字类的学习教材会觉得比较晦涩难以理解因此我们提供了丰富的大模型视频教程以动态、形象的方式展示技术概念帮助你更快、更轻松地掌握核心知识。四、大模型项目实战学以致用当你的理论知识积累到一定程度就需要通过项目实战在实际操作中检验和巩固你所学到的知识同时为你找工作和职业发展打下坚实的基础。五、大模型面试题面试不仅是技术的较量更需要充分的准备。在你已经掌握了大模型技术之后就需要开始准备面试我们将提供精心整理的大模型面试题库涵盖当前面试中可能遇到的各种技术问题让你在面试中游刃有余。因篇幅有限仅展示部分资料需要点击下方链接即可前往获取2025最新版CSDN大礼包《AGI大模型学习资源包》免费分享