JavaScript基础
1. 原型链每个函数都有prototype,指向了一个对象,该对象为实例的原型。每个JS对象(除了null)都具有_proto_属性,指向该对象的原型。每个原型都具有constructor属性,指向关联的构造函数。Object.prototype._proto_为null代表该对象没有原型。
2. 继承
原型链继承123456789101112131415161718192021222324252627function Parent () { this.name = 'kevin';}Parent.prototype.getName = function () { console.log(this.name);}function Child () {}Child.prototype = new Parent();var child1 = new Child();console.log(child1.getName()) // kevinvar child1 = new Child(); // 引 ...
vue权限管理
1. 权限是啥?权限是对特定资源的访问许可,确保用户只能访问到被分配的资源。其原理是请求发起权,请求发起有两种形式:
页面加载触发
页面上的按钮点击触发实现目标:
路由方面,只能看到有权访问的菜单
视图方面,只能看到自己有权浏览的内容和有权操作的控件
请求控制,越权请求在前端进行拦截
2. 如何实现?权限控制可以分四个方面:
接口权限
按钮权限
菜单权限
路由权限
接口权限接口权限一般采用jwt的形式来严重,登录完拿到token将token保存,每次请求拦截器进行拦截,请求头部带token
路由权限控制方案一:在路由标记相应的权限信息,路由跳转前做校验
1234567891011121314151617181920212223242526272829const routerMap = [ { path: '/permission', component: Layout, redirect: '/permission/index', alwaysShow: true, // will always sho ...
Vue-mixin
1. mixin是什么?Mixin是一种类,提供方法实现。通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用,避免多继承的复杂。本质是一个JS对象,包含组件的任意功能,将功能传入mixins中就可以使用,可以局部混入,可以全局混入(不推荐!)。
2. 如何使用?局部混入:
123456789101112131415var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// 组件通过mixins属性调用mixin对象Vue.component('componentA',{ mixins: [myMixin]})// 使用该组件时,会混合mixin里的方法,自动执行钩子函数。也可以调用mixin里的data值
全局 ...
Vue指令
1.指令是啥?Vue有一套为数据驱动视图更方便的指令系统。v-开头的行内属性都是指令,不同指令可以实现不同的功能。
2.如何实现?局部注册,全局注册。通过Vue.directive注册。全局注册:
12345Vue.directive('focus', { // 注册v-focus指令 inserted: function (el) { el.focus() // 让元素自动聚焦 }})
局部注册:
1234567directives: { focus: { inserted: function (el) { el.focus() //功能同上 } }}
模板中的使用:
1<input v-focus />
自定义指令也存在钩子函数:·bind:只调用一次,指令第一次绑定到元素时使用。初始化设置。·inserted:被绑定元素插入父节点时调用·update:所在组件VNode更新时调用·com ...
单页面和多页面
单页面应用(SPA):只有一个主页面的应用,单页面跳转,仅刷新局部资源。多应用于PC端。多页面应用(MPA):就是指一个应用中有多个页面,页面跳转时是整页刷新,公共资源等选择性重新加载。单页面的优点:资源共用,页面局部刷新,切换速度快,用户体验良好。数据传递容易,维护成本较低。开发成本较高,需要借助框架。缺点:不利于SEO优化,可利用SSR优化。
多页面优点:搜索引擎优化简易,开发成本较低,但重复代码多。缺点:公共资源不共用,页面切换加载慢,流畅度不够。无法实现跳转动画,依赖url,cookie,localstorage传参。维护成本较高。
单页面适用场景:高要求的体验度、追求界面流畅的应用。多页面的适用场景:适用于追求高度支持搜索引擎的应用。
前端进阶之道
1. 数据类型JS分两种类型,原始类型和对象类型。原始类型:1.boolean2.number3.string4.undefined5.null6.symbol7.bigint对象类型:1.Object(Array,RegExp,Math,Map,Set)2.Function2. 类型判断2.1 typeof原始类型中除了null,都可以用typeof判断。typeof判断函数为function,其他均为object。
2.2 instanceof常用于判断对象类型
2.3 Object.prototype.toString最佳选择,能判断的类型最完整
2.4 isXXX APIisArray(),isNaN()
3. 类型转换1234Number(false) // -> 0Number('1')// -> 1Number('zb')// -> NaN(1).toString()// '1'
转布尔值规则:1.undefined、null、false、NaN、’’、0、-0都转为false2.其他所有值都转 ...
JavaScript高级程序设计
1.1 历史回顾网站数据量大,复杂。需要JS来解决,优化。# 1.2 JS实现JS = ECMAScript(核心) + DOM(文档对象模型) + BOM(浏览器对象模型)## 1.2.1(ECMAScript)ES:网页提供ES的基准实现和与环境自身交互必须的扩展。ES包括:语法、类型、语句、关键字、保留字、操作符、全局对象。大部分浏览器兼容ES6。## 1.2.2 DOM文档对象模型:是一个应用编程接口(API),用于在HTML中使用扩展的XML。DOM将整个页面抽象为一组分层节点。F12中常见的文档树。DOM通过创建表示文档的树,让开发者可以更好地控制网页的内容和结构。使用DOM的API,可以轻松删除,添加,替换,修改节点。DOM视图:描述追踪文档不同视图的接口。DOM事件:描述事件及事件处理的接口。DOM样式:描述处理元素CSS样式的接口。DOM遍历的范围:描述遍历和操作DOM数的接口。其他DOM:可伸缩矢量图(SVG),数学标记语言(MathML),同步多媒体集成语言(SMIL)DOM有不同level(版本):目前到了level3## 1.2.3 BOM浏览器对象 ...
javaScript设计模式
开放封闭原则:对稳定的东西进行封装,将可能会变动的东西分离出来,增加功能或者改动的时候增加代码即可,无需改动代码。1.放置挂钩hook(待研究)2.使用回调函数把回调函数当做参数传入一个稳定和封闭的函数中,当回调函数被执行的时候,程序会因为回调函数的内部逻辑不同,而产生不同的结果。ajax异步请求是不变的,获取数据后的下一步可能变化。1.设计模式1.1 是什么?软件工程中,设计模式是对软件设计中普遍存在的各种问题所提出的解决方案。不同情况下,解决问题的方案。设计模式使不稳定依赖于相对稳定、具体依赖于相对抽象,避免会引起麻烦的紧耦合,以增强软件设计面对并适应变化的能力。
1.2 有哪些?1.2.1单例模式一个类仅有一个实例,提供一个访问他的全局访问点。实现的方法为先判断实例存在否,如果存在则直接返回,如果不存在就创建了再返回,确保一个类只有一个实例对象。
1.2.2工厂模式工厂模式通常分成3个角色:工厂角色-负责实现创建所有实例的内部逻辑抽象产品角色-是所创建的所有对象的父类,负责描述所有实例所共有的公共接口具体产品角色-是创建目标,所有创建的对象都充当这个角色的某个具体类的实例
1.2 ...
设计模式
结构型模式
1.适配器模式特点:将一个接口转换成客户希望的另一个接口,使接口不兼容的那些类可以一起工作。其别名为包装器(Wrapper)。适配器模式既可以作为类结构型模式,也可以作为对象结构型模式。后台返回的数据格式不同,可以通过适配器修改。例:后台返回json格式的数据,通过方法检索出自己需要的数据进行显示,这个方法即为适配器。通常用来避免项目迭代后数据格式或者方法名发生改变出现的错误。最优解:项目开发过程中前后端协商讨论数据格式、文件名等代码规范。2.代理模式为一个对象提供一个代用品或占位符,以便控制对他的访问。在一个对象中调用其他对象的方法(函数可以实例化成对象)保护代理:数据拦截(可以在函数中条件判断拦截数据从而执行不同下文)虚拟代理:数据通过这些代理传递没有被拦截(可实现图片懒加载)3.桥接模式把事物对象和其具体行为、具体特征分离开来,使它们可以各自独立的变化。需要一种方式让对象和行为分离,便于随意拼接。优点:分离抽象接口及其实现部分,提高可拓展性。缺点:增加系统的理解和设计难度1234567891011121314151617181920212223242526272829 ...
工作注意事项
项目流程:项目路线图->项目评估确认阶段项目立项需求开发设计阶段研发及生产测试及缺陷修复生产环境实施部署系统验收项目结项~~~以上为项目完整流程。前端工作流程:立项–项目研讨–需求确认–产品出原型–后台开发,UI设计–前端开发–测试提bug–改bug–重复N次–产品验收
注意工作内容,个人职责,只负责职责相关部分。需要讨论好工作分配。在职责范围内,与UI(页面),产品(功能),项目(需求)进行沟通完成后进行开发。需要注意以下几点:1.深刻理解需求,清楚需求的动机和缘由。2.换位思考3.不放过细节4.换一种方式说“不能实现”5.当遇到不合理的需求时,寻找替换方案6.必须遵循文档精神7.对自己的程序有一颗艺术的心
归根结底:解决问题!!!!责任划分要清晰:口头确认—发email到责任人确认—通知上级