uploadify插件的使用总结

uploadify插件的使用总结

  1. 引包

    1
    2
    3
    <link rel="stylesheet" href="uploadify/uploadify.css">
    <script src="jquery.js"></script>
    <script src="uploadify/jquery.uploadify.js"></script>

  2. 调用uploadify提供的方法

    1
    <input type="file" id="file">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$("#file").uploadify({
	//指定swf文件的路径！！！ 推荐使用绝对路径
	swf: "/views/assets/uploadify/uploadify.swf",
	//指定上传文件的接口地址
	uploader: "/api/uploader/avatar",
	//指定上传文件的时候，文件的键， 后台需要通过该值来获取文件的内容
	fileObjName: "tc_avatar",
	//尺寸
	width: 100,
	height: 100,
	//类样式，附加一个类样式给上传按钮
	buttonClass: "类名",
	//按钮的文字
	buttonText: "上传图片",
	//设置上传图片的大小限制，可以是一个字符串单位可以是B KB MB GB
	fileSizeLimit: "100KB",
	//设置上传文件的类型，也就是在选择文件的窗口中筛选指定类型的文件
	fileTypeExts: '*.gif; *.jpg; *.png',
	//formData  在上传文件的时候，可以附带一些数据，类似于ajax提交数据
	formData: {key: value},
	//设置上传进度的模板！
	itemTemplate : '<p></p>'
	//onUploadSuccess 上传成功之后的回调函数
	onUploadSuccess: function(file, data, response){
		
	},
	//onUploadComplete
	//onUploadError
	//onUploadProgress
	//onUploadStart
	//onUploadSuccess
});

展开全文 >>

cookie

cookie

cookie属于浏览器中的一个存储空间，里面可以存储数据。

可以存，也可以取

cookie是以域名为单位存储的，每个域名的cookie之间是相互隔离的，也就是说不可以互相操作

比如： 在it.cn 这个域名的cookie中存了一条数据
在 studyit.com 中能够使用上面存储的内容吗？？ 不可以！

cookie 是有容量限制的， 每个域名可以存储的cookie不能超过4KB

存储单位：

  1. bit 位
  2. Byte 字节 8bit
  3. KB 千字节 1024Byte
  4. MB 兆字节 1024KByte
  5. GB 吉字节 1024MB
  6. TB 太字节 1024GB

cookie 有时限的，有声明周期的，也就是说cookie是会过期的
默认情况下cookie的生命会在浏览器关闭的时候结束！
也可以手动的设置cookie的过期时间！

cookie也是分路径的
在www.studyit.com/dashboard/index 往cookie中存储了一个数据
在www.studyit.com/ 是不可以访问上面存储的内容的

子级路径中可以访问父级路径中存储的cookie，但是父级路径不能访问子级路径中存储的cookie

一般情况下，都会直接将cookie存储到根目录下面去，这样全站所有的路径中都可以访问了。

cookie存储的路径是可以设置的！

一个域名下的cookie是在该域名下面所有的页面中都可以使用的！

www.studyit.com
www.studyit.com/dashboard/index
www.studyit.com/teacer/add

当前域名中所有的cookie会伴随着每一次请求发送给服务器！！！

展开全文 >>

webpack

在网页中会引用哪些常见的静态资源？

  1. 图片
    • .png, .jpg, .gif, .bmp
  2. 字体
    • .svg, .ttf, .woff, .woff2, .eot
  3. CSS
    • .css, .less, .scss
  4. JS
    • .js, .json, .coffee
  5. 模板文件
    • .vue, .jade

网页中这些常见的资源多了以后会出现什么问题

  1. 在一个页面中，会引用各种各样的静态资源文件，会导致发起很多的二次请求，导致网页显示效率变慢；
  2. 需要人为去解决文件之间复杂的依赖关系；

如何解决上述两个问题

  1. 图片：使用精灵图；base64
  2. CSS：合并；压缩混淆
  3. JS：合并；压缩混淆

如何完美实现上述的三种解决方案

  • 使用 Gulp 去实现上述三种解决方案；
  • 根据官网的图片介绍webpack打包的过程
  • webpack官网

注意:Gulp是站在任务的角度去思考问题的；
WebPack适合站在项目的角度，去统筹整个项目的构建；

webpack安装的两种方式

了解：Webpack只是一个工具；是基于Node.js构建出来的；所以，webpack是托管到了NPM；

  1. 全局安装：npm i -g webpack
  2. 在项目中安装：npm i webpack -D

初步使用webpack打包构建列表隔行变色案例

