## demo
```js
const woa=require('./woa');
let fs=require('fs')

let app=new woa();

app.use(async (ctx,next)=>{

  let p=new Promise((resolve)=>{
    setTimeout(()=>{
      resolve();
    },2000)
  });
  await p.then(()=>{
    console.log(1);
  })

  next();
  console.log('end',1);
})

app.use((ctx,next)=>{
  console.log(2);
  console.log('end',2);
})

app.use((ctx,next)=>{
  console.log(3);

})

app.listen(9092,()=>{
  console.log('http://localhost:9092')
});

```

## 实现woa
```js
const http=require('http');

let context= {
  get url(){
    return this.req.url
  },
  set url(val){
    this.req.url=val;
  },
  get body(){
    return this.res.body;
  },
  set body(val){
    this.res.body=val;
  }
};


class Application {
  constructor(){
    this.callbacks=[]
  }
  use(callback){
   this.callbacks.push(callback||function(){});
  }
  middleware(ctx,index){
    if(index==null)index=-1;
    index++;
    let callback=this.callbacks[index];
    if(!callback)return;
    callback(ctx,()=>{
      this.middleware(ctx,index);
    })
  }
  listen(...args){
    const server=http.createServer(async (req,res)=>{
      let ctx=this.createCtx(req,res);
      if(this.callbacks.length>0){
        this.middleware(ctx);
      }
     // await this.callback(ctx);
      res.end(ctx.body)
    });
    server.listen(...args);
  }
  createCtx(req,res){
     let ctx=Object.create(context);
     ctx.req=req;
     ctx.res=res;
     ctx.res.body='';
     return ctx;
  }

}

module.exports=Application;

```



实现一个基础版的 Koa（Woa）

**Git删除是Git管理非常重要的一块，比起add和commit，我更怕因为错误的删除操作带来的麻烦，因为它是非常致命且难以修复的。所以特此写上一篇关于Git删除的内容**。



## git rm 
删除工作目录且从暂存区域移出
如果需将文件从git仓库移出，在git rm后，进行git commit操作，就可以更新git仓库啦。

常用选项：
- -f  强制覆盖最新检查
- -r 当给出主目录名时允许递归删除。当你要删除一个目录下的所有文件时，需要用到它
- --cache 把文件从 Git 仓库中删除（亦即从暂存区域移除），但仍然希望保留在当前工作目录中，我们就需要用到它


## 问题：a.txt已经在git仓库，如何进行删除呢?

情况一：a.txt可从工作目录中删除。
git rm a.txt ，如果删除之前修改过并且已经放到暂存区域的话，则必须要用强制删除选项 -f。
删除成功后，工作目录和暂存区域都不会存在a.txt，此时我们在git commit进行提交后，当前commit对应的git仓库也不会在有a.txt。

情况二：a.txt还对我有用，不能从工作目录中删除
git rm --cached a.txt，此时只会从暂存区域进行删除，工作目录中依然存在a.txt。但是为了避免下次无意使用git add . 导致a.txt又被添加到暂存区，最好在.gitignore写上忽略规则，当然你如果不会滥用git add .的话，你可以跳过这一步。

## 问题：我们不小心上传了巨大的二进制文件，如何进行删除呢？
当没有将这个巨大的二进制文件提交到git仓库时，一切的修改都会很简单，我们使用git rm 就可以进行挽回。但是此时已经将其提交到git仓库，并且又在其之上git commit了多个版本的话，你会发现就算当你git rm且成功后，也无法将git本地仓库上传到git远程仓库，因为远程仓库无法支持你上传上百M的内容。
那我们不是已经使用git rm 删除了这个巨大的二进制文件吗，怎么还是会出现这个问题呢

git push 是可以将多次commit一并提交的，我们提交的二进制文件可能在其中的一个commit，git就会按commit顺序去增删文件，当遇到我们巨大的二进制文件时，git将会因为文件太大，而停止操作。
从而导致push失败。

解决方法：
```bash
git filter-branch --tree-filter 'rm -f passwords.txt' HEAD  
# passwords.txt更换成你需要删除的文件名。
```

当你又非常的作死的将这个二进制文件取名为中文的时候，可能会导致以上命令无法删除。
当然也有补救的方法：
```bash
git filter-branch --tree-filter "find * -type f -name '*~' -delete" HEAD
# '*~'更换成你需要的glob模式
```
 
[git filter-branch详细](https://git-scm.com/book/zh/v1/Git-%E5%B7%A5%E5%85%B7-%E9%87%8D%E5%86%99%E5%8E%86%E5%8F%B2
)

Git 删除操作细讲

