blossom html css JavaScript

程序员入门的时候整理的一份学习笔记,见证了我的成长
备份

标签：前端学习

HTML

视频音频标签

带控制器的视频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的视频格式

<video width="300" height="200" controls="controls">
    <source src="movie.mp4">
    <source src="movie.ogv">
</video>

带控制器的音频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的音频格式

<audio id='id-audio-player' controls="controls">
  <source src="audio.ogg">
  <source src="audio.mp3">
</audio >

audio 基本操作如下

var a = document.querySelector('#id-audio-player')
a.play()                //播放
a.pause()               //暂停
a.autoplay              //自动播放 (设为true) 
a.src                   //链接音频文件
a.volume                //音量（0-1之间的数）
a.duration              //音频时间长度
a.currentTime = 1       //现在播放第几s（设置）
a.playbackRate          // 播放速率, 默认是 1

移动端设置

设置 viewport
viewport 是 html 的父元素
在手机上需要用下面的语句设置它的尺寸

网易移动端模板

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

<script>
//设置rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5(iPhone6相对宽度) + 'px';

//通过设计图宽度 / 100 来得出相对宽度 rem
//比如iphone5 设计图宽度640 相对宽度 6.4
</script>

媒体查询-响应式开发

响应式设计就是一套 CSS 根据当前的分辨率选择不同的样式
媒体查询主要用来:

• 检测媒体的类型, 比如 screen, tv等
• 检测布局视口的特性, 比如视口的宽高分辨率等

<style>
@media all and (min-width: 200px) and (max-width: 300px){
    body {
        background: red;
    }
}

//网易移动端字体设置
@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}
</style>

上面代码中, all 是媒体类型, 代表任何设备
and 是逻辑操作
意思是, 对于任何设备, 在宽度在 200-300 的范围内应用这个样式

CSS

选择器

举例：< h1 id="id-h1" class="class-h1"> 琉璃 < /h1 >
一切标签都可被选择包括html, style等

常用

body {
    background: lightblue;          /* 背景色   */
    margin:0px;                     /* 外边距   */
    border:0px;                     /* 边框     */
    border-style: solid;            /* 边框样式 */
    padding:0px;                    /* 内边距   */
    font-family: Microsoft YaHei;   /* 字体     */
    font-size: 22px;                /* 字体大小 */
    text-align: center;             /* 对齐     */
}
.tanChuang {
    z-index: 100;                   /* 顶层     */
    position: fixed;                /* 定位     */
    top: 0px;                       /* 顶部     */
    left: 0px;                      /* 左部     */
    width: 100%;
    height: 100%;
    opacity: 0.96;                  /* 透明度   */
    background: black;
    color: white;
}
.tanCenter {
    position:relative;
    top: 50%;
    transform: translateY(-61.8%);  /* Y轴距离  */
}
.circle {
    width:  50px;
    height: 50px;
    border-radius: 50%;             /* 圆角     */
}

background 相关属性和缩写
    background-color: #233;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-attachment: fixed; 背景图片随滚动轴移动方式 
    background: #233 url(bg.png) no-repeat;

三种缩写, 分别对应有 4 2 3 个值的时候的解释, padding 同理
margin: top  right  bottom  left
margin: (top/bottom)  (right/left)
margin: top  (right/left)  bottom

overflow属性
    visible 默认
    auto 需要的时候加滚动条
    hidden 隐藏多余元素
    scroll 就算用不着也会强制加滚动条

内联元素 居中 text-align: center
区块元素 居中 margin: 0px auto;

伪类

a:link   { color: white; text-decoration: none; } /*去下划线*/
a:visited{ color: black; }
a:hover  { color: red; cursor: pointer; } /*鼠标样式*/
a:active { color: lightblue; }

a.class:visited {color: white;}    /* 独立伪类 */

定位 position

非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次
e.pageX——相对整个页面的坐标
e.clientX——相对可视区域的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标

布局 flex

显示 display

盒模型

动画

JavaScript

Array 数组

Str 字符串

Object 字典

