cnpm - 解决 " cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息 。。。 "

2020-10-16 张宇童 学习日志

1.在win10 系统中搜索框 输入 Windos PowerShell

选择 管理员身份运行

1.在win10 系统中搜索框 输入 Windos PowerShell

选择 管理员身份运行

2，打开了powershell命令行之后,输入
set-ExecutionPolicy RemoteSigned
然后更改权限为A

最后通过 get-ExecutionPolicy 查看当前的状态

 完成。

标签: npm

评论(1) 浏览(510)

typescript中的类型及定义

2020-10-16 张宇童 学习日志

typescript 是一门静态类型语言

什么静态类型?

也就是说typescript 是一门强类型语言,强类型语言是在声明变量或常量的时候就已经知道变量或常量的类型是什么了

下面我们来看看typescript是如何定义变量的

首先我们知道 typescript的基础类型有

null, symbol, undefind, boolean, void 

// 首先定义一个Number类型的变量
let count: number = 12;
// String类型的变量
let name: string = 'xiaozhang'
// 注意这里编辑器会报错, 因为name是typescript保留的关键字

类的定义没有什么区别 

class Person {}
定义一个对象类型 
const person : {
    name: string
    age: number
} = {
    name: '小张一号',
    age: 18
};
定义一个数组 
const numbers: numbers[] = [1,2,3];
定义一个方法 
const add: (a: number, b: number) => number = (a, b) => {
    return a + b
}
定义一个对象类型 
const xiaozhang: Person = new Person();
这些就是typescript中的主要几个类型定义

为什么typescript有什么优势呢?为什么使用typescript

我们都知道JavaScript是一门弱类型语言, 在构建大型项目的时候,一旦发生逻辑错误,是十分难以排查问题的

如果是一门强类型语言的话,在编译阶段就可以十分轻松的看到ide提示问题所在

比如:

我们在方法声明处声明了形参a为number类型

而我们在调用的时候实参传入了string类型

这样就可以通过编辑器的提示看到问题所在了

标签: javascript ES6 typeScript

评论(1) 浏览(282)

那些你总是记不住但又总是要用的css

2020-9-8 张宇童

有没有经常遇到一些样式每次写都要用百度呢？我收集了一些我平时经常要用到的但又总是记不住的样式。有错误的地方欢迎指正。转载请注明出处。

一、设置input 的placeholder的字体样式 

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

设置input聚焦时的样式 

input:focus {   
  background-color: red;
}

取消input的边框 

border: none;
outline: none;

二、隐藏滚动条或更改滚动条样式 

