您的位置:乐百家在线 > 乐百家官方网站 > 到底是为啥的,Components构建单页面应用

到底是为啥的,Components构建单页面应用

2019-10-07 08:07

自在学习 JavaScript (4):函数中的 arguments 对象

2017/11/11 · JavaScript · arguments

最先的小讲出处: Dhananjay Kumar   译文出处:码农网 – 小峰   

JavaScript函数具有像数组一样的靶子,这几个目的称为arguments,与传递给函数的参数相呼应。传递给JavaScript函数的持有参数都得以接纳arguments对象来引用。

现行反革命大家初阶攻读,稳重看上边列出的代码:

function add(num1, num2) { var res = num1 + num2; return res; } var r = add(7, 8); console.log(r);

1
2
3
4
5
6
function add(num1, num2) {
    var res = num1 + num2;
    return res;
}
var r = add(7, 8);
console.log(r);

在上头的函数中,num1和num2是五个参数。你能够行使名叫num1和num2的arguments来援用那么些参数。除了arguments名称之外,你还足以接纳JavaScript数组,如指标arguments来引用它们。所以,上边的函数能够重写,如下所示:

function add(num1, num2) { var res = arguments[0] + arguments[1]; return res; } var r = add(7, 8); console.log(r);

1
2
3
4
5
6
function add(num1, num2) {
    var res = arguments[0] + arguments[1];
    return res;
}
var r = add(7, 8);
console.log(r);

在JavaScript函数中,arguments对象用于访问或引用传递给函数的具备参数。arguments对象是可用于函数的部分变量。arguments对象的长短也正是传递给函数的arguments数量。请看上面包车型客车代码,作为出口将获得2,因为有三个arguments传递给函数:

function add(num1, num2) { var res = arguments.length; return res; } var r = add(7, 8); console.log(r);

1
2
3
4
5
6
function add(num1, num2) {
    var res = arguments.length;
    return res;
}
var r = add(7, 8);
console.log(r);

制作九19个战士

假定须要创设 100 个战士如何是好吧?

循环 100 次吧:

JavaScript

