带你走进JavaScript ｜ 青训营笔记

我叫敢敢
122 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

带你走进JavaScript

f654e068195800566b89c1bcddddb94dc87c0adb8785-cvlzYD_fw658.webp

1.什么是JavaScript?

JavaScript是运行在浏览器上的脚本语言。简称JS。 JavaScript是网景公司（NetScape)的 布兰登·艾奇 开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加生动，使得页面更具有交互性。 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript和java没有任何关系，只是语法类似。JavaScript运行在浏览器中，代码由浏览器解释后执行。而Java运行在JVM中。

JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做"脚本语言“。

Java的目标程序已.class形式存在，不能使用文本编辑器打开，不是脚本语言。

1998年网景公司由“美国在线”公司收购。

王景公司最著名的就是“领航者浏览器”：Navigator浏览器。 LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。

微软一看不行，研发了只支持IE浏览器的脚本语言。JScript。 在两者语言共存的时代，程序员需要写两套程序。这时一个叫做ECMA组织（欧洲计算机协会）根据JavaScript制定了ECMA-262标准，叫做ECMA-Script.

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

2.JavaScript的特点

解释型语言

JavaScript是一门解释型语言，所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。

动态语言

JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JavaScript可能是运行速度最快的动态语言了。

类似于 C 和 Java 的语法结构

JavaScript的语法结构与C和Java很像，向for、if、while等语句和Java的基本上是一模一样的。所以有过C和Java基础的同学学习起来会轻松很多。不过JavaScript和与Java的关系也仅仅是看起来像而已。

基于原型的面向对象

JavaScript是一门面向对象的语言。 Java也是一门面向对象的语言，但是与Java不同JavaScript是基于原型的面向对象。

严格区分大小写

JavaScript是严格区分大小写的，也就是abc和Abc会被解析器认为是两个不同的东西。

3.JavaScript的使用

1.标签引用

<script>
    alert("Hello,World!");
</script>

2.文件引用

main.html
<script src="main.js"></script>
main.js
alert("Hello,World!");

4.JS的数据类型

1.原始类型：

Undefined,Number,String,Boolean,Null

2.引用类型:

Object以及子类。

3.symble

在ES6规范后，又基于以上6种类型添加了一种新的类型：Symbol。

4.typeof

JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态地获取变量的数据类型。

typeof运算符的语法格式：typeof 变量名

