碎言博客

聊聊Python中的装饰器

J.sky 2020-10-05 20:34:04 Python

Python装饰器是什么?

在Django中曾经使用过 @fun 这种格式的语法,用在了定义视图的函数上,类似一种拦截器用来控制当前视图的访问权限。

装饰器(decorator)是干嘛的?对于受到封装的原函数来说,装饰器能够在那个函数执行前或者执行后分别运行一些代码,使得可以再装饰器里面访问并修改原函数的参数以及返回值,以实现约束定义、调试程序、注册函数等目标。装饰器一般返回一个包装器(wrapper),而functools.wraps就是装饰包装器的装饰器。

定义一个Python的装饰器

我们定义一个计算Python程序运行时间的装饰器,在定义一个需要运行的韩式,代码如下:

    import time
    import functools

    def t(fun):
    '''定义一个程序运行时间计算函数'''
    @functools.wraps(fun)
    def wrapper(*args, **kwargs):
            start = time.time()  # 起始时间
            fun(*args, **kwargs)  # 要执行的函数
            end = time.time()  # 结束时间
            print(fun.__name__, '程序运行时间:{:.2f}ms'.format((end - start) * 1000))
    return wrapper

    @t
    def myfunc(x, y):
    '''打印从x到y的数值'''
    for i in range(x, y):
            print(i)

    myfunc(0, 9)

运行结果:

    0
    1
    2
    3
    4
    5
    6
    7
    8
    myfunc 程序运行时间:0.03ms
    这样的话,我们就可以在不破坏原函数代码的情况下为函数添加了计算当前函数运行时间的功能。

定义一个可以传参的装饰器

如果我们的装饰器需要传入参数该怎么写呢?只需要在 wrapper 外加一层包装即可。代码如下:

    import time
    import functools

    def t(str):
    '''定义一个程序运行时间计算函数'''
    def decorator(fun):
            @functools.wraps(fun)
            def wrapper(*args, **kwargs):
            start = time.time()  # 起始时间
            fun(*args, **kwargs)  # 要执行的函数
            end = time.time()  # 结束时间
            print('传入的字符串是:', str)
            print(fun.__name__, '程序运行时间:{:.2f}ms'.format((end - start) * 1000))
            return wrapper
    return decorator

    @t('hello world')
    def myfunc(x, y):
    '''打印从x到y的数值'''
    for i in range(x, y):
            print(i)

    myfunc(0, 9)

运行结果:

    0
    1
    2
    3
    4
    5
    6
    7
    8
    传入的字符串是: hello world
    myfunc 程序运行时间:0.11ms
    functools.wraps是什么?

functools.wraps 是为了保留原函数的属性不被装饰器破坏,这个时候就可以使用 functools.wraps

functools这个库里有很多关于函数的功能模块,后续我们在继续研究。

npm更换源与nrm安装与配置

J.sky 2020-03-30 19:43:28 webpack

nrm

安装nrm

在命令行执行命令, npm install -g nrm ,全局安装nrm。

执行命令 nrm ls 查看可选的源。

如果要切换到taobao源,执行命令 nrm use taobao

很简单吧?

pip临时修改下载源

J.sky 2020-03-30 19:38:16 Python

pip临时修改源

PYPI国内源路径

  • 阿里云 http://mirrors.aliyun.com/pypi/simple/
  • 豆瓣(douban) http://pypi.douban.com/simple/
  • 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/
  • 中国科学技术大学 http://pypi.mirrors.ustc.edu.cn/simple/

临时换源

临时换源只需要在pip安装包时,加上一个-i参数后接源的url即可:

# 下载python中的Django包,这里使用的是豆瓣源
pip install django -i http://pypi.douban.com/simple

永久换源(更换默认源)

Linux

在根目录下创建/修改~/.pip/pip.confpip配置文件; 进入文件新增/修改内容;

[global]
index-url=http://pypi.douban.com/simple
[install]
trusted-host=pypi.douban.com

保存文件并退出;

Windows

windows在%HOMEPATH%\pip\pip.ini中修改上面第二步的内容; 保存文件退出;

