FrankKai

**2.说一下你理解的模块机制** AMD: 异步模块加载规范。 a.js，定义一个依赖jQuery和echrts的组件。 ``` define(['jquery', 'echarts'], function ($, echarts) { var AMD = function(){} AMD.prototype = { title:'', foo: function(){}//AMD类或者继承AMD类的子类的属性 } function bar(){}//返回，公共属性 function baz(){} //未返回，私有属性 return { main:AMD,...

**3.MVVM原理** MVVM是一种软件架构模式，MVVM有助于前后端分离。 View:视图层，粗略理解为DOM。 Model:与数据库对应的model，一般为json格式，作为req的body通过http(s)与数据库实现通信。 ViewModel:View与Model通过ViewModel实现双向绑定。 核心是提供对View和ViewModel的双向数据绑定，这样使得ViewModel的改变View立即变化，MVVM在前端的实现有：angular，vue，react。 vue中的常用数据双向绑定。 ``` view:{{message}} viewModel v-model="message" model:message ``` ``` {{ message }} var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' }...

**4.最熟悉的框架路由机制** vue路由依赖：vue-router 通过组合组件来组成单页应用程序，只需要将组件映射到路由即可。 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 需要注意2种模式的区别：hash模式和history模式，hash模式会在后面加一个很丑的#，可以开启history去掉。 hash模式原理：它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。hash可以理解为锚点，例如./index.html/#/foo，hash值为#/foo，这样不会跳转页面。就相当于统一页面的不同锚点，页面间跳转与 ./index.html/#foo到./index.html/#bar类似。 ./store/index.js ``` import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ {...

**5.状态管理** 下面是我在用vuex做项目时的一些思考，简单修改了一下，也添加了一些关于redux的思考。 vuex state，前端data view，前端DOM actions，用户操作，引起data变化从而导致DOM变化。 多个组件（视图）共享状态：通俗来讲，就是多个组件间会通信时，导致从后端拿来的数据发生变化，当组件较多时，如果兄弟组件间的通信都依赖父组件进行通信，会导致组件间的耦合非常高，从而导致项目逻辑混乱，难以维护。 多个组件（视图）依赖于同一状态。 来自不同视图的行为需要变更同一状态。 全局单例模式管理，把组件的共享状态抽取出来 不管在组件树的哪个位置，任何组件都能获取状态或者触发行为！ 实践出真知： 1.state存放在index.js中，创建的Store实例getter,mutations,actions等，可以分离出来 2.getters存放在getter.js中，数据流为state→getter→组件，getter相当于一个数据获取过滤器，从仓库拿特定数据到组件，相当于对computed的集中处理。 3.mutations存放在mutations.js中，数据流为组件→mutations→state，mutations相当于一个数据提交发射器，从组件提交数据到仓库 4.actions存放在actions.js中，数据流为组件→actions→mutations→state，异步操作的主要场所。 5.modules是开发大型应用时需要用到的，每个module都有单独的states，getters，actions以及mutation，有一股nodejs模块的味道。 vuex三原则： 1.唯一数据源 2.保持状态只读 3.数据改变只能通过纯函数完成 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 ！！！mutation和action的区别！！！ mutation只变更本地的状态，也就是说，直接只去修改store中的数据。 action包含异步操作，直接调用api，通过api的数据，再提交mutation。...

**6.统计字符串中单词出现次数** " hi how are you i am fine thank you youtube am am "，统计"you"出现的次数。 ``` function wordCount(str,word){ var str = str || ""; var word = word || "";...

@zimplexing 这个方式不错，那如何用正则区分you和youtube呢？

@ChenMaoForever ' hi how are you i am fine thank youtube you youtube am am '.split('you').length-1 返回you的数目是4 😅

2020年12月28日更新：新题解 " hi how are you i am fine thank you youtube am am "，统计"you"出现的次数。 ```js function countWord(str, target){ const words = str.split(" "); let count = 0; for(const word...

### express和koa的区别 1.中间件实现方式不同 express是callback方式，会有callback hell问题；koa为洋葱模型，基于promise和async实现 2.express只有request和response对象，而koa有context对象，类似traceId，可以贯穿上下文 3.koa采用async的方式实现，所以可以以同步方式写异步逻辑，代码逻辑更加直观 4.koa异常处理更加便捷 ### egg和koa的区别 1.egg基于koa实现 2.egg扩展，可以扩展application,context,request,response原型对象 3.egg插件，某一类型的中间件集合，与webpack 插件类似，插拔式使用某一个功能，方便又快捷

### koa洋葱模型中间件实现原理 ```js const middleware = [] let mw1 = async function (ctx, next) { console.log("next前，第一个中间件") next() console.log("next后，第一个中间件") } let mw2 = async function (ctx, next) { console.log("next前，第二个中间件") next() console.log("next后，第二个中间件")...