随笔分类 - Javascript
摘要：原文地址：http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在 "Webpack学习－工作原理（上）" 一文中我们就已经介绍了 的基本概念，同时知道了webpack其实很像一条生产线，要经过一系列处理流程后才能将源文件转换成我们理想的
阅读全文
摘要：以个人博客为例， "博客地址" 准备工作 安装 初始化 创建新文章 运行开发环境 构建 部署 详细准备工作，可以查阅 "hexo官网" 安装主题 "cactus" ，一个很程序员的主题，推荐！ 克隆仓库，并且将源文件复制到博客项目中 目录下 相关配置,详细解释可以看官方文档 Valine评论系统 配
阅读全文
摘要：什么是Loader? 继上两篇文章webpack工作原理介绍（ "上篇" 、 "下篇" ）,我们了解到 ，而且每个Loader的职责都是单一，只会完成一种转换，所以我们一般对源文件的处理，也是由多个Loader以链式顺序执行的方式来进行多次装换，然后得到我们要的结果。 那么这样Loader只需要关心
阅读全文
摘要：继上篇 "文章" 介绍了Webpack的基本概念，完整流程，以及打包过程中广播的一些事件的作用，这篇文章主要讲生成的chunk文件如何输出成具体的文件。分同步和异步两种情况来分析输出的文件 。 模块文件show.js 同步加载 生成的bundle文件 异步加载 经webpack打包会生成两个文件0.
阅读全文
摘要：对于webpack的认识始终停留在对脚手架的使用，不得不说脚手架既方便又好用，修改起来也方便，只需要知道webpack中各个配置项的功能，于是对于我们来说，webpack始终就是一个黑盒子，我们完全不清楚里面是如何去运作的。打包时报错，就只能借助google来协助帮忙解决问题，至于为什么要这样解决，
阅读全文
摘要：一、React初探 es6写法 "code" es5写法（遗憾的是现在最新版本的react，已经不再能使用createClass去创建react组件了 "code" ） 核心思想：封装组件，各个组件维护自己的状态(state, prop)和UI,当状态变更，自动重新渲染组件，数据流向是单向的。 需要
阅读全文
摘要："github地址" 本地安装环境准备 安装node： https://nodejs.org/en/download/ 配置webpack： npm install g webpack(sudo权限) windows配置cnpm： 当然也可以使用yarn下载 依赖包安装 进入项目目录 执行cnpm
阅读全文
摘要：github地址(内含简单例子) 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3) vue-loader(^12.2.1) eslint(^3.19.0) webp
阅读全文
摘要：github链接 借鉴吾记APP，使用 vue2.0+vue-router+vuex 为主要技术栈，elementui做为ui框架，多模块 spa 模式，webpack2.0 负责模块打包，gulp 负责处理静态资源打包、压缩，欢迎打赏star！！！ 安利一下 吾记前端构建流程 本地环境准备 安装n
阅读全文
摘要：github地址（欢迎star）：https://github.com/xiaobinwu/dj 版本：0.15.152900（暂未升级原因：升级后需要图片无法本地引用，必须使用image或是远程路径引用） 目录结构 css => 放置公用wxss,目前只有一个font.wcss image =>
阅读全文
摘要：最近几天在学习一个javascript库require.js，也看了一些相关的教学视频，这里推荐一下幕课网阿当老师的《阿当大话西游之Web组件》的教学视频，一整套看下来，参照视频里面的demo从头做一遍，对于require.js的使用以及web组件的编写挺有帮助的，作为菜鸟，看完后觉得获得更多的是一...
阅读全文
摘要：元素是HTML5中的绘图元素，通过定义一个画布区域，然后使用javascript动态地在这个区域里面绘制图形，对于2D和3D图形都可以绘制，我们将其分成2D上下文和WebGL两大块内容来一起来学习，但是WebGL觉得比较少用到，而且难，所以不讲了！一、了解canvas nothing ，这是便是一个...
阅读全文
摘要：前面一直在说自定义指令，但是却一直没有一次系统地去了解，现在需要我们一起来学习如何去使用自定义指令，去丰富html标签、属性，实现多元化、多功能的标签（或是属性）。辣么，啥是指令？要了解指令，首先需要了解AngularJs的HTML编译器，简单地说让浏览器认识你自定义指令或是Angular的指令集，...
阅读全文
摘要：到目前为止，我们所做的学习案例都是没有加任何动画效果的，对于以往来说，我们经常会去使用一些动画插件或是css框架（如：animate.css）来点缀我们的网页，这样显得生动，高大上，那么接下来我们可以学习一下，怎么在AngularJs下来实现叼酷炫的动画操作，主要使用的命令是ngAnimate。与之...
阅读全文
摘要：在使用form.FormController和ngModel.NgModelController之前，先来学习一下怎么一个ng-model-options指令，觉得怎么这个指令挺好用的，我们知道ng-model是可以实现数据的双向绑定，至于双向数据绑定这个概念时必须要清楚的，都是这样的一个过程，vi...
阅读全文
摘要：在学习笔记-AngularJs（六）提及了事件处理器和过滤器以及它们的例子，而我们知道之前我是使用$http服务去获得我们需要的json数据，但是$http是比较底层的用法，有时候我们想把获取json数据包装成一个服务，然后每个控制器只要直接依赖我们自己写的服务，就可以去获取需要的数据，那么就需要自...
阅读全文
摘要：在学习笔记-AngularJs（五），通过引入bootstrap.css进行改写整个样式，这时学习项目也变得好看多了，现在我们又需要目录再进行一次改变，如下图：这样就符合之前讲的对学习目录进行布置了！angualrJs自带了一些默认的过滤器，如：{{"xiaobin" | uppercase}}{{...
阅读全文
摘要：之前的页面太丑了，后来我引入了bootstrap.css，把样式进行修了一番，如下图（一不小心，插入个链接，忽略，http://t.cn/RUbL4rP）：（链接：http://www.live086.cn/angularjs/#/phones）是不是觉得好看多了，这里我在原先phone.json里...
阅读全文
摘要：之前学习的事视图与模版，我们在控制器文件中直接定义一个数组，让其在模版文件中用ng-repeat指令构造一个迭代器，定义的数组http://t.cn/RUbL4rP如同以下： $scope.phones = [ {'name':'xioabin','number':'188248...
阅读全文
摘要：学习笔记-AngularJs（二）写了个所有程序语言入门时都必须要写的Hello World，那么从现在开始做那个之前说过的互联网大佬介绍的学习例子，当然这里开始会慢慢按照之前说过的目录来搭建这个学习的demo，将控制器、过滤器、指令、服务、基本配置都独立成一个个js文件，直接贴张效果图（http:...
阅读全文