Vue快速学习笔记(9)Vuetify配置及简单使用

J.sky 2020-03-19 09:33:18 Vue

Vuetify的安装及配置

相对来说vuecli的安装配置比较简单,在插件里搜索 Vuetify ,安装即可,这里说下 Vuetify webpack 的安装及配置方式。

首先是:

npm install vuetify
npm install sass sass-loader fibers deepmerge -D

然后是配置文件里的加载器配置,因为使用了sass,如下方法配置。

// webpack.config.js

module.exports = {
rules: [
    {
    test: /\.s(c|a)ss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        {
        loader: 'sass-loader',
        // Requires sass-loader@^7.0.0
        options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
        },
        // Requires sass-loader@^8.0.0
        options: {
            implementation: require('sass'),
            sassOptions: {
            fiber: require('fibers'),
            indentedSyntax: true // optional
            },
        },
        },
    ],
    },
],
}

然后是引入,这里官网用了一个新建.js来配置 Vuetify 的引入,如果没有设置 @ 指向目录,可能会没有效果。 这里我就直接修改了在 main.js 里引用:

//导入Vue
import Vue from "vue";

import App from "./components/App.vue";

// 引入Vuetify组件
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
// vuetify 自定义配置
var vuetify = new Vuetify({})

var vm = new Vue({
    el: '#app',
    render: c => c(App),
    vuetify

});

好了,大功告成,现在就可以开始愉快的使用 Vuetify 了,总体来说,我比较喜欢 Vuetify ,很有设计感细节颜色设计的非常棒。 javaScript在线正则表达式测试,本程序纯粹是为了学习Vue、webpack、Vuetify,一个重复制造轮子的的实践。欢迎大家交流学习。

项目演示地址: JavaScript_RegExp

项目仓库地址:

JavaScript_RegExp___gitee JavaScript_RegExp___github

Vue快速学习笔记(8)webpack4.X配置Vue开发打包环境

J.sky 2020-03-05 15:16:08 webpack

webpack 简介

webpack是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具. webpack可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

npm修改下载源

  • 先安装 node.js ,这个大家百度一下,介绍的太多了,这里不敷衍了。安装了 node.js 后就集成了npm * npm 如果不修改下载源,下载会很慢的,所以推荐修改为淘宝的源。修改方式推荐使用 nrm

安装:

npm install -g nrm //全局安装

nrm ls 列出所有源, nrm use taobao 切换淘宝源,至此我们可以无忧的下载了。

另外,也有可能出现在没有切换源的时候,连 nrm 都下载不下来的时候,比如我。 那么我们先临时切换npm的下载源:

npm config set registry https://registry.npm.taobao.org

测试是否改变了源。

npm config get registry

安装及初始化webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

一些npm的安装命令

npm i module_name          # 安装模块到项目目录下 npm i module_name -g        # -g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm config prefix 的位置。 npm i module_name -S(-save)      # --save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。 npm i module_name -D(--save-dev)  # --save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖。

初始化webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

通过上边的终端魔法,我们成功的初始化了一个前端项目。 我们现在的目的是配置webpack成为一个模块化的 Vue 前端开发项目,来看看我们需要做哪些事情。

webpack打包这里总结为:

  1. 配置文件 config.js 用来管理配置:开发环境,loader模块,插件,打包等。
  2. package.json ,管理各种包依赖插件,还有添加脚本命令。
  3. 添加并配置各种loader,使webpack能有处理更多文件的能力。
  4. 添加并配置各种插件,可以处理生产打包中的一些额外功能。

webpack的配置文件

关于webpack的配置文件修改,我推荐安装 webpack-merge 实现配置文件合并.

假设:

webpack.common.js 公共部分文件 webpack.dev.js 开发环境 webpack.prod.js 生产环境

const merge = require('webpack-merge');//导入包
const common = require('./webpack.common');//导入公共配置文件
。。。。。。config
module.exports=merge(common,devConfig);//合并配置文件

使用起来很方便,这样就可以方便的配置多种开发调试及生产环境。

