加入小宇宙
分类
wordpress企业主题

JavaScript设计模型Iterator

JavaScript设计模型Iterator实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Iterator Pattern是一个很重要也很简单的Pattern:迭代器!

我们可以提供一个统一入口的迭代器,Client只需要知道有哪些方法,或是有哪些Concrete Iterator,并不需要知道他们底层如何实作!现在就让我们来开始吧!

起手式

Iterator最主要的东西就是两个:hasNext、next。要让Client知道是否还有下一个,和切换到下一个!

定义Interface

interface IteratorInterface {

index: number

dataStorage: any

hasNext(): boolean

next(): any

addItem(item: any): void

}

实作介面

下面的范例我将会使用Map、Array这两个常见的介面实作。

class iterator1 implements IteratorInterface {

index: number

dataStorage: any[]

constructor() {

this.index = 0

this.dataStorage = []

}

hasNext(): boolean {

return this.dataStorage.length > this.index

}

next(): any {

return this.dataStorage[this.index ++]

}

addItem(item: any): void {

this.dataStorage.push(item)

}

}

// map

class iterator2 implements IteratorInterface {

index: number

dataStorage: Map<number, any>

constructor() {

this.index = 0

this.dataStorage = new Map<number, any>()

}

hasNext(): boolean {

return this.dataStorage.get(this.index) != undefined

}

next(): any {

return this.dataStorage.get(this.index ++)

}

addItem(item: any): void {

this.dataStorage.set(this.dataStorage.size, item)

}

}

Client

我没有实作一个Client,所以我是直接new一个类别出来直接使用!

const i = new iterator1()

i.addItem(123)

i.addItem(456)

i.addItem(‘dolphin’)

while(i.hasNext()){

console.log(i.next())

}

console.log(`====================`)

const i2 = new iterator2()

i2.addItem(123)

i2.addItem(456)

i2.addItem(‘dolphin’)

while(i2.hasNext()){

console.log(i2.next())

}

结论

会发现Iterator 1号 2号的结果都是一样的!他们都只需要让Client知道有hasNext、next就好,底层的实作不需要让他们知道!

以上就是本文的全部内容,希望对大家的学习有所帮助。

 

分类
wordpress企业主题

JavaScript常用变量的基本使用方法

JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’

var iNum = 123;

var sTr = ‘asd’;

//同时定义多个变量可以用”,”隔开,公用一个‘var’关键字

var iNum = 45,sTr=’qwe’,sCount=’68’;

变量类型

五种基本数据类型:

1、number 数字类型

2、string 字符串类型

3、boolean 布尔类型 true 或 false

4、undefined undefined类型,变量声明未初始化,它的值就是undefined

5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null

一种复合类型:

object

javascript语句与注释

1、一条javascript语句应该以“;”结尾

<script type=”text/javascript”>

var iNum = 123;

var sTr = ‘abc123’;

function fnAlert(){

alert(sTr);

};

fnAlert();

</script>

2、javascript注释

<script type=”text/javascript”>

// 单行注释

var iNum = 123;

/*

多行注释

1、…

2、…

*/

var sTr = ‘abc123’;

</script>

变量、函数、属性、函数参数命名规范

1、区分大小写;

2、第一个字符必须是字母、下划线(_)或者美元符号($);

3、其他字符可以是字母、下划线、美元符或数字。

分类
wordpress企业主题

javascript设计模式外观模式的原理和使用方法

本文介绍了javascript设计模式外观模式的原理和使用方法。与您分享,供您参考,如下所示:

简介:外观模式是一种常用的结构设计模式。引入了外观角色,简化了客户端与子系统的交互,为复杂的子系统调用提供了统一的入口,隐藏了系统的复杂性。度,减少子系统与客户端的耦合。

定义:为子系统中的一组接口提供统一入口。外观模式定义了一个高级接口,使该子系统更易于使用。

场景:我们画一个圆来介绍外观模式。

var Rectangle = function(){

this.draw = function(){

console.log(‘画一个矩形’);

}

}

var Circle = function(){

this.draw = function(){

console.log(‘画一个圆’);

}

}

var Triangle = function(){

this.draw = function(){

console.log(‘画一个三角形’);

}

}

var ShapeMaker = function(){

this.rectangle = new Rectangle();

this.circle = new Circle();

this.triangle = new Triangle();

this.drawRectangle = function(){

this.rectangle.draw();

}

this.drawCircle = function(){

this.circle.draw();

}

this.drawTriangle = function(){

this.triangle.draw();

}

}

var shapeMaker = new ShapeMaker();

shapeMaker.drawRectangle(); //画一个矩形