dict = { '初中生':6, '高中生':7, '大学生':8 }
|属性|说明
|:-|:-|
| dict = { key : 'value', }|创建
|dict.(key) |点语法读取|
|dict ['小学生'] = 4| 添加
|dict ['小学生'] = 5| 修改
|delete dict ['大学生']| 删除
|Object.keys( dict )| 返回 keys

类

var Student = function(name, height) {
    // 用 this.变量名 来创造一个只有类的实例才能访问的变量
    this.name = name
    this.height = height
}
// 用 new 函数名(参数) 初始化一个类的实例
var s1 = new Student('gua', 169)
// 可以改变 s1 的属性
s1.name = 'xiaogua'
s1.height = 1.69
// 可以创建多个互相独立的实例
var s2 = new Student()
var s3 = new Student()
//可以给类增加一些方法(函数)
Student.prototype.greeting = function() {
    console.log(`hello, I'm ${this.name}`)
}
// 可以调用实例的方法
s1.greeting()

ES6类的表示方法
class Student {
    // 初始化的套路
    constructor(name, height) {
        this.name = name
        this.height = height
    }

    // 方法没有 var
    greeting() {
        console.log(`hello, I'm ${this.name}`)
    }

    update(name, age) {
        this.name = name
        this.age = age
    }
}
class Teacher extends Student {
//继承类的用法
}

this

apply call bind  //是用来给函数指定 this 用的


apply 接受两个参数
第一个参数是函数里面的 this
第二个参数是要传给函数的参数列表, 类型是 数组(暂定), apply 会把数组拆成一个个的参数传给函数

console.log.apply(console, arguments) //直接用

call 和 apply 类似, 但是小有区别, 如下
第一个参数和 apply 一样
第 2, 3, 4, 5, ... 个参数会依次作为参数传给函数

console.log.call(console, 1, 2, 3, 4, 5, 6, 7) //直接用

bind 函数/*不直接调用*/, 而是返回一个函数让你来调用
第一个参数是用来指定函数里面的 this, 和 apply call 一样
var log = console.log.bind(console)  //不直接用
log()    //才可调用

ES6

Json 格式

var x = JSON.stringify( [1,2,3] ) //编译

var y = JSON.parse( x )           //读取

Promise 处理回调的方法

// 将 fs.readFile 的操作封装成 promise，这样就可以使用 promise 的 api 了
const readFile = function(filename) {
    // 一般前端的写法 
    // return new Promise(function(resolve, reject) {})
    const p = new Promise(function(resolve, reject) {
        const fs = require('fs')
        const options = {
            encoding: 'utf8'
        }
        fs.readFile(filename, options, function(error, content) {
            if (error !== null) {
                reject(error)
            } else {
                resolve(content)
            }
        })
    })

    return p
}
// 使用 promise 读取文件就不用写成回调的形式了
// 直接按照同步的写法就好了
// 可以无限 then, 只要你保证上一个 then 返回了东西即可
let promise = readFile('foo.txt')
promise.then(function(content) {
    console.log('debug file content', content)
    const c = content + ' suffix1'
    return c
}, function(error) {
    console.log('debug error message', error)
}).then(function(c1) {
    console.log('second then', c1)
    const c = c1 + ' suffix2'
    return c
}).then(function(c) {
    console.log('third then', c)
})
console.log('GUA ****** line 46')

// 上面的写法也可以写成下面这样
// 把 reject 的操作放在 catch 里面
promise.then(function(content) {
    console.log('debug file content', content)
}).catch(function(error) {
    console.log('debug error message', error)
})
// 有时候会碰到批量执行异步操作，如果直接用循环 + 调用函数的形式会比较麻烦
// 使用 Promise.all 就很方便了
// all 方法是直接挂在 Promise 类上的，而 then catch 这些方法是挂在原型上
// Promise.all 会把数组里面所有的 promise 对象都执行完
// 再往下调用
Promise.all(list).then(function(content) {
    console.log('Promise.all, content', content)
})

重命名文件的方法

var file = app.$('videoInput').files[0]; 
// 重命名
var aafile = new File([file], "aa.mp4");

BOM API

