发表于 | 分类于 |

使用了新技术总会有兼容性问题，一般公司不考虑兼容性问题，但是还是出现诸如样式错乱、无法支持ie、缩放浏览器或屏幕设置比率非100%下的网页错位，作为开发者需要给出友好的提示，提高用户体验。

演示地址：https://sywsywsyw.github.io/noie-nozoom/

源码：https://github.com/sywsywsyw/noie-nozoom

==兼容ie8、不支持以下版本==
==兼容ie需要再服务器环境下打开== （可以使用http-server,live-server热更新服务）
==因为缩放之后所有内容也会缩放，所以需要把样式改为图片然后同步缩放图片==
==缩放图片规则为：最初尺寸除以当前比例 例如放大0.2倍就是 477/1.02==

阅读全文 »

发表于 | 分类于 |

1. 微信小程序转Taro，文档

https://nervjs.github.io/taro/docs/taroize.html
Taro 可以将你的原生微信小程序应用转换为 Taro 代码，进而你可以通过 taro build 的命令将 Taro 代码转换为对应平台的代码，或者对转换后的 Taro 代码用 React 的方式进行二次开发。
微信原生小程序转 Taro 的操作非常简单，首先必须安装使用 npm i -g @tarojs/cli 安装 Taro 命令行工具，其次在命令行中定位到小程序项目的根目录，根目录中运行：

1
$ taro convert

即可完成转换。转换后的代码保存在根目录下的 taroConvert 文件夹下。你需要定位到 taroConvert目录执行 npm install 命令之后就可以使用 taro build 命令编译到对应平台的代码。
预览h5

1
npm run dev:h5

==注意，转换完之后运行会提示.temp文件有好多报错，不要在这个里面改错误，要去src目录下面更改，因为.temp是临时文件夹，因为这个问题折腾了一下午。==

阅读全文 »

发表于 | 分类于 |

因为电脑垃圾、atom编辑器在处理长页面是的卡顿迫使我不得不更换一门编辑器，但不可否认的是每个编辑器都是很强大好用的。

阅读全文 »

发表于 | 分类于 |

typescript 是javascript的超集，是一种编程语言

1. typescript和javascript的区别

  • 更适合大型应用程序
  • js的超集，类似于less,sass, 最终会转为javascript
  • 跨平台（浏览器，操作系统linux,mac）且开源
  • 开始于js,终止于js.上手成本低，易于学习
  • 重用js,可以引入js流行的库 echarts
  • typescript 类、接口、模块，更易于组件的编写和维护
  • ts是强类型，js是弱类型。

为什么要学习typescript?

vue、React、ng、都推荐使用typescript。

阅读全文 »

发表于 | 分类于 |

为什么要用vue?

渐进式、轻量、声明式、高效、易用、响应式

什么是渐进式？
可以部分使用vue,也可以使用vue的一部分.
声明式渲染 - 组件系统 - 客户端路由 - 大规模状态管理 - 构建工具

阅读全文 »

发表于 | 分类于 |

1. var、const、let的区别

  • var 全局变量
  • let 局部变量
  • const 常量 一般用于属性名，用于从常量命名开始的那一刻就不想让改变的属性名。
阅读全文 »

发表于 | 分类于 |

webpack官网
webpack文档

1. 认识Webpack的作用

  • 打包：可以把多个javascript文件打包成一个文件，减少服务器压力和下载带宽
  • 转换：把扩展语言转换成普通的javascript，让浏览器顺利运行。
  • 优化：前端复杂性的提高，开始肩负起优化和提升性能的责任。
1
2
3
4
5
6
7
8
9
10
11
1. `win+R` 进入对话框输入`cmd`进入命令行模式。
2. 输入`f： `进入f盘
3. `mkdir webpack_demo`  生成webpack_demo文件夹
4. `cd webpack_demo` 进入当前文件夹
5. 需要安装`node`
6. `npm install -g webpack` 全局安装webpack，
   注意：全局安装是可以的，但是webpack官方是不推荐的。
   这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。 
7. 对项目目录安装，npm初始化。`npm init`
8. `npm install --save-dev webpack`   安装到开发环境
9. `webpack -v` 检查版本号

2.配置文件

配置出口和入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const path =  require('path');
moduel.exports = {
    // 入口文件配置项
    entry:{
        './entry.js'
     },
    // 出口文件配置项
    output:{
       // 打包文件的出口路径
       path: path_resolve(__dirname,'dist'), // 获取项目的绝对路径
       // 输出文件名称
       filename: 'bundle.js'   
    },
    // 模块，用于解析css,图片转换，压缩
    module:{},
    // 插件，用于生产模板和各项功能
    plugins:[],
    // 配置webpack开发服务功能
    devServer:{}
}
服务和热更新 webpack-dev-server
  • 安装
    1
    npm install webpack-dev-server --save-dev