shapeMaker.drawCircle(); //画一个圆

shapeMaker.drawTriangle(); //画一个三角形

是不是豁然开朗?其实我们日常最常用的就是外观模式。我们的工具类,jquery,包括一些浏览器兼容,我们都会把他们封装到一个对象里。

这就是外观模式提倡的把复杂的操作封装到一个简单接口中。几乎所有的涉及多个业务对象交互的场景都可以考虑使用外观模式进行重构。

外观模式总结:

优点:

* 对客户端屏蔽了子系统组件,减少了客户端所需处理的对象数目,并且提升使用便捷度。

* 实现了客户端与子系统之间的松耦合关系,这使得子系统的变化不会影响客户端。

缺点:

* 不能姮好的限制客户端直接使用子系统类

* 如果设计不当,增加新的子系统可能需要修改外观类的源代码,违背了开关原则

适用场景:

* 需要对一个复杂子系统提供一个简单入口时可以采用外观模式

分类
wordpress企业主题

JavaScript原生map实现的方法分析

  在本篇文章里小编给大家整理了关于js原生map实现的方法以及实例分析内容,需要的朋友们可以参考下。

js原生方法map实现

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

<meta name=”author” content=”杨欣”>

<title>map</title>

</head>

<body>

<script>

Array.prototype.my_map = function (callback) {

if (!Array.isArray(this) || !this.length || typeof callback !== ‘function’) {

return []

} else {

let result = [];

for (let index = 0; index < this.length; index++) {

const element = this[index];

result.push(callback(element, index, this))

}

return result

}

}

let arr = [1, 2, 3, 4, 5]

let res = arr.my_map((ele, i) => {

return ele + 10

})

console.log(res)

</script>

</body>

</html>

补充知识点

我们平时用的是已经封装好的map方法,如果让我们自己封装一个map,应该如何实现。

万变不离其宗,其实遍历数组的核心还是for循环。因此下面封装一个map方法。

思路:

1.在原型上添加一个方法

2.传一个函数和this

3.call 方法传的参数和封装好的map方法的参数是一样的。

Array.prototype.fakeMap = function(fn,context) {

let arr = this;

let temp = [];

for(let i=0;i<arr.length;i++){

let result = fn.call(context,arr[i],i,arr);

temp.push(result);

}

return temp;

}

以上就是本次介绍的全部相关知识点,如果大家有任何补充可以联系小编。

 

分类
wordpress企业主题

js是怎么实现弹幕效果

js是怎么实现弹幕效果,下面让小编来介绍下。效果的具体步骤如下:

1、编写HTML代码:

创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置placeholder为“说点什么吧?”以提示用户在此输入弹幕信息。

<body>

<div class=”con”>

<div id=”screen”>

<div class=”dm_show”>

<!– <div>text message</div> –>

</div>

</div>

<div class=”edit”>

<p>

<input placeholder=”说点什么吧?” class=”content” type=”text” />

</p>

<p>

<input type=”button” class=”send” value=”发送” />

<input type=”button” class=”clear” value=”清屏” />

</p>

</div>

</div>

</body>

2、设置各标签的CSS样式:

<style>

.con {

background-color: floralwhite;

padding: 40px 80px 80px;

}

#screen {

background-color: #fff;

width: 100%;

height: 380px;

border: 1px solid rgb(229, 229, 229);

font-size: 14px;

}

.content {

border: 1px solid rgb(204, 204, 204);

border-radius: 3px;

width: 320px;

height: 35px;

font-size: 14px;

margin-top: 30px;

}

.send {

border: 1px solid rgb(230, 80, 30);

color: rgb(230, 80, 0);

border-radius: 3px;

text-align: center;

padding: 0;

height: 35px;

line-height: 35px;

font-size: 14px;

width: 159px;

background-color: white;

}

.clear {

border: 1px solid;

color: darkgray;

border-radius: 3px;

text-align: center;

padding: 0;

height: 35px;

line-height: 35px;

font-size: 14px;

width: 159px;

background-color: white;

}

.edit {

margin: 20px;

text-align: center;

}

.text {

position: absolute;

}

*{

margin: 0;

padding: 0;

}

.dm_show{

margin: 30px;

}

</style>

3、编写JavaScript代码,添加按钮点击事件

<script type=”text/javascript” src=”../jquery-easyui-1.3.5/jquery.min.js”></script>

<script>