Webpack2是一个非常流行的JavaScript模块打包工具，它可以将各种静态资源（包括JavaScript、CSS、图片、字体等）打包成一个或多个JavaScript文件，以便于在浏览器中加载和运行。Webpack2相比于早期的版本，带来了很多新的特性和改进，使得它更加强大、灵活和易于使用。



## webpack CLI
- webpack         //最基本的启动webpack的方法
- webpack -p     //对打包后的文件进行压缩
- webpack -d     //提供source map，方便调式代码
- webpack -w     //webpack --watch（缩写就一个-），提供watch方法；实时进行打包更新
- webpack --progress       //看见打包的过程（百分比进度显示）常用
- webpack --hide-modules   //隐藏打包的原因    常用
- webpack --display-module // 看见打包的模块   
- webpack --config webpack.dev.config //指定webpack处理的js    常用
- webpack --display-reason  // 看见打包的原因
- webpack --colors   //打包信息显示颜色
- --module-bind   // 绑定loaders功能

## webpack基础配置
**entry 入口**
```js
let pkg = require('./package.json');

entry: {
    app: './www/main.js',
    vendor: Object.keys(pkg.dependencies)  
}
```

**output 输出以及js命名**
```js
output: {
    publicPath: '/', 
    path: path.resolve(__dirname, 'dist'),
    filename:'js/[name]-[chunkhash:5].js',
    chunkFilename:'js/[name]-[chunkhash:5].js'
}
```


**resolve 路径重定向以及扩展**
```js
resolve:{
    extensions: ['.js', '.vue'],
    alias: {
        'vue': 'vue/dist/vue.js',
        '@': path.resolve(__dirname, 'www')
    }
}
```

**devServer** 

开发模式下自动刷新
```js
devServer:{
    port:9090,
    quiet:true,   友好错误插件使用时需加入此参数   插件名：friendly-errors-webpack-plugin
    inline:true,
    open:true,
    host: '0.0.0.0',  可以让你的服务器被外部访问（同一个局域网下）
    hot:true,     热更新，需启动热更新插件    插件名：webpack.HotModuleReplacementPlugin(),
    overlay:{
        errors:true,
        warnings:true
    }
}
```

## webpack loader
```js
module:{
  rules:[
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          /*所需loader：vue-loader,vue-style-loader,vue-template-compiler（版本超过2.5报错）*/
          css: ExtractTextWebpackPlugin.extract({
            use: [{
              loader: 'css-loader',   /*css-loader*/
              options: {
                minimize: true, //css压缩
              },
            }],
            fallback: 'vue-style-loader',
          }),
          scss: ExtractTextWebpackPlugin.extract({  // 补齐css浏览器前缀，引入css无效，引入scss或者less或者style里面写样式有效
            use: [{
              loader: 'css-loader',
              options: {
                minimize: true, //css压缩
              },
            }, { loader: 'sass-loader' }],  /*sass-loader，node-sass*/
            fallback: 'vue-style-loader',
          }),
        },
        postcss: [require('autoprefixer')(    /*postcss-loader autoprefixer */
          { browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })],
      },
    },

    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
    },
    /*所需loader：babel-core,babel-loader,babel-preset-env 需新建.babelrc {
     "presets": ["env"],
     }  */
    /*懒加载时，需加入babel-plugin-syntax-dynamic-import  且.babelrc修改为 {
     "presets": ["env"],
     "plugins": ["syntax-dynamic-import"]
     }*/

    {
      test: /\.(jpg|png|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[ext]',
          },
        },
        { loader: 'image-webpack-loader' },
      ],
    },
    /*所需loader：url-loader,file-loader,image-webpack-loader*/

  ]
}
```
## webpack plugin
**html-webpack-plugin：打包时html的模板文件**
```js
filename: 文件名
template: 采用模板的路径
inject: js引用放置于head还是body
chunks:[ ] 可以指定数组内相应的js
excludeChunks:[ ] 排除数组内相应的js
minify: {
    removeComments: true,          // 剥离html注释
    collapseWhitespace: true,      // 折叠空白 
    removeAttributeQuotes: true //尽可能删除属性引号 
}
```
**webpack.HotModuleReplacementPlugin()**

webpack-dev-server热更新所需插件

**webpack.DefinePlugin()**   

设置系统环境变量
```js
{
  'process.env': {
        NODE_ENV: '"production"',
        BASE_API: '"http://www.embracex.com:8081"',
    }
}
```

**friendly-errors-webpack-plugin**  

开发调试时友好错误提示

**webpack.optimize.UglifyJsPlugin()**  

js代码压缩
```js
{ 
  compress: { warnings: false },
  sourceMap: true    //开启后js才可以编译出.map
}
```

**extract-text-webpack-plugin**  

