前端白皮书

JS

JavaScript是解释型语言，弱类型脚本语言，使用浏览器的JS引擎进行解释，例如Chrome浏览器的V8，读取网页内的js代码，对其处理后运行，逐行执行（变量收集和分号补全）

浏览器分为渲染引擎和JS引擎，渲染引擎俗称内核，用来解析HTML和CSS

JS由核心ESMAScript、DOM(文档对象模型)、BOM(浏览器对象模型)组成

ES6是JS核心，在var的基础上加了let和const

类比的话：JS–>JAVA，ES6–>jdk8，vue–>spring，npm–>maven

闭包

可以将变量保存在函数内，用函数将变量给包起来

普通函数包含变量，变量的作用域就是函数内，除非定义全局变量，但是闭包可以将变量封在函数内，实现变量的保护

var add = add_fuc();
function add_fuc() {
    var counter = 0;
    function innerFunction(){
        return counter += 1;
    }
    return innerFunction;
}

print(add)
function innerFunction(){ return counter += 1; }
print(add())
1

以上例子可以看出，方法内嵌套，内方法引用了外方法的变量，最终返回内方法，使用add变量进行外方法的调用，返回的是内方法块，但是用add()就可以直接执行内方法，从而保护了外变量，闭包可以将内部嵌套函数变成外部可调用的，即add和add()的区别

更屌的写法：

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

回调

JS是异步编程语言，函数的调用不是顺序执行的

var fs = require("fs");
var c

function f(x) {
    console.log(x)
}

function writeFile() {
    fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完毕!")
            c = 1
        }
    });
}

c = 0
writeFile()
f(c)

例如这个，最后打印的是c=0而不是1，因为最后的f©先执行，io耗时所以执行的慢

可以把f©放到write函数内部，当然也可以将f()作为参数传入write函数

在大多数编程语言中，函数的形参总是由外往内向函数体传递参数，但在JS里如果形参是关键字"callback"则完全相反，它表示函数体在完成某种操作后由内向外调用某个外部函数。

var fs = require("fs");

function writeFile(callback) { 
    fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完毕!")
            c = 1
            callback(c) 
        }
    });
}
var c = 0
writeFile(function (x) {
    console.log(x)
})

将f()作为匿名函数传入，使用callback在函数执行完后进行调用

下面是JQuery的一个典型回调

$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});   

JQuery

js的框架，封装了js的一些方法，使js更易用

语法

选择器

• id选择器：var obj = $("#one");
• class选择器：var obj = $(".class")
• 标签选择器：var obj = $("div")
• 所以选择器：var obj = $(*)
• 组合选择器：var obj = $("#one,.two,div")
• 表单选择器：var obj = $(":text") //可选择一些表单的元素，不存在表单也可以

过滤器

• first：$("选择器:first") //第一个选择的元素
• 可用文本框：$(":text:enabled")
• 复选框中的元素：$(":checkbox:checked") //数组

函数

• val无参：$(选择器).val() //获取DOM对象的value值
• val有参：$(选择器).val(参数) //对DOM对象赋值

算了不写了，直接参考jquery手册吧！

AJAX

局部刷新页面数据，异步同步更灵活
https://www.cnblogs.com/yangguoe/p/8461932.html

三种写法

$(function () {
    $.ajax({
        // 设置ajax的参数
        // 请求数据的url地址：接口地址
        url: '/index_data',  
        // 请求数据方式：get  post
        type: 'get',    
        // 返回的数据格式  json
        dataType: 'json',
        // data:发送给接口的数据
        data:{"code":"30026"},
        // 请求成功之后要执行的回调函数
        success: function (dat) {
            //dat:服务端返回的数据
            console.log(dat)
        },
        // 请求失败
        error: function (e) {
            alert('请求失败')
        }
    })
})


 $(function () {
        $.ajax({
            url: '/index_data', //请求地址
            type: 'get', //请求方式
            dataType: 'json', //返回的数据格式
            data:{'code':"000007"}
        }).done(function(dat) {
            // 请求成功之后要执行的回调函数
            console.log(dat)
        }).fail(function(e) {
            // 请求失败之后要执行的回调函数
            alert('请求失败')
        })
    })
    
    $(function () {
        $.get("/add_data", {
            "code":"000007"
        },
        function(dat){
            //请求成功时回调函数
            alert(dat)
        })
    })

Vue

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

每个 Vue 应用都需要通过实例化 Vue 来实现。

	

		
site : {{site}}
		
url : {{url}}
		
{{details()}}
	
	

简单实例

	

		
site : {{site}}
		
url : {{url}}
		
Alexa : {{alexa}}
	
	

这个很有意思，使用$将vm内外的对象进行区分

语法

属性绑定

• 文本：p标签等文本标签，可以直接用

  {{msg}}

  进行插入

• html：对于div等标签，可以用

• 其他标签绑定：
  使用 v-model 定义当前元素，使用 v-bind 绑定其他元素，ee 如果是 true 就使用 class1 的样式

  v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

    
    
    
    
    
  
      修改颜色
      
  
  
      
  
        v-bind:class 指令
      
    
        
    
    
  

• 支持 js 表达式

    
    
  
    	{{5+5}}
  
    	{{ ok ? 'YES' : 'NO' }}
  
    	{{ message.split('').reverse().join(' ') }}
    	
  菜鸟教程
    
    
    
    
  

指令

• 指令：指令是带有 v 前缀的特殊属性，用于在值改变后作用到 DOM 上，当然那个 ok 也可以改为 seen

    
    
  
        
  现在你看到我了
        
    
        
    
    
  

• 参数：指令后以:指明，将 href 属性与表达式 url 绑定

    
    
  
        
  菜鸟教程
    
    	
    
    
  

• 监听：使用 v-on 进行按钮事件的监听

    
    
  
        
  {{ message }}
        反转字符串
    
    	
    
    
  

• 过滤：{{ A | B }}，使用管道符，可以进行文本格式化

    
  
      {{ message | capitalize }}
    
        
    
  

• 缩写：
  v-bind 缩写：

  v-on 缩写：

循环

使用 v-for，循环数组：

循环对象：

  

    

    {{ value }}
    
  

或者 key value 都参与迭代

  

    

    {{ key }} : {{ value }}
    
  

迭代整数：

    

        

        {{ n }}
        
    

监听

通过 watch 监听数据变化

 
计数器: {{ counter }}
 点我

或者：

  

     千米 : 
     米 :