使用webpack 需要打包的文件路径 输入的文件路径方式，进行最基本的打包；
注意：这种方式，调用的是全局安装的 webpack

使用webpack的配置文件简化打包时候的命令

1
2
3
4
5
6
7
8
9
10
11
var path = require('path');
// 使用 Node中的 module.exports 导出一个 webpack 的配置对象
// 将来，当我们 直接运行 webpack 这个命令的时候，webpack会检查有没有指定要打包文件的路径，以及输出文件的路径；如果没有指定相关路径，则会默认去项目根目录中，查找一个叫做 `webpack.config.js` 的配置文件；然后得到 这个 配置文件中 导出的配置对象，拿着这个配置对象去进行打包操作；
module.exports = {
  entry: path.join(__dirname, './src/js/main.js'), // 打包的入口文件
  output: { // 配置和输出相关的一系列参数
    path: path.join(__dirname, './dist'), // 指定输出文件的路径
    filename: 'bundle.js' // 通过 filename 来指定输出文件的名称
  }
}

实现webpack的实时打包构建

需求：由于在实际开发中，会经常修改代码，需要时时查看最新的代码效果，所以，我们最好能够实现只要代码以修改，自动进行打包!为了实现这个需求，我们需要借助一个叫做webpack-dev-server的插件；
注意：由于 webpack-dev-server 内部封装了 webpack， 所以，它的使用方式，和webpack几乎一样！

  1. 运行npm i webpack-dev-server -D安装插件

注意：webpack-dev-server 帮我们生成出来的 bundle.js 并没有存放到实际的磁盘目录中；而是帮我们托管到了内存中；
为什么不放到磁盘中,而是托管到了内存呢? 快!!!

使用html-webpack-plugin插件配置启动页面

实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！

方式1：

直接在package.json的scripts节点下设置:

1
"dev1": "webpack-dev-server --contentBase src --open --port 80 --hot"

方式2：

在 webpack.config.js中添加一个新节点:

1
2
3
4
5
6
7
8
devServer: { // 设置 webpack-dev-server 命令的第二种形式
    //  --contentBase src --open --port 80 --hot
    contentBase: 'src', // 设置托管目录
    open: true, // 自动打开浏览器
    port: 80, // 指定打开的端口号
    hot: true, // 启用热更新
    openPage: 'index.html' // 设置默认打开浏览器之后，默认显示那个页面,注意： webpack-dev-server 在 v2.5.0 之后，需要设置这一项，否则打开的是 undefined 页面
  }

还需要添加一个新的插件,启用热更新:

1
new webpack.HotModuleReplacementPlugin() // 在 插件中 启用 webpack 的热更新

webpack中loader的加载原理

