DarylWxc

1. CSS隐藏方法 display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip-path 2. display:none最为常用的方法 .hide{ display:none }元素会彻底消失，本身空间会被其他元素占有，导致重排和重绘。消失后，绑定的事件不会触发，也不会有过渡效果。特点：元素不可见，不占据空间，无法响应点击事件。 3. visibility:hidden也是常见的隐藏元素的方法仅仅隐藏，DOM依然存在，处于不可见的状态。不会触发重排，但是会触发重绘。特点：元素不可见，占据页面空间，无法响应点击事件。 4. opacity:0opacity表示元素的透明度，设置为0后，元素为隐藏状态。不会引发重排，一般情况下也会引发重绘。自身事件会触发，但被其遮挡的元素无法触发事件。子元素无法设置opacity来达到显示的效果。特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。 5. height,width属性为0.hiddenBox{margin:0;b ...

1. CSS像素CSS分相对单位和绝对单位。相对单位一般指设备像素(device pixel),一般情况页面缩比为1,1个css像素等于一个设备独立像素，页面缩放时也会影响px的变化。CSS像素有两个方面的相对性：1.在同一个设备上，每一个CSS像素所代表的设备像素是可以变化的(分辨率)2.在不同的设备之间，每一个CSS像素所代表的设备像素是可以变化的(不同手机)受到以下因素的影响而变化：1.每英寸像素(PRI)2.设备像素比(DPR)2. 设备像素设备像素(device pixels)，物理像素，指设备能控制的最小物理单位。一般设备像素点是固定不变的，单位为pt。 3. 设备独立像素与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括CSS像素。可通过window.screen.width/window.screen.height查看 4. DPRdpr(device pixel ratio)，设备像素比，设备独立像素到设备像素的转换关系，可以通过window.devicePixelRatio获取。计算公式：DPR=设备像素/设 ...

1. 文档查阅初始化hello-uniapp项目，查看项目相关文件，src为主要文件夹common：文件夹为一些配置插件封装components：组件目录hybrid：存放本地HTML文件platforms：存放各平台专用页面文件pages：业务页面文件存放目录static：存放本地静态资源wxcomponents：存放小程序组件manifest.json：配置应用名称、appid、logo、版本等打包信息pages.json：配置页面路由、导航条、选项卡等页面类信息 1.1 写法标签与小程序相似page相当于body节点 123page{ background:#ccc;} 2. 疑难杂症1.引入iconfont方式，添加图标到创建的项目文件夹中，然后Unicode选项生成代码，直接讲代码复制到新建的css文件中，然后在app.vue文件引入该CSS文件。使用时: 12345style:iconfont{ font-family:"iconfont" //之前css文件里的font-family值 font-size:16 ...

1. Web攻击植入恶意代码，修改网站权限，获取网站用户隐私信息等等。常见Web攻击方式有： XSS(Cross Site Scripting)跨站脚本攻击 CSRF(Cross-site request forgery)跨站请求伪造 SQL注入攻击 2. XSS跨站脚本攻击，允许攻击者将恶意代码植入到提供给其他用户使用的页面中。XSS涉及到三方，即攻击者、客户端与Web应用。XSS是盗取存储在客户端的Cookie或者其他网站用于识别客户端身份的敏感信息。获取合法用户的信息后，假冒合法用户与网站交互。XSS攻击可以分成： 2.1 存储型步骤： 攻击者将恶意代码提交到目标网站的数据库中 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在HTML中返回给浏览器 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等 2.2 反射型步骤： 攻击者构造出特殊的URL，其中包含恶意代码 用户打开带有恶 ...

1. SSO是什么单点登录，简称SSO。是在多个应用系统中用户只需要登录一次就可以访问所有相互信任的应用系统。SSO一般都需要一个独立的认证中心(passport)，子系统登录均通过passport，子系统本身将不参与登录操作。授权以后，会建立局部会话，一定时间内无需再次向passport发起认证。2. 如何实现 同域名下的单点登录cookie的domin属性设置为当前域的父域，并且父域的cookie会被子域所共享。path属性默认为web应用的上下文路径。利用cookie的该特点，将cookie的path属性设置为根路径，将Session ID保存到父域中。子域应用就都可以访问到这个cookie。不过需要在主域名相同的情况下可以通过这种方式来实现单点登录。 不同域名下的单点登录(一)不同域下，Cookie不共享。需要部署一个认证中心，用于专门处理登录请求的独立的Web服务。验证token，如果没有则跳转到认证中心，跳转时携带Cookie(带有token)，根据Cookie判断登录状态。已登录的用户在跳转前生成一个Token拼接在目标URL的后面，回传给目标应用系统，写入Cookie。 ...

1. 普通插槽以不同于严格的父子关系组合组件。将内容放置到新位置或使组件更通用的出口。插槽将slot作为子组件承载分发的载体。

1. computed用法类似于watch的计算属性，根据所依赖的数据动态设置新的计算结果。computed的值在getter执行后会被缓存。应用场景： - 适用于一些重复使用数据或复杂及费时的运算。 - 依赖于其他数据的数据2. computed和methods的区别？1.methods无响应式，不会动态更改2.computed可以定义成函数，也可以定义成get/set3. watch用法对data里的数据监听回调。应用场景：当data数据更新时需要操作或数据变化时执行异步，开销较大的操作时使用。普通监听：watch内调用，根据newval和oldval执行函数深度监听：有immediate属性，可立即执行方法，deep属性，针对对象属性的监听，性能开销较大4. watch和computed的区别相同：都是观察页面数据变化不同：computed只有当依赖数据变化才会计算，当数据没有变化会读取缓存。watch每次都需要执行函数，无缓存，更适用于数据变化时的异步。5. 原理及源码在initState函数中，initComputed函数，判断是否有computed后执行，循环遍历 ...

1. 模块化1.1 什么是模块化 将一个复杂的程序依据一定的规则封装成几个块，并进行组合在一起 块的内部数据与实现是私有的，只向外部暴露一些接口（方法）与外部其他模块通信 1.2 模块化的进行过程 全局function模式：将不同的功能封装成不同的全局函数编码：将不同的功能封装成不同的全局函数问题：污染全局命名空间，容易引起命名冲突或数据不安全，模块之间看不出关系 namespace模式：简单对象封装作用：减少全局变量，解决命名冲突问题：数据不安全 IIFE模式：匿名函数自调用（闭包）作用：数据是私有的，外部只能通过暴露的方法操作编码：将数据和行为封装到一个函数内部，通过给window添加属性来向外暴露接口问题：如果当前这个模块依赖另一个模块怎么办？ IIFE模式增强：引入依赖 1.3 模块化的好处 避免命名冲突 更好的分离，按需加载 更高复用性 高可维护性 1.4 引入多个script后出现问题 请求过多 依赖模糊 难以维护 2. AST2.1 什么是AST抽象语法树，源代码的抽象语法结构的树状表现形式。 2.2 词法分析和语法分析JS是解释型语言，通过词法分析->语法 ...

1. 数据初始化Vue源码中在initState中进行了数据初始化，为数据添加响应式。针对props，methods，data，computed和watch，做数据的初始化处理，响应式转换。 2. initPropsProps用于父子组件间传值(父传子)。:test=test会被解析成{attrs: {test: test}}，并作为子组件的render函数。创建VNode遇到child占位符时，根据attrs属性进行规范校验，最后以propsData形式传入Vnode构造器中。通过proxy为props做了一层代理，可通过vue实例代理访问到props的值，本质上是利用Object.defineProperty对数据的getter和setter方法进行重写。总结：props以propsData的形式在Vnode的属性存在，通过proxy进行代理，然后实例访问。 3. initMethodsmethods方法定义必须是函数，命名不能与props重复。定义的方法都将挂载在根实例上。 4. initDataVue组件实例在init函数时将options参数赋值在this上，传入i ...

1. 盒模型？盒模型：框模型，包含content(内容)、padding(内边距)、border(边框)、margin(外边距)。## 1. IE模型和标准模型的区别？IE模型：width=content+padding，height=content+padding标准模型：width=content，height=content## 2. CSS设置方式可通过CSS3新增的属性box-sizing设置盒模型的模式，content-box(标准模型)，IE模型(border-box)。## 3. JavaScript设置盒模型的宽高1.dom.style.width/height //只能取到行内样式的宽和高，style标签中的link外链取不到。2.dom.currentStyle.width/height //取到的是最终渲染后的宽高，只IE支持3.window.getComputedStyle(dom).width/height //同(2)，IE9以 ...