/*css主要部分的样式*//*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rosybrown;
    border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{ 
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #E8E8E8;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    background-color:cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    background:khaki;
}

三、文字超出隐藏并显示省略号 单行（一定要有宽度） 

width:200rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行 

word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

四、控制div内的元素自动换行 

word-wrap: break-word;
word-break：break-all;

五、 纯css画三角形 

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

六、 绝对定位元素居中（水平和垂直方向） 

#demo {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: green;
}

七、表格边框合并 

table,tr,td{border: 1px solid #333;}
table{
  border-collapse: collapse;
}

标签: CSS

评论(2) 浏览(480)

在学javascript

2020-8-27 张宇童 学习日志

买了些JavaScript的书,其实主要为了买红宝书,就顺便买了JavaScript语法简明手册

感觉比较适合初学者.图文并茂可以是读者很好的理解

图书内容并不多 200页左右

刚看了50页和大家分享下今天下午阅读的内容

说JavaScript的基础首先要说的是JavaScript的基础类型

JavaScript的基础类型分为7种

1 number 

2 string 

3 null

4 undefined

5 bigint

6 symbol

7 boolean

以上七种类型

可能大家会觉得没有什么说的

是的没有什么说的

但是那些基础类型有构造函数大家知道吗?

其中4中基础类型有构造的

分别是

1 boolean

2 string

3 bigint

4 number 

关于类型强转 主要说一下

number转boolean 只有在number 为0或者-0时转为boolean的值才为false 其他的值都是true

还有NaN, "", undefined, null取反为true,其他类型或值取反均为false

Symbol类型没有构造函数

所以创建的时候只能Symbol('fun')

但是Symbol('fun') == Symbol('fun') 的求值运算为false

所以借助Symbol 这个特性可以用于作为对象的私有属性

关于全局Symbol的使用语法是Symbol.for('age')

对于Symbol.for('age') == Symbol.for('age') 的求值运算的值为true

标签: javascript ES6

评论(0) 浏览(299)

[Android]三种菜单显示方法

2020-2-21 张宇童 学习日志

android中的菜单分为三种:

第一种:选项菜单 optionMenu

第二种:上下文菜单 ContextMenu

第三种:弹出菜单 PopuMenu

首先介绍第一种的菜单选项菜单也是最简单的菜单

首先我们需要在resource中新建一个android资源目录 选择为Menu

1.gif

然后创建一个菜单文件 我在这里命名为option, 你们随意

2.gif

我在这里顺带提一下 item 里面的属性可以设置为showAsAction="always"为直译过来的意思是总是显示,就是说一直都能看见

3.png

然后我们在Activity中重写方法onCreateOptionMenu没记错的话,IDE会有提示的你们直接输入OCOM就直接出来了

我们在这里要使用getMenuInFlater().inFlater(Menu文件);

4.gif

然后我们运行

5.png

下面我们来介绍上下文菜单

我先介绍一下什么是上下文菜单吧

就是我们屏幕上假如有一个按钮

那么长按这个按钮就会跳出

so easy! 然我们现在就开始coding吧!

第一步  我们写一个组键 button

第二部 在Activity中注册组键

5.gif

下一步创建 contextMenu

6.gif

效果展示

7.gif

但是还没哟结束 context 还要一个形式

我也要说一下

我们让Activity实现ActionMode.Callback接口里面的几个方法

大家点击下面图片看视频

8.gif

然后我们给按钮加个监听

9.gif

10.png

标签: java android

评论(4) 浏览(1159)

MAC下安装配置Tomcat

2020-2-20 张宇童 学习日志

第一步我们进入官方网站https://tomcat.apache.org/download-80.cgi进行下载下图所示

w1.png

然后我们解压缩 复制到资源目录

w2.png

最后我们运行一下命令 

sudo sh ./bin/startup.sh

标签: tomcat java

评论(1) 浏览(636)

webpack服务器渲染react环境搭建

2019-12-23 张宇童 webpack

本片博客写给我自己看，他人如果看不懂可以留言

首先配置下需要设置

target: 'node',

安装webpack-node-externals

配置

externals: [nodeExternals()]

安装

isomorphic-style-loader

配置rules中cssloader

use:['isomorphic-style-loader', 'css-loader']

标签: react 后端 渲染

评论(1) 浏览(746)

webpack的代码分割配置代码,异步加载模块配置

2019-12-19 张宇童 webpack

需要在webpack.config.js配置中添加字段 optimization

首先在这里简单提一下

optimization 里面可以配置 tree shaking 

添加usedExports: true即可

下面我们进入正题

只需要在optimization里面添加配置

splitChunks: { chunks: 'all' }

即可 代码分割


配置异步加载

可以在函数里面直接import('xxxx') 

$ sudo cnpm i -D babel-plugin-dynamic-import-webpack
options: {
   "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
    ],
    plugins: ['dynamic-import-webpack']
},



标签: javascript

评论(3) 浏览(1006)

webpack开启热更新模块

2019-12-17 张宇童 学习日志

首先上代码

注意代码中的devServer

里面的hot、hotOnly都设置为true

拉下webpack的 HotModuleReplacementPlugin模块

然后实例化即可 

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports ={
  mode: 'development',
  devServer: {
    hot: true,
    hotOnly: true,
    contentBase: path.resolve(__dirname, 'dist')
  },
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

标签: 配置 webpack

评论(0) 浏览(654)

file-loader的placeholder占位符中文文档

2019-12-11 张宇童 webpack

这篇文章是我对照着webpack官方文档一个一个翻译的，绝非右键翻译。保证同学们能看得懂


[ext] 表示 文件的后缀

[name] 表示 当前文件名

[path] 表示 相对于webpack的路径

[folder] 表示源文件所在文件夹路径

[emoji] 表示一个随机的emoji表情

[emoji:<length>]  表示 自定义随机表情的数量

[hash] 表示文件的hash值

[contenthash] 也是一个hash值只不过是内容hash 上一个是文件名hash


标签: 配置 webpack

评论(0) 浏览(626)

Powered by emlog