js常用设计模式 js需要学设计模式吗
大家好，感谢邀请，今天来为大家分享一下js常用设计模式的问题，以及和js需要学设计模式吗的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
JS常用设计模式(MVC、MVP、MVVM及其他设计模式)
一、MVC
MVC模式的意思是，软件可以分成三个部分。
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
各部分之间的通信方式如下。
View传送指令到 Controller
Controller完成业务逻辑后，要求 Model改变状态
Model将新的数据发送到 View，用户得到反馈
所有通信都是单向的。
二、互动模式
接受用户指令时，MVC可以分成两种方式。一种是通过 View接受指令，传递给 Controller。
另一种是直接通过controller接受指令。
三、实例：Backbone
实际项目往往采用更灵活的方式，以 Backbone.js为例。
1.用户可以向 View发送指令（DOM事件），再由 View直接要求 Model改变状态。
2.用户也可以直接向 Controller发送指令（改变 URL触发 hashChange事件），再由 Controller发送给 View。
3. Controller非常薄，只起到路由的作用，而 View非常厚，业务逻辑都部署在 View。所以，Backbone索性取消了 Controller，只保留一个 Router（路由器）。
四、MVP
MVP模式将 Controller改名为 Presenter，同时改变了通信方向。
1.各部分之间的通信，都是双向的。
2. View与 Model不发生联系，都通过 Presenter传递。
3. View非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
五、MVVM
MVVM模式将 Presenter改名为 ViewModel，基本上与 MVP模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。 Angular和 Ember都采用这种模式。
1、js工厂模式
说明：
在函数中定义对象，并定义对象的各种属性，虽然属性可以为方法，但是建议将属性为方法的属性定义到函数之外，这样可以避免重复创建该方法。
引用该对象的时候，这里使用的是 var x= Parent()而不是 var x= new object();因为后者可能会出现很多问题（前者也成为工厂经典方式，后者称之为混合工厂方式），不推荐使用new的方式使用该对象。
在函数的最后返回该对象。
不推荐使用这种方式创建对象，但应该了解。
2、js构造函数模式
说明：
与工厂方式相比，使用构造函数方式创建对象无需在函数内部创建对象，而使用this指代，并而函数无需明确return。
同工厂模式一样，虽然属性的值可以为方法，仍建议将该方法定义在函数之外。
同样的，不推荐使用这种方式创建对象，但仍需了解。
3、js原型模式
说明：
函数中不对属性进行定义。
利用prototype属性对属性进行定义。
同样的额，不推荐使用这样的方式创建对象。
4、构造函数+原型的js混合模式（推荐）
说明：
该模式是指混合搭配使用构造函数和原型方式。
将所有的属性，不是方法的定义在函数中（构造函数的方式），将所有属性值为方法的利用prototype在函数之外定义（原型方式）。
推荐使用这样的方式创建对象，这样有好处。
5、构造函数+原型的动态原型模式（推荐）
说明：
动态原型方式可以理解为混合构造函数，原型方式的一个特例。
该模式中，属性为方法的属性直接在函数中进行了定义，但是因为
if(typeof Parent.lev=="undefined"){
Parent.prototype.lev= function(){
return this.name;
}
Parent.lev= true;
}
从而保证创建该对象的实例时，属性的方法不会被重复的创建。
Vue.js组件设计模式:构建可复用组件库
在Vue.js中构建可复用的组件库是提高代码复用性和维护性的关键。以下是一些设计模式示例，说明如何创建可复用的Vue组件：
单文件组件（Single File Component, SFC）Vue.js组件通常是单文件组件，包含HTML、CSS和JavaScript。一个简单的可复用组件例子如下：
<template><div class="my-component"><h3>{{ title}}</h3><p>{{ message}}</p></div></template><script>export default{ props:{ title: String, message: String,},};</script><style scoped>.my-component{/*自定义样式*/}</style>在这个例子中，title和message作为props传递给组件，允许外部传入不同的标题和消息。
组件的Props和默认值通过定义props，你可以让组件接受外部数据。默认值可以通过default关键字设定：
props:{ myProp:{ type: String, default:'默认值',},},自定义事件（Custom Events）使用$emit发送自定义事件，让父组件与子组件间通信：
methods:{ handleClick(){ this.$emit('my-event','这是事件数据');},},插槽（Slots）插槽允许父组件向子组件内部插入内容：
<template><div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div></template>父组件使用：
<MyComponent><template v-slot:header><h1>这是头部</h1></template><p>这是主要内容</p><template v-slot:footer><p>这是底部</p></template></MyComponent>命名空间插槽（Scoped Slots）对于更复杂的插槽，可以使用命名空间插槽来传递函数或者数据：
<template><ul><li v-for="(item, index) in items":key="index"><slot:item="item":index="index"></slot></li></ul></template>父组件使用：
<MyList:items="list"><template v-slot:default="{ item, index}"><span>{{ item.text}}({{ index}})</span></template></MyList>状态管理（Vuex或 Pinia）对于复杂应用，可以使用Vuex或Pinia来集中管理组件间的共享状态，提高组件的可复用性。
高阶组件（Higher-Order Components, HOCs）虽然Vue.js没有直接支持HOCs，但可以通过函数式组件和组合API实现类似的概念：
function withLoading(ChildComponent){ return{ extends: ChildComponent, data(){ return{ isLoading: false,};}, methods:{ fetchData(){ this.isLoading= true;//加载数据的逻辑//... this.isLoading= false;},},};}export default withLoading(MyComponent);组件库的构建和发布构建组件库通常涉及Vue CLI、Rollup或Webpack，以及库的发布到npm。Vue CLI提供了一个命令vue-cli-service build--library来创建库。发布到npm后，其他项目就可以通过npm install来使用你的组件库。
组件的抽象和封装为了提高组件的可复用性，可以将组件拆分为更小的、更具针对性的部分。例如，一个表单组件可以分解为输入框、按钮、验证器等。每个部分都可以独立重用，或者组合成新的表单组件。
<!-- InputField.vue--><template><input:type="type":value="value"@input="handleChange":class="inputClasses"/></template><script>export default{ props:{ type:{ type: String, default:'text',}, value:{ type: [String, Number], default:'',}, inputClasses:{ type: String, default:'',},}, methods:{ handleChange(event){ this.$emit('input', event.target.value);},},};</script>组件的复用性和可配置性设计组件时，考虑其可配置性，允许用户通过props或插槽来定制组件行为和外观。例如，一个卡片组件可以接受背景颜色、边框宽度等属性。
<!-- Card.vue--><template><div:class="cardClasses":style="cardStyle"><slot></slot></div></template><script>export default{ props:{ backgroundColor:{ type: String, default:'#fff',}, borderColor:{ type: String, default:'#ccc',}, borderWidth:{ type: Number, default: 1,},}, computed:{ cardClasses(){ return{ card: true,//根据props计算类名};}, cardStyle(){ return{ border: `${this.borderWidth}px solid${this.borderColor}`,};},},};</script>组件的可扩展性设计组件时，考虑未来的扩展性。使用插槽和事件来允许组件与其他组件或功能交互。例如，一个模态框组件可以有头部、内容和底部插槽，以适应不同的场景。
<!-- Modal.vue--><template><div class="modal"@click="handleOutsideClick"><div class="modal__content"><slot name="header"></slot><div class="modal__body"><slot></slot></div><slot name="footer"></slot></div></div></template><script>export default{ methods:{ handleOutsideClick(event){ if(!this.$el.contains(event.target)){ this.$emit('close');}},}, mounted(){ document.addEventListener('mousedown', this.handleOutsideClick);}, beforeDestroy(){ document.removeEventListener('mousedown', this.handleOutsideClick);},};</script>组件的文档和示例编写清晰的组件文档，包括组件用途、用法示例、属性、事件、插槽等，可以帮助其他开发者更好地理解和使用你的组件库。
测试和质量保证编写单元测试和集成测试，确保组件在各种情况下都能正确工作。这将帮助你在组件库的开发过程中发现和修复问题，提高组件的可靠性。
组件的懒加载为了优化应用性能，可以使用Vue Router的懒加载功能，只在组件实际需要时才加载。这尤其适用于大型组件库中的不常用组件：
//在Vue Router配置中{ path:'/some-path', component:()=> import('@/components/SomeLargeComponent.vue'),},组件的按需导入如果你使用了第三方库，但只需要其中的一部分功能，可以使用ES模块的按需导入，避免加载不必要的代码：
import{ DatePicker} from'vue-datepicker';设计系统和风格指南创建一套设计系统和风格指南，定义组件的样式、交互和行为，确保整个组件库的一致性
前端常用的框架有哪些
一、 Web前端框架之Angular 2+
Angular 2+优点解析：
Angular 2+的最大优势在于它的流行程度。也有人认为它和 Google密切相关的名字，会影响团队使用它。Angular 1的迅速流行是因为那些来自其他交互式应用程序开发环境的人会发现对于开发单页面 Web应用程序具有相似的模型-视图模式。通过对 Angular 1进行现代化演变和重新构建框架的某些部分，Angular 2+已经真正的爆发了，大量的正式的和非正式培训机构数量都让人印象深刻，开发者有很强的市场竞争力。对于用户来说它有一套用于构建用户界面的丰富组件，这也是本系列中少有的几个框架能够做到这点。
缺点解析：
我们觉得 Angular框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 Web应用这个更大的关注点，如果不及早确定下来，这将会导致整个项目难以维护，在实际项目中，运行时提供不属于核心框架的技术往往让人觉得不可思议，这大大降低了 TypeScript对最终开发者的价值。
发展方向：
Angular 5刚刚发布，这看来是 Angular已经成功的印证了快速发布版本的承诺，在 Google的持续支持下，Angular会越来越成熟。
像许多的大型组织一样，Google具有多重(分裂)的人格，从外表上看，Angular团队和那些专注于浏览器标准的团队之间显得很和谐。但我们的观点是，和谐只是一层薄薄的窗户纸。Angular团队对于 Web组件和渐进式 Web应用没有一个真正解决方案。我们认为，业界普遍认可的标准将会在 Angular框架中会逐步实现，这将会影响到如何更好的构建 Angular应用将成为一个中/长期的风险。
使用环境：
如果你需要在一个大型的框架内获取技术资源，框架内的技术通常很容易移植;或者你需要在框架中训练开发人员，并且还要有一定的信心，他们会在短期内获得一定的开发能力，这样的话你可以考虑 Angular 2+。需要注意的是 Angular1(angular.js)与 Angular2+是截然不同的，其中的应用、技术和经验不能直接移植到 Angular2+的开发中去。
如果你的 Web应用能够很好的转化为标准的模型-视图模式，那么你也可以忽略其他直接考虑使用 Angular2+。
如果你对 Google Material UX设计模式满意，那么 Material Angular是遵循该模式的一种快速、简单且可靠的方式。
二、Web前端框架之React+ Redux
React+ Redux优势解析：
React和 Redux的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松掌握概念，并了解单向数据体系结构的好处，简化大量的用户界面应用程序。
缺点解析：
React和 Redux最大的弱点不是它们是什么，而是它们不是什么。要构建一个功能丰富的 Web应用程序，你需要许多功能，一旦脱离 React和 Redux和其他一些库的核心，你将发现一个非常分散的社区，拥有无数的解决方案和模式，不容易整合在一起。
因此，虽然 React和 Redux都是非常专注的库，但缺乏经验的团队还是会很容易地生成不可维护的解决方案，而不是意识到他们所做的选择会导致性能不佳或错误。即使有经验的开发人员也可能意识到，一个松散的架构或惯例可能会在未来困扰他们。
假省钱是一种对自己的欺骗，组织范围内采用 React和 Redux将轻松降低无效率问题。没有其他库和模式的广泛约定和标准化，标准化 React+ Redux比较于我们正在采用的 JavaScript来编写我们的应用程序效率要高。
发展方向：
Facebook和 React最近从繁琐的附加专利纠纷中抽离，他们认识到，就像其他项目一样，更广泛的社区能够提高自己的声音。我觉得这有助于 Facebook意识到他们还不能更好地了解我们，相信我们来引导项目。希望这将继续贯穿项目的特点和技术方向。
很难预测 React和 Redux的未来。但是，将库集中在一起，确实会显着提高适应性，大多数React+ Redux模式都会促进一个分离的体系结构，从而可以轻松地进行重构和迭代。两年前，大家喜欢的还是React+ Flux，但整个社区很快就拥抱了Redux。思维或模式的其他重大转变可能很容易被采纳。这种关键能力可能会持续到未来。
使用环境：
如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React+ Redux可能是正确的。在这一过程中，你不仅需要对你的团队和组织的能力保持诚实，还要在你的初始开发过程中，以及在整个应用程序的长期维护过程中保持诚实。
三、Web前端框架之Vue.js
vue.js优势介绍：
渐进式构建能力是vue.js最大的优势，vue有一个简洁而且合理的架构，使得它易于理解和构建。
vue有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。
缺点介绍：
在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑，即使没有完美包含一个模式到另一个模式的完美转换，但让人感觉希望能维持两个模式的相关性。对于那些期待vue.js完美解决方案，并可能导致难以维护不一致的应用程序的人来说，这至少是令人困惑的。
一个更大的挑战是vue.js依赖于一个单独的人，很明显，其他的项目基本是由一个组织提供支持，但这让人感觉更加有意义，虽然它有一个强大文件的社区和许多有创新的新增项目，但是 vue核心的开发基本落在一个人身上。
我们很高兴看到 vue更加容易接受新兴的标准方法，但是它的类似于 Web组件的模式，而不是真正的 Web组件，这可能是 vue所得不偿失的地方。
发展前景：
虽然vue.js有相当广泛的应用，但也很难预测在中期发展中这个势头能持续多久，它不是由一个商业组织直接支持并维护，因此，这很大程度上依赖于维护者的生存能力和继续维护下去的愿望来决定。
它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明vue.js架构将来无法适应进一步发展。
使用场景：
如果你有一个传统的Web应用程序，并需要一个强壮稳健的应用程序层，那么vue.js可能是一个很好的选择，它有清晰的模式，即使没有经验的团队也能正确或者错误的使用它。尽管vue UX框架没有开箱即用的功能，但在vue.js上也能大量持续性构建应用，这将有利于你的项目。
以上就是今天为大家分享的关于常用的Web前端框架优缺点分析的文章。想要成为合格的前端人才，一定要掌握这些框架。
好了，文章到此结束，希望可以帮助到大家。