配置文件的结构目前来说分为四大部分:

  1. 入口entry
  2. 出口output
  3. 模块module
  4. 插件plugins

配置文件结构展示图:

输入图片说明

如果详细讲解webpack的各种配置讲个几天几夜也是说不完的,还是看代码研究吧。 配置的重点在于模块和插件的选项,这我就不贴代码了,如果你有兴趣可以clone仓库里的代码研究一下。 本仓库集成了最基础的模块和插件,包括处理:js es6 css less sass 图片 Vue vue-router,配置文件设置了公共文件,打包在此基础上做了开发和生产两种打包模式。

基于webpack4.X创建的Vue开发环境基础搭建的项目,地址如下:

仓库源码下载:

一些其他注意事项

由于现在新版本的 clean-webpack-plugin 插件引入已经改为: const { CleanWebpackPlugin } = require('clean-webpack-plugin'); new CleanWebpackPlugin(),//清理目录 而且不用加入目录数组['dist']

使用 webpack-dev-server

npm install --save-dev webpack-dev-server

如果报错 npm ERR! Failed at the webpack-demo@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

使用babel处理高级JS语法

npm i -D babel-core@6.26.3 babel-loader@7.1.4 babel-preset-env@1.6.1

  1. webpack.config.js 中添加相关loader模块,其中需要注意的是,一定要把 node_modules 文件夹添加到排除项: { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  2. 在项目根目录中添加 .babelrc 文件,并修改这个配置文件如下: { "presets": ["env"] }
  3. 注意:语法插件 babel-preset-es2015 可以更新为 babel-preset-env ,它包含了所有的ES相关的语法;

Vue快速学习笔记(5)使用路由vue-router(1)

J.sky 2020-02-12 19:03:02 Vue

在Vue中使用路由vue-router

  1. html 中导入vue-router.
  2. 编写 router-link router-view 标签代码
  3. JavaScript 中编写模板对象,定义路由对象及创建Vue实例。

具体代码参考:

<div id="app">
    <!-- 使用router-link定义组件导航 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 使用 router-view 显示匹配的组件 -->
    <router-view></router-view>
</div>

<script>
    const login = {
        template: '<h1>登录组件</h1>'
    }
    const register = {
        template: '<h1>注册组件</h1>'
    }

    // 创建一个路由示例,通过routers属性来匹配规则
    const routerobj = new VueRouter({
        routes: [{
                path: '/',
                redirect: '/login'
            },
            {
                path: '/login',
                component: login
            },
            {
                path: '/register',
                component: register
            }
        ]
    });
    // 穿件Vue实例
    var vm = new Vue({
        el: '#app',
        router: routerobj
    });
</script>

Vue快速学习笔记(4)Vue组件中的数据传递

J.sky 2020-02-11 15:33:53 Vue

Vue组件中的数据传递

父组件向子组件传递数据:

  • 使用 props 属性来定义子组件的数据。
  • 使用 v-bind 指令在组件中可以使父组件的数据传递到子组件中。

示例代码

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="assets/plugins/vue.js"></script>
<template id="mh">
    <h1> {{finfo}}</h1>
</template>

<div id="app">
    <mh finfo="子组件的数据"></mh>
    <mh :finfo="msg"></mh>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"这是父组件Vue实例中传来的消息。"
        },
        components:{
            mh:{
                template:"#mh",
                props:['finfo']
            }
        }
    });
</script>

子组件向父组件传值

Vue快速学习笔记(3)Vue的组件

J.sky 2020-02-04 15:08:07 Vue

Vue中的组件

首先注册组件:

    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

需要一个组件名称和组件的代码模板,组件中的数据和Vue实例的数据不同,一个组件的data选项必须是一个函数。

定义模板

<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次!</button>
</template>

编写Vue实例,完整代码如下:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="assets/plugins/vue.js"></script>
<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次!</button>
</template>

<div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
</div>

<script>
    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

    vm = new Vue({
        el:'#app'
    })

</script>

如上,就可以实现一个全局的组件注册,可以重复使用。