前端开发模式

现在很多前端开发的小伙伴对前端开发模式不是很了解,现在我写一些自己的学习心得和大家共享,希望有所收获!

首先第一个开发模式:工厂模式:

工厂模式顾名思义即是通过一个工厂去制造出很多相似的产品出来,就比如类似的汽车,火车,飞机等这些相似的产品,在流水线上制造出来,这样可以节省开发的时间,提高开发开发效率;

function createPerson(name,age,job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name);

}

}

var person1 = createPerson(‘张三‘,28,‘engineer‘);

var person2 = createPerson(‘李四‘,25,‘engineer‘);

通过createPerson()函数,首先在函数内部定义一个对象,然后给这个对象定义一的属性,通过参数形参传递到函数内部的对象上,给对象定义name,age,job等属性,然后就可以在使用这个工厂函数,传入你想制造等人的名字,年龄,工作,就可以制造出来多个不同的对象出来;

第二个是构造函数模式

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.sayName = function(){

alert(this.name)

}

}

var person1 = new Person(‘张三‘,29,‘工程师‘);

var person2 = new Person(‘李四‘,29,‘设计师‘);

var person1 = new Person(‘张三‘,29,‘工程师‘);

var person2 = new Person(‘李四‘,29,‘设计师‘);

第三个:原型模式

function Person(){

}

Person.prototype.name = ‘Nicholas‘;

Person.prototype.age = 29;

Person.prototype.job = ‘soft engineer‘;

Person.prototype.sayName = function(){

alert(this.name);

};

var person1 = new Person();

person1.sayName();

var  person2 = new Person();

person2.sayName();

alert(person1.sayName == person2.sayName));

时间: 2024-12-04 23:05:06

前端开发模式的相关文章

我经历的前端开发模式进化史

萌芽 记得,在刚接触js那会儿,那时还没有专职的“前端开发”.当时的前端开发工作是由设计师(当时还叫“美工”)来完成的,在这种模式下,设计师需要完成页面的设计.切图.css.html,以及部分js交互的工作.这些完成的工作会成为设计资源的一部分被一并提供给开发人员,由于设计师对css.js了解的很有限,他们完成的页面代码会有许多问题还需要开发来调整和修改,当时的页面还都是后端同步渲染输出的,基本上大伙儿也只会改改一些js表单验证,常用的css属性.所以在这个时期,前端工具.类库.框架是几乎没有的

大搜车前端开发模式:被动编译和主动编译

最近,梳理了一下公司的前端开发体系,准备给已经工作一年多的原有体系引入一些新的开发模式,其实也不算新了,只是对于我们一直采用的模式来说,是两个完全不同的方向,以前,我崇尚简单,一直按照简单易用的理念构建了公司现有的前端开发体系,现在随着人数的增多和业务的复杂度提升,感觉是时候引入一些差异化的开发体系了. 说来说去有点绕的慌,上面一段中说的 传统的开发模式,在团队内部我们叫做 被动编译,而新的开发方式,在团队内部叫做 主动编译. 被动编译 可能很多人对于被动编译都不是很熟悉,因为这种开发方式现在并

前端开发规范总结 总结前端开发模式和规范

1.前端开发规范 WEB客户端开发自成体系, 主要用于智能终端(iPhone.Android手机.iPad.Android Pad)和传统PC的开发.JS规范.HTML规范和CSS规范对客户端开发进行全方位指导,统一编码规范.提高可读性.降低维护成本. 1.1一般规范 应用在 HTML, JavaScript 和 CSS上的通用规则. 1.1.1文件/资源命名 1)     以可读性而言,减号(-)用来分隔文件名: 2)     使用驼峰方式命名文件名与文件所在的文件夹,便于统一配置: 3)  

掌握这两个技术点,你可以玩转AppCan前端开发

"AppCan的前端开发其实非常简单,只要掌握两方面的技术即可.一方面是会使用栅格布局完成UI的界面排版,另外一方面就是使用AppCan MVVM模型来完成整个页面构造和用户操作逻辑." 在2016AppCan移动开发者大会的技术脱口秀环节, AppCan技术副总监陈雪分享了自己从事AppCan技术开发的经验,帮助开发者深入了解AppCan技术思路. 以下为完整精彩内容: 栅格布局 AppCan采用弹性盒子模型作为标准化的的栅格布局参考方案,帮助开发者更快速的完成界面的排版工作.为什么

webpack+react+es6开发模式

一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等学习网址:http://www.cnblogs.com/hujunzheng/p/5405780.html 二.简单的步骤条组件 1.通过react自定义的组件进行模拟   注:只是用了react,用到相关react的js请到 https://github.com/hjzgg/webpack-rea

关于前端常见的2种开发模式

    一.前言 2018年12月底,感觉做事情不是太顺畅...就当是运气不好吧...XX总喜欢把自己的问题——推拖到别人身上,什么事情都觉得自己的就是完美(都是别人的问题),你这么能,你咋不上天呢... 已是2019年了,祝大家新年快乐,开开心心,心想事成,万事如意......直接进入正题哈... 前端开发大家熟知非常传统的开发模式,像HTML/CSS/JS 一锅炖的方式.虽然可以较快速.无规范开发... 但对于代码编程可维护性.可读性.可迁移性等方面来说简直就是灾难...于是便有了模板式的开

前端开发四

7.闭包问题 闭包:函数能被外部调用到,则该作用连上的所有变量都会被保存下来. 作用:①可以读取函数内部的变量:②相当于划出了一块私有作用域,避免数据污染:③让变量始终保存在内存中 使用全局变量被认为是不好的习惯,而且容易造成错误并且维护成本较高,所以js可以采用闭包的方式读取函数的内部变量.但是如果大量使用闭包就会造成过多的变量始终保存在内存中,会造成内存泄漏. 一个简单的闭包例子: function f1(){ var n=999; function f2(){ alert(n); } re

7招提升你的前端开发效率

7招提升你的前端开发效率 前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. 对于开发效率,我个人理解是 开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率 那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分.下面我就介绍下7个提高前端开发效率的方法. 前端工程化 方法 1.切图 切图是一个前端最基础的技能,一般我们使用

互联网前端开发技术栈

互联网前端开发技术栈 前言 互联网建立60多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000年初开始做网站开发,使用的技术不断迭代,一些消失了,更多的出现了. 最近写过  .NET技术大系概览 (迄今为止最全的.NET技术栈) ,相信很多网友感叹掌握的.NET技术远没有这个技术栈里面所描述的多. 问题 大家是否想过: Web前端开发究竟包含哪些技术呢? 我所掌握的技术