使用webpack打包css文件

  1. 运行npm i style-loader css-loader -D
  2. 在webpack.config.js的module节点下的rules节点中,添加一个新的loader配置项:
    1
    2
    3
    4
    5
    module: { // 所有的第三方loader，都需要配置到这个 module 节点下
        rules: [ // 所有的第三方模块的匹配规则，都写到 rules 节点下
          { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 匹配处理 .css 类型文件的loader
        ]
      }

使用webpack打包sass文件

  1. 运行cnpm i sass-loader node-sass -D
  2. 添加相关loader:
    1
    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 设置 处理 .scss 类型文件的loader

使用webpack处理css中的路径

  1. 运行npm i url-loader file-loader -D
  2. 添加相关loader:
    1
    2
    { test: /\.(jpg|gif|png|bmp)$/, use: 'url-loader?limit=7631&name=[hash:7]-[name].[ext]' }, // 处理图片资源的loader模块【注意：可以通过 limit 设置多大的文件才进行编码，只有小于指定大小的文件，才会被编码】
          { test: /\.(eot|woff2|woff|ttf|svg)$/, use: 'url-loader' } // 处理字体文件

使用babel处理高级JS语法

  1. 由于webpack默认会转换一部分的高级的ES6语法,但是并不能转换全部的;
  2. 因此需要借助于Babel这个转换器,把高级的语法转换为低级别的,浏览器能识别的语法!
  3. 运行第一套命令:npm i babel-core babel-loader babel-plugin-transform-runtime -D
  4. 运行第二套命令:npm i babel-preset-es2015 babel-preset-stage-0 -D

  5. 配置loader,在rules中添加一个新的loader配置项:

    1
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 配置处理高级ES语法的loader

  6. 在项目根目录中创建一个.babelrc的一个Babel配置文件:

    1
    2
    3
    4
    {
      "presets": ["es2015", "stage-0"],
      "plugins": ["transform-runtime"]
    }

webpack的发布策略

  1. 在实际开发中，一般会有两套项目方案：
    • 一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除；
    • 另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！

  2. 为了满足我们的发布策略，需要新建一个配置文件，命名为webpack.publish.config.js，将webpack.config.js的配置拷贝过去，剔除一些开发配置项即可：

    • 将devServer节点删掉：

      1
      2
      3
      4
      5
      devServer: {
             hot: true,
             open: true,
             port: 4321
         }

    • 将plugins节点下的热更新插件删掉：

      1
      new webpack.HotModuleReplacementPlugin()

  3. 修改url-loader，将图片放入统一的images文件夹之下：

    1
    { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/[name].[ext]' }

或者使用img-前缀加上7位的hash名称：

1
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/img-[hash:7].[ext]' }

  1. 在package.json中的script节点下新增dev命令，通过--config指定webpack启动时要读取的配置文件：
    1
    "pub": "webpack --config webpack.publish.config.js"

每次重新构建时候删除dist目录

  1. 运行cnpm i clean-webpack-plugin --save-dev

  2. 在头部引入这个插件：

    1
    var cleanWebpackPlugin = require('clean-webpack-plugin');

  3. 在plugins节点下使用这个插件：

    1
    new cleanWebpackPlugin(['dist'])

分离第三方包改造webpack.publish.config.js

  1. 改造entry节点如下：

    1
    2
    3
    4
    entry: {
            app: path.resolve(__dirname, 'src/js/main.js'), // 自己代码的入口
            vendors: ['jquery'] // 要分离的第三方包的入口
        }

  2. 在plugins节点下新增插件：

    1
    2
    3
    4
    new webpack.optimize.CommonsChunkPlugin({ // 抽离第三方包的插件
            name:'vendors', // 指定抽离第三方包的入口名称
            filename:'vendors.js' // 抽离出的公共模块的名称
    })

  3. html-webpack-plugin在生成index.html文件的时候，会自动将抽离的第三方包引入进去！

优化压缩JS

在plugins数组中添加：

1
2
3
4
5
6
7
8
new webpack.optimize.UglifyJsPlugin({ // 优化压缩JS
    compress:{
        warnings:false // 移除警告
    }
}),
new webpack.DefinePlugin({ // 设置为产品上线环境，进一步压缩JS代码
    'process.env.NODE_ENV': '"production"'
})

优化压缩HTML文件

在plugins节点下的htmlWebpackPlugin插件中，添加minify子节点：

1
2
3
4
5
minify:{// 压缩HTML代码
    collapseWhitespace:true, // 合并空白字符
    removeComments:true, // 移除注释
    removeAttributeQuotes:true // 移除属性上的引号
}

其他优化项请参考：html-minifier - github

抽取CSS文件

  1. 运行npm install --save-dev extract-text-webpack-plugin安装抽取CSS文件的插件。

  2. 在配置文件中导入插件：

    1
    const ExtractTextPlugin = require("extract-text-webpack-plugin");

  3. 修改CSS和Sass的loader如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
        test: /\.css$/, use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader"],
            publicPath: '../' // 设置图片路径
        })
    },
    {
        test: /\.scss$/, use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader', 'sass-loader'],
            publicPath: '../' // 设置图片路径
        })
    }

  4. 在plugins节点下新增插件：

    1
    new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件的插件

压缩抽取出来的CSS文件

  1. 运行cnpm i optimize-css-assets-webpack-plugin --save-dev安装插件到开发依赖。

  2. 在配置文件头部导入插件：

    1
    var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

  3. 在plugins节点下新增插件：

    1
    new OptimizeCssAssetsPlugin() // 压缩CSS文件的插件

相关文章

  1. Sass 基础教程
  2. webpack-dev-server
  3. You have not accepted the license agreements of the following

展开全文 >>

远程仓库的详细操作

远程仓库的详细操作

在文件修改之后,如何将修改的内容推送到远程仓库中

  1. 要使用git pull来获取一下远程仓库中最新的代码
  2. 再使用git push将自己修改的内容推送到远程仓库中
  3. 获取服务器中更新的内容,git pull加远程地址

展开全文 >>

模块化内容

模块化

CommonJS

js代码的模块化标准，不适用于前端开发，NodeJS在使用该标准实现模块化

AMD

Async Module Definition 异步模块定义

尽可能早的加载所有需要用到的模块，模块的加载都是异步的，如果要在模块加载完成后，利用模块中的内容实现某些功能，需要将代码写在 require的第二个参数的回调函数中

