前端中的Bootstrap以及 ECMAScript一些知识（原型链、闭包等）

1.Bootstrap

Bootstrap:响应式web,移动优先,前端组件库

HTML,CSS

样式、主题:按钮，表格，列表

封装了组件：导航，轮播，展板、对话框、进度条，卡片

组件：预定义、可复用的功能模块

响应式：基于不同设备，提供不同的页面样式和布局（浏览器媒体查询，网格系统实现） viewport

分为5种：

xs  576 超小

sm  768 移动端

md  992 平板

lg  1200   桌面设备

xl  宽屏幕

网络系统 / 栅格系统 12列

Container： 1110 + 15 + 15

container-fluid：15,15

row

col-sm-1-12

Offset：偏移量

margin: 0 auto;：居中

2.ES

ECMAScript是JavaScript的核心，规定了JS的语法规范，是一种定义，标准。

Es6中let与var的区别：

1.let声明的变量是块级作用域(花括号括起来的那部分)，var声明是函数作用域和全局作用域

2.Let声明变量不会声明变量提升，var可以声明变量提升

3.Let不能声明同名变量，var可以声明

7 种数据类型：

            number

            string

            undefined

            null

            object

            symbol

            boolean

null和 undefined的区别：

  1. 变量未赋值时，变量的值 undefined, 函数没有 return 语句, 则返回 undefined

  2. null 是一个为 null 的值

                       null          undefined

        number          0             NaN

        string         'null'      'undefined'

        boolean         false          false

3. 流程控制

DOM 操作 / jQuery 文档对象模型

HTML Document 树：

root

node 节点

Element

Text

Attr

操作（Create Read Update Delete）Element

（1）创建

       createElement('li')     独立的元素 追加到文档树：子元素或兄弟

        append/appendChild      最后的子元素

        prepend                 第一个子元素

         before                  前一个兄弟

         after                   后一个兄弟

（2）查找

          querySelector('css selector')       Element

          querySelectorAll('css selector')    NodeList

          nextSibling

          previousSibling

           parent

（3）修改/替换

    replace()  //label, input

（4）删除

  remove()

4. 事件的绑定

（1）静态绑定(html 的元素中增加 onXxx 属性事件指定调用函数)

    <tag id="" class=""

                    οnclick="a()"

                    οnblur="b()"

                    onkey="

                    onmouse

                    style=""

                    >

（2）动态绑定 JS

事件的冒泡:

button

  e.addEventListener(

                        '事件',

                        () => {},

                        true

                    )

               e.removeEventListener()



        // 修改、增加样式（选择器

        e.classList.add()

5.==与===的区别：

==是类型转化后比较值

===:比较严格，类型比较，类型相同才比较值

6.掩码

Ip:192.168.1.23

Mark:255.255.255.0

网络地址：192.168.1.0

所有者   同组  其他

 wxr      w--   --- 读写执行

111       100   000

7         4      0

7.位运算

& 与

2.| 或

3.^ 异或

4.~取反

~3=-4； ~0=-1；~（-4）=3；

8.Stack（栈）

Stack是Vector的子类，是一个标准的先进后出的栈。

1.push()是用来在数组末端添加项，并且返回添加后数组的长度；

2、pop()在数组末端移除项，返回移除的数组元素；

3、unshift()在数组前端添加项，并且返回添加后数组的长度；

4、shift()在数组的第一个项（前端）移除，返回移除的数组元素。

9.交换两个数数值的三种方法

· （1）借助第三变量

Int a=10; int b=15;

Int temp=a;

a=b;

b=temp;

（2）加减运算

a=a+b;

b=a-b;

a=a-b;

（3）异或运算

a=a^b;

b=a^b;

a=a^b;

10.判断一个数的奇偶（采用三元运算符）

// ? : (三元运算)

            // a > b ? a : b

            // n%2 == 0 ? '奇数' : '偶数'

            // n&1 == 1 ? '奇数' : '偶数’

11.ES的一些变量

    let a;

    typeof(a)

    undefined   未定义

    null        空

    number      数值

    string      字符串

   boolean     逻辑

   object      对象
  
   symbol  标记/符号

12. 原型链

[],function,{}

原型链模型（继承）；

原型（模版）：

变量的 __proto__ 原型指向 它的 类型， 类型的原型属性执行父类型，  层层嵌套， 到上一级，最终都执行

 Object，Object 的 __proto__ 是 null

13.闭包函数

   function f1() {

         }

    let f1 = function() {

        }

    let f1 = () => {

        }

    let x = f1;

        x()

        f1()

// 闭包: 函数和其中状态词法环境（上下文 context）的结合构成闭包。

（1）内部函数可以持有并访问外部函数中变量的一种机 制，函数实例有状态。

（2）动态给多个元素注册事件监听器，回调函数需要传 递不同参数

（3）自定义组件，每个组件持有各自的状态 Vue

 function add(x) {

            let n = x;

            return function(y) {

                return n + y;

            }

        }


  function abc(a, b) {

            //

            let x = a;

            let y = b;

            return {

                a: function() {


                  },

                b: function() {



                }

            }

        }



        let m1 = abc(3, 4);

        let m2 = abc(100, 200);

        m1.a()

        m1.b()

        m2.a()

正在路上的小白

发布了52 篇原创文章 · 获赞 38 · 访问量 2481

私信关注