当前位置:千赢国际官网 > 千赢网页手机版登入 > 实现及应用,到底是干什么的

实现及应用,到底是干什么的

文章作者:千赢网页手机版登入 上传时间:2019-11-30

Base64 的原理、实现及应用

2016/04/06 · 基础技术 · 1 评论 · Base64

本文作者: 伯乐在线 - Natumsol 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

简介

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。三个字节有24个比特,对应于4个Base64单元,即3个字节需要用4个可打印字符来表示。它可用来作为电子邮件的传输编码。在Base64中的可打印字符包括字母A-Za-z、数字0-9,这样共有62个字符,此外的两个可打印符号在不同的系统中而不同,一般为 /

JS 的 new 到底是干什么的?

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

原文出处: 方应杭   

大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不应该引入另一个更复杂的事物。

今天我从「省代码」的角度来讲 new。

—————————

想象我们在制作一个策略类战争游戏,玩家可以操作一堆士兵攻击敌方。

我们着重来研究一下这个游戏里面的「制造士兵」环节。

一个士兵的在计算机里就是一堆属性,如下图:

图片 1

我们只需要这样就可以制造一个士兵:

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(){ /*护脸*/       }
}
 
兵营.制造(士兵)

整理总结的一些前端面试题

2016/09/22 · 基础技术 · 4 评论 · CSS, HTML, Javascript, 面试

本文作者: 伯乐在线 - Damonare 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

转换原理

Base64的直接数据源是二进制序列(Binary Sequence)。当然,你也可以将图片、文本和音视频转换成二进制序列,再然后转换为Base64编码。我们这里讨论的是如何将二进制转换为Base64编码,对于如何将图片,文本和音视频转换为二进制序列敬请期待。

在转换前,先定义一张索引表,这张表规定了如何转换。
图片 2
转换的时候我们先将二进制序列分组,每6个比特为一组。但是如果编码的字节数不能被3整除,那么最后就会多出1个或两个字节,可以使用下面的方法进行处理:先使用0字节值在末尾补足,使其能够被3整除,然后再进行base64的编码。在编码后的base64文本后加上一个或两个’=’号,代表补足的字节数。也就是说,当最后剩余一个八位字节(一个byte)时,最后一个6位的base64字节块有四位是0值,最后附加上两个等号;如果最后剩余两个八位字节(2个byte)时,最后一个6位的base字节块有两位是0值,最后附加一个等号。 参考下表:
图片 3

制造一百个士兵

如果需要制造 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(士兵)
}
 
兵营.批量制造(士兵们)

哎呀好简单。

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 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

6.Doctype作用?标准模式与兼容模式各有什么区别?

  • !DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  • 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和
HTML5?

  • HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素,比如 article、footer、header、nav、section
  • 表单控件,calendar、date、time、email、url、search
  • 新的技术webworker, websockt, Geolocation
    移除的元素
  • 纯表现的元素: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等本地存储方式

用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));
    }
})

质疑

上面的代码存在一个问题:浪费了很多内存。

  1. 行走、奔跑、死亡、攻击、防御这五个动作对于每个士兵其实是一样的,只需要各自引用同一个函数就可以了,没必要重复创建 100 个行走、100个奔跑……
  2. 这些士兵的兵种和攻击力都是一样的,没必要创建 100 次。
  3. 只有 ID 和生命值需要创建 100 次,因为每个士兵有自己的 ID 和生命值。

CSS面试题

1.简要说一下CSS的元素分类

  • 块级元素:div,p,h1,form,ul,li;
  • 行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法(至少说出三种)

  • Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
  • Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
  • Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
  • Position:不会影响布局,能让元素保持可以操作;
  • Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

3.CSS清除浮动的几种方法(至少两种)

  • 使用带clear属性的空元素
  • 使用CSS的overflow属性;
  • 使用CSS的:after伪元素;
  • 使用邻接元素处理;

4.CSS居中(包括水平居中和垂直居中)

内联元素居中方案

水平居中设置:
1.行内元素

  • 设置 text-align:center;

2.Flex布局

  • 设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9 )

垂直居中设置:
1.父元素高度确定的单行文本(内联元素)

  • 设置 height = line-height;

2.父元素高度确定的多行文本(内联元素)

  • a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;
  • b:先设置 display:table-cell 再设置 vertical-align:middle;

    ### 块级元素居中方案

    水平居中设置:
    1.定宽块状元素

  • 设置 左右 margin 值为 auto;

2.不定宽块状元素

  • a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;
  • b:给该元素设置 displa:inine 方法;
  • c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

  • 使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
  • 利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;
  • 利用display:table-cell属性使内容垂直居中;
  • 使用css3的新属性transform:translate(x,y)属性;
  • 使用:before元素;

5.写出几种IE6 BUG的解决方法

  • 双边距BUG float引起的 使用display
  • 3像素问题 使用float引起的 使用dislpay:inline -3px
  • 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
  • Ie z-index问题 给父级添加position:relative
  • Png 透明 使用js代码 改
  • Min-height 最小高度 !Important 解决’
  • select 在ie6下遮盖 使用iframe嵌套
  • 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

6.对于SASS或是Less的了解程度?喜欢那个?

  • 语法介绍

7.Bootstrap了解程度

  • 特点,排版,插件的使用;

8.页面导入样式时,使用link和@import有什么区别?

  • link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
  • 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  • import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

9.介绍一下CSS的盒子模型?

  • 有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

  • id选择器( # myid)
  • 类选择器(.myclassname)
  • 标签选择器(div, h1, p)
  • 相邻选择器(h1 p)
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器( * )
  • 属性选择器(a[rel = “external”])
  • 伪类选择器(a: hover, li: nth – child)
  • 可继承的样式: font-size font-family color, UL LI DL DD DT;
  • 不可继承的样式:border padding margin width height ;
  • 优先级就近原则,同权重情况下样式定义最近者为准;
  • 优先级为:

    JavaScript

    !important > id > class > tag important 比 内联优先级高

    1
    2
    !important >  id > class > tag
    important 比 内联优先级高

11.CSS3有哪些新特性?

  • CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),
    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
  • transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
    增加了更多的CSS选择器 多背景 rgba

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:实现及应用,到底是干什么的

关键词: 千赢国际官网