history.length      // 历史列表中的 url 数量
history.back()      // 相当于点击后退按钮
history.forward()   // 相当于点前进
history.go(-2)      // 相当于点击两次后退按钮
//H5新函数
var state = {
    page: "settings"
}                        
history.pushState(state, "settings", "/settings")

/*三个参数分别是
    1.自定义对象
    2.新页面的标题, 但是现在还没有浏览器实现这个功能
    3.新页面的地址(/...)
  
用户点击 前进 后退 按钮的时候, 会触发 window 的 popstate事件
于是可以在这里操作*/

window.addEventListener("popstate", function(event) {
    var state = event.state;
    // state 就是 pushState 的第一个参数 被储存
    console.log('pop state', state)
})

/*还有一个 replaceState 函数, 它的作用和 pushState 一样,   只是不生成一条历史纪录
只能在相同域名下使用*/

DOM API

• DOM 是 HTML 文件
• DOM API 是浏览器提供给 JavaScript 操作 html 页面的交互方式

常用

<input id="id" type="text" value="Gua">

本地存储

贮藏：localStorage[ 'name' ] = '馒头'
取出：localStorage[ 'name' ]
电脑本地储存 5MB Object,只能存字符串，可使用 Json 转字符串
localStorage 没有过期时间, 要用 clear remove 主动删除数据

贮藏：sessionStorage[ 'name' ] = '馒头'
取出：sessionStorage[ 'name' ]
sessionStorage 的数据在用户关闭浏览器后将被删除

事件

事件绑定：
区分元素 > 绑定元素 > 触发Event > 操作元素

Ajax

• 阿贾克斯中 event 事件本身，包含触发事件所有内容

GET

var ajaxGet = function( ku ) {
    var r = new XMLHttpRequest()        // 创建 AJAX 对象
    r.open( 'GET', ku.url, true )       // 设置 请求方法 地址
    r.onreadystatechange = function() {
        if (r.readyState === 4) {       // 如果 完成
            ku.callback(r.response)     // 注册 响应函数 结果
        }
    }
    r.send()                            // 发送 请求
}
// readyState有4种状态  0. 未初始化 1.载入  2.载入完成  3.交互  4.交互完成
var ku = {
    url: '/login' ,                     // 地址
    callback: function(response) {      // 响应函数
        console.log(response)
    }
}
ajaxGet( ku )

POST

var ajax = function( ku ) {
    var r = new XMLHttpRequest( )      // 创建 AJAX 对象
    r.open( ku.method, ku.url, true )  // 设置 请求方法 地址
    r.setRequestHeader('Content-Type', ku.ContentType)
    r.onreadystatechange = function() {
        if (r.readyState === 4) {      // 完成
            ku.callback(r.response)    // 注册 响应函数 结果
        }
    }
    r.send( ku.data )                  // 发送 请求
}
var ku = {
    method:         'POST',            // 请求方法
    url:            '/login',          // 地址
    ContentType:    'application/json',// 数据格式
    data: JSON.stringify({             // 发送内容
        username:   'abc',
        password:   '123',
    }),
    callback: function(response) {     // 响应函数
        console.log('result:', response )
    }
}
ajax( ku )

http协议

请求和返回是一样的数据格式，分为4部分：
1，请求行或者响应行
2，HTTP Header（请求的 Header 中 Host 字段是必须的，其他都是可选）
3，\r\n\r\n（连续两个换行回车符，用来分隔Header和Body）
4，HTTP Body（可选）

请求的格式，注意大小写（这是一个不包含Body的请求）：
原始数据如下
'GET / HTTP/1.1\r\nhost:g.cn\r\n\r\n'
打印出来如下
GET / HTTP/1.1
Host: g.cn
r\n(空一行)

jQuery

常用

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

jQuery对象DOM操作

jQuery对象css操作

//jQuery对象有“批量操作”的特点可调用css对象方便修改对象的CSS
$('#test').css('background-color', 'black').css('color', 'red');
var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性
//css()方法将作用于DOM节点的style属性，具有最高优先级

jQ 动画

jQ 事件绑定

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);
使用off('click')一次性移除已绑定的click事件的所有处理函数
无参数调用off()一次性移除已绑定的所有类型的事件处理函数

