JavaScript
JS
「已注销」
好好学习 好好生活
展开
-
webpack中webpack.config.js的相关配置表
关于webpack打包 一个相对比较完整的配置表 包括文件入口(单入口、多入口) 输出(输出文件名,多个入口对应多个输出、hash值生成文件) 资源发布(Url前缀、cdn) 导出库 chunk文件 异步加载 配置模块相关 loader(配置先后顺序) plugin(别名模块) 输出文件性能 devserver相关配置 const path = require('path'); module.exports = { // entry 表示 入口,Webpack 执行构建的第一步将从 Entry 开始,原创 2020-12-14 11:36:07 · 117 阅读 · 0 评论 -
webpack打包(离开脚手架,你还好吗)
webpack打包 有关于webpack打包在上一篇博客有说过 这里的话主要还是想说说 vue 的打包 没有了脚手架,你的项目还好吗? 大致的目录结构列一下: 关于项目的代码就不贴了,主要还是说下关于打包: const path = require("path"); const { VueLoaderPlugin } = require("vue-loader"); const HTMLPlugin = require('html-webpack-plugin'); const webpack =原创 2020-12-14 01:34:47 · 99 阅读 · 0 评论 -
webpack再度学习
webpack webpack致力于打包模块化的 javascript ,在 webpack 一切皆是模块,通过 Loader 转换文件没通过 Plugin 注入钩子,最后输出模块组合成的文件 也就是说,所有的文件包括 (sass,ts) 这种都会编译成对应的css、js代码,一切模块中在 webpack 那里都是一个个模块,在方便的情况下(左图中将文件先转换)进行组合打包,经过webpack处理,最后输出浏览器可以使用的静态资源。 主要核心模块 入口(input) 输出(output) loader原创 2020-12-14 00:46:00 · 91 阅读 · 1 评论 -
关于ES6的let、const那些事儿
Babel 转码器 Babel是广泛使用的一个ES6转换器,将ES6代码转换成ES5代码,从而实现在老版本的浏览器执行。 let和const命令 let所声明的变量只在let命令所在的代码块内是有效的。 { let a = 10; var b = 1; } a // 10 b // index.html:16 Uncaught ReferenceError: b is not defined 通过let给出了变量的作用域问题,在我们通常的for循环使用比较方便 var a = [原创 2020-09-26 11:06:33 · 385 阅读 · 0 评论 -
Vue组件开发,个人博客页面demo
组件化开发 首先,组件化开发不是前端所特有的东西。就我个人的理解而言。首先,从字面上去看,组件化开发:也就是将整体分割成一个个小的组件,将整体进行细化就是组件化。 每一个组件都是一个个独立的个体,也就是说,在其他的需要用某一个组件的时候可以复用,大大的避免了重复写相同代码。 从这个地方,我们可以看出,组件化设计就是为了增加复用性、灵活性、提高系统的设计,提升开发效率。 组件化的演变 这一段呢,我是借鉴别人的说法,到时候自己理解清楚了再来说说自己的想法。 在早期的前端开发的过程中,我们会经常使用JQuery,原创 2020-09-26 11:12:27 · 629 阅读 · 0 评论 -
关于Vue的那些事儿
Vue 渐进式框架 众前端周知,Vue是一套用于构建用户界面的渐进式框架,自底向上逐层应用,关注视图层。那我们就来说道说道: 渐进式:声明式渲染->组件系统->客户端路由(router)->数据管理状态(Vuex)->构建工具(npm) 所谓的渐进式:我觉得就是渐进嘛,一步一步来,首先Vue给了你核心的Vue核心库,实现最基本的组件系统、双向数据绑定。但是你要新的,强大的功能,可以啊,没有问题,自己添加嘛,逐步根据自己的需求添加相应的插件。就比如说:你需要路由了,你去添加Vue-ro原创 2020-09-26 11:13:28 · 396 阅读 · 0 评论 -
关于Vue-loader的那些事儿
什么是Vue-loader 一个webpack的加载器,负责将vue组件编译成普通的JavaScript模块。 关于webpack的介绍 这里呢?用到webpack,在项目的编译打包的过程中,将复杂的 注入依赖的模块 进行打包处理,形成 静态的资源文件。也就是说,我们有很多的JS模块,他们之间相互联系,但是作为浏览器,并不能将其直接运行,所以我们需要将其打包到一个可以通过script标签引入的独立文件。 Vue的组件规范 一个 *.vue 文件是一种自定义的文件格式,主要包括template\script\原创 2020-09-26 11:14:12 · 496 阅读 · 0 评论 -
关于Vue-CLI的那些事儿
Vue CLI是基于Vue.js进行快速发展的完整系统,提供了: 交互式的项目脚手架 实现零配件的原型开发 图形化的创建和管理项目的界面 基本框架的构建: . ├── build/ # webpack 配置文件 │ └── ... ├── config/ │ ├── index.js # 项目核心配置 │ └── ... ├── src/ │ ├── main.js原创 2020-09-26 11:15:08 · 410 阅读 · 0 评论 -
关于Vue-Router的那些事儿
Vue-Router Vu-router是Vue.js的官方路由管理器,方便于构建页面,在我们的使用过程中,一般是在router的index.js文件中配置对应的组件和对应的路径 主要的功能 嵌套路由 模块化的、基于组件的路由配置 路由参数、查询、通配符 视图过度效果 细粒度的导航控制 核心文件 router中的index.js文件 // 引入vue框架 import Vue from 'vue' // 引入vue-router路由依赖 import Router from 'vue-router' /原创 2020-09-26 11:15:47 · 419 阅读 · 0 评论 -
关于Vuex的那些事儿
vuex vuex是一个专门为Vue.js应用程序开发的状态管理模式,集中式的存储应用的所有组件的状态 以相应的规则保证状态以一种可预测的方式发生变化 单向数据流 State:驱动应用的数据源(单向数据流) View:以声明的方式将State映射到视图(静态的显示出来的数据源) Actions:处理用户在View上面的操作而导致的状态变化(数据源变化追踪) 一般文件都是放在store文件下的index.js中 import Vue from 'vue' import Vuex from 'vuex'原创 2020-09-27 11:31:38 · 374 阅读 · 0 评论 -
Vue的属性、事件、插槽
属性 自定义属性props ->组件的propos中声明的属性 原生属性attrs ->没有声明属性,默认自动挂载在组件的根元素上,inheritAttrs可以关闭自动挂载 特殊属性class、style ->挂载到组件根元素上,支持字符串、对象、数组等多种用法 子组件为何不可以修改父组件传递的propos? 如果修改了,Vue是如何监控到属性的修改并给出警告的? 按个人的理解的话:由于单向数据流,属性只能通过父组件传递到自组件,但是不能反过来,至于Vue监控属性的修改给出警告的话,原创 2020-09-27 11:33:16 · 542 阅读 · 0 评论 -
NodeJS开篇,再来一遍
2020.11.14 Nodejs 的真正用途 Nodejs,一个 javascript 的运行环境 运行在服务器,作为 web server 运行在本地,作为打包,构建工具 Nodejs 的困惑 Nodejs 运行在服务端,也就是说偏向后端 Nodejs 介绍 下载&安装(nvm :nodejs 的版本管理工具,可以切换多个 nodejs 版本) mac:brew install nvm windows:转用 nvm,我们在开发或者使用别人的代码的时候需要注意的一个点就是版本不一致问题 这时候 n原创 2020-11-28 15:37:26 · 348 阅读 · 0 评论 -
Node之CommonJS,为什么模块该这么写
2020.11.14 CommonJS规范 Node应用由模块组成,采用CommonJS模板规范 每个文件就是一个模块,有自己的作用域。在一个文件里定义的数量、函数、类,都是私有的,对其他文件不可见 用 global 对象定义的属性可以在多个文件分享变量。 CommonJS规范规定,在每个模块内部,module变量代表当前模块,这个变量是一个对象,exports就是一个对外的接口,加载模块的时候其实也就是加载这个模块的属性。 特点: 所有的代码都运行在模块的作用域,不会污染全局作用域 模块可以被多次加载,原创 2020-11-28 15:39:41 · 393 阅读 · 0 评论 -
一文带你了解回调函数
回调函数 在Nodejs中callback可谓是很重要的一部分了,所以有必要把回调函数大致总结一下。 回调函数 A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。 回调函数就是将这个函数B作为参数传递到另一个函数A中,当那个函数B执行完毕之后,再执行现在的函数,这个过程就是回调。 也就是说,原创 2020-11-28 14:20:18 · 444 阅读 · 0 评论 -
详谈JavaScript原型链
JavaScript原型链 JavaScript继承 继承一直是面向对象津津乐道的一个重要的概念。主要分为接口继承和实现继承。在JS中只有实现继承,而其中主要就是通过原型链实现的。由此,原型链有多重要就不言而喻了。 构造函数、原型、实例 先明确几个点(构造函数、原型、实例): 每个构造函数都有一个原型对象(prototype),原型对象会有一个指回构造函数的指针(constructor),每个实例都包含一个指向原型对象的内部指针(proto),构造函数通过(new)生成, 然后,什么是原型对象?什么是实例原创 2020-10-13 02:06:25 · 395 阅读 · 0 评论 -
Uncaught TypeError: Cannot set property ‘display‘ of undefined解决
Uncaught TypeError: Cannot set property ‘display’ of undefined解决 直接上图 开始在写代码的时候,想直接利用 var sub_mean = document.getElementsByClassName('sub_mean'); 来获取所有的二级子元素 然后有一个比较骚的操作就是想直接实现通过 sub_mean.style.display = "block"; 直接获取到元素的display属性,奈何自己还是太年轻,这明明就是一个集合的元原创 2020-09-28 02:15:50 · 1373 阅读 · 0 评论 -
重学Ajax
什么是Ajax Asynchronous JavaScript and xml 异步的JavaScript和XML 只是一种js的应用,在无需重新加载整个网页的情况下实现部分网页的数据更新的技术。减少和后台的交互,实现局部、异步更新 同步和异步 同步 客户端的请求发送之后等待服务器处理,处理之后相应,在处理成功之后载入页面,但是,当页面中的内容有问题时还是需要重新编写,重复上一个过程 异步 客户端在填写数据的同时,发送消息给服务器端,同时服务器端进行相关的处理,最后达到边填写边处理的情况,实现异步操作,不原创 2020-09-26 11:09:38 · 354 阅读 · 0 评论 -
jQuery的基本使用、实践、效果、API
#jQuery概述 j-JavaScript+Query就是查询js的库,把js中的DOM操作做了封装,实现快速查询使用其中的功能。 优化了DOM操作、事件处理、动画设计和Ajax交互 学习jQuery的本质:学习调用函数方法 优点:轻量级、兼容、链式编程、隐式迭代、对事件、样式、动画支持,大大简化了DOM操作,支持插件扩展开发 #jQuery基本使用 1.入口函数等待DOM加载完毕再去执行JS代码 $(document).ready(function () { ... }) $(function原创 2020-09-26 11:07:42 · 377 阅读 · 0 评论