webpack.config.js中

1
2
3
4
5
6
7
8
9
10
11
12
moduel.exports = {
   devServer:{
      // 设置基本目录接口
      contentBase: path_resolve(__dirname:'dist'); // 用于找到程序打包地址
      // 服务 IP 地址
      host: 'localhost',
      // 服务是否开启压缩
      compress: true,
      // 配置服务端口号
      port: 8888
   }
}

package.json中

1
2
3
"script":{
   "server":"webpack-dev-server"
}

3. 模块

css打包

loaders

  • 可以把sass、less文件转为css
  • 可以把es6及以上的代码转为大多浏览器兼容的js代码
  • 可以把React的JSX转为javascript代码

所有的解析器都需要使用npm安装然后在进行使用。

建立index.css文件
引入到入口文件夹main.js中

1
import i_css from './css/index.js'

CSS和引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。

style-loader
用于处理css中的url(), https://www.npmjs.com/package/style-loader

1
npm install style-loader --save-dev

css-loader
用来将css插入到页面的style的标签。https://www.npmjs.com/package/css-loader

1
npm install css-loader --save-dev

修改webpack.config.js中的module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
   module:{
     rules:[
        {
          test: /\.css$/,
          use:['style-loader','css-loader'], // 第一种
          loader:['style-loader','css-loader'],  // 第二种
          use:[{                               // 第三种
            loader: 'style-loader'
          },{
            loader: 'css-loader'
          }]
         }
      ]
   }
}

4.插件配置

==需要注意的压缩需要在生产环境下配置，因为开发环境为了方便调试压缩个棒棒==

js压缩

uglifyjs-webpack-plugin 这个小瘪三插件默认集成进了webpack 所以不用安装了

引入
webpack.config.js引入

1
2
3
4
5
6
const uglify = require('uglifyjs-webpack-plugin');
moduel.exports = {
   plugin:[
      new uglify()
   ]
}

html文件的发布
  • 打包html文件
    html-webpack-plugin 插件
    1
    const htmlPlugin = require('html-webpack-plugin');

引入npm 安装

1
npm install html-webpack-plugin --save-dev

webpack.config.js进行配置

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    plugin:[
      new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
      })
    ]
}

  • minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
  • hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
  • template：是要打包的html模版路径和文件名称。

总结：
html文件的打包可以有效的区分开发目录和生产目录，在webpack的配置中也要搞清楚哪些配置用于生产环境，哪些配置用于开发环境，避免两种环境的配置冲突。

5. 图片迈坑

图片处理

file-loader 解析背景图片的url，路径
url-loader 减少http请求，将图片转为dataUrl，但是如果图片过大，编码会消耗性能，所以有了limit参数进行配置
注意： loader使用时不需要require引用，plugins才需要使用require引入
url-loader 默认包含了 file-loader所以引入的时候只需要引入url-loader就行了

webpackconfig.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
moduel.exports = {
   module:{
      rules:[
        {
          test:/\.(png|jpg|gif)/ ,
          use: [
             loader:'url-loader',
             options:{
               limit: 500000
             }
          ]
        }
      ]
   }
}

  • test:/.(png|jpg|gif)/是匹配图片文件后缀名称。
  • use：是指定使用的loader和loader的配置参数。
  • limit：是把小于500000B的文件打成Base64的格式，写入JS
    css图片分离和图片路径处理
    css分离:extract-text-webpack-plugin
    1
    npm install --save-dev extract-text-webpack-plugin

webpackconfig.js中

1
2
3
4
5
6
7
8
9
10
const extractCss = require('extract-text-webpack-plugin');
module.exports = {
    module:{
       test: /\.css$/,
       use: extractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
       })
    }
}

图片路径问题
利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来，但是CSS路径并不正确，很多小伙伴就在这里搞个几天还是没有头绪，网上也给出了很多的解决方案，我觉的最好的解决方案是使用publicPath解决，我也一直在用。
publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。
在处理前，我们在webpack.config.js 上方声明一个对象，叫website。

1
2
3
var website = {
    publicPath: "http://192.168.1.108:8888/"
}

然后在output选项中引用这个对象的publicPath属性。

1
2
3
4
5
module.exports = {
    output:{
      publicPath: website.publicPath
    }
}

配置完成后，你再使用webpack命令进行打包，你会发现原来的相对路径改为了绝对路径，这样来讲速度更快。
总结：这节课我们实现了CSS的分离，并在分离后处理了图片路径不对的问题。处理路径的方法一定要充分理解，因为这在工作中经常用到。

处理html中的图片

html-withimg-loader

1
npm install html-withimg-loader --save