$(function() {

//设置“发送”按钮点击事件,将弹幕体显示在弹幕墙上

$(‘.send’).click(function() {

//获取文本输入框的内容

var val = $(‘.content’).val();

//将文本框的内容赋值给val后,将文本框的内容清除,以便用户下一次输入

$(‘.content’).val(”);

//将文本框内容用div包裹起来,便于后续处理

var $content = $(‘<div class=”text”>’ + val + ‘</div>’);

//获取弹幕墙对象

$screen = $(document.getElementById(“screen”));

//设置弹幕体出现时的上边距,为任意值

var top = Math.random() * $screen.height()+40;

//设置弹幕体的上边距和左边距

$content.css({

top: top + “px”,

left: 80

});

//将弹幕体添加到弹幕墙中

$(‘.dm_show’).append($content);

//弹幕体从左端移动到最右侧,时间为8秒,然后直接删除该元素

$content.animate({

left: $screen.width()+80-$content.width()

}, 8000, function() {

$(this).remove();

});

});

//设置“清屏”点击事件,清除弹幕墙中的所有内容

$(‘.clear’).click(function() {

$(‘.dm_show’).empty();

});

});

</script>

以上就是js如何实现弹幕效果的详细内容,更多请关注网站其它相关文章!

分类
wordpress企业主题

js随机生成div的效果怎么做

鼠标点击页面,在哪里点击就在那个位置创建一个div,宽高50,颜色随机,div在鼠标点击的正中间。

效果如下图所示:

var Method=(function () {

return {

EVENT_ID:”event_id”,

loadImage:function (arr) {

var img=new Image();

img.arr=arr;

img.list=[];

img.num=0;

//      如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中

//      一旦触发了这个事件需要的条件,就会继续执行事件函数

img.addEventListener(“load”,this.loadHandler);

img.self=this;

img.src=arr[img.num];

},

loadHandler:function (e) {

this.list.push(this.cloneNode(false));

this.num++;

if(this.num>this.arr.length-1){

this.removeEventListener(“load”,this.self.loadHandler);

var evt=new Event(Method.EVENT_ID);

evt.list=this.list;

document.dispatchEvent(evt);

return;

}

this.src=this.arr[this.num];

},

$c:function (type,parent,style) {

var elem=document.createElement(type);

if(parent) parent.appendChild(elem);

for(var key in style){

elem.style[key]=style[key];

}

return elem;

},

divColor: function () {

var col=”#”;//这个字符串第一位为# 颜色的格式

for(var i=0;i<6;i++){

col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16;  toString(16)为转化为16进制

}

return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式

},

random:function (min,max) {

max=Math.max(min,max);

min=Math.min(min,max);

return Math.floor(Math.random()*(max-min)+min);

},

dragElem:function (elem) {

elem.addEventListener(“mousedown”,this.mouseDragHandler);

elem.self=this;

},

removeDrag:function (elem) {

elem.removeEventListener(“mousedown”,this.mouseDragHandler);

},

mouseDragHandler:function (e) {

if(e.type===”mousedown”){

e.stopPropagation();

e.preventDefault();

document.point={x:e.offsetX,y:e.offsetY};

document.elem=this;

this.addEventListener(“mouseup”,this.self.mouseDragHandler);

document.addEventListener(“mousemove”,this.self.mouseDragHandler);

}else if(e.type===”mousemove”){

this.elem.style.left=e.x-this.point.x+”px”;

this.elem.style.top=e.y-this.point.y+”px”;

}else if(e.type===”mouseup”){

this.removeEventListener(“mouseup”,this.self.mouseDragHandler);

document.removeEventListener(“mousemove”,this.self.mouseDragHandler);

}

}

}

})();

html代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Title</title>

</head>

<script src=”js/Method.js”></script>

<body>

<script>

init();

function init() {

document.addEventListener(“mousedown”,mouseHandler);

}

 

function mouseHandler(e) {

var randomDiv=Method.$c(“div”,document.body,{

width: “50px”,

height: “50px”,

position: “absolute”,

backgroundColor:divColor()

})

randomDiv.style.left=e.clientX-randomDiv.offsetWidth/2+”px”;

randomDiv.style.top=e.clientY-randomDiv.offsetHeight/2+”px”;

/*      top:e.clientY-this.offsetHeight/2+”px”,//原因 设置为了X…xbl

//      removeEventListener(randomDiv);*/

}

 

function divColor() {

var col=”#”;//这个字符串第一位为# 颜色的格式

for(var i=0;i<6;i++){

col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16;  toString(16)为转化为16进制

}

return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式

}

</script>

</body>

</html>

以上就是js如何实现随机生成div的效果的详细内容,更多请关注网站的其它相关文章!

分类
wordpress企业主题

js中的This指向问题的介绍

MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。

简而言之:

1.this指向的对象称为函数的上下文对象context;

2.this的指向取决于函数被调用方式

不管函数怎么调用的天花乱坠,我们只要记住这几点即可清晰的找出this的指向。

2、小实验

function foo(){

console.log(this);

}

面试官问你this指向哪里,当然大声回答不知道,原因:谁调用指向谁,函数都没被调用,确实不知道指向。

小结:直接通过函数名来调用函数,this指向全局变量window;通过对象.函数名调用函数,this指向该对象。

3、DOM对象调用函数时this的指向问题

1.通过选择器选择元素加事件属性来绑定事件,this指向该DOM对象,例子如下:

document.getElementById(‘btn’).onclick=function(){

console.log(‘click’); //click

console.log(this); //<button id=”btn”>button</button>

}

2.直接在DOM标签中写事件,this指向window,我们可以通过吧this作为参数传入方法中再使用,例子如下:

html:
<button onclick=”modify()”>add</button>
<span id=”count”>0</span>
<button onclick=”modify()”>reduce</button>

script:
// 操作方法
function modify(){
console.log(this); //window
}

因为这个时候是直接调用方法的,所以this指向全局window对象,那么问题来了,我们想判断我们点击的是哪一个按钮,应该怎么做呢,我们可以把this的值作为参数传入方法中再使用,例子如下。

html:

<button onclick=”modify(this)”>add</button>

<span id=”count”>0</span>

<button onclick=”modify(this)”>reduce</button>

script:

// 操作方法

function modify(_this){

console.log(_this);

// <button onclick=”modify(this)”>add</button>

// <button onclick=”modify(this)”>reduce</button>

}

4.对象中this的指向问题

先看一个简单的例子:

var a=1;

function printA(){

console.log(this.a);

}

var obj={

a:2,

foo:printA,

bar:function(){

printA();

}

}

obj.foo(); //2

obj.bar(); //1var foo=obj.foo;foo(); //1

我们定义了一个全局变量a和一个打印a的全局变量方法,之后又定义了一个obj对象,其中包含a属性和foo,bar两个方法。当我们调用obj.foo()打印了2,调用obj.bar()打印了1.

分析:

不管printA在哪里定义的,我们this的指向只取决于被谁调用的。在obj.foo(),foo的属性值为printA,被obj直接调用,所以this指向obj,this.a就是obj.a=2了;

当我们调用obj.bar()时,bar的属性值为function(){printA()},没有明确哪个对象来调用printA方法,this默认指向全局对象window,所以this.a=window.a=1;

第三种情况我们把obj.foo值赋予了foo变量,在调用的时候就相当于是window.foo()了,打印1。

小结:this的指向不是函数声明是绑定的,而是在函数运行过程中动态绑定的。

5.改变this的指向方法:applay call bind

话不多话:写了一个例子,大家先看,万一比喻不恰当,大家能理解其中意思即可

var liLei={

name:’liLei’,

money:10,

buyPen:function(){

this.money=this.money-1;

console.log(this.name+” have money:”+this.money)

}

}

var hanMeiMei={

name:’hanMeiMei’,

money:20,

buyPan:function(){

this.money=this.money-2;

console.log(this.name+” have money:”+this.money)

}

}

liLei.buyPen(); // liLei have money:9

hanMeiMei.buyPan(); //hanMeiMei have money:18

例子很好理解,输出的结果相信大家也能看得明白,哪天,韩梅梅想买一个盆,她买不了,因为她还没有这个方法,她一想:我没有这个方法,但是李雷有啊,我打电话给李雷把钱他让他帮我买啊;后来李雷想买一个盘,实现方法也是如此。那么,在代码中如何实现呢?

JavaScript有好几个方法可以实现:call,apply,bind。

call方法:

语法:call(thisObj,Object)

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

liLei.buyPen.call(hanMeiMei); //hanMeiMei have money:19

hanMeiMei.buyPan.call(liLei); //liLei have money:8

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

liLei.buyPen.apply(hanMeiMei); //hanMeiMei have money:19

hanMeiMei.buyPan.apply(liLei); //liLei have money:8

bind方法:

liLei.buyPen.bind(hanMeiMei)(); //hanMeiMei have money:19

hanMeiMei.buyPan.apply(liLei)(); //liLei have money:8

小结:三种方法的相同指出是:可以改变this的指向,不同之处是:apply接受的参数为一个数组,call接收的参数为一个个独立的值;apply,call会直接调用方法,bind改变this的指向返回一个方法不调用。

分类
wordpress企业主题

javascript执行机制是怎样的

js是单线程的,为什么可以执行异步操作呢?