require.js

CMD

Common Module Definition 通用模块定义

尽可能晚的加载模块，哪里用到了模块再去加载

sea.js

##　require.js实现模块化

定义模块

1
2
3
4
5
6
7
define(["当前模块的依赖项"...], function(使用形参接收依赖项的返回值){
	//当前模块中要实现的功能
	//当前模块如果要提供内容给模块调用者使用，就需要通过return语句将需要体用给别人的内容进行返回
	return 需要给别人提供的内容;
})

引用模块

1
2
3
4
require(["模块路径/模块别名"...], function(){
	//这个函数会在模块加载完成之后，被调用起来
	//如果想在模块加载完成后实现某些功能，那么代码都写到这个函数中！
})

data-main

在引用require.js的script标签中可以通过data-main指定一个入口文件，这个入口文件中的内容，会在reuqirejs加载完毕之后，被自动执行。

data-main指定的这个文件是异步加载的！所以在下面如果有使用这个文件中相关内容的代码，就不能够保证执行正常

路径的说明

  1. 如果直接使用script在html当中引入模块，那么模块的路径查找会以当前html文件作为基础。 （没有配置baseUrl，也没有data-main属性）

  2. 如果使用data-main属性，那么这时候的模块路径查找，会以入口文件所在的路径作为基础去查找（没有设置baseUrl）

  3. 如果通过require.config()配置了baseUrl，那么所有的模块的路径查找，都会以这个baseUrl做为基础！

require.config方法的说明

这个方法主要用来配置requirejs相关的内容

1
2
3
4
5
6
7
8
9
10
11
12
require.config({
	//配置基础路径，所有的模块查找都以这个路径为基础
	//这个路径一般情况下配置为绝对路径，并且设置为所有模块共享的路径
	baseUrl: "/",
	//paths可以用来为单个路径设置别名，以后在使用模块的时候，直接使用别名即可，不需要再写完整的路径了
	//如果模块是一个具名模块，那么这个别名一定要和具名模块的名称一致
	//.js 不要！！！
	paths: {
		"jquery": "views/assets/jquery/jqeury.min"
	}
});

如何加载第三方内容

实现了模块化的第三方内容加载

直接使用require，就像使用正常模块一样即可！

未实现模块化的第三方内容加载

  1. 需要考虑该内容是否有依赖项

  2. 需要考虑该内容是否有返回值（是否要提供内容给外部使用）
    如果有依赖项，需要通过require.config方法配置该模块的依赖项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    require.config({
    	baseUrl: "/",
    	paths: {
    		"jquery": "views/assets/jquery/jqeury.min",
    		"animate": "animate/animate"
    	},
    	//配置的是第三方内容的依赖项以及输出项
    	shim: {
    		//模块别名： 配置信息
    		"animate": {
    			//deps属性可以用来配置这个模块的依赖项
    			deps: ["jquery"],
    			//export可以配置输出项
    			//输出项的内容其实就是在第三方内容中去查找和配置名称相对应的全局变量，将其值作为模块的输出值！
    			exports: "animate"
    		}
    	}
    });

  3. 如果第三方内容没有实现模块化，并且没有依赖项，也没有输出项，直接require即可！！！

具名模块匿名模块

具名模块有名字

1
2
3
define("名字", [], function(){
	
})

匿名模块没名字

1
2
3
define([], function(){
	
})

展开全文 >>

git的基本使用

git的基本使用

git init

新创建一个项目文件夹之后，文件夹只是一个普通的文件夹，对于文件夹内任何内容的修改不会受到版本控制系统的管理。

我们需要为当前的项目文件夹初始化一个版本库，来管理当前项目。

1
git init

git init一个项目执行一次

git status

查看当前git仓库的状态信息

git add

告诉git要追踪管理哪些文件

1
2
3
4
git add 文件名
git add * 
git add -A

git commit

告诉git 帮我生成一个新的版本

1
git commit -m "版本的描述信息"

git log

可以查看所有的已经提交的版本信息
版本的版本号
修改的作者
修改的时间
版本的说明

设置用户名和邮箱的命令
只需要执行一次（一个电脑执行一次）

1
2
git config --global user.name 用户名
git config --global user.email 邮箱

git checkout 文件名

将暂存区的内容恢复到工作目录

git reset –hard 版本号（git log中去找）

将版本库中指定的版本恢复到工作目录！

展开全文 >>

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

All I can say is it was<br>enchanting to meet you