a.on('click', function () {
    alert('Hello!');
})
// 两者等价(常用下一种)
a.click(function () {
    alert('Hello!');
})
//事件委托用法
$( '#id-div-cont' ).on( 'click', '.del', Event )
// 绑定 父元素 #id-div-cont 监听.del(如果点击的是.del则发生)

jQ 函数

each 遍历

var eve = function(i, eve) {
    console.log(i, eve)
}
$('.notePad_one').each( eve )

map 遍历 返回值

var a = [1, 2, 3, 4, 5]
var eve = function( i ) {
    return i * i
}
var b = $.map( a, eve )
// 结果 b = [1, 4, 9, 16, 25]
//map与each最大区别是返回值

filter 过滤器

var a = [1, 2, 3, 4, 5]
var eve = function( i ) {
    return i % 2 == 1
}
var b = $.grep( a, eve )
// 结果 b = [1, 3, 5]

jQ Ajax

var request = {
    url: '/uploads/tags.json',
    type: 'get',
    success: function(r) {
        console.log(r)
    },
    error: function() {
        console.log(arguments)
    }
}
$.ajax(request)

//基础的jq ajax方法
$.ajax({name:value, name:value, ... })

// jq get方法
$.get("test.php", function(data){
console.log(data);
})
//jq post 方法
$.post(URL,{name:'小明'},function(data,status,xhr),dataType)

Bootstrap

Bootstrap设置响应式的CSS布局

