杜江的博客

手写函数防抖和节流 防抖：//防抖debounce代码：function debounce(fn,delay) { var timeout = null; // 创建一个标记用来存放定时器的返回值 return function (e) { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数 timeout = setTimeout(() => { fn.apply(this, arguments); }, delay); };}// 处理函数function handle() { ...

css 优先级 答：important > 内联 > ID选择器 > 类选择器 > 标签选择器 避免 css 全局污染。 通过在css文件的选择器上使用:local 例如：:local(.className) { background: red; } 在vue项目中使用deep 例如：:deep(.el-carousel__arrow–right) { right: 120px; } 在react项目中使用:global 例如：<RangePicker className={styles.rangePick} showTime format="YYYY-MM-DD HH:mm:ss" /><br>.rangePick{ :global { .ant-picker-input { color:red } }} 页面导入样式时，使用link和@import有什么区别？ ...

webpack与grunt、gulp的不同？ 三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。 grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。 webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。 所以总结一下：gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系 webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工 Grunt与Gulp的区别 书写方式： grunt 运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件 ...

interface 和 type 的区别 type可以声明 基本类型，联合类型，元组 的别名，interface不行 type 语句中可以使用 typeof 获取类型实例 type 支持类型映射，interface不支持 interface能够声明合并，type不能 typescript中对抽象类和interface的理解 ts如何对早期库比如jquery如何补充类型 ts中的可选和必选 动态runtime注入的类型怎样做才能静态不报错 说说Typescript的优缺点？ 优点. 快速简单，易于学习。 编译时提供错误检查， 在代码运行前就会进行错误提示。 支持所有的JS库。 支持ES6，提供了ES6所有优点和更高的生产力。 使用继承提供可重用性。 有助于代码结构。 通过定义模块来定义命名空间。 缺点: 需要长时间的来编译代码。 在使用第三方库时，需要有三方库的定义文件，并不是所有三方库都提供了定义文件，提供的定义文件是否准确也值得商榷。 如何理解Typescript中的类？并说说它有什么特性？ Typescript是一种面向对象的Javascript语言，和其他任何面 ...

询问工作经历，在项目中如何做性能优化的？ content方面 减少HTTP请求：合并文件、CSS精灵、inline Image 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询 避免重定向：多余的中间访问 使Ajax可缓存 非必须组件延迟加载 未来所需组件预加载 减少DOM元素数量 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量 减少iframe数量 不要404 Server方面 使用CDN 添加Expires或者Cache-Control响应头 对组件使用Gzip压缩 配置ETag Flush Buffer Early Ajax使用GET进行请求 避免空src的img标签 Cookie方面 减小cookie大小 引入资源的域名不要包含cookie css方面 将样式表放到页面顶部 不使用CSS表达式 使用不使用@import 不使用IE的Filter Javascript方面 将脚本放到页面底部 将javascript和css ...

DOCTYPE有什么用? 标准模式与兼容模式各有什么区别? DOCTYPE是“document type”的缩写。它是 HTML 中用来区分标准模式和怪异模式的声明，用来告知浏览器使用标准模式渲染页面 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 cookie和seession区别 cookie数据存放在客户的浏览器上，session数据放在服务器上。 cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。 session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE。 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。 所以个人建议：将登陆信息等重要信息存放为SESSION,其他信息如果需要保留，可以放在COOKIE中 cookie 和 token 的区别？ token是 服务经过计算发给客户端的，服 ...

import 和 require 导入的区别 require 是 AMD规范引入方式；import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法 require是运行时调用，所以require理论上可以运用在代码的任何地方；import是编译时调用，所以必须放在文件开头 本质上，require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量；而import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语***被转码为require； import的原理 简单说就是闭包的运用 为了创建module的内部作用域，会调用一个包装函数 包装函数的返回值也就是module向外公开的api,也就是所有export出去的变量 import也就是拿到module导出变量的引用 commonjs 和 es module区别？ commonJs是被加载的时候运行，esModule是编译的时候运行 commonJs输出的是值 ...

解释一下 Flux Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。 Flux 的最大特点，就是数据的”单向流动”。 过程： 用户访问 View View 发出用户的 Action Dispatcher 收到 Action，要求 Store 进行相应的更新 Store 更新后，发出一个”change”事件 View 收到”change”事件后，更新页面 了解redux么？说一下redux redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理， 主要有三个核心方法，action，store，reducer。 工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispa ...

谈谈你对MVVM、MVC开发模式的理解 MVVM分为Model、View、ViewModel三者。 Model 代表数据模型，数据和业务逻辑都在Model层中定义； View 代表UI视图，负责数据的展示； ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作； Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。 什么是MVC： M（modal）：是应用程序中处理数据逻辑的部分。 V （view） ：是应用程序中数据显示的部分。 C（controller）：是应用程序中处理用户交互的地方 简述Vue的响应式原理 当一个Vue实例创建时，vue会遍历data选项的属性，用 Object ...

介绍 uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。 在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。 虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。 使用场景 需要高性能的区域长列表或瀑布流滚动。webview的页面级长列表滚动时没有性能问题的（就是滚动条覆盖webview整体高度），但页面中某个区域做长列表滚动，则需要使用nvue的list、recycle-list、waterfall等组件。这些组件的性能要高于vue页面里的区域滚动组件scroll-view。 复杂高性能的自定义下拉刷新。uni-app的pages.json里可以配置原生下拉刷新，但引擎内置的下拉刷新样式只有雪花和circle圈2种样式。如果你需要自己做复杂的下拉刷新，推荐使用nvue的refres ...