var 士兵们 = [] var 士兵 for(var i=0; i<100; i++){ 士兵 = { ID: i, // ID 不能够再次 兵种:"美利哥士兵", 攻击力:5, 生命值:42, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 士兵们.push(士兵) } 兵营.批量创立(士兵们)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 士兵们 = []
var 士兵
for(var i=0; i<100; i++){
  士兵 = {
    ID: i, // ID 不能重复
    兵种:"美国大兵",
    攻击力:5,
    生命值:42,
    行走:function(){ /*走俩步的代码*/},
    奔跑:function(){ /*狂奔的代码*/  },
    死亡:function(){ /*Go die*/    },
    攻击:function(){ /*糊他熊脸*/   },
    防御:function(){ /*护脸*/       }
  }
  士兵们.push(士兵)
}
 
兵营.批量制造(士兵们)

哎哎好轻松。

按需加载内容

一经你想客商在你的使用里导航时动态加载内容要如何做?只需一些改成,大家就能够援助动态加载页面。

率先,更新数据模型,使它满含内容的UCRUISERL:

JavaScript

template.pages = [ {name: 'Intro', hash: 'one', url: '/tutorial/intro.html'}, {name: 'Step 1', hash: 'two', url: '/tutorial/step-1.html'}, ... ];

1
2
3
4
5
template.pages = [
{name: 'Intro', hash: 'one', url: '/tutorial/intro.html'},
{name: 'Step 1', hash: 'two', url: '/tutorial/step-1.html'},
...
];

然后改成菜单链接指向page.url并不是#:

XHTML

<paper-item hash="{{page.hash}}" noink> <a href="{{page.url}}">{{page.name}}</a> </paper-item>

1
2
3
<paper-item hash="{{page.hash}}" noink>
<a href="{{page.url}}">{{page.name}}</a>
</paper-item>

末尾,使用大家的<core-ajax>亲密的朋友来获得内容:

XHTML

<core-ajax id="ajax" auto url="{{selectedPage.page.url}}" handleAs="document" on-core-response="{{onResponse}}"> </core-ajax>

1
2
3
<core-ajax id="ajax" auto url="{{selectedPage.page.url}}"
handleAs="document" on-core-response="{{onResponse}}">
</core-ajax>

您能够把<core-ajax>看作是贰个内容调节器。它的url属性数据绑定到selectedPage.page.url。那表示,无论怎样时候三个新的美食做法条款被入选,XH途锐(XMLHttpRequest的缩写,译者注)就能够去获得相应的页面。当core-response触发时,onResponse就能够把文书档案再次来到的一部分插入预先保留的器皿里。

JavaScript

template.onResponse = function(e, detail, sender) { var article = detail.response.querySelector('scroll-area article'); var pages = document.querySelector('#pages'); this.injectBoundHTML(article.innerHTML, pages.selectedItem.firstElementChild); };

1
2
3
4
5
6
7
template.onResponse = function(e, detail, sender) {
  var article = detail.response.querySelector('scroll-area article');
 
  var pages = document.querySelector('#pages');
  this.injectBoundHTML(article.innerHTML,
                       pages.selectedItem.firstElementChild);
};

AJAX实例演示

整理总计的一部分前端面试题

2016/09/22 · 基本功手艺 · 4 评论 · CSS, HTML, Javascript, 面试

正文小编: 伯乐在线 - Damonare 。未经我许可,制止转发!
招待到场伯乐在线 专辑撰稿人。

DEMO演示

在线演示: DEMO 
源码请移步 Github 
图片 1 

打赏扶助自身写出越来越多好文章,多谢!

打赏我

能够安装arguments对象

您能够在arguments对象数组中安装一定的项。首先,你能够使用索引0设置数组的率先个项,如下所示:

function add(num1, num2) { arguments[0] = 15; var res = num1 + num2; return res; } var r = add(7, 8); console.log(r);

1
2
3
4
5
6
7
function add(num1, num2) {
    arguments[0] = 15;
    var res = num1 + num2;
    return res;
}
var r = add(7, 8);
console.log(r);

在add函数中,num1和arguments[0]援用相同的值。所以,当您更新arguments[0]时,num1的值也会被更新。对于地方的代码,输出将是23。

注意 constructor 属性

new 操作为了记录「有时对象是由哪个函数创造的」,所以预先给「士兵.prototype」加了三个constructor 属性:

JavaScript

士兵.prototype = { constructor: 士兵 }

1
2
3
士兵.prototype = {
  constructor: 士兵
}

只要你重新对「士兵.prototype」赋值,那么这些 constructor 属性就没了,所以你应该那样写:

JavaScript

士兵.prototype.兵种 = "美利哥伦比亚大学兵" 士兵.prototype.攻击力 = 5 士兵.prototype.行走 = function(){ /*走俩步的代码*/} 士兵.prototype.奔跑 = function(){ /*狂奔的代码*/ } 士兵.prototype.死亡 = function(){ /*Go die*/ } 士兵.prototype.攻击 = function(){ /*糊他熊脸*/ } 士兵.prototype.防御 = function(){ /*护脸*/ }

1
2
3
4
5
6
7
士兵.prototype.兵种 = "美国大兵"
士兵.prototype.攻击力 = 5
士兵.prototype.行走 = function(){ /*走俩步的代码*/}
士兵.prototype.奔跑 = function(){ /*狂奔的代码*/  }
士兵.prototype.死亡 = function(){ /*Go die*/    }
士兵.prototype.攻击 = function(){ /*糊他熊脸*/   }
士兵.prototype.防御 = function(){ /*护脸*/       }

要么你也能够和睦给 constructor 重新赋值:

JavaScript

士兵.prototype = { constructor: 士兵, 兵种:"美利坚合众国士兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } }

1
2
3
4
5
6
7
8
9
10
士兵.prototype = {
  constructor: 士兵,
  兵种:"美国大兵",
  攻击力:5,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}

完。

2 赞 6 收藏 4 评论

图片 2

注意

事件的target属性数据绑定到大家的机动绑定模块的parentElement属性。在那几个案例里,它是<body>成分。

key属性蕴涵三个以空格分隔成分的列表,列表中蕴涵了要监听键位。当那些整合的当中三个被按下,<core-a11y-keys>触发三个keys-pressed事件并调用你的回调函数。

keys-pressed事件的微型计算机使用<core-animated-pages>的selectNext/selectPrevious API去步向下一页或许重回上一页:

JavaScript

template.keyHandler = function(e, detail, sender) { var pages = document.querySelector('#pages'); switch (detail.key) { case 'left': case 'up': pages.selectPrevious(); break; case 'right': case 'down': pages.selectNext(); break; case 'space': detail.shift ? pages.selectPrevious() : pages.selectNext(); break; } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
template.keyHandler = function(e, detail, sender) {
  var pages = document.querySelector('#pages');
 
  switch (detail.key) {
    case 'left':
    case 'up':
      pages.selectPrevious();
      break;
    case 'right':
    case 'down':
      pages.selectNext();
      break;
    case 'space':
      detail.shift ? pages.selectPrevious() : pages.selectNext();
      break;
  }
};

HTML面试题

1.XHTML和HTML有怎样差别

  • HTML是一种基本的WEB网页设计语言,XHTML是两个基于XML的置标语言
    最主要的比不上:
  • XHTML 成分必得被正确地嵌套。
  • XHTML 成分必须被关门。
  • 标签字必需用小写字母。
  • XHTML 文书档案必需持有根成分。

2.前端页面有哪三层构成,分别是怎么样?作用是怎么?

  • 结构层 Html 表示层 CSS 行为层 js;
    3.您做的页面在什么样流览器测验过?那些浏览器的根本分别是什么?
  • Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink) opera(Presto),Safari(wbkit)

4.如何是语义化的HTML?

  • 直观的认识标签 对于搜索引擎的抓取有实惠,用科学的竹签做科学的政工!
  • html语义化正是让页面包车型大巴原委结构化,便于对浏览器、搜索引擎分析;
    在尚未样式CCS情状下也以一种文书档案格式展现,况兼是轻松阅读的。搜索引擎的爬虫信赖于标志来分明上下文和顺序重要字的权重,利于 SEO。
  • 使阅读源代码的人对网址更易于将网址分块,便于阅读维护驾驭。

5.HTML5 为啥只需求写 !DOCTYPE HTML?

  • HTML5 不依赖S克林霉素L,因而没有要求对DTD举行引用,但是须要doctype来标准浏览器的一言一动(让浏览器依据它们应该的章程来运行);而HTML4.01依据S放线菌壮观素L,所以须求对DTD实行援用,技巧告诉浏览器文书档案所使用的文书档案类型。

6.Doctype成效?标准模式与合作形式各有如何分歧?

  • !DOCTYPE证明位于位于HTML文书档案中的第一行,处于html 标签此前。告知浏览器的分析器用什么样文书档案规范剖析这些文书档案。DOCTYPE空头支票或格式不得法会招致文书档案以卓绝方式表现。
  • 正规情势的排版 和JS运作情势都以以该浏览器扶助的参天标准运营。在协作方式中,页面以宽松的向后非常的章程体现,模拟老式浏览器的一言一行以堤防站点不能专门的学业。

7.html5有哪些新特点、移除了这几个成分?如哪个地点理HTML5新标签的浏览器宽容难题?怎么样区分 HTML 和
HTML5?

  • HTML5 以往一度不是 S地霉素L 的子集,首假若有关图像,地点,存款和储蓄,多职分等成效的充实。
  • 绘画 canvas
  • 用以媒介回看的 video 和 audio 成分
  • 本地离线存款和储蓄 localStorage 长期积累数据,浏览器关闭后数据不吐弃;
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更加好的源委成分,比方 article、footer、header、nav、section
  • 表单控件,calendar、date、time、email、url、search
  • 新的技能webworker, websockt, 吉优location
    移除的要素
  • 纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  • 对可用性爆发负面影响的因素:frame,frameset,noframes;
    支持HTML5新标签:
  • IE8/IE7/IE6帮助通过document.createElement方法发生的标签,
  • 能够行使这一特征让这个浏览器辅助HTML5新标签,
  • 浏览器援助新标签后,还索要加上标签默认的体制:

8.请描述一下 cookies,sessionStorage 和 localStorage 的界别?

  • cookie在浏览器和劳动器间来回传递。 sessionStorage和localStorage不会
  • sessionStorage和localStorage的积累空间更加大;
  • sessionStorage和localStorage有更加多增加易用的接口;
  • sessionStorage和localStorage各自独立的蕴藏空间;

9.什么完结浏览器内多少个标签页之间的通讯?

  • 调用localstorge、cookies等本土存储方式

至于小编:Natumsol

图片 3

阿里Baba(Alibaba) 前端程序猿 个人主页 · 小编的小说 · 5 ·    

图片 4

将arguments对象转换为数组

正如我们在那篇文章中牵线的那么,JavaScript函数arguments对象不是纯数组。除了长度属性外,它未有别的别的质量。可是,你能够动用Array.prototype.slice.call将arguments对象调换为数组,如下所示:

function add(num1, num2) { var arg = Array.prototype.slice.call(arguments); console.log(arg.pop()); }

1
2
3
4
function add(num1, num2) {
    var arg = Array.prototype.slice.call(arguments);
    console.log(arg.pop());
}

在ECMAScript 6中,你能够将arguments对象调换为三个数组,如下所示:

function add(num1, num2) { var arg = Array.from(arguments); console.log(arg.pop()); }

1
2
3
4
function add(num1, num2) {
    var arg = Array.from(arguments);
    console.log(arg.pop());
}

那二遍大家用 new 来写

JavaScript

function 士兵(ID){ this.ID = ID this.生命值 = 42 } 士兵.prototype = { 兵种:"U.S.A.士兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } // 保存为文件:士兵.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function 士兵(ID){
  this.ID = ID
  this.生命值 = 42
}
 
士兵.prototype = {
  兵种:"美国大兵",
  攻击力:5,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}
 
// 保存为文件:士兵.js

下一场是创造士兵(加了三个 new 关键字):

JavaScript

var 士兵们 = [] for(var i=0; i<100; i++){ 士兵们.push(new 士兵(i)) } 兵营.批量创造(士兵们)

1
2
3
4
5
6
var 士兵们 = []
for(var i=0; i<100; i++){
  士兵们.push(new 士兵(i))
}
 
兵营.批量制造(士兵们)

new 的成效,正是省那么几行代码。(也等于所谓的语法糖)

U揽胜极光L路由(U昂CoraL routing)和深层链接

<flatiron-director>是贰个装进了flatiron director JS library(一个JS库)的web组件。改造它的route属性把UCRUISERL#号(ULANDL hash)更新到平等的值。

当大家想在页面加载时保持上次的视图时,数据绑定再度派上用场。把路由(director.js里的director)、菜单和页面成分连接起来并使它们一同。当一个更新时,其余的一律跟着更新。

XHTML

<flatiron-director route="{{route}}" autoHash> ... <core-menu selected="{{route}}"> ... <core-animated-pages selected="{{route}}">

1
2
3
4
5
<flatiron-director route="{{route}}" autoHash>
...
<core-menu selected="{{route}}">
...
<core-animated-pages selected="{{route}}">

深层链接-当模板计划好时,早先化路由。

XHTML

template.addEventListener('template-bound', function(e) { // Use URL hash for initial route. Otherwise, use the first page. this.route = this.route || DEFAULT_ROUTE; };

1
2
3
4
template.addEventListener('template-bound', function(e) {
// Use URL hash for initial route. Otherwise, use the first page.
this.route = this.route || DEFAULT_ROUTE;
};

JavaScript面试题

1.javascript的typeof重返哪些数据类型

  • Object number function boolean underfind;

2.例举3种强制类型转换和2种隐式类型转换?

  • 强制(parseInt,parseFloat,number)隐式(== – ===);

3.数组织承办法pop() push() unshift() shift()

  • Push()后面部分增多 pop()尾巴部分删除
  • Unshift()底部增添 shift()尾部删除

4.ajax呼吁的时候get 和post形式的不一致?

  • 多少个在url前边 一个身处虚构载体里面
    有大小限制
  • 有惊无险难点
    应用差别 三个是论坛等只要求诉求的,一个是类似修改密码的;

5.call和apply的区别

  • Object.call(this,obj1,obj2,obj3)
  • Object.apply(this,arguments)

6.ajax呼吁时,怎么样讲明json数据

  • 行使eval parse,鉴于安全性思考 使用parse更可靠;

7.风浪委托是怎样

  • 让动用事件冒泡的原理,让和睦的所接触的事件,让他的父成分代替推行!

8.闭包是怎样,有何样特色,对页面有啥样震慑?简介你驾驭的闭包

  • 闭包就是能够读取别的函数内部变量的函数。

9.加多 删除 替换 插入到有些接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.说一下哪些是javascript的同源战术?

  • 一段脚本只好读取来自于一致来源的窗口和文书档案的属性,这里的一律来源指的是主机名、左券和端口号的咬合

11.编纂一个b承接a的方法;

JavaScript

function A(name){ this.name = name; this.sayHello = function(){alert(this.name+” say Hello!”);}; } function B(name,id){ this.temp = A; this.temp(name); //相当于new A(); delete this.temp; this.id = id; this.checkId = function(ID){alert(this.id==ID)}; }

1
2
3
4
5
6
7
8
9
10
11
function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相当于new A();
    delete this.temp;      
     this.id = id;  
    this.checkId = function(ID){alert(this.id==ID)};
}

12.怎么着阻止事件冒泡和暗中同意事件

JavaScript

function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true } return false

1
2
3
4
5
6
7
8
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
return false

13.底下程序实施后弹出哪些的结果?

JavaScript

function fn() { this.a = 0; this.b = function() { alert(this.a) } } fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { this.a = 30; alert(this.a); } } var myfn = new fn(); myfn.b(); myfn.c();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

14.谈谈This对象的精通。

this是js的三个重视字,随着函数使用场面分歧,this的值会产生变化。
但是有一个总原则,那就是this指的是调用函数的十分指标。
this平时景色下:是全局对象Global。 作为艺术调用,那么this正是指这一个目的

15.上边程序的结果

JavaScript

function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1); c.fun(2); c.fun(3);

1
2
3
4
5
6
7
8
9
10
11
function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案:

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.下边程序的输出结果

JavaScript

var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();

1
2
3
4
5
6
7
8
9
var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

17.明白Node么?Node的选用景况都有咋样?

  • 高并发、聊天、实时消息推送

18.介绍下你最常用的一款框架

  • jquery,rn,angular等;

19.对在此此前端自动化创设筑工程具备掌握吗?简介一下

  • Gulp,Grunt等;

20.介绍一下你打探的后端语言以及领悟程度

用JavaScript实现Base64

原理明白了之后,完结起来就很轻巧了。

JavaScript

define(function(require, exports, module) { var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表 /** * @author natumsol@gmail.com * @description 将二进制种类调换为Base64编码 * @param {String} * @return {String} */ function binToBase64(bitString) { var result = ""; var tail = bitString.length % 6; var bitStringTemp1 = bitString.substr(0, bitString.length - tail); var bitStringTemp2 = bitString.substr(bitString.length - tail, tail); for (var i = 0; i < bitStringTemp1.length; i += 6) { var index = parseInt(bitStringTemp1.substr(i, 6), 2); result += code[index]; } bitStringTemp2 += new Array(7 - tail).join("0"); if (tail) { result += code[parseInt(bitStringTemp2, 2)]; result += new Array((6 - tail) / 2

  • 1).join("="); } return result; } /** * @author natumsol@gmail.com * @description 将base64编码转换为二进制连串 * @param {String} * @return {String} */ function base64ToBin(str) { var bitString = ""; var tail = 0; for (var i = 0; i < str.length; i++) { if (str[i] != "=") { var decode = code.indexOf(str[i]).toString(2); bitString += (new Array(7 - decode.length)).join("0") + decode; } else { tail++; } } return bitString.substr(0, bitString.length - tail * 2); } /** * @description 将字符转变为二进制连串 * @param {String} str * @return {String} */ function stringToBin(str) { var result = ""; for (var i = 0; i < str.length; i++) { var charCode = str.charCodeAt(i).toString(2); result += (new Array(9 - charCode.length).join("0") + charCode); } return result; } /** * @description 将二进制类别转变为字符串 * @param {String} Bin */ function BinToStr(Bin) { var result = ""; for (var i = 0; i < Bin.length; i += 8) { result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2)); } return result; } exports.base64 = function(str) { return binToBase64(stringToBin(str)); } exports.decodeBase64 = function(str) { return BinToStr(base64ToBin(str)); } })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
define(function(require, exports, module) {
 
    var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表
 
    /**
     * @author natumsol@gmail.com
     * @description 将二进制序列转换为Base64编码
     * @param  {String}
     * @return {String}
     */
    function binToBase64(bitString) {
        var result = "";
        var tail = bitString.length % 6;
        var bitStringTemp1 = bitString.substr(0, bitString.length - tail);
        var bitStringTemp2 = bitString.substr(bitString.length - tail, tail);
        for (var i = 0; i &lt; bitStringTemp1.length; i += 6) {
            var index = parseInt(bitStringTemp1.substr(i, 6), 2);
            result += code[index];
        }
        bitStringTemp2 += new Array(7 - tail).join("0");
        if (tail) {
            result += code[parseInt(bitStringTemp2, 2)];
            result += new Array((6 - tail) / 2 + 1).join("=");
        }
        return result;
    }
 
    /**
     * @author natumsol@gmail.com
     * @description 将base64编码转换为二进制序列
     * @param  {String}
     * @return {String}
     */
    function base64ToBin(str) {
        var bitString = "";
        var tail = 0;
        for (var i = 0; i &lt; str.length; i++) {
            if (str[i] != "=") {
                var decode = code.indexOf(str[i]).toString(2);
                bitString += (new Array(7 - decode.length)).join("0") + decode;
            } else {
                tail++;
            }
        }
        return bitString.substr(0, bitString.length - tail * 2);
    }
 
    /**
     * @description 将字符转换为二进制序列
     * @param  {String} str
     * @return {String}    
     */
    function stringToBin(str) {
        var result = "";
        for (var i = 0; i &lt; str.length; i++) {
            var charCode = str.charCodeAt(i).toString(2);
            result += (new Array(9 - charCode.length).join("0") + charCode);
        }
        return result;
    }
    /**
     * @description 将二进制序列转换为字符串
     * @param {String} Bin
     */
    function BinToStr(Bin) {
        var result = "";
        for (var i = 0; i &lt; Bin.length; i += 8) {
            result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2));
        }
        return result;
    }
    exports.base64 = function(str) {
        return binToBase64(stringToBin(str));
    }
    exports.decodeBase64 = function(str) {
        return BinToStr(base64ToBin(str));
    }
})