css抽离，版本过高报错，目前使用@2.1.2
```js
  { 
     filename:'css/[name]-[contenthash:5].css', 
     allChunks:true 
  }
```
 
 **optimize-css-assets-webpack-plugin**   
 
 合并重复css块，使用scoped的无法合并
 
 **webpack.HashedModuleIdsPlugin()** 
 
 生成稳定的chunkId

**webpack.optimize.CommonsChunkPlugin()** 

可以既保持代码的完整性，又不会重复下载公共代码了
 ```js
  {name:'vendor'}
  {name: 'manifest',chunks: ['vendor']} 
 ```
  webpack runtime被集成到vendor.js，每次打包，webpack runtime都会发生变化，导致vendor即使没有更改，chunkhash也会改变，单独抽出这块变化的部分，成为一个js，即manifest

**inline-manifest-webpack-plugin**

将manifest.js请求内联，不用进行请求得到

**clean-webpack-plugin**   

删除路径下的文件['dist']

## path.resolve、path.join
```js
// path.resolve  
path.resolve(__dirname, 'www')   G:\vueStudy\www
path.resolve(__dirname, '/www')  G:\www

// path.join
path.join(__dirname, '/www')   G:\vueStudy\www
path.join(__dirname, 'www')    G:\vueStudy\www
```


## webpack代码分割
写成函数式，以让外部调用时，无论如何都只会生成一个chunk
```js
module.exports=(file)=>resolve=>require.ensure([],()=>resolve(require('@/layout/'+file+'.vue')))
```
赋值变量时，会单独生成chunk
如上，会生成两个chunk
chunkName可以自己命名，如下，chunk名依次为'A'，'B'，此时webpack需进行配置 output.chunkFilename，chunkName不填写，则依次默认'0','1'

```js
const A=resolve=>require.ensure([],()=>resolve(require('../layout/a.vue')),'A');
const B=resolve=>require.ensure([],()=>resolve(require('../layout/b.vue')),'B');
```

Webpack2 学习

## http
setcookie  和 cookie
跨域问题，图片不存在跨域问题（不下载的时候）

Access-Control-Allow-Origin等一系列是否为后端设置的确认

## DOM
- parentNode
- nextSibling
- preovSibling
- firstChild
- lastChild
- appendChild
- insertBefore
- replaceChild
- removeChild
- clondeNode

## BOM

![image.png](https://blog.ccz.life/static/img/3d87095adadaba99c8e348a9a6aa3530.image.png)

window的一些方法：
- window.open():打开窗口
- window.close():可以关闭通过open打开的窗口
- window.print():显示打印机对话框
- window.find()：显示查找对话框，无法使用

location：
- location.assign()     ----  有历史记录，可以回退
- location.replace()    ----  无历史记录，不能回退
- hash:  "#contents"    ----  返回#以及#紧跟着的字符
- search:"?a=1&b=2"     ----   返回？以及?紧跟着的字符
- （以第一个字母为准，如"#contents？a=1&b=2"，此时的search值为空，
- 而hash的值为"#contents？a=1&b=2")
- href："https://www.baidu.com/"   ---- 返回当前完整的url
- host:"www.baidu.com:8080"       ---- 返回当前服务器名称以及端口号
- hostname:"www.baid.com"         ---- 返回不带端口号的服务器名称
- port："8080"                    ---- 返回端口号
- portocol:"https:"               ---- 返回页面使用的协议
- pathname:"/WileyCDA/"           ---- 返回URL中的目录或文件名

history：
- history.go(-1)     history.back()     ---- 后退一页
- history.go(1)      history.forward()  ---- 前进一页
- history.length                        ---- 等于0时，说明用户打开的是第一个页面

## 引用类型