1
2
3
4
{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

如何把图片放到指定的文件夹下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
   rules:[{
     test: /\.(png|jpg|gif)/,
     use:[{
        loader:'style-loader',
        option:{
            limit:'url-loader',
            options:{
               limit:5000,
               outputPath:'images/'
            }
        }
      }]
   }]
}

6. Css进阶

Less文件的打包和分离
1
2
npm install --save-dev less
npm install --save-dev less-loader

webpack.js

1
2
3
4
5
6
7
8
9
10
{
    test: /\.less$/,
    use: [{
           loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        , {
            loader: "less-loader" // compiles Less to CSS
        }]
}

把Lees文件分离

1
2
3
4
5
6
7
8
9
10
11
12
{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

Sass文件的打包和分离
1
2
npm install --save-dev node-sass
npm install --save-dev sass-loader

注意：在用npm安装时，这个loader很容易安装失败，最好使用cnpm来进行安装。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。

1
2
3
4
5
6
7
8
9
10
{
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
}

把Lees文件分离

1
2
3
4
5
6
7
8
9
10
11
12
{
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

css3属性前缀处理

PostCSS css处理平台
需要安装postcss-loader和autoprefixer

1
npm install --save-dev postcss-loader autoprefixer

postcss.config.js
postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。

1
2
3
4
5
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

编写loader
对postcss.config.js配置完成后，我们还需要编写我们的loader配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
    module:{
      rules:[
      {
      test: /\.css$/,
      use: [
            {
              loader: "style-loader"
            }, {
              loader: "css-loader",
              options: {
                 modules: true
              }
            }, {
              loader: "postcss-loader"
            }
      ]
}]
    }
}

提取CSS
配置提取CSS的loader配置.

1
2
3
4
5
6
7
8
9
10
11
{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })

}

总结:postcss还有很多功能，我希望小伙伴学会自学。这里给出postcss-loader的github地址：https://github.com/postcss/postcss-loader

消除未使用的css

像Bootstrap这样的框架往往会带有很多CSS。在项目中通常我们只使用它的一小部分。就算我们自己写CSS，随着项目的进展，CSS也会越来越多，有时候需求更改，带来了DOM结构的更改，这时候我们可能无暇关注CSS样式，造成很多CSS的冗余。这节课就学习用webpack消除未使用的CSS。

PurifyCSS

使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。

安装PurifyCSS-webpack

从名字你就可以看出这是一个插件，而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装。

1
npmn  i -D purifycss-webpack purify-css

这里的-D代表的是–save-dev ,只是一个简写。

引入glob

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

1
2
const glob = require(glob);
const PurifyCSSPlugin = `require`("purifycss-webpack");

配置plugins

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'

    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })

]

这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。

注意：使用这个插件必须配合extract-text-webpack-plugin这个插件，这个插件在前边的课程已经讲解过了。如果你还不会请自学一下。

配置好上边的代码，我们可以故意在css文件里写一些用不到的属性，然后用webpack打包，你会发现没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins，因为这决定你代码的质量，非常有用。

7. webpack添加babel支持

在前端开发中都开始使用ES6的语法了，虽然说webpack3增加了一些ES6的转换支持，但是实际效果不是很好，也可能是本人技术有限，没发挥出真正的功能。所以我在开发中还是喜欢添加Babel-loader的，我也查看了一些别人的webpack配置也都增加了babel-loader，所以这节课我们学习一下如何增加Babel支持。（此节文章部分内容引用了zhangwang大神的文章内容）

Babel是什么？ Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过便宜帮你达到以下目的：

使用下一代的javaScript代码(ES6,ES7….)，即使这些标准目前并未被当前的浏览器完全支持。

使用基于JavaScript进行了扩展的语言，比如React的JSX。

Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

