- 博客(116)
- 收藏
- 关注
RSS订阅转载 RegExp -- 常见四种正则方法
一、正则表达式1、match()方法调用let str = "梦的翅膀受伤了!"let res = str.match('翅膀')match() 方法可在字符串内检索指定的值，这个校验方法有点类似于数组/字符串的indexOf()和lastIndexOf()方法，只不过这两个方法返回的是指定值首次出现的下标索引，而match()返回两种结果：1.正常的校验指定字符，返回的则是...
2019-06-01 19:54:00
597
转载 RegExp -- 正则语法
一、正则语法正则表达式两种写法：Firstconst reg = new RegExp(/^\d/, 'g')secondconst reg = /^\d/g正则语法：+加号表示要匹配的字符至少出现一次，也可以出现n次const reg = /c+/g// 表示匹配c字符出现1到n次，只要有字符串中有c就可以匹配到?问号表示要匹配的字符可有可无const reg =...
2019-06-01 19:54:00
343
转载 Javascript -- call/apply/bind方法
一、call/apply/bind改变函数执行时，里面this指向对象callcall()方法里面第一个参数时this指向对象，第二个参数是函数执行时要传入的参数，只能一个一个的传入const obj = { a: '李狗蛋', b: '王翠花',}function Hello (s) { console.log(this) console.log('a='...
2019-06-01 15:39:00
247
转载 Javascript -- 数组prototype方法探究
一、数组prototype方法探究1、不改变原数组1. concat()这个是数组拼接方法，可以将两个数组或多个数组拼接并返回一个包含两个数组或多个数组内容的新数组，不会改变原数组方法里面理论上可以写入n个参数，const arr = [1,2];var str = 'Hello';var newArr = [3,4,5];const ComArr = arr.conca...
2019-06-01 14:31:00
330
转载 Javascript -- 数组去重方法
一、数组去重1、双循环去重var data = [1,2,4,3,5,2,1,3,2]var newData = []for(var i=0;i<data.length;i++) { for(var j=i+1;j<data.length;j++) { if (data[i] == data[j]) { // j = i = i + 1 ...
2019-06-01 09:15:00
167
转载 Javascript -- for循环索引值
一、循环索引正常的for循环，通过var来声明的变量，打印变量的结果始终都是数组最后一项的下标索引，如何获取数组每一项的索引？1、保存当前值每一次循环，就将当前数组的下标索引值保存到一个对象里面，这样就可以通过这个对象获取数组每一项的下标索引for(var i=0;i<data.length;i++) { // this.index = i alert(thi...
2019-06-01 09:13:00
513
转载 Javascript -- 数组方法学习
1、Array.from()参考文献这个方法比较有意思，可以将一个类似数组或可迭代对象分割，然后将值返回为一个新数组伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）可迭代对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/iterable)（可以获取对象中的元素,如 Map和 Set...
2019-06-01 09:05:00
190
转载 Javascript -- 数组迭代方法学习
一、数组迭代方法1、forEach调用arr.forEach((value, index) => { console.log(value, index)})forEach是循环遍历一遍数组的每一项，这个是没有返回值的，这个方法里面有个回调函数，回调函数有两个参数，第一个是数组每一项的值value，第二个参数是数组每一项对应的下标索引indexTips这个forEah...
2019-05-31 10:56:00
79
转载 React -- 简易项目实战
参考文献一、创建项目npx create-react-app myTest创建完成后，项目下面主要有public和src文件，前者是用来存放静态资源文件的，其中最主要的就是index.html文件，后者则是用来存放所有的react代码的项目搭建好后，切换进项目，执行npm start命令，即可在本地localhost:3000窗口打开项目二、修改app.js运行完成后，我们可...
2019-05-28 15:48:00
432
转载 React -- 脚手架书写react
一、脚手架工具react也有很多脚手架工具，通过脚手架工具可以快速搭建一个项目应用。官方推荐脚手架如果你是在学习 React 或创建一个新的单页应用Create React App如果你是在用 Node.js 构建服务端渲染的网站Next.js如果你是在构建面向内容的静态网站Gatsby二、create-react-app安装npx create-react-app...
2019-05-24 18:07:00
97
转载 React -- HTML文件编写react
一、基本概念要想在html文件里面书写和使用react，必须要明白三个方法和概念React这个是react的核心语法，是关键ReactDOM这个是react操作DOM的特殊方法，ReactDOM.render()Babel这个是解析es6语法的工具，让老旧浏览器能够识别那要获取这三个方法和概念，可以去下载响应的文件引入，也可以通过CDN引入，推荐CDN引入<script...
2019-05-24 11:59:00
309
转载 vue -- vuex的基本使用
Vuex基本使用及进阶一、下载vuex依赖npm install vuex -S二、启用vuex在src文件下创建store文件夹，在里面新建一个index.js文件，在文件里书写以下代码import Vue from 'vue'import Vuex from 'vuex'// 启用vuexVue.use(Vuex)// 声明vuex实例对象，创建四个对象属性e...
2019-05-23 15:56:00
125
转载 React -- state
一、新建state正常的react中，数据都是在传入的props对象中，但是props有个问题就是固定不变的，是不能修改的，所以需要state来把props里面的数据定义到state对象中来，这样就可以随意操作修改了class Son extends React.Component { constructor(props) { super(props) ...
2019-05-23 10:45:00
65
转载 React -- 组件封装&props
一、组件封装一个函数就是一个组件，该函数接受一个props对象，并返回一个React元素function Welcome(props) { return <h1>Hello, {props.name}</h1>;}通过class和React.Component也可以定义一个组件，跟上面的组件是等价的class Welcome extends Reac...
2019-05-22 18:33:00
107
转载 React -- jsx使用
一、jsx语法const element = <h1>Hello, world!</h1>;二、jsx嵌入表达式jsx的嵌入表达式，和vue的嵌入表达式不一样，vue的双大括号，jsx只是一个单大括号就行了const name = '不会代码的前端';const element = <h1>Hello, {name}</h1>;...
2019-05-22 17:35:00
60
转载 React -- 入门挖坑
一、创建项目新建一个文件，然后创建一个index.html文件，唉，看了react的官网教程，才知道什么叫做操蛋，妈的，简直就是东拉西扯，东拼西凑啊，根本不知道他在扯什么犊子。官网教程Hello World，跟着写，根本不知道写出个什么玩意儿，只能找资料看引入创建完成之后，就需要在html文件里面引入react.js文件，练习就用development，生成就用productio...
2019-05-22 17:07:00
81
转载 webpack -- 完整入门学习笔记（八）
一、webpack + vue在使用vue之前，需要安装vue解析配置模块安装npm install vue vue-loader vue-style-loader vue-template-compiler --save-dev配置这里分别配置一下vue文件的解析已经将css解析的style-loader修改成vue-style-loader调用注意这里有一个大坑，必须引...
2019-05-20 18:40:00
76
转载 webpack -- 完整入门学习笔记（七）
一、环境配置webpack在运行时可以根据运行环境的不同，可以操作不同的文件等，一般来说环境又开发环境和生产环境，而有可能公司事多弄个测试环境在node里面可以全局通过NODE_ENV来获取当前运行环境，从而进行不同的编译获取环境的代码process.env.NODE_ENV配置环境的方式有多种，这里个人知识有限，只列知道的三种方式1、mode通过mode来配置环境，不过这个...
2019-05-14 18:40:00
82
转载 webpack -- 完整入门学习笔记（六）
一、css压缩这一节主要讲压缩代码，正常我们打包生产环境代码，js文件已经是压缩的，但是css并没有压缩，所以需要通过插件来压缩css代码，这个插件是optimize-css-assets-webpack-plugin和cssnano安装npm install optimize-css-assets-webpack-plugin cssnano --save-dev调用配置...
2019-05-14 18:16:00
170
转载 webpack -- 完整入门学习笔记（五）
一、分离css这一步将css分离出来，需要用到分离插件，有两种：1、extract-text-webpack-plugin安装npm install extract-text-webpack-plugin --save--dev调用调用这个需要重新修改css的loader的配置{ test: /\.(sc|c)ss$/, use: ExtractTextPl...
2019-05-14 17:30:00
93
转载 webpack -- 完整入门学习笔记（四）
一、loader经过前面的一系列操作，已经初步完成了一个webpack项目，但是这个只有html文件和js文件，啥都没有，看起来不正常，我们需要给这个页面添加css样式，图片，字体图标等如何添加呢？通过loadercss添加css，需要style-loader和css-loader两个安装npm install style-loader css-loader --save-d...
2019-05-14 16:36:00
104
转载 webpack -- 完整入门学习笔记（三）
一、HtmlWebpackPlugin经过上面一番折腾，我们发现，虽然输出了内容，但是都是js文件，这个看不了，所以要想办法输出html文件，要想输出html文件，需要依赖插件html-webpack-plugin安装npm install html-webpack-plugin --save-dev调用安装完成后，还需要在plugins里面配置一下const HtmlWeb...
2019-05-14 11:20:00
189
转载 webpack -- 完整入门学习笔记（二）
一、entry入口文件在第一节配置webpack的配置文件，这一节我们就对里面一些配置进行一下探索，entry入口文件配置可以配置字符串，也可以配置数组，也可以配置对象其中字符串模式和数组都可以算作是单页面入口字符串const config = { entry: path.resolve(__dirname, './src/index.js')}数组const co...
2019-05-13 18:04:00
99
转载 webpack -- 完整入门学习笔记（一）
一、创建项目通过命令mkdir projectName和touch fileName创建项目和生成文件安装mkdir webpackDemo切换cd webpackDemo二、初始化NPM这一步是初始化npm，生成一个本地的json依赖文件，运行命令后，能够在webpackDemo下面看见一个package.json文件npm init -y三、安装webpackw...
2019-05-13 17:03:00
103
转载 webpack -- 代码压缩
一、代码压缩坑正常情况下，如果我们配置生成环境，webpack会自动帮js压缩，必须配置--mode=productionscripts: { "build": "webpack --mode-production"}但是如果我们要把css也压缩的话，问题就来了，css压缩npm install optimize-css-assets-webpack-plugin --...
2019-05-13 13:32:00
105
转载 webpack -- 代码分离
一、代码分离这里按照官网，配置extract-text-webpack-plugin，但是如果是webpack 4.0以上，就会报错，需要安装如下应用：报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead解决npm install extract-te...
2019-05-13 13:01:00
55
转载 webpack -- 配置开发环境
一、开发环境配置开发环境，需要安装webpack-dev-server模块npm install webpack-dev-server --save-dev二、配置开发环境在package.json文件的npm scripts对象里面，添加开发环境运行scripts: { "dev": "webpack-dev-server --open"}三、配置devServe...
2019-05-13 11:31:00
85
转载 webpack -- source-map
这玩意儿看完文档，加上大佬的解释，其实就是个错误追踪，能够告诉浏览器那里出错了，那个文件报错了，可以具体到哪一个文件，哪一行开发环境和生成环境是不一样的，生产环境可以不配置source-map，但是开发环境可以配置一下，因为source-map会影响浏览器加载，文件太大了，不过也可以在生产环境中配置一个source-map比如根据webpack文档，可以在开发环境配置inline-s...
2019-05-10 18:46:00
87
转载 webpack -- 清理dist文件
在配置webpack的过程中，我们发现，dist文件里面有很多我们不需要的文件，或者是之前产生的垃圾文件，所以需要插件帮我自动清理这些文件，只生成我们用到的文件npm install clean-webpack-plugin --save-dev按照webpack官网，我们配置完成发现，其实那个配置错的，这个插件传参必须是对象，不能是数组官网操作，很多网上的资料的操作也是这个pl...
2019-05-10 18:23:00
983
转载 webpack -- plugin插件
插件目的在于解决 loader 无法实现的其他事这里以html-webpack-plugin插件为例，这个是输出html文件的npm install html-webpack-plugin --save-dev然后就可以在插件里面配置了// webpack.config.jsplugins: [ new HtmlWebpackPlugin({ title: ...
2019-05-10 17:19:00
67
转载 webpack -- loader挖坑
这里以css为例npm install css-loader style-loader sass-loader node-sass postcss-loader autoprefixer --save-dev安装完成后的配置可以参考另一篇文章配置完成后，我们就可以在index.js里面import引入scss文件配置完成后我们就可以运行npm run build接下来就可以在a...
2019-05-10 16:58:00
64
转载 webpack -- mode挖坑
一、配置环境类型通过配置mode来告诉webpack当前运行的环境mode有三个选项，none，production(生产环境)，development(开发环境)二、配置环境(必须，特殊)配置mode，必须在webpack的内置插件里面配置一下环境const webpack = require('webpack')plugins: [ new webpack.De...
2019-05-10 16:32:00
239
转载 webpack -- output挖坑
一、配置输出文件output输出口必须是个对象，因为它必须有两个属性：filename输出出去的文件的名字，一般都是bundle.jspath文件要输出出去到哪里，一般都是dist文件output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist')}上面这个是单页面入口配置时的设定，在...
2019-05-10 16:06:00
72
转载 webpack -- entry入口挖坑
一、配置入口文件在webpack.config.js文件配置入口文件这里我们可以src里面新建几个js文件，作为入口文件输出entry后面可以是入口文件路径的字符串也可以是数组，数组会把多个路径整合到一个文件里面也可以是对象，对象就相当于每个入口文件会被单独输出正常的一般下面这种写法：module.exports = { entry: { app:...
2019-05-10 15:47:00
80
转载 webpack -- webpack安装
一、新建项目mkdir projectName切换到项目里面cd projectName二、初始化项目npm init -y三、安装webpack不推荐全局安装npm install webpack --save-dev// npm install webpack -g四、安装webpack-cli如果是webpack 4.0及以上版本，在安装webpack的同时...
2019-05-10 15:20:00
63
转载 webpack -- css的loader挖坑
一、入门级挖坑在项目中使用css的第一步，就是要在webpack里面配置相应的解析loader，因为webpack只能解析js文件，对于.css，.vue，.jsx，.json等这些文件它不会读，所以我们要安装loader来帮助一下所有loader都是在webpack.config.js文件里的module.rules数组里面配置的Tips每个loader都有基本都有两个配置项：...
2019-05-10 12:40:00
144
转载 伪类选择器水坑
区别：:单冒号就是伪类，::双冒号是伪元素一、:first-child & :last-child元素集的第一个子元素或者最后一个子元素二、:nth-child(n) & :nth-last-child(n)元素集的第n个子元素或者倒数第n个子元素，注意n从1开始，不是从0三、:only-child当一个元素里面只有一个子元素的时候起效，father son...
2019-05-07 16:27:00
49
转载 三栏布局原理水坑
一、浮动布局这个比较简单，直接通过左右浮动两个固定宽度的div即可，中间的div只需要左右margin一个等同固定宽度的值即可，padding也可以，不过看起来不是个完整的中间自适应，两边的padding的部分还是属于div的，放背景图，边框就会有问题了布局格式：一个大盒子里面包裹三个div，中间的div放在最后<div class="container"> &...
2019-05-07 15:37:00
86
转载 webpack入门级水坑
一、webpack+vue在vue项目中配置webpack的入门级配置项（至于node那些安装不说了）二、初始化输入初始化命令，生成package.josn文件npm init三、安装依赖包(node_module)生成初始化的modulenpm install四、配置webpack在vue项目中创建一个webpack.config.js文件，在这里配置webpack的...
2019-05-05 14:54:00
62
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人