这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的属性。

区分进程和线程:

进程:正在运行中的应用程序。每个进程都自己独立的内存空间。例如:打开的浏览器就是一个进程。

线程:进程的子集,是独立的。线程在共享的内存空间中运行。

浏览器是多进程的。如下图:

并且每打开一个页面就创建了一个独立的进程。进程内有自己的多线程。如果浏览器是单进程的,那么某个页面崩了,就会影响整个浏览器。

浏览器有哪些进程:

1、Browser(浏览器):浏览器的主进程(负责协调,主控)只有一个,作用有:

•负责浏览器界面显示,与用户交互。如前进,后退等

•负责各个页面的管理,创建和销毁其他进程

•将Renderer(渲染器)进程得到的内存中的Bitmap,绘制到用户界面上

•网络资源的管理,下载等

2、第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建

3、GPU进程:最多一个,用于3D绘制等

4、浏览器渲染进程(浏览器内核)(Renderer(渲染器),内部是多线程的)默认每个Tab页面一个进程,互不影响。主要作用 :页面渲染,脚本执行,事件处理等

浏览器渲染进程(浏览器内核)包含的线程:

1、GUI渲染线程

• 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。

• 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行

• 注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

2、JS引擎线程(

“JavaScript 引擎”通常被称作一种 虚拟机。也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)

• JS引擎线程负责解析Javascript脚本,运行代码。

• JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序

• 同样注意,GUI渲染线程与JS引擎线程是互斥的,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。

3、事件触发线程

• 归属于浏览器而不是JS引擎,用来控制事件循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助)

• 当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中

• 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理

• 注意,由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)

4. 定时触发器线程

• 传说中的setInterval与setTimeout所在线程

• 浏览器定时计数器并不是由JavaScript引擎计数的,(因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确)

• 因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)

• 注意,W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。

5、异步http请求线程

• 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求

• 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由JavaScript引擎执行。

GUI渲染线程与JS引擎线程互斥:

由于JavaScript是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。因此为了防止渲染出现不可预期的结果,浏览器设置GUI渲染线程与JS引擎为互斥的关系,当JS引擎执行时GUI线程会被挂起,GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。

js执行机制:js是单线程的,每当执行函数就把函数推入栈中,但有异步的操作就让浏览器的线程(webAPI)去处理,处理完放到任务队列里,当主线程(执行栈)执行完毕时,如果任务队列里有任务,就执行。

这也就是为什么下面代码会先输出b,然后是a的原因。settimeout的函数会放到任务队列中,而console.log(‘b’)是主线程。

setTimeout(() => {

console.log(‘a’);

}, 0);

console.log(‘b’);

以上就是浅谈javascript执行机制的详细内容,更多请关注网站的其它相关文章!

分类
wordpress企业主题

JavaScript的三大组成部分分别是?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript的三大组成部分是:

1、ECMAScript

JavaScript的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义),ECMAScript是一套标准,定义了一种语言(比如JS)是什么样子。

2、文档对象模型(DOM)

DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面:

<html>

<head>

<title>Sample Page</title>

</head>

<body>

<p>hello world!</p>

</body>

</html>

这段代码可以赢DOM绘制一个节点层次图

DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点(getElementById、childNodes、appendChild、 innerHTML)。

3、浏览器对象模型(BOM)

对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口,移动、改变和关闭浏览器窗口,提供详细的网络浏览器信息(navigator object),详细的页面信息(location object),详细的用户屏幕分辨率的信息(screen object),对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持,每一个浏览器都有自己的实现,虽然有一些非事实的标准,但还是给开发者带来一定的麻烦

以上就是JavaScript的三大组成部分的详细内容,更多请关注网站的其它相关文章!

分类
wordpress企业主题

js将函数赋值给变量后该怎么使用

在编写代码的时候,我们有些时候回碰上这种情况,有人会将一个函数赋值给一个变量,这个时候我们该怎样去调用这个函数呢?

下面就让我们用代码说话。

首先我们将一个函数赋值给一个变量

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

<title>Document</title>

</head>

<script>

var a = function ass(){alert(“hello”)};  //将函数赋值给变量

</script>

<body>

</body>

</html>

然后我们在按钮中添加单击事件,并通过变量来调用这个函数

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

<title>Document</title>

</head>

<script>

var a = function ass(){alert(“hello”)};   //将函数赋值给变量

</script>

<body>

<button onclick=”a()” >单击事件</button>

</body>

</html>

最后我们来看一下效果

以上就是js将函数赋值给变量后该怎么使用的详细内容,更多请关注网站的其它相关文章!