便捷工厂形式

形象各个对象的独特点，加工出最后外形，关于不同点启动独立设计。

functioncreateBook(name,time,type){//创立一个对象，并对对象拓展属性和方法consto=newObject();//独特参数o.name=name;o.time=time;o.getName=function(){console.log(this.name);}//差同性if(type==="js"){//js类书差异处置}elseif(type===""){//css类书差异处置}elseif(type===""){//html类书差异处置}returno;}constbook1=createBook('jsbook',2014,'js');constbook2=createBook('cssbook',2013,'css');constbook3=createBook('htmlbook',2012,'css');book1.getName();book2.getName();book3.getName();

安保工厂形式

安保工厂形式可以屏蔽对类的失误经常使用，如遗记写new实例化对象防止发生一些非预期的行为。

functionFactory(type,content){//假设遗记写new实例化了，加工从新口头一次性if(thisinstanceofFactory){this[type](content);}else{newFactory(type,content);}}Factory.prototype={Script:(content)=>{console.log(content)},Java:(content)=>{console.log(content)},}Factory('JavaScript','JavaScript哪家强');Factory('Java','Java哪家强');

树立者形式

望文生义，联合多个类，发明出联合进去的终极人物（对象）

//创立人类functionHuman(param){//技艺this.skill=param&&param.skill||"隐秘";//兴味喜好this.hobby=param&&param.hobby||"隐秘";}Human.prototype.getSkill=function(){returnthis.skill;}Human.prototype.getHobby=function(){returnthis.hobby;}//创立姓名类functionName(name){(function(_this,name){_this.wholeName=name;_this.firstName=name.slice(0,name.indexOf(""));_this.secordName=name.slice(name.indexOf(""));})(this,name)}//创立职位类functionWork(work){(function(_this,work){switch(work){case"code":_this.work="工程师";_this.workDescript="每天陶醉于编程";break;case"UI":case"UE":_this.work="设计师";_this.workDescript="设计更是一种艺术";break;case"teach":_this.work="老师";_this.workDescript="分享页是一种快乐";break;default:_this.work=work;_this.workDescript="对不起，咱们还不清楚您所选用职位的相关形容";}})(this,work)}//创立树立者类functionPerson(name,work){varperson=newHuman();person.name=newName(name);person.work=newWork(work);returnperson;}constperson=newPerson("xiaoming","code");console.log(person.skill);//隐秘console.log(person.work.workDescript);//每天陶醉于编程console.log(person.name.firstName);//xiao

这里联合了Humer、Name、Work，最后在Person中结构出了一个应聘者。

原型形式

用原型实例指向创立对象的类，实用于创立新的对象的类共享原型对象的属性以及方法。简而言之，就是依据一个基类（原型类）结构出多个子类，将专用方法和属性保留在原型类中。

//图片轮播基类functionLoopImages(imgArr,contner){this.imgArr=imgArr;this.container=container;}LoopImages.prototype={//创立轮播图片createImage:function(img){this.imgArr.push(img);console.log('LoopImagescreateImagefunction');},//切换下一张图片changeImage:()=>{console.log('LoopImageschangeImagefunction');}}//高低滑动切换类functionSlideLoopImg(imgArr,container){LoopImages.call(this,imgArr,container);}SlideLoopImg.prototype=newLoopImages();//重写承袭的切换下一张图片方法SlideLoopImg.prototype.changeImage=()=>{console.log('SlideLoopImgchangeImagefunction');}//渐隐切换类functionFadeLoopImg(imgArr,container,arrow){LoopImages.call(this,imgArr,container);this.arrow=arrow;}FadeLoopImg.prototype=newLoopImages();//重写承袭的切换下一张图片方法FadeLoopImg.prototype.changeImage=()=>{console.log('FadeLoopImgchangeImagefunction');}constfade=newFadeLoopImg(['01.jpg','02.jpg','03.jpg','04.jpg'],'div',['left.jpg','right.jpg'])console.log(fade.arrow);//['left.jpg','right.jpg']console.log(fade.imgArr);//['01.jpg','02.jpg','03.jpg','04.jpg']fade.createImage('05.jpg');//LoopImagescreateImagefunctionconsole.log(fade.imgArr);//['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg']fade.changeImage();//FadeLoopImgchangeImagefunction

可以看到，原型形式可以让多个对象分享同一个原型对象的属性与方法，这也是一种承袭形式。原型对象愈加适宜在创立复杂的对象时，关于那些需求不时在变动而造成对象结构不停扭转时，将那些比拟稳固的属性与方法公共提取，成功承袭，代码复用。

单例形式

单例形式，望文生义，一个类只能有一个实例，重复实例化只会前往第一次性实例的对象。

静态变量

经过一个立刻口头函数，将一切方法挂载，并且为静态变量，无法扭转。

constReact=(function(){varreact={useState:()=>{},useEffect:()=>{},useRef:()=>{},useMemo:()=>{},useCallback:()=>{},useReducer:()=>{},useContext:()=>{}}return{get:function(name){returnreact[name]||null;}}})()console.log(React.get('useState'))

实例化单例

创立一个立刻口头函数，应用闭包，使记载值常驻在内存中，每次实例化的时刻判别能否为第一次性实例化，成功单例。

constReact=(function(){letinstance=null;returnfunction(params){if(instance){returninstance}this.params=params;returninstance=this;}})()console.log(newReact({useState:()=>{},useEffect:()=>{},useRef:()=>{},useMemo:()=>{},useCallback:()=>{},useReducer:()=>{},useContext:()=>{}})===newReact('hh'));//true

惰性单例

非实例化创立形式，也是一种提前创立的形式。

functionReact(fns){this.fns=fns;}React.instance=null;React.getFn=function(){console.log(this.fns)}React.getInstance=function(name){if(!this.instance){returnthis.instance=newReact(name)}returnthis.instance}console.log(React.getInstance({useState:()=>{},useEffect:()=>{},useRef:()=>{},useMemo:()=>{},useCallback:()=>{},useReducer:()=>{},useContext:()=>{}})===React.getInstance('xx'));//true

总结

本文引见了JavaScript中创立型设计形式，宿愿看过之后对读者开发中代码品质有所协助，有所感悟。

简述在网页中插入javascript脚本程序的三种形式

1、html元素事件中；

2、<script>元素中；

3、外部脚本文件；

javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。

href：URL规定链接的目标 URL。

<a href=></a> 这个a标签的话就是指点击后跳转到网络首页

<a href=javascript:;></a> 点击后是不会跳转的，一般用于开发时页面还未完成。

扩展资料：

JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。

JS函数的几种定义方式分析_javascript技巧

本文实例讲述了JS函数的几种定义方式。 分享给大家供大家参考，具体如下：JS函数的定义方式比较灵活，它不同于其他的语言，每个函数都是作为一个对象被维护和运行的。 先看几种常用的定义方式：function func1([参数]){/*函数体*/}var func2=function([参数]){/*函数体*/};var func3=function func4([参数]){/*函数体*/};var func5=new Function();上述第一种方式是最常用的方式，不用多说。 第二种是将一匿名函数赋给一个变量，调用方法：func2([函数]);第三种是将func4赋给变量func3，调用方法：func3([函数]);或func4([函数]);第四种是声明func5为一个对象。 再看看它们的区别：但同样是定义函数，在用法上有一定的区别。 用同样的方法可以去理解第三种定义方式。 第四种定义方式也是需要声明对象后才可以引用。 希望本文所述对大家JavaScript程序设计有所帮助。