JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

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

JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或者ES2015。

语言组成

ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

语言特点

JavaScript脚本语言具有以下特点:

脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。

写好JS的一些原则

各司其职：让HTML、CSS和JavaScript职能分离。
组件封装：好的UI组件具备正确性、扩展性、复用性。
过程抽象：应用函数式编程思想。

各司其职（网页从白天模式变为夜间模式JS代码）

版本一

const btn = document.getElementById('modebtn');
btn.addEventListener('click',(e))=>{
     const body = document.body;
     if(e.target.innerHTML === '☀') {
        body.style.backgroundColor='blcak';
        body.style.color='white';
        e.target.innerHTML='🌙';
     } else {
        body.style.backgroundColor='white';
        body.style.color='black';
        e.target.innerHTML='☀';
     }
   });

版本二

const btn = document.getElementById('modebtn');
btn.addEventListener('click',(e))=>{
     const body = document.body;
     if(body.className !== 'night') {
         body.className !== 'night';
     } else {
         body.className = ' ';
     }
   });

过渡动画（CSS）transition:all ls

组件封装（制作轮播图）

HTML制作列表结构
CSS表现
使用CSS绝对定位将图片重叠在同一个位置
轮播图切换的状态使用修饰符（modifier）
轮播图的切换动画使用CSS transition
JS行为（API功能）
JS行为（Event控制流）

插件化

将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系

模板化

将HTML模板化，更易于扩展
调用render()方法

抽象化

将组件通用模型抽象出来

组件设计的原则：封装性、正确性、扩展性、复用性

实现组件的步骤：结构设计、展示效果、行为设计

过程抽象

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

Once

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程称为过程抽象。

高阶函数（HOF）

以函数作为参数
以函数作为返回值
常用于作为函数装饰器

编程范式

命令式与声明式

命令式代码

switcher.onclick = function(evt){
  if(evt.target.className === 'on'){
     evt.target.className = 'off';
  }else{
     evt.target.className = 'on';
     }
}

声明式代码

function toggle(...action){
  return function(...args){
    let action = actions.shift();
    actions.push(action);
    return action.apply(this,args);
   }
}

switcher.onclick = toggle{
  evt =>evt.target.className = 'off',
  evt =>evt.target.className = 'on'
};

JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为ECMAScript，标准编号ECMA-262。最新版为ECMAScript 6。符合ECMA-262 3rd Edition标准的实现有： Microsoft公司的JScript.
Mozilla的JavaScript-C（C语言实现），现名SpiderMonkey
Mozilla的Rhino（Java实现）
Digital Mars公司的DMDScript
Google公司的V8
WebKit

JavaScript | 青训营