typeof运算符的运算结果时以下6个字符串(全小写）结果之一： “undefined" “number” “string” “boolean” “object” “function”

var d=null; alert(typeof d);//“object” 比较字符串是否相等用双等号。

5.Undefined

Undefined数据类型只有一个值。这个值就是undefined，当一个变量没有手动赋值，系统默认赋值为undefined，当然也可以手动赋值为undefined。

1.number数据类型

如：NaN，表示Not a Number不是一个数字，但是属于Number类型。

Infinity，表示无穷大。

0,-1,123,…小数，复数，无穷大都是属于number类型。

除数为0时，结果为无穷大。

函数isNaN（数据）：结果为true表示不是一个数字。 parseInt()函数：可以将字符串自动转换成数字。保留Int parseFloat()函数：将字符串转换成数字。 Math.Ceil()函数：向上取整。2.1会变为3。

2.boolean数据类型

在boolean类型中有一个Boolean（）函数，会将非boolean类型，转换成boolean类型。 当某个地方一定是boolean类型时，会自动转换成boolean类型。例如if后面的括号。 NaN,0,"",null,undefined会自动转换成false.

3.String数据类型

1.在JS当中字符串可以使用单引号和双引号。

2.在JS当中，怎么创建字符串对象 第一种：var s=“sag”;（小String，属于String类型） 第二种：var a2= new String(“ab”);（大String，属于Object类型） Sting是一个内置的类，可以直接使用。

3.无论是小String还是大Sting字符串的长度相同。其中又一个length属性求长度(x.length)

常用函数： indexof: 获取指定字符串在当前字符串中第一次出现的索引 lastIndexof replace substr substring toLowerCase toUpperCase spilt 拆分字符串

例如:alert(“fasdf".indexof(“sdf”));

replace只替换最前面一个子字符串 如果想全部替换需要使用正则表达式。

substr和substring的区别。 substr(startIndex length)

substring(startIndex endIndex)左闭右开。

4.Object数据类型

1.首先Object类型是所有类型的超类，自定义的任何类型，默认继承Object。

2.Object的prototype属性 作用：给类动态地扩展属性和函数。

3.Object类的函数：

toString() valueof() toLocalString() 4.在JS中定义的类默认继承Object的属性和函数。

5.写好JS的一些原则

1.各司其职

让HTML、CSS、JavaScript职能分离。 image.png

  1. HTML/CSS/JS各司其职
  2. 应当避免不必要的由JS直接操作样式
  3. 可以用class来表示状态
  4. 纯展示类交互寻求零JS方案

2.组件分装

组件--指web页面上抽出来一个个包含模板（HTML）、样式（CSS）和功能（JS）的单元。 好的UI组件具备正确性、扩展性、复用性。

  1. 组件设计的原则：封装性、正确性、扩展性、复用性
  2. 实现组件的步骤：结构设计、展现效果、行为设计
  3. 三次重构--插件化、模板化、抽象化（组件框架）

3.过程抽象--应用函数式编程思想--为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。

image.png

image.png

高阶函数HOF--以函数作为参数，以函数作为返回值，常用于作为函数装饰器

function HOF0(fn){
    return function(...args){
        return fn.apply(this,args);
    }
}
（1）常用高阶函数Once
function once(fn){
  return function(...args){
    if(fn){
      const ret = fn.apply(this,args);
    fn=null;
    return ret;
    }
  }
}
（2）常用高阶函数Throttle--节流函数
HTML
<span>每500毫秒可以记录一次</span>
<button id="btn">点我</button>
<div>
  <button id= "circle">1</button>
</div>

CSS
#circle {
  border-radius: 50%;
  color: red;
}

JS
function throttle(fn,time = 500){
    let timer;
    return function(...args){
        if(timer == null){
            fn.apply(this,args);
            timer = setTimeout(() => {
                timer = null;
            },time)
        }
    }
}

btn.onclick = throttle(function(e){
    circle.innerHTML = parseInt(circle.innerHTML) + 1;
    circle.className = 'fade';
    setTimeout(() => circle.className = '',250);
});
（3）常用高阶函数Debource--防抖
var i = 0;
setInterval(function(){
  bird.className = "sprite" + "bird" + ((i++) % 3);
},1000/10);

function debounce(fn,dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this,arguments);
    },dur);
  }
}

document.addEventListener('mousemove',debounce(function(evt){
  var x = evt.clientx,
      y = evt.clienty,
      x0 = bird.offsetLeft,
      y0 = bird.offsetTop;
  console.log(x,y);

  var a1 = new Animator(1000,function(ep){
    bird.style.top = y0 + ep*(y-y0) + 'px';
    bird.style.left = x0 + ep*(x-x0) + 'px';
  },p => p*p)
  a1.animate();
},100));
（4）常用高阶函数Consumer/2--延时调用
function consumer(fn,time){
  let tasks = [],
      timer;
  return function(...args){
    tasks.push(fn.bind(this,...args));
    if(timer == null){
      timer = setInterval(() => {
        tasks.shift().call(this)
        if(tasks.length <= 0){
            clearInterval(timer);
            timer = null;
        }
      },timer)
    }
  }
}

btn.onclick = consumer((evt) => {
  let t = parseInt(count.innerHTML.slice(1)) + 1;
  count.innerHTML = `+${t}`;
  count.className = `hit`;
  let r = t*7%256,
      g = t*17%128,
      b = t*31%128;
  count.style.color = `rgb(${r},${g},${b})`.trim();
  setTimeout(() => {
    count.className = 'hide';
  },500);
},800)
（5）常用高阶函数Iterative--可迭代
const isIterable = obj => obj !=null 
&& typeof obj[Symbol.iterator] === 'function';

function iterative(fn){
  return function(subject,...rest){
    const ret = [];
    for(let obj of subject){
      ret.push(fn.apply(this,[obj,...rest]));
    }
    return ret;
  }
  return fn.apply(this,[subject,...rest]);
}

const setColor = iterative((el,color) => {
  el.style.color = color;
});

const els = document.querySelectorAll('li:nth-child(2n+1)');
setColor(els,'red');
avatar
文章
阅读
粉丝