arguments对象不是纯数组

JavaScript的arguments对象不是纯粹的JavaScript数组。你不能够对arguments对象进行诸如push,pop,slice等操作。正如你将要下边列出的代码中所看见的那么,奉行push操作会吸引那多少个,因为arguments.push不是函数。

function add(num1, num2) { arguments.push(78); var res = num1 + num2; return res; }

1
2
3
4
5
function add(num1, num2) {
    arguments.push(78);
    var res = num1 + num2;
    return res;
}

JS 的 new 到底是为何的?

2017/04/10 · JavaScript · 4 评论 · new

原来的书文出处: 方应杭   

比很多讲 new 的作品会从面向对象的思路讲起,可是自个儿始终以为,在分解二个事物的时候,不该引进另三个更头晕目眩的东西。

前几东瀛身从「省代码」的角度来说 new。

—————————

想像大家在营造一个国策类战斗游戏,游戏的使用者能够操作一群士兵攻击敌方。

笔者们注重来钻探一下以此娱乐之中的「创立士兵」环节。

多个新秀的在微型Computer里正是一群属性,如下图:

图片 5

我们只要求那样就能够创建多少个COO:

JavaScript

var 士兵 = { ID: 1, // 用于区分每一种士兵 兵种:"美利坚合营国小将", 攻击力:5, 生命值:42, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 兵营.制造(士兵)

1
2
3
4
5
6
7
8
9
10
11
12
13
var 士兵 = {
  ID: 1, // 用于区分每个士兵
  兵种:"美国大兵",
  攻击力:5,
  生命值:42,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}
 
兵营.制造(士兵)

重在内容

提及底一片段是为您的源委而留的。它能够是别的的因素。<div>是一个很好的采用:

XHTML

<div layout horizontal center-center fit> <!-- fill with pages --> </div>

1
2
3
<div layout horizontal center-center fit>
  <!-- fill with pages -->
</div>

fit属性表示首要区域的源委会布满父成分的宽带和惊人,layout horizontal center-center属性表示使用弹性框(flexbox)来使内容居花潮垂直居中。

打赏协理小编写出更加多好小说,谢谢!

任选一种支付格局

图片 6 图片 7

3 赞 43 收藏 4 评论

Base64 的规律、实现及使用

2016/04/06 · 基本功才能 · 到底是为啥的,Components构建单页面应用。1 评论 · Base64

正文小编: 伯乐在线 - Natumsol 。未经小编许可,禁绝转发!
迎接参与伯乐在线 专辑撰稿人。

简介

Base64是一种基于61个可打字与印刷字符来代表二进制数据的代表方法。由于2的6次方等于64,所以每6个比特为二个单元,对应有些可打字与印刷字符。四个字节有二十多少个比特,对应于4个Base64单元,即3个字节必要用4个可打字与印刷字符来表示。它可用来作为电子邮件的传输编码。在Base64中的可打字与印刷字符满含字母A-Za-z、数字0-9,那样共有63个字符,另外的多少个可打字与印刷符号在区别的系统中而不一样,平常为+/

本文由乐百家在线发布于乐百家官方网站,转载请注明出处:到底是为啥的,Components构建单页面应用

关键词: