node.js回调函数、事件循环、EventEmitter、Buffer（缓冲区）、Stream（流）

回调函数

补充说明：

Math.sqrt(2);//求2的平方根

node.js异步编程的直接体现就是回调。阻塞是按顺序执行的，二非阻塞是不需要按顺序的，所以如果需要处理回调函数的参数，我们就需要写在回调函数内。
异步执行代码（非阻塞）

more >>

REPL(交互式解释器)

• REPL表示一个电脑的环境，类似window系统的终端或Unix/linux shell，可以在终端输出命令，并接收系统的响应。
• REPL可以执行以下任务
  • 读取-读取用户输入，解析输入了JavaScript数据结构并储存在内存中。
  • 执行-执行输入的数据结构
  • 打印-输出结果
  • 循环-循环操作以上步骤知道用户两次按下Ctrl+c按钮退出。

    more >>

文档参考：http://www.cnblogs.com/ksl666/

1.const定义的变量不可以修改，而且必须初始化。

const b = 2;    //正确
//const b;    //错误，必须初始化
console.log('函数外const定义b'+b);//有输入出值
b = 5;
console.log('函数外修改cons定义的b'+b)//无法输出

2.var定义的变量可以修改，如果不初始化会数车undefined，不会报错。

var a = 1;
// var a;//不会报错
console.log('函数外var定义a：' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a：' + a);
} 
change();//可以输出a=4
console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4
//若函数不调用，输出的结果为：a=1;

3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。

let c = 3;
console.log('函数外let定义c：' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c：' + c);
} 
change();//输出c=6
console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3
//若函数不调用，输出结果为：c=3;

什么是node.js

node.js是运行在服务器端的JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

node.js 应用的组成

1. 引入require模块：可以使用require指令来载入node.js模块；
2. 创建服务器：服务器可以监听客户端的请求；
3. 接受请请求与响应请求：客户端可以使用浏览器或终端发送Http请求，服务器接受请求后返回响应数据。

more >>

关于npm

npm是随同NodeJS一起安装的包管理工具，能解决nodejs代码部署的很多问题

使用场景有以下几种方式：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
• 允许用户将自己编写的包或命令行产业内需上传到NPM服务器供人使用

more >>

js是单线程

什么情况下引起跨域

还有浏览器输入网址之后从按回车，到加载完发生了什么事

js的第七种数据类型Symbol

ES6新增方法数组方法find() findIndex()

接口对接

场景描述：后端确认接口无误，前端参数确认无误，接口返回500
解决方案：参数中有空格，在复制接口文档中的参数要格外注意，细心检查空格；

标签自定义属性取值

在选取一个动态数据渲染出来的节点会很有用，不用一层一层去找。

$(‘[_name]=”myself”‘)

数组拼接

var arr1= [1,2,2];
var arr2 = [1,11,1];
var arrcontact = arr1.push(arr2);
console.log(arrcontact);//[1,2,2,1,11,1]

电话号码星号标记

 if (str.length > 7) {
    var strend = str.substring(4, str.length - 4);
    var newstr = str.replace(strend, "***");
    $('#num').html(newstr);
};

根据对象属性渲染对应值

<p class='node' _name="age"></p>
<p class='node' _name="age"></p>
<p class='node' _name="like"></p>

 var res = { name: 'pauline', age: '11', like: 'wew' }

// 方法一：节点遍历
$('.node').each(function(i,item){
    _name = $(item).attr('_name')
    $(item).text(res[_name])
})

// 方法二：对象枚举
 for(var i in res){
    $('[_name='+i+']').text(res[i]);
}

函数去抖和函数节流

https://blog.csdn.net/flqbestboy/article/details/77750598

input:radio 单选常用操作

//name值是为了标注这是一组单选

<input type="radio" name="sex" value="0" checked>男
<input type="radio" name="sex" value="1">女

  // 获取选中的值
var checkedVal = $('input[name="sex"]:checked').val();
// 判断选中 true或false
var res = $("#checkbtn").is(":checked"); 
// 设置特定的值的选中情况
$('input:radio[name="sex"][value="1"]').prop('checked',true);
$('input:radio[name="sex"][value="1"]').prop('checked',false);

input:checkbox 多选常用操作

• 全选、取消全选、反选操作

  <input type="checkbox" name="sel">芒果
  <input type="checkbox" name="sel">芒果
  <input type="checkbox" name="sel">芒果
  <input type="checkbox" name="sel">芒果
  
  <input type="checkbox" id="allSel" name='allSel'>全选
  <input type="button" value="取消" id="selCancel" name='selCancel'>
  <input type="button" value="反选" id="toggleSel" name='toggleSel'>
  

• 全选操作

   $('#allSel').change(() => {
      if ($('input[name="allSel"]').is(':checked')) {
          $('input[name="sel"]').prop('checked', true);
      } else {
          $('input[name="sel"]').prop('checked', false);
      }
  })
  

• 取消全选

  $('#selCancel').click(() => {
      $('input[name="sel"]').prop('checked', false);
  })
  

• 反选

  $("#toggleSel").click(function () {
      $("input[name='sel']").each(function () {
          this.checked = !this.checked;
      });
  });
  

select 常用操作

<select name="" id="">
   <option _name = '第一' value="1">第一</option>
   <option _name = '第二' value="2">第二</option>
   <option _name = '第三' value="3">第三</option>
</select>

• 获取选中的value值

  $(‘select’).val();
  $(‘select option:selected’).val();

• 获取选中的文本值

  $(‘select option:selected’).text();

• 根据value设置选中

  $(‘select’).val(‘1’);

• 根据text设置选中

  $(‘select’).find(‘option:contains(“第一”)’).attr(‘selected’,true);

• 特定值设置选中

  var selected = $(‘option[_name=”第二”]’).val();
  $(‘select’).val(selected);

图片渲染失败

img 图片加载时，后端数据返回为无效图片链接，此时可将无效图片路径统一设置为默认图片路径。

• 方法一：onerror属性
  

• 方法二：jquery的error函数

  $(‘img’).error(()=>{

  $(this).attr('src','default.png');
  

  })

border-radius和border同时使用问题

两个属性作用于同一个元素时，border显示不完整，解决方案如下：

用box-shadow代替border。

.box{
    box-shadow: 0px 0px 0px 2px #1890ff;
    border-radius:50%;
}

DOM 0级事件和DOM级事件的认识

• 0级DOM:标签内写onclick事件和直接onclick

 <button id='btn' onclick="foo()"></button>
<script>
   function foo(){
       alert('this is 0 DOM')
   }

   document.getElementById('btn').onclick=function(){
       alert('this is 0 DOM');
   }
</script>

• 2级DOM(可绑定多个函数，默认采用事件冒泡机制)

   <button id='btn'></button>
  <script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',e=>{
        alert('二级DOM');
    })
    btn.on('click',e=>{
        alert('二级DOM');
    })
  </script>
  

input[file]文件上传

  let files = $(this)[0].files,
fileNamepointLen = (files[0].name).lastIndexOf("."),//取到文件名开始到最后一个点的长度
fileNameLength = files[0].name.length,//取到文件名长度
name = files[0].name.substring(fileNamepointLen + 1, fileNameLength);//截
if (!['jpg', 'png', 'jpeg', 'gif'].includes(name)) {
    $.api.meg('只支持jpg,png,jpeg,gif格式的图片上传!');
    return false;
}

变量类型

• Boolean
• string
• number
• null
• undefined
• symbol
• Object

总共7种，定义了6种原始类型，Object属于引用类型

typeof判断类型

typeof Symbol() //symbol

typeof 1 //number

typeof [1,2] //object 引用类型除了function，其他均为object

typeof null //object 所以判断的时候要过滤掉此种情况

判断数组

[1,2] instanceof Array //true

值类型和引用类型的区别

值类型：6种原始类型

引用类型：包括了Object类的所有：Date、Array、Funciton

在参数传递方式上，值类型是按照值传递，引用类型按共享传递。

trigger()触发指定元素的指定事件类型

点击A触发B的点击事件

$A.on(‘click’,function(){
$B.trigger(‘click’);
})

原型和原型链

• 所有的引用类型（类型、对象、函数），都具有对象特性，即可自由扩展属性（null除外）
• 所有的引用类型（数组、对象、函数），都有一个proto属性，属性值是一个普通的对象，proto属性值指向它的构造函数的prototype属性值
• 所有的函数，都有一个prototype属性，属性值也是一个普通的对象。

ajax.set 统一字符串更改为formdata提交

function isJsonString (str) {
   try {
     if (typeof JSON.parse (str) == 'object') {
       return true;
     }
   } catch (e) {}
   return false;
 }
 $.ajaxSetup ({
   beforeSend: function (jqXHR, settings) {
           // 配合请求头修改json数据格式
         if (isJsonString(settings.data)) {
            var data = JSON.parse(settings.data);
           settings.data = Qs.stringify(data);
         }
   ）｝

作用域

es6 class定义类

定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

• 类的所有方法都定义在类的prototype属性上（所有的方法都有一个prototype属性，它是一个普通对象）

  class Point {
    constructor() {
      // ...
    }
  
    toString() {
      // ...
    }
  
    toValue() {
      // ...
    }
  }
  
  // 等同于
  
  Point.prototype = {
    constructor() {},
    toString() {},
    toValue() {},
  };
  

• 在类的实例上面调用方法，就是调用原型上的方法。

  class B {}
  let b = new B();
  
  b.constructor === B.prototype.constructor // true
  

• prototype对象的constructor属性，直接指向类本身。子类在constructor方法中需调用super方法，否则报错，因为子类自己的this对象，必须先通过负累的构造函数完成塑造，得到父类的属性和方法。

  Point.prototype.constructor === Point // true
  class Point {}
  
  class ColorPoint extends Point {
    constructor(x, y, color) { // 指向类本身
      super(x, y); // 调用父类的constructor(x, y)，指向当前对象的原型对象
      this.color = color;
    }
  
    toString() {
      return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
  }
  

注意！！！super关键字，表示父类的构造函数，用来新建父类的this对象

super关键字

• 作为函数调用，代表父类的构造函数，es6要求，子类的构造函数必须执行一次super函数

  class A {}
  
  class B extends A {
    constructor(props) {
      super(props);
    }
  }
  

注意！！！，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。

作为函数时，super()只能用在子类的构造函数之中。

class A {}

class B extends A {
  m() {
    super(); // 报错
  }
}

上面代码中，super()用在B类的m方法之中，就会造成句法错误。

• super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

转义符拼接

onclick=\"getMembers('" + value + "')\"

装饰器

修饰器（Decorator）函数，用来修改类的行为。

修饰器是一个对类进行处理的函数。修饰器函数的第一个参数，就是所要修饰的目标类。

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true; // target指向目标类
}

MyTestableClass.isTestable // true

mapStateToProps:建立组件和store的state的映射关系

@connect(mapStateToProps, mapDispatchToProps)

先走action.js 再走reducer更新state

判断对象是否是空对象

Object.keys({}).length

深度判断类型

Object.prototype.toString.call({})

proLableVal&&Array.isArray (proLableVal)

chrome调试代码

linux 系统：ctrl+shift+I或者f12

// 完成更新后 this.props 最新的
componentDidUpdate (prevProps) {

// 完成更新后 this.props 最新的
componentDidUpdate (prevProps) {

对象包含某个字段

JSON.stringify (itemId).includes (v.anserId))

git命令行

• 添加提交文件

  $ git add .
  

• 提交文件的mark

  git commit -m '修改详情'
  

• 更新

  git pull
  

• 推送

  git push
  

• 日志查看

  git log
  

更新ui的唯一方法

ReactDOM.render()

export

export导出时要特别注意！！！默认导出时不需要加中括号

export default TopBar; // 默认导出
mport TopBar from ‘./components/top-bar/topBar’; // 不加中括号

react提高性能的方式

参考项目省市区
D:\workspace\platform-frontend\src\container\content\basic-data\basic-data.js

form表单中

<FormItem
  {...formItemLayout}
  label="Confirm Password"
>
  {getFieldDecorator('confirm', {
    initialValue:'默认值',
    rules: [{
      required: true, message: 'Please confirm your password!',
    }, {
      validator: this.compareToFirstPassword,
    }],
  })(
    <Input type="text"/>
  )}
</FormItem>

// 直接使用

<Input defaultValue='我是默认值' type="text"/>

注意！！！

用了getFieldDecorator，直接用initialValue就是初始值的意思，Input之类的组件上就不要用defaultValue。

react优化state

这种不需要更新DOM的参数 全部不定义在state中

state —>render更新DOM

constructor(props){
    super(props);
    this.params = {
        pageNum:1,
        pageSize:10,
        order:'asc',
        roleId:this.props.match.params.id
    }
}

获取src参数

this.props.match.params.roleId;

table分页封装 便于修改样式

<Table style={{background:'#fff'}}
    rowKey="taskNo" 
    columns={this.columns} 
    dataSource={taskList.rows} 
    onRow={(record) => {
        return {
            onClick:()=> {
                // console.log(record)
            }
        }
    }}
    pagination={
        Utils.pagination({...taskList,pageNum:this.params.pageNum},(current) =>{
            this.params.pageNum =current;
            this.request();
        })
    }
/>

state优化 不涉及dom节点的改变，不存储再state中

存在state中，监测到props有改变，会重新render，降低性能

 this.setState((prevState) => ({
        visible:true,
        editCurrentId:''
      })()=>{
    这里才可以取到setstate之后的值
 })

this.setState (
  {
    clearModalVisible: false,
    editModalVisible: true,
    eventName: eventName,
  },
  () => {
    console.log (this.state);
    console.log (eventName);
  }
);

componentWillReceiveProps 每次props更新会触发

react路由返回上一级

@withRouter

goBack = () => {
    // console.log(this.props)
    this.props.history.go(-1);
}

$.get()方法

$.get()方法通过http get请求从服务器上请求数据。

语法：$.get(url,[,data][,success][,dataType]);除url之外，所有属性可选。

• 网址：string; 请求的url地址

• 数据：PlainObject或String；发送到请求的服务器的普通对象或字符串

• 成功：function；回调函数；如果提供了dataType则必需，但可以使用null或jquery.noop作为占位符

• 数据类型：string；从服务器语气的数据类型。默认值：智能识别（xml，json，script，text，html）

more >>

开始准备

开始之前，头部需添加以下meta：

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex属性介绍

定义在flex弹性容器内

.box{
    display: -webkit-flex;
    display: flex;
    flex-flow:row-reverse wrap;
    flex-direction:row-reverse;
    flex-wrap:wrap;
    align-content:center;
    align-items:center;
    justify-content:center;
}

1. flex-flow

   复合属性，flex-direction、flex-wrap，子项元素的排列顺序、是否拆行或拆列

2. flex-direction

   子项元素方向，默认值是row

   row：水平显示

   row-reverse：水平相反的顺序

   column：垂直显示

   column-reverse：垂直相反顺序显示

   initial：设置为默认值

   inherit：从父元素继承该属性

more >>