- 博客(88)
- 收藏
- 关注
RSS订阅原创 webpack 源码解析一之启航
webpack 源码解析首先我们上 github 上面 clone 一份源码,我这里 clone 的是 4.30 版本的 webpack 源码git clone https://github.com/webpack/webpack.git起步首先,看一个源码的初始步骤就是打开 package.json 找到它的入口文件"main": "lib/webpack.js",确定了 ...
2019-05-17 14:42:36
699
原创 自用 cookie 操作函数
;module.exports = (function () { return { set: function ( name, value, duration = 3600 * 24, path = '/', domain = window.location.domain, secure = false )...
2018-12-11 17:23:05
262
原创 Node 全局变量
Node 全局变量 global除去一些 ES 中的全局对象、方法与变量， Node 还提供一些全局的内置方法、对象与变量用于帮助程序的执行。这些对象与方法能被应用在所有的模块中。可以使用 console.log(global)命令来查看全局对象与方法现在我们来查看一下这些全局的对象与方法。对象globalglobal用于挂载全局对象与方法。console控制台对象，用...
2018-12-03 20:39:24
1520
原创 ES6 模块语法
ES6 模块语法ES6 中引入了 export, import 来用于导入与导出。export 导出使用 export 关键字来导出一个变量(常量)export const someValue = 1234export const someValue0 = '1234'export const someValue1 = {}export let someValue2 = 12...
2018-09-28 11:54:03
1043
原创 redux 源码解析
目录结构.├── applyMiddleware.js // 使用中间件模块，有了它就可以组合中间件一起使用├── bindActionCreators.js├── combineReducers.js├── compose.js // 组成函数，用于把函数列表组合成一个嵌套执行的函数├── createStore.js├── inde...
2018-09-25 14:08:29
236
原创 使用原生 js 复制内容到剪贴板
let oInput = document.createElement('input') oInput.value = 'some message' document.body.appendChild(oInput) oInput.select() document.execCommand("Copy") ...
2018-06-19 19:46:02
5097
原创 工作一年，重新思考闭包
功能延长变量生存周期一个经典的例子，这个时候我们就可以看到变量会随着函数的退出而随着作用域销毁。如果我们想要长久的保存这个变量怎么办，这个时候，我们就可以用到闭包了。再举一个例子，我们都知道 Object.prototype.toString.call(this) === '[object XXXX]' 用来判断类型是一个非常好用的例子，如果我们需要判断多个类型的话。当然不...
2018-06-02 16:08:22
449
2
原创 react registerServiceWorker.js
registerServiceWorker.js首先我们查看一个这个js文件的说明就可以看出其主要的含义了// In production, we register a service worker to serve assets from local cache.// This lets the app load faster on subsequent visits in pr...
2018-04-27 15:42:37
10832
原创 react学习(一)-初始项目
安装脚手架开始一个项目，我们一般都希望使用最快最简单的方式来快速生成项目结构，然后在此基础上进行快速的开发。这个时候就要使用脚手架了，也就是根据现在的社区经验，得出来最佳初始实例。使用 react开发的时候，我们就可以使用官方提供 create-react-app 脚手架来进行快速的开发。这里我们使用 npm 来进行安装。npm install -g create-react-app# 国内用户建
2018-04-13 14:30:22
539
原创 Node 代理请求处理跨域
在平时工作中，我们经常遇到这种情况，后端给我们提供了接口，但是在本地开发环境开发的时候会遇到跨域的问题，这个时候，后端由于一些安全性的考虑，不愿意配置跨域信息。这个时候，我们就要自己搭建 node 服务器来转发请求，以实现跨域安装环境npm init -ynpm i request standard pm2 nodemon --save配置 node script...
2018-03-21 13:21:23
4376
1
原创 HTTP 协商缓存
Last-Modified与If-Modified-Since如果没有任何缓存策略，那么浏览器会默认开启它。这个时候，我们发起请求，那么就会看在 response 里有一个字段 Last-Modified：然后下一次请求的时候，浏览器会就把这个 Last-Modified 中的内容加到 request 中。变成 If-Modified-Since 字段的内容。这个时候，服务器...
2018-03-19 23:08:26
1469
原创 Koa2 入门实践
第一个例子：启动初始化项目，安装环境# -y 就是不想自己逐条配置，直接全部使用默认配置npm init -y# 安装 koa 并写入 package.json 中npm i koa --save# 好的代码规范还是必要的npm i standard --save-dev# 安装 nodemon 用于开发环境快速自动重启npm i -g nodemon配...
2018-03-18 15:56:11
2018
原创 node 使用 sequelize 操作数据库不完全指北
开始步骤npm init -y安装依赖npm i sequelize mysql2 standard --save连接数据库建立连接 新建一个 db.js// 引入依赖let Sequelize = require('sequelize')// 导出新建的连接数据库实例，方便在其它文件中引用module.exports = new ...
2018-03-11 14:15:37
2911
原创 vuex 源码解析
目录分析# 首先 clone 一下项目git clone https://github.com/vuejs/vuex.git# 然后进入源码目录cd ./vuex/src# 源码目录结构.├── helpers.js // 提供 action、 mutations 以及 getters 的查找 API├── index.esm.js├── inde...
2018-03-01 10:56:12
3230
原创 用CSS画一只哆啦A梦
核心方法是使用 box-shandow 阴影来进行一些操作。我们可以阴影的控制，当然，我们可以设置多个阴影，且在渐变项为 0 的时候，其实就是绘制出了单纯的色块。效果如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g
2018-02-16 15:43:15
2237
原创 underscore 源码解析
(function() { // 先判断全局环境是什么，如果存在 self 那就是浏览器端，如果存在 global 那就是 node 端。如果是其它的神奇的地方，那就是 this 或者 {} var root = typeof self == 'object' && self.self === self && self || typ...
2018-02-13 20:35:44
937
原创 移动端响应布局的LESS解决方案
在移动端布局的时候，因为不同机型有着不一样的屏幕宽度，是故我们经常对页面做出不同的布局，有时候，有些机型的差距不大，所以我们没有必要进行多次的重复劳动，所以我们使用响应式布局。下面是我的一种解决文案，可以让同一个设计稿在多个不同的环境达到相同的效果。// 这里的 7.5 指的是设计稿使用的是标准尺寸是 750 px. 可以根据不同的情况进行修改html { font-size...
2018-02-08 17:00:58
1205
原创 Vue组件实战之ivew源码button篇
源码template> div :class="wrapClasses"> template v-if="type !== 'textarea'"> div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotRead
2018-02-06 23:59:21
2913
原创 Vue组件实战之ivew源码Icon篇
源码template> i :class="classes" :style="styles">i>template>script> const prefixCls = 'ivu-icon'; export default { name: 'Icon', props: { type: String,
2018-02-06 23:58:10
3601
原创 读高性能Javascript笔记
把一段内嵌脚本放在引用外链样式表的 标签之后,会导致页面阻塞去等待样式表的下载. 这样做是为了内嵌脚本在执行时能够获得最精准的样式信息.下载同一个 CDN 下的多个 JS 文件,可以这么写:script src="http://apps.bdimg.com?/libs/jquery/2.1.4/jquery.min.js&libs/angular.js/1.5.0-beta.0/a
2018-01-28 20:40:35
212
原创 Zepto源码之Ajax模块
;(function($){ var jsonpID = +new Date(), document = window.document, key, name, rscript = /)/gi, scriptTypeRE = /^(?:text|application)\/javascript/i, xmlTypeRE =
2018-01-19 15:20:54
239
原创 Zepto源码之fx_methods模块
;(function($, undefined){ var document = window.document, origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle // 内部方法，主要是用于配置参数，然后调用 $.animate function anim(el, speed, opa
2018-01-16 14:44:17
326
原创 Zepto源码之fx模块
;(function($, undefined){ var prefix = '', eventPrefix, vendors = { Webkit: 'webkit', Moz: '', O: 'o' }, testEl = document.createElement('div'), supportedTransforms = /^((translate|rotat
2018-01-16 14:18:23
436
原创 Zepto源码之deferred模块
这个其实就是一种对 Promise/A+ 规范的实现。;(function($){ var slice = Array.prototype.slice function Deferred(func) { // 用于储存状态切换的方法名，与对应的执行方法 // $.Callback({once:1,memory:1}) 用来表示只执行一次，且立即触发 va
2018-01-15 16:21:53
466
原创 Zepto源码之form模块
;(function($){ $.fn.serializeArray = function() { var name, type, result = [], add = function(value) { // 内部方法 add ,如果传入的参数存在 forEach 方法，那么通过 forEach 调用 add 方法 // 如果不存在 forEach
2018-01-15 13:54:25
246
原创 Zepto源码之selector模块
使用的正则： (.):(\w+)(?:\(([^)]+)\))?$\s图形化展示： ;(function($){ var zepto = $.zepto, oldQsa = zepto.qsa, oldMatches = zepto.matches // 判断元素是否可见 function visible(elem){ // 先将元素转化成一个 zepto 对
2018-01-15 10:47:08
409
原创 Zepto源码之gusture模块
gesture 模块是针对 IOS 系统上浏览器的 gesture 事件进行的封装。;(function($){ // 判断系统是不是 ios if ($.os.ios) { var gesture = {}, gestureTimeout // 获取目标节点，如果目标节点不是元素节点，那么获取父节点 function parentIfText(nod
2018-01-15 10:11:20
372
原创 Zepto源码之touch模块
;(function($){ var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture, down, up, move, eventMap, initialized = false // 滑动方向
2018-01-13 21:54:52
994
原创 Zepto源码之callback模块
整体结构;(function($){ $.Callbacks = function(options) { Callbacks = { // code } return Callbacks }})(Zepto)从整体上来看，我们可以看到，其实就是向 Zepto 对象上添加了一个 Callbacks
2018-01-12 14:56:00
270
原创 Zepto源码之data模块
;(function($){ var data = {}, dataAttr = $.fn.data, camelize = $.camelCase, exp = $.expando = 'Zepto' + (+new Date()), emptyArray = [] // 获取 node 节点的指定属性名的值 function getData(node, name) {
2018-01-12 11:27:13
297
原创 Zepto源码之ie模块
;(function(){ try { getComputedStyle(undefined) } catch(e) { var nativeGetComputedStyle = getComputedStyle window.getComputedStyle = function(element, pseudoElement){ try {
2018-01-12 10:22:04
198
原创 Zepto源码之ios3模块
;(function(undefined){ // 针对 iOS 3.2 及以下版本的 ipad, iphone 自带浏览器String对象不带trim做的浏览器polyfill if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function(){ return
2018-01-11 14:27:18
233
原创 Zepto源码之stack模块
;(function($){ $.fn.end = function(){ return this.prevObject || $() } $.fn.andSelf = function(){ return this.add(this.prevObject || $()) } 'filter,add,not,eq,first,last,find,closes
2018-01-11 11:56:56
215
原创 Zepto源码之assets模块
;(function($){ var cache = [], timeout $.fn.remove = function(){ return this.each(function(){ if(this.parentNode){ if(this.tagName === 'IMG'){ cache.push(this)
2018-01-11 11:13:57
262
原创 Zepto源码之$.fn工具函数
$.fn.get 从当前对象集合中获取所有元素或单个元素。当index参数不存在的时，以普通数组的方式返回所有的元素。当指定index时，只返回该置的元素。这点与eq不同，该方法返回的是DOM节点，不是Zepto对象集合。get: function(idx){ return idx === undefined ? slice.call(this) : this[idx
2018-01-08 10:49:08
911
原创 Zepto源码之工具函数
$.each 遍历数组元素或以key-value值对方式遍历对象。回调函数返回 false 时停止遍历。关于为什么使用它，而不使用原生的 forEach 方法，我的看法是 .each传入参数是index,element而forEach的传入参数是element,index,arr。所以使用.each 传入参数是 index, element 而 forEach 的传入参数是 ele
2018-01-05 11:16:01
218
原创 Zepto源码之辅助函数
用于判断类型的内部函数// class2type对象与toString方法的定义class2type = {}toString = class2type.toString// 调用 $.each 给 class2type 对象设置属性与参数，里面有全部常用的参数类型// PS:说多一句，ES6中新增Symbol类型$.each("Boolean Number String Fu
2018-01-04 17:31:43
477
原创 Zepto源码之代码结构
源码GITHUB地址： git@github.com:madrobby/zepto.git首先我们查看一下代码结构 其中 zepto.js 是其中主文件，本篇文章主要讲述的内容就是它：代码结构我们首先使用一下代码折叠，查看一下主要结构 var Zepto = (function(){ // code})()由此我们可以看出 zepto 使用的
2018-01-02 12:05:57
279
原创 Vue组件与组件间通信
组件的用法注册之后才能使用，注册分局部注册和全局注册组件和Vue实例类似，基本可以使用其所有内容（data,computed,methods,filters,watch)与Vue实例不同，data是函数，输入需要return全局注册<!DOCTYPE html><html><head> <title>show</title> <meta charset="utf-8"></head><b
2017-12-28 19:53:25
464
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人