![image.png](https://blog.ccz.life/static/img/9362480fbe416de2046faef4d075006f.image.png)
**内置对象：**
- Global：Object，Array等，isNaN()，parseInt()，parseFloat()等     
- Math

**基本包装类型（访问字符串方法时，创建实例，在实例上指定方法，销毁实例）：**
- Boolean
- Number
- String

**引用类型：**

Object 本身不具有length属性

Array：length不止是只读的，改变数组的length可以改变数组长度。判断数组的方法：Array.isArray(参数)

Array内置函数:
- 数组的增删：shift，unshift，pop，push（删除会返回当前删除值，增加会返回数组增加后的长度），splice（只返回被删除的值，且一定是数组）直接对数组进行操作
- 数组转字符串：join（返回操作后的数组，实际数组并没有变化）
- 数组的合并与截取：concat，slice（返回操作后的数组，实际数组并没有变化）
- 数组的排序：sort，reverse   直接对数组进行操作
- 数组的查找：indexOf（返回查询当前的位置，若未查询到，返回-1）
- 数组的迭代（重要）

Date

RegExp

Function

## 栈内存、堆内存
变量：包含两种不同数据类型的值，为基本类型值和引用类型值。

基本类型值：String，Number，Boolean，Undefined，Null（typeof检测）

引用类型值：Object，Array，Date，Function，RegExp（instance检测，如检测这个值是不是Object的实例）

基本类型的值和地址存储在栈内存中，而引用类型的地址存储在栈内存中，值存储在堆内存中

![image.png](https://blog.ccz.life/static/img/d7f5fe5d68164f724e4d39009727bb06.image.png)

JavaScript引擎在执行的时候，会把所有变量的声明都提升到当前作用域的最前面。

执行环境及作用域：
js没有块级作用域，只有全局执行环境和局部执行环境，局部执行环境是在函数执行过程中创建。
每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。
虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。
这个变量对象，在执行环境创建的过程中产生。作用域链就是基于执行环境的这个变量对象的。
全局环境的变量对象位于作用域链的末端，因此访问局部变量比访问全局变量更快。


内存问题：
局部变量会在它们离开执行环境时自动解除引用，方便浏览器下次回收，全局变量只有当关闭浏览器时才会回收。js是一门具有自动垃圾收集机制的编程语言，开发人员不必关心内存和分配的原因。


## 函数表达式
低耦合：代码模块与模块之间没有尽量别有牵扯，能做到把这段代码单独拿出来也能用。

高内聚：代码块只和自己及自己内部的代码有关系。

函数声明会有提升，函数表达式只是变量提升

call(),apply() ==>  可以修改this的当前对象

this,arguments，内部函数搜索这两个变量时，只会搜索到其活动对象为止。

而匿名函数的执行环境通常具有全局性，如果当某个函数被作为某个对象的方法调用时，this等于那个对象

arguments是对象，具有callee属性arguments.callee等于调用自身

函数可以cs()()，前提是当cs()的时候，return出来一个函数

**闭包**

闭包引用外部函数变量对象中的值；
在外部函数的外部调用闭包。
理解闭包的关键在于：
外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象。


## valueOf() 和 toString()

两者优先级关系：
1. 涉及到操作符的问题，valueOf的优先级比toString的优先级高，涉及到显示问题，toString方法优先级比valueOf方法高。
2. 只重写了toString方法的话，toString方法比原型链上的valueOf方法优先级高
3. 只重写了valueOf方法的话，涉及到值运算优先调用valueOf方法，涉及到显示问题还是优先调用原型链上的toString方法
















ES5 学习


## Ionic组件

### 头部
```js
<ion-header-bar
  align-title="left | center | right"  // 头部标题位置
  no-tap-scroll="true" // 当点击标题时，是否将内容区域滚动到最开始
>
</ion-header-bar>
```

### 底部
```js
<ion-footer-bar></ion-footer-bar>
```

### 视图头部
写在index.html页面
```js
<ion-nav-bar 
  align-title="left | center | right" //头部标题位置
  no-tap-scroll="true" //当点击标题时，是否将内容区域滚动到最开始
>
回退按钮
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
```

### 视图内容区域
```js
<ion-view
  view-title="" // 头部标题内容,需要在index.html页面置入<ion-  nav-bar>
  cache-view="true" // 是否缓存controllerJS代码模板
>
// 自定义按钮
<ion-nav-buttons 
  side="right | left">
<button></button>
</ion-nav-buttons>
<ion-nav-title>标题</ion-nav-title>
</ion-view>
```

### 底部tab
```js
<ion-tabs>
<ion-tab 
  icon-on="" // 选中时图标样式，里面写相应的class名称即可
  icon-off="" // 未选中时图标样式，里面写相应的class名称即可
  badge="10" // 徽章的数字
  on-select // 选中事件
  on-deselect // 未选中事件
  ng-click //点击事件
  >
</ion-tab>
</ion-tabs>
```

## 禁止横屏
当我们手机屏幕设置成自动选择，在手机横屏后，可能会打乱布局，解决办法如下：

1. 进入项目目录安装插件  
```bash
ionic plugin add cordova-plugin-screen-orientation
```
2. 修改config.xml文件

landscape表示横屏显示，portrait表示竖屏显示
```js
<preference name="orientation" value="portrait" />
```

## 启动画面加载loading取消
```js
<preference name="ShowSplashScreenSpinner" value="false"/>
```

## APP图标和启动页修改
1. 根目录下的resources文件夹下的android和ios文件夹删除
2. 根目录下的config.xml代码删除
```js
<platform name="android">
...
</platform>
<platform name="ios">
...
</platform>
<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
```
3. 加入icon.png和splash.png，最好和原先的一样，icon.png1024*1024最佳

4. 生成图片
```bash
 ionic resources # 生成icon 和 splash不同尺寸的图片
 ionic resources --icon  # 生成icon 不同尺寸的图片
 ionic resources --splash # 生成splash不同尺寸的图片
```











     
