JavaScript
素者素心
喜欢研究新技术和做素食
展开
-
webpack从入门到会玩(5)- js语法检查
概述 实际工作中很多时候都是多人协同开发一个项目,这时需要保证大家的代码可读性和规范性,所以webpack提供了js语法检查功能eslint,可以让团队中的每位成员都保持相近的编码风格。 准备工作 新建一个项目eslint-demo,基本配置一下webpack。 index.js(写一个格式很丑的js): function sum(a,b){ return a+b } sum(1,2) index.html: <!DOCTYPE html> <html lang="en"&g原创 2020-08-31 23:44:16 · 412 阅读 · 1 评论 -
webpack从入门到会玩(4)- 其他资源
概述 前端项目中出了html、js、css、图片等资源之外,还会有其他的资源,比如视频、iconfont等。这些资源一般不需要webpack怎么处理,直接输出到指定的目录就可以了。 下面就用iconfont来举个例子吧,新建一个media-demo项目,然后去阿里巴巴的iconfont.cn下载一些图标,放到项目里,图标文件放到media目录,css文件放到styles目路,css文件里面读取图标资源的路径记得改一下,index.js中引用iconfont.css,在index.html中添加图标引用,we原创 2020-08-31 00:05:30 · 189 阅读 · 0 评论 -
webpack从入门到会玩(3)- 图片资源
文章目录环境准备安装loader配置loader图片提取构建 环境准备 免得配置开启了太复杂,重新创建一个image-demo项目,并对webpack作一些简单配置。 index.js: console.log('入口模块') index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=原创 2020-08-29 13:22:12 · 218 阅读 · 0 评论 -
webpack从入门到会玩(2)- 样式资源
webpack处理样式文件 前面讲到了webpack默认只能处理JS和JSON文件,那么项目中的其他资源有怎么处理呢?我们先来看看样式文件的处理方式吧。 把demo项目的目录定义的规范一些: 把index.js移动到js目录中,新建了一个styles目录,里面新建一个index.css,简单写一些样式。 index.css: html, body { margin: 0; padding: 0; } .box1 { width: 100px; height: 200px;原创 2020-08-27 10:16:32 · 134 阅读 · 0 评论 -
webpack从入门到会玩(1)- 简介
什么是webpack 在目前的大前端时代,前端工程化和模块化开发已经非常普遍,从一个入口的JS文件开始,通过require函数或者import关键字等方式建立起一个复杂的模块依赖网络,加上CSS预处理less/sass/stylus等技术的广泛使用,可以说前端项目现在已经变得空前复杂。遗憾的是,浏览器并不认识模块化的JS代码,也不认识CSS预处理的样式代码,所以需要一个工具将这些模块化的代码转换成浏览器认识的原生的静态资源,webpack的核心功能就是这个。 本质上,webpack 是一个现代 JavaSc原创 2020-08-25 23:59:47 · 719 阅读 · 0 评论 -
webpack学习笔记
什么是webpack webpack是前端打包工具,能让浏览器支持模块化,自动分析项目的所有依赖关系,然后按照指定的规则生产对应的静态资源。 官网在这:https://www.webpackjs.com/ webpack核心主要进行 JavaScript 资源打包 如下图,它可以结合其他插件工具,将多种静态资源css、png、sass 分类转换成一个个静态文件,这样可以减少页面的请求。 可集成 babel 工具实现 EcmaScript 6 转 EcmaScript 5 ,解决兼容性问题 可集成 http原创 2020-07-31 11:55:57 · 382 阅读 · 0 评论 -
Vue源码学习(3)——计算属性computed实现原理
文章目录前言实现原理分析initStateinitComputeddefineComputedWatcher对计算属性的处理总结 前言 看这篇文章之前最好先对Vue的MVVM实现原理有一定的认识,因为这是Vue的核心概念,其他的工具大部分都是在此之上锦上添花,如果你不是很了解,可以先看看这篇文章: Vue的MVVM原理 实现原理分析 initState 在Vue源码的src/core/instance/state.js中,我们可以看到有个initState方法,里面有一个initComputed方法的调用,原创 2020-07-28 19:07:33 · 752 阅读 · 1 评论 -
Vue源码学习(2)——Vue侦听器watch实现原理
文章目录前言实现原理分析initStateinitWatchcreateWatchervm.$watch实现侦听总结 前言 看这篇文章之前最好先对Vue的MVVM实现原理有一定的认识,因为这是Vue的核心概念,其他的工具大部分都是在此之上锦上添花,如果你不是很了解,可以先看看这篇文章: Vue的MVVM原理 实现原理分析 initState 在Vue源码的src/core/instance/state.js中,我们可以看到有个initState方法,里面有一个initWatch方法的调用,在这个初始化wat原创 2020-07-27 16:38:24 · 684 阅读 · 0 评论 -
Vue源码学习(1)——Vue的MVVM原理
前言 虽然很多人写过这样的文章了,但是看别人的一百遍还不如自己写一遍,整理好写出来就是自己的了,不会忘记。所以还是自己写一次吧,哈哈! 什么是MVVM MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。(来自百度的解释_) 其实就是通过ViewModel的处理,将View和Model的解耦,不需要自己根据Model的数据变化去操作View的DOM,达到的效果就是我们可以专注写业务原创 2020-07-25 15:14:20 · 402 阅读 · 2 评论