我们先一次性安装这些依赖包
`Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

我们先一次性安装这些依赖包

1
cnpm c install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "env","react"
            ]
        }
    },
    exclude:/node_modules/
}

现在你已经可以用webapck转换ES6的语法兼容各个浏览器了，我们可以修改一下entry.js的代码如下：

1
2
3
4
5
import css from './css/index.css';
{
    let jspangString = 'Hello Webpack'
    document.getElementById('title').innerHTML=jspangString; 
}

上面的代码使用了ES6的let声明方法。如果你不使用Babel来进行转换，你会发现打包出来的js代码没有作兼容处理，使用了Babel转换的代码是进行处理过的。

.babelrc配置

虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置写在.babelrc文件里。

在项目根目录新建.babelrc文件，并把配置写到文件里。
.babelrc

1
2
3
{
    "presets":["react","es2015"]
}

.webpack.config.js里的loader配置

1
2
3
4
5
6
7
{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}

8.打包之后如何调试

作为一个程序员每天的大部分工作就是调试自己写的程序，那我们使用了webpack后，所以代码都打包到了一起，给调试带来了麻烦，但是webpack已经为我们充分考虑好了这点，它支持生产Source Maps来方便我们的调试。（敲黑板，这节可能偏理论一点。）

在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。

四种选项

在配置devtool时，webpack给我们提供了四种选项。

  • source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
  • cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
  • eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
  • cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。

个人意见是，如果大型项目可以使用source-map，如果是中小型项目使用eval-source-map就完全可以应对，需要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。

简单的配置：

1
2
3
4
5
6
7
8
module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

总结：调试在开发中也是必不可少的，但是一定要记得在上线前一定要修改webpack配置，在打出上线包。

9. 开发和生产并行设置

开发生产环境依赖不同

一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的。

  • 开发依赖：在开发中用来帮助开发、简化代码或者生成兼容设置的依赖包。可以使用package.json来查看，devDependencies的下面的这些包为开发使用的依赖包。在生成环境中并无用处。
  • 生产依赖：比如我们的js使用了jquery，jquery在浏览器端口起作用，也就是说我们最终的程序也需要这个包。这个生产依赖，这些包在dependencies。
npm安装的三种安装方式

one

1
npm install jquery

安装完成后，你会发现在package.json中并不存在这个包的依赖。如果你项目拷贝给别人继续开发，或者别人和你git合作，再次下载项目npm install时就会缺少这个jquery包。项目就会无法正常运行，所以这也是我们最不赞成的安装方法。
two

1
npm install jquery --save

安装完成后，它存在于package.json的dependencies中，也就是说它是生产环境需要依赖的包（上线时需要的依赖包）。
three

1
npm install jquery --save-dev

安装完成后，它存在于package.json的devDependencies中，也就是说它是开发环境中需要的，上线并不需要这个包的依赖。

安装全部依赖包
1
npm install
安装生产环境依赖包
1
npm install --production
配置生产和开发并行

我们在以前的配置中设置了一个变量website，用于静态资源正确找到路径。那如果生产环境和开发环境不一样，而且我们需要来回切换，这时候我们需要更好的设置方法。

1
2
3
var website={
    publicPath:"http://192.168.0.104:1717/"
}

修改package.json命令
其实就是添加一个dev设置，并通过环境变量来进行区分，下面是package.json里的值。

1
2
3
4
5
"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&webapck",
    "build": "set type=build&webpack"
  },

修改webpack.config.js文件
可以利用node的语法来读取type的值，然后根据type的值用if–else判断。

1
2
3
4
5
6
7
8
9
if(process.env.type== "build"){
    var website={
        publicPath:"http://192.168.0.104:1717/"
    }
}else{
    var website={
        publicPath:"http://cdn.jspang.com/"
    }
}

如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。

1
console.log( encodeURIComponent(process.env.type) );

10. webpack模块化配置

为了让大家容易看懂，我把webpack.config.js中的entry入口文件进行模块化设置，单独拿出来制作成一个模块。

首先在根目录，新建一个webpack_config文件夹，然后新建entry_webpack.js文件，代码如下：

entry_webpack.js

1
2
3
4
5
6
7
8
//声明entry变量
const entry ={};  
//声明路径属性
entry.path={
    entry:'./src/entry.js'  
}
//进行模块化
module.exports =entry;

配置的模块化代码编写好以后，需要在webpack.config.js中引入，注意这里的引入只能使用require的方法。

1
const entry = require("./webpack_config/entry_webpack.js")

webpack.config.js 入口文件中

1
2
3
module.exports = {
      entry:entry.path
}

这时候你可以再次使用npm run dev 进行测试，你会发现模块化成功了。

总结： 模块化在实际工作中是必不可少的操作，但是现在的webpack教程还很少讲到，大家一定要重视这节，因为如果你搞不清这节的内容，可能你看别人的配置也会看不明白。记得一定要动手练习操作，否则你下面的课程也没办法学习。

发表于 | 分类于 |
1. 同源策略是什么？
1
限制一个源从另一个源的交互。需要相同域名，相同协议，相同端口。
2. html块元素、行元素
阅读全文 »

发表于 | 分类于 |

https://www.jianshu.com/p/dcde5ab4cfd9

使用dos的tree命令输出文件夹树 http://www.cnblogs.com/dkplus/p/8487330.html
用dos的tree命令就可以实现文件夹树状图的输出，不过目前仅能输出为.txt文件

方法如下：
开始->运行 输入cmd打开命令控制台
切换到你要显示的列表文件夹 比如 输入 d: 切换到d盘
输入 tree >c:\dirlist.txt就可以生成文件夹的树型列表
tree /f >c:\dirlist.txt 可以生成文件夹和文件的树型列表
这个时候就可以在c盘生成你要的文本了

阅读全文 »
0%