<!--配置bootstrap需要加入以下设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src=' jQuery'>` bootstrap 必须引用 jq</script>

布局col

col-(xs,sm,md,lg)每一个div可以加入多个col-?类 叫做混合布局,会根据屏幕自适应布局.
每一横行都是新的12格,如果父元素8格,子元素还是新的12格

导航栏navbar

对话框modal

旋转木马carousel

lodash

lodash 是一个非常实用的 js 工具库 _是表达符号

lodash 函数

each

_.each(list(数组或对象), (v, k) => {
        // each 方法的两个参数
        // 如果 list 是 列表，那么 v 和 k 分别是指 list 的 element/index
        // 如果 list 是 对象（字典），那么 v 和 k 分别是指 object 的 value/key
        console.log('element and index', v, k)
    })

map (旧数组/对象生成一个新数组)

    const list2(新数组) = _.map(list1(旧数组), (v, k) => {
        const r = v * v
        return r
    })
    console.log('list2', list2)

filter (遍历数组/对象，返回符合判断函数中的元素)

var u(符合条件的新数组) =
_.filter(us(数组可包含对象), (e) => {
        var b = e.score > 70(bool值)
        return b
    })
    console.log('filter u', u)

orderBy (按照条件排序,先按score升序,如果有score一样的,再按 name降序)

    var users = _.orderBy(us, ['score', 'name'], ['asc'(升序), 'desc'(降序)])
    console.log('order by users', users)   

flatten (减少一层嵌套数组(只减少一层),也就是可以将二维数组拍成一维数组)

    var l = [
        1,
        [2],
        [3, [4]],
        [5, [6], [7]],
    ]
    var f = _.flatten(l)
    console.log('flatten result', f)

compact 剔除数组中的假值元素(js 中假值元素分别为false null 0 NaN '' undefined)

    var result = _.compact(l(包含假值元素的数组))
    console.log('compact result', result)
**isEqual**  isEqual比较两个对象或者数组是否相等
    var o1 = {
        'key': 1,
    }
    var o2 = {
        'key': 1,
    }
    var result = _.isEqual(o1, o2)
    console.log('isEqual result', result)

result (获取嵌套对象的值)

    var o = {
        'k1': {
            'k2': {
                'k3': {
                    'k4': 'value in nested dict'
                }
            }
        }
    }

    var path = 'k1.k2.k3.k4'
    var result = _.result(o, path)
    console.log('result nested result', result)

cloneDeep 深拷贝(改变赋值不影响原函数的拷贝)

        var o = {
        'a': [1],
        'b': [2],
        }
    var deep = _.cloneDeep(o)
    console.log('deep', deep)

random (返回给定范围的随机值)

    var a = 10      var b = 20
    // 返回 a 和 b 之间的一个整数
    var r1 = _.random(a, b)
    console.log('random r1', r1)
//如果指定第三个参数为 true，这个参数的意思是指 floating ,那么返回的就是一个浮点数
    var r2 = _.random(a, b, true)
    console.log('random r2', r2(浮点数))

shuffle (返回打乱顺序后的数组)

    var l = [1, 2, 3, 4,]
    const s = _.shuffle(l)
    console.log('shuffle l', s)

vue.js

注意事项
1.确保在初始化根实例之前注册了组件

2. 内部使用vue属性需要使用this
   3.要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
   4.在数据变化之后立即使用 Vue.nextTick(callback) == this.$nextTick(callback)

this.$on('事件名字',function(r){console.log(r)})
//监听自定义事件 第一个事件名字 第二个参数触发函数
this.$emit('事件名字','输入值')
//触发自定义事件 第一个参数名字 第二个参数函数参数

常用vue指令

html代码事例

<div id='app'>  
    <div v-if(show)='welcome' v-bind:title='title' v-once>
    <!--1.显示隐藏元素(if是添加show是改变display) 2.v-bind(可省略)绑定title属性为'title' 3.message值不随着改变-->           
    {{ loggedIN? message : '请先登录 '}}  
    <!--loggedIN值为true hello  false  请先登录 -->
    </div>
    <div v-else>     //v-else-if也可以使用
    Now you don't
    </div>
     <!--if为false时显示 -->
    <div v-text='message'></div>  <!--message纯文本显示 -->
    <div v-html='message'></div>   <!--渲染显示 -->
    
    <!--触发的事件调用 event.preventDefault()-->
    <form v-on:submit.prevent="onSubmit"></form>
    <form v-on:submit.prevent></form>
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
    <!-- 阻止单击事件冒泡,可以串联按照顺序执行 -->
    <a v-on:click.stop.once="doThis"></a>
    <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.lazy="msg" >
    <!-- 自动转换输入的字符为数字 -->
    <input v-model.number="age" type="number">
    <!-- 自动过滤用户输入的首尾空格 -->
    <input v-model.trim="msg">

    
    <input v-model='message'> 
<!--input框中默认为message  修改此值即修改data里message值 -->
    <ol>
        <li v-for='comment in comments  //(value, key, index) in object)'>
            {{ comment.content }}
        </li>
<!--循环comments数组创建li  可通过app.comments.push({content:'lalala'})添加新的li元素-->
    </ol>
    <!--组件化演示 -->
    <comment v-for='comment in comments' v-bind:comment='comment'></comment>  <!--效果同上li -->
<div>

js代码事例

//定义全局组件化
Vue.component('comment', {        //声明组件名字
    template: '<li> {{ comment.content }} </li>', //组件模板
    // '<slot> :) </slot>'   内容分发
    //包含slot标签的div没有内容时显示:) 有内容时隐藏
    props: ['comment'],             //组件传入的对象
    /* prosp: {
        comment: {
            type:String,    
            default: 'button',   默认值
            required: true,      必须有值
            validator (value) {
                return value.length > 3      值长度大于 3
            }      prosp的另一种对象形式
        }        可以过滤传入对象的属性
    }*/
    methods: {
        logMessage() {
        console.log(this.message)
        }    //组件化中也可以直接定义data与methods
    }
})

var vm = new Vue({
    el: '#app', //选择应用vue的选择器,等效于vm.$mout('#app')
    methods: {
        logMessage() {
        console.log(this.message)
        }
    },
    data: {
        message: 'hello',
        title: 'hello',     //鼠标放上去显示
        welcome: true, //true显示这个元素 false隐藏
        loggedin: false,
        comments: [
            {content: 'yayaya1'},
            {content: 'yayaya2'},
            {content: 'yayaya3'},
        ]
    },
    created: function () {
    // 实例被创建之后调用
    console.log('hello word~')
  }
})
 

vue-router.js

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <!-- 渲染模板里面根据路由再次嵌套渲染-->
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const User = {  //动态参数值会被设置到 this.$route.params
  template: '<div>User {{ $route.params.id }}</div>'
}
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
const router = new VueRouter({
  routes: [
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar },
     // 动态路径参数 以冒号开头
     { path: '/user/:id', component: User,
     //自路由再次渲染
       children: [ { path: 'profile', component: UserProfile },
                 { path: 'posts', component: UserPosts } ]
     }
  ]
})
const app = new Vue({
  router
}).$mount('#app')   //$mount('#app')相当于 el:'#app'

router.push 会向 history栈添加一个新的记录点击浏览器后退按钮回到之前的 URL
router.replace与router.push 很像，唯一的不同就是，它不会向 history 添加新记录
router.go 参数是一个整数，意思是在 history 记录中向前或者后退多少步
{ path: '/a', redirect: { name: 'foo' }}
重定向的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
{ path: '/a', component: A, alias: '/b' }
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

router.beforeEach((to, from, next) => {
  // 全局注册的钩子   3个参数 去哪 哪来  干嘛
})
beforeEnter: (to, from, next) => {
        //组件内部的钩子 效果一样
} 
beforeRouteEnter (to, from, next) //渲染该组件的对应路由被 confirm 前调用 无this

beforeRouteUpdate (to, from, next) //在当前路由改变，但是该组件被复用时调用

beforeRouteLeave (to, from, next) //导航离开该组件的对应路由时调用

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }

node.js

node(fs)专属配置环境工具

var fs = require('fs')     //加载fs库赋值于fs
fs.readdir('.', (err,files) => { // .当前目录..上一级
    if(err != null) {
       console.log(err)
    } else {
       console.log('files', files)
   }
})   //  读取当前目录下的文件(readdirSync同步版本)

fs.rmdir('目录名',(err) => { })
//删除目录文件(目录必须为空)

fs.unlink(file, (err) => { })  
//  删除file文件

fs.mkdir('目录名字',(err) => { }) 
//创建目录

fs.readdir('目录',(err, files) => {})
//读取目录内容

fs.writeFile('file', '你好 Node.js', (err) => {})
 //  创建file文件

fs.appendFile('file', '你好 python', (err) => {})
//添加文件内容

fs.readFile('message.txt', 'utf8', (err, data) => {
    console.log('读取了文件', data)
})    //   读取文件

fs.rename('原名字','新名字',(err) => {})
//重命名文件

var fileReadStream = fs.createReadStream('文件名')
var fileWriteStream = fs.createWriteStream('文件名')
//读取文件流  写入文件流
fileReadStream.pipe(fileWriteStream)
//pipe好像管道,可以把读取流接入写入流 效果类似write
//pipe可以链式使用
fileReadStream.pipe(fileWriteStream).pipe(...)

var i = 0
fileReadStream.on('data',(chunk) => {
console.log(`${i++}接受到:${chunk.length}`)
fileWriteStream.write(chunk) //写入每次内容
}) //读取次数,每次长度

fileReadStream.on('end',() => {})
//读取结束事件

fileReadStream.on('error',(err) => {})
//发生错误事件

express库用于后端开发

// 引入 express 并且创建一个 express 实例赋值给 app
var express = require('express')
var app = express()
app.use(express.static('static'))
//封装一个函数
var sendHtml = function(path, response) {
    var fs = require('fs') //   path是读取文件
    var options = {       //  options解码环境   
        encoding: 'utf-8'  
    }
    fs.readFile(path, options, function(err, data){
        console.log(`读取的html文件 ${path} 内容是`, data)
        response.send(data)
    })
}
// 用 get 定义一个给用户访问的网址
// request 是浏览器发送的请求
// response 是我们要发给浏览器的响应
app.get('/', function(request, response) {
    var path = 'index.html'
    sendHtml(path, response)
})

app.get('/todo/all', function(request, response) {
    var todos = [
        {
            id: 1,
            task: '吃饭',
        }
    ]
    var r = JSON.stringify(todos)
    response.send(r)
})
app.post('/todo/add', function(request, response) {
    // request.body  这个函数可以获取前端post的数据
})

//打开端口服务器
// listen 函数的第一个参数是我们要监听的端口
// 这个端口是要浏览器输入的
// 默认的端口是 80
// 所以如果你监听 80 端口的话，浏览器就不需要输入端口了
// 但是 1024 以下的端口是系统保留端口，需要管理员权限才能使用
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

node的一些库

//sync-request 用于下载网页
var request = require('sync-request')

//cheerio 用于解析网页数据
var cheerio = require('cheerio')

//模块中函数输出
module.exports = 函数名

git

git init   //创建git仓库
git add (文件名)   //添加文件
git commit -m "改动说明"   //上传改动
git status           //查询仓库状态
git diff ()           //查询文件变动
git log         //查询版本改动
git log --pretty=oneline     //格式化显示版本改动状态
git reset --hard HEAD^    //HEAD当前版本 ^上个版本 ^^上2个版本  HEAD-100  上100个版本
git reset --hard (版本号(可只写几个开头))   //回滚到指定版本
git reflog                     //记录每次操作
git checkout -- （）          //文件回滚到最后一次add或commit状态
git reset HEAD （）     //撤销最后一次的git add
git rm ()    //删除文件
git checkout -b dev     //创建并切换为dev分支
git branch    //查看所有分支
git checkout master    //切换分支到master
git merge dev    //合并指定分支（dev）到当前分支
git branch -d（D） dev    //删除（强制删除）dev分支
git stash   git stash pop    //储存目前工作现场，读取。。。
git remote -v    //显示远程仓库信息
git push （origin branch-name）    //本地推送分支到远程仓库
git branch --set-upstream （branch-name origin/branch-name）
// 建立本地分支和远程分支的关联
git tag （name）   //打标签
git tag             //查看所有标签
git tag （v1.0） (提交id)     //打历史标签
git show (name)      //显示对应标签说明
git tag -a <tagname> -m "blablabla..."   //添加标签说明
git tag -d （name）     //删除本地标签
git push origin :refs/tags/<tagname>   //删除一个远程标签
git push origin <tagname>     //推送一个本地标签
git push origin --tags        //推送全部未推送过的本地标签
//忽略某些文件时，需要编写.gitignore
git config --global alias.（co） checkout   //配置简化git命令checkout为co

gulp

创建gulpfile.js文件

var gulp = require('gulp')     //引入gulp

gulp.task('images', function () {
    return gulp.src('images/*.png').pipe(gulp.dest('dist/images'))
})   
//创建images函数，将images下所有png格式图片复制到dist/images文件下

var sass = require('gulp-sass')  //编译sass为css
var connect = require('gulp-connect')
gulp.task('server', function() {
    connect.server({
        root: 'dist'
    })
})
//创建本地服务器监视dist文件下内容
var concat = require('gulp-concat');  //合并
var uglify = require('gulp-uglify');  //压缩js文件
var rename = require('gulp-rename');  //重命名文件
gulp.task('scripts', function () {
return gulp.src(['javascripts/**/*.js',''])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
//合并文件，取名vendor.js压缩后放在dist/js下
var minifyCSS = require('gulp-minify-css');
// 压缩css文件  minifyCSS()
var imagemin = require('gulp-imagemin');
//压缩图片体积   imagemin()
var browserSync = require('browser-sync').create();
// 游览器同步
// 静态服务器
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});
// 代理
gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "你的域名或IP"
    });
});
npm install browser-sync --save-dev
//安装browser-sync
browser-sync start --server forest --files "forest/index.html, forest/css/*.css"
//监视forest文件夹下文件
--tunnel
//使外网也可以访问
browser-sync start  --proxy localhost:9090
//监视指定代理服务器

// 直接使用browser-sync
browser-sync start --server --files "css/*.css, *.html"

webpack

webpack (原.js) (处理后.js)
module.exports = 'zh is boss!'   //name.js
var name = require('./name')    //引入name.js
npm install css-loader // 处理css文件
npm install style-loader // 应用css文件
require('style!css!./css/*.css')  //引入css文件
webpack --devtool source-map  //生成可source调试的js
npm install webpack-dev-serve    //生成开发用服务器
webpack-dev-server --inline --hot  //模块热更新监控
//配置webpack文件
新建一个名为webpack.config.js的文件
module.exports = {
 devtool: 'eval-source-map',//配置生成Source Maps
 entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }
}

一些常用函数/数据

循环

for (var i = 0; i < iterable.length; i++) {
    iterable[i]
    }
    
var i = 0
while(i<iterable.length) {
function语句
i += 1
}

arr.forEach(function(iteam, index, array)
for (i of iterable) { i }           // i = 值
for (i in iterable) ( iterable[i] } // i = 下标
break  结束单次循环
continue 语句可以跳过单次循环

常用函数

var log = function() {
    console.log.apply(console, arguments)
    //alert( )
    }    
//测试函数情况    
    
var ensure = function( def, result, message ) {
    if( JSON.stringify( def ) !== JSON.stringify( result ) ) {
        log('错误', message)
    }
}
//测试函数正确

var e = function(selector) {
    return document.querySelector(selector)
}
// 绑定元素

var appendHtml = function(element, html) {
    element.insertAdjacentHTML('beforeend', html)
}
//加入html字符串

var toggleClass = function(element, className) {
    if (element.classList.contains(className)) {
        element.classList.remove(className)
    } else {
        element.classList.add(className)
    }
}
// 开关(className)

var removeClassAll = function(className) {
    var selector = '.' + className
    var elements = document.querySelectorAll(selector)
    for (var i = 0; i < elements.length; i++) {
        var e = elements[i]
        e.classList.remove(className)
    }
}
//批量删除className

var bindEvent = function(element, eventName, callback) {
    element.addEventListener(eventName, callback)
}
//绑定事件

var bindAll = function(selector, eventName, callback) {
    var elements = document.querySelectorAll(selector)
    for(var i = 0; i < elements.length; i++) {
        var e = elements[i]
        bindEvent(e, eventName, callback)
    }
}
//批量绑定事件

var time = function( z ) {
    if (z === undefined) { z = new Date() }
    var han = '日一二三四五六'
    var Year   = z.getFullYear()    
    var Month  = z.getMonth() + 1
    var Day    = z.getDate()
    var Hour   = z.getHours()
    var Minute = z.getMinutes()
    var Second = z.getSeconds() 
    var Week   = han[z.getDay()]
    if ( String(Month).length === 1) {
        Month = '0' + Month
    }
    return `${Year}年${Month}月${Day}日 ${Hour}时${Minute}分${Second}秒 星期${Week}`
}
time( ) 
//时间函数    括号里输入时间对象 否则为当前时间
// (new Date()).getTime()把时间转换为当前毫秒计算事件 常用于倒计时
//可通过new Date('2017/6/10,10:30:30')的格式来设置时间

参数说明

Math 数学

逻辑符号

定时器

a是执行函数 b是时间（例如1000）

offsetLeft 距离左边的距离 用于做无缝滚动

类型

RegExp 正则表达式

• 语法：/Pattern/Property
  |Property|说明|
  |:-:|:-:|
  |/i|无视大小写|
  |/g|全局匹配|
  |/m|多行匹配 |
  |/img|组合使用|

• 常用

• 编译：new RegExp( Pattern, Property )

var name = '馒头'
var re = new RegExp( `${name}`, 'img' ) //加变量

转义符

注释

编码

ASCII：2进制8字节表示 Base64：2进制6字节
|ASCII - Unicode 编码|说明|
|:-: |:-: |
|'Aa'.charCodeAt( 0 ) === 65|0 下标|
|String.fromCharCode( 65 ) === "A"|65 ASCII码|
|( 10 ).toString( 2 ) === "1010"|进制转换|

参考资料：

书籍

《Head First HTML 与 CSS》第2版 ;
《JavaScript 语言精粹》;
《JavaScript 高级程序设计》;

《编码》;《计算机程序的构造和解释》;SICP 解题集
《深入理解计算机系统》;
《算法导论》;《编程珠玑》;《程序设计语言》;《代码大全》;

网络

文档：MDN /w3school
教程：廖雪峰/宁皓网/慕课网

基础教程：
计算机科学和Python编程导论
计算机科学cs50
计算机程序设计
算法导论
编程语言
英语学习