常用的前端开发设计模式有哪些

作者&投稿：父废（若有异议请与网页底部的电邮联系）

常用的前端开发设计模式有：模块模式，构造函数模式，工厂模式，混合模式，单例模式以及订阅-发布模式。
前端开发设计模式
模块模式:
在立即执行函数表达式中定义的变量和方法在外界是访问不到的,只能通过其向外部提供的接口,"有限制"地访问.通过函数作用域解决了属性和方法的封装问题.
var Person = (function(){
var name = "xin";
var age = 22;
function getName(){
return name;
}
function getAge(){
return age;
}
return {
getName: getName,
getAge: getAge
}
})();
console.log(age); // 报错:age未定义
console.log(name); // 报错:name未定义
console.log(Person.age); // undefined
console.log(Person.name); // undefined只能通过Person提供的接口访问相应的变量
console.log(Person.getName()); // xin
console.log(Person.getAge()); // 22构造函数模式
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person;
printName: function(){
console.log(this.name);
}, printAge: function(){
console.log(this.age);
}
}var person = new Person('xin', 22);
person.printName(); // xin
person.printAge(); // 22混合模式
function Person(name,age){
this.name = name;
this.age = age;
};
Person.prototype.printName = function(){
console.log(this.name);
}function Student(name,age){
//继承 Person 的属性
Person.call(this,name,age);
}function create(prototype){
function F(){};
F.prototype = prototype;
return new F();
}
//让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法
Student.prototype = create(Person.prototype);
Student.prototype.printAge = function(){
console.log(this.age);
}var student = new Student('xin',22);
student.printName(); // "xin"工厂模式
function Person(name, age){
var person = new Object();
person.name = name;
person.age = age;
person.printName = function(){
console.log(this.name);
};
person.printAge = function(){
console.log(this.age);
}
return person;
}
var person = Person('xin',22);单例模式
var Singleton = (function (){
var instance;
function init(){
return {
};
} return {
getInstance: function(){
if(!instance){
instace = init();
} return instance;
}
};
})();发布-订阅模式
发布-订阅模式又叫做观察者模式,定义了对象之间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖与它的对象都将得到通知.
发布-订阅模式广泛应用于异步编程之中,是一种替代回调函数的方案.多个事件处理函数可以订阅同一个事件,当该事件发生后,与其相对应的多个事件处理函数都会运行取代对象之间硬编码的通知机制,一个对象不用再显示的调用另外一个对象的某个接口,降低模块之间的耦合程度,虽然不清楚彼此的细节,但是不影响他们之间相互通信
应用
DOM事件
DOM事件是一种典型的发布-订阅模式,对一个dom节点的一个事件进行监听,当操作dom节点时,触发相应的事件,响应函数执行.事件函数对dom节点完全未知,不用去理会是什么事件,如何触发,执行就好.
自定义事件
指定发布者"发布-订阅"这种关系用一个对象表示,键表示事件名,值是一个由事件处理程序组成的数组,相当于订阅者的花名册发布消息后,遍历缓存列表,依次执行订阅者的回调函数
var EventCenter = (function(){
//将所有的"发布-订阅"关系放到events中
var events = {};
//给事件绑定事件处理程序,
function on(evt, handler){
//evt:事件名，handler:事件处理程序
events[evt] = events[evt]||[];
events[evt].push({
handler:hander
});
}
//发布消息(触发事件),并执行相应的事件处理程序
function fire(evt,args){
//evt:事件名，args:给事件处理程序传递的参数
if(!events[evt]){
return;
}
//遍历事件处理程序列表,执行其中每一个事件处理程序
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(args);
}
}
//使用模块模式的方式,向外界提供绑定事件处理程序和触发事件的接口
return {
on: on,
fire: fire
}
})();实际应用
var Event = (function(){
var events = {};
function on(evt, handler){
events[evt] = events[evt]||[];
events[evt].push({
handler:handler
});
} function fire(evt,args){
if(!events[evt]){
return;
}
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(args);
}
} function off(evt){
delete events[evt];
} return {
on: on,
fire: fire,
off: off
}
})();
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.on('click', function(val){
console.log('click.... now val is '+ val);
})
Event.fire('change', 'xin');
Event.fire('click', 'xin');
Event.off('change');

前端开发必学的技术有哪些?
答：3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。

web前端开发都包括哪些技术?
答：随着时代的发展，前端开发技术的三要素也演变成为现的：HTML、CSS、Jquery。这是Javascript语言的扩展，而且许多浏览器正在实现ES6。好处是哪怕是现在，你也可以开始编写ES6代码，因为你可以使用transpiler（转译器）如Babel来转换ES6代码为ES5代码。经历这些并了解新功能是一件好事。不过，没有不要钻研得太深...

一个优秀的前端工程师应具备哪些技能?
答：设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。第五阶段：封装一个属于自己的框架框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架。框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动...

前端开发和后端开发有什么区别?
答：展示方式不同，所用技术不同。前端开发用到的技术包括但不限于html。css。javascript、jquery、Bootstrap、Node.js、AngularJs等技术。后端开发以java为例主要用到的是包括但不限于StrutsspringspringmvcHibernateHttp协议ServletTomcat服务器等技术。前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端...

JavaEE开发:你需要掌握的技能和学习路径
答：前端技能HTML、CSS和JavaScript是JavaEE开发的基础,也是你必须要掌握的。项目必备知识UML、23种设计模式、SCM、JUnit、XML、AJAX等都是开发中不可或缺的。Servlet与JSPServlet与JSP是JavaEE的入门技能,熟练掌握Tomcat、Apache等服务器和IDE使用是必备的。核心业务技能JavaEE主要涉及Struts、Spring、...

网页设计和网站开发用到的技术有哪些?
答：对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。如果有很多CSS框架支持栅格功能,可参考文章《介绍27款经典的CSS框架》。H— HTML超文本置标语言 ( 英文 : HyperText Markup Language , HTML )是为“ 网页创建和其它可在 ...

网站WEB前端开发需要掌握什么技术?
答：4 除了掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等 5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术 web前端有广阔的发展空间，app、小程序、移动端、pc端等都网站是需要前端技术的开发支持...

前端和后端有什么区别?
答：后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多很多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。（2）所用的技术不同前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、...

web前端开发都包括哪些技术
答：4 除了掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等 5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术前端的岗位很多，要注意选择自己的技术方向，需要精通流行的几个框架开发。前端是入门简单...

前端开发需要学什么啊?
答：2、CSS 学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。3、JavaScript 学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。4、操作系统了解Unix和Linux的基本知识，对于开发人员有益无害。5、网络服务器了解Web服务器，包括对Apache的基本配置，htaccess配置...

星空网络

常用的前端开发设计模式有哪些

相关热门