- 博客(33)
- 资源 (1)
- 收藏
- 关注
原创 【react】源码总结
React 16 版本中初始渲染的流程核心过程逻辑细节jsx 转换成 react 元素rendercommit阶段(渲染层)为什么 React 16 版本中 render 阶段放弃了使用递归react16版本中commit阶段的三个子阶段before mutation阶段mutation阶段layoutworkInProgress Fiber 的意义核心过程JSX -> babel -> createElement -> ReactElement -> render ->
2021-05-20 10:21:24
717
1
原创 webpack开发全家桶
webpack开发全家桶开发环境配置webpack-dev-server配置 devServer 指定静态资源服务器路径配置代理服务,解决开发环境接口跨域问题配置 Source MapHMR — Hot Module Replacement使用方式HMR 注意事项多环境配置根据环境不同导出不同配置一个环境对应一个配置文件DefinePlugin示例webpack优化Tree ShakingconcatenateModulessideEffects代码分割多入口打包动态导入MiniCssExtractPlug
2021-05-16 11:50:30
991
2
原创 webpack打包-----plugin
为什么要用插件?loader 和plugin的区别loaderplugin常见的pluginclean-webpack-pluginhtml-webpack-plugincopy-webpack-plugin自定义plugin开发-----loader 和plugin的区别loaderloader:主要用于对模块源码的转换,因为webpack本身只支持js处理,loader描述了webpack如何处理非javascript模块,并且在build中引入这些依赖。loader可以将文件从不同css预处理转
2021-05-13 19:54:39
864
5
原创 webpack打包---编译转换
webpack 编译 ES2015webpack 默认只是对 js 模块的打包,并不会对 ES 新特性进行转化。import和export 默认能被打包,是因为这是eamodule的语法,但是其他es新特性语法并不会被转化,比如箭头函数并不会被编译成普通函数使用 babel-loader 转化 ES 新特性 npm install babel @babel/core @bable/preset-env module.rules 中使用 babel module: { ..
2021-05-12 20:38:54
560
原创 Webpack 打包---流程和loader
为什么要模块化?ES Modules 存在环境兼容问题模块文件过多,网络请求频繁所有的前端资源都需要模块化主流模块打包工具:webpack(适用于大型应用)、parcel(小型应用,快速开发测试demo)、rollup(适用于单模块开发)webpack 配置文件webpack.config.jsmodule.exports = { entry: './src/index.js', // 入口文件:相对路径不能省略 ./ output: { // 输出配置 filename:
2021-05-12 20:29:01
436
2
原创 手写VueRouter
手写VueRouter定义VueRouter类实现静态方法install存储路由对应的组件处理router-link,router-view浏览器前进后退事件处理定义VueRouter类export default class VueRouter {//构造函数中把参数存储下来constructor(options) { this.options = options this.routeMap = {}//用于存储路由对应的view组件 const cur = (
2021-05-12 20:13:51
182
原创 input blur事件与click事件冲突
今天在写一个输入框的联想搜索功能,像下面这样为了让交互更流畅,做了一个处理,当输入框聚焦的时候,才出下面的联想列表,失焦的时候隐藏,点击列表的时候,列表项回填到输入框里面,方案很完美。但是有一个问题,点击列表的时候,也触发了input的blur事件,而且blur事件还先执行,由于javascript是单线程的,事件得按顺序执行,这样轮到click事件执行的时候,列表已经隐藏了,这样就无法点击了,内容也就无法回填了。 两种解决办法 1 用mousedown去替代cl...
2020-05-26 18:48:31
1662
原创 canvas 画图----arc函数
arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是(圆心X坐标,圆心Y坐标,半径,开始角度(弧度),结束角度弧度,是否按照顺时针画);这个主要是用来画弧形的,有一些地方需要注意,调用arc的时候,canvas的宽和高必须写成width和height属性,否则画出的弧形会出现意想不到的问题:下面第一个图是将canvas的宽度和高度写在外
2014-08-12 15:59:56
2328
原创 web worker简介
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。
2014-08-08 15:53:01
7208
2
原创 jquery validate在ie8下的bug解决
jquery.validate在ie8下执行时,valid方法返回结果不正确,并且所有的字段都被当成必填项校验了。经过排查,问题出在attributeRules()方法上,可以尝试两种方法来解决。
2013-11-12 17:42:08
2388
原创 nodejs--express开发博客系统(三)
上一节的总结已经实现了登录、注册、发表文章和文章读取的功能,今天咱加上评论、文章页面和作者页面。 评论只能在进入文章页面后才能进行,所以咱们先写文章页面。 在上一节的代码中,我已经给文章标题添加了超链接了,//"> 根据这个链接地址,进入文章页面的路由控制就可以写成这样:app.get('/:user/:time/:title', functio
2013-09-16 11:35:22
3217
原创 nodejs--express开发个人博客(2)
上一部分已经实现了视图的雏形,现在加上逻辑操作。 登陆、注册、文章发表都需要用到数据库的数据存取,用的比较多的就是mongodb了。 MongoDB 是一个对象数据库,它没有表、行等概念,也没有固定的模式和结构,所有的数据以文档的形式存储。所谓文档就是一个关联数组式的对象,它的内部由属性组成,一个属性对应的值可能是一个数、字符串、日期、数组,甚至是一个嵌套的文档。下
2013-09-13 15:55:24
3443
原创 nodejs--express开发个人博客(-)
写完了入门笔记,开始进入开发阶段吧。基于上一节的内容,现在着手开发个人博客系统。先划分一下功能吧/:首页/login:登陆/reg:注册/post:发表文章/logout:退出首先规划一下路由控制,在现在的app.js中控制路由的语句是app.get('/', routes.index);app.get('/users', user.list);//路由控制每加
2013-09-13 12:06:23
4049
原创 nodejs入门笔记
今天决定整理一下nodejs的东西了,学习seajs的时候用到了它的npm命令来安装seajs,所以想着再回顾一下node了。 大概一个月之前接触的node.js吧,先自己看了下《Node.js开发指南》,看完了之后自己照着书上写了个例子,结果各种错误,很纠结的说。刚开始接触,也根本不知道怎么找错误,看不懂报错,不知道怎么解决,然后自己各种百度。最后算是搞明白了。这里说一点,《No
2013-09-13 10:36:24
2185
原创 如何给文件夹添加提示信息
今天整理了下自己的工作空间,文件夹可真多啊,好多因为日子久了,自己都忘记是干什么的了,也不敢盲目删除,只好一个个打开测试一遍,然后就想,下次要忘了怎么办?最好的方法当然就是给文件夹设置提示了,可是貌似没有哪个地方可以直接这样做,问了同事再百度之后,知道了,和广大程序员分享一下(都是写程序的,不容易啊)其实就是给desktop.ini增加一句InfoTip=bootstrap的demos!的配置
2013-09-12 18:45:40
2390
原创 jquery学习笔记
平时用jquery,但是用的比较简单,从来没系统的看过,今天看了一下,做了简单的笔记,了解到了一些以前根本就没想过的东西,希望对学习jquery新手有所帮助~
2013-09-12 12:00:16
1450
原创 Element.Event
今天学习mootools的事件处理。有一个问题花了我好长时间去研究,fireEvent的用法。官网上是这么介绍使用的:// fires all the added 'click' events and passes the Element 'anElement' after one second$('myElement').fireEvent('click', $('anElement'), 1000);我一直以为是将anElement的click事件绑定到btn1上,刚刚才搞明白,它只是强制触发事件
2013-09-11 17:47:05
1849
原创 Class属性Extends和Implements的区别
var Animal = new Class({ initialize: function(age){ this.age = age; }});var Cat = new Class({ Extends: Animal, initialize: function(name, age){ this.parent(age); // c
2013-09-10 10:25:52
9936
原创 json,jsonp,ajax学习笔记
对json用的挺多的,这几天做项目接触到了jsonp,然后自己就查了些资料,发现cnblogs里面有篇文章写的很详细,但是自己也没有那个账号,懒得注册,直接就从作者那里摘抄下来了,附上原文地址:http://kb.cnblogs.com/page/139725/ 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问
2013-09-09 17:24:36
1446
原创 Origin null is not allowed by Access-Control-Allow-Origin解决方案
今天学习mootools的ajax时候,遇到一个问题,页面和ajaxData.txt在同一个目录下,查了一下是浏览器的安全机制导致的:浏览器会禁止加载本地文件。如果把文件或者是整个工程放在服务器上就不会存在这个问题了。还有一种解决方案,就是在启动浏览器的时候修改启动参数: --allow-file-access-from-files
2013-09-09 10:51:43
4517
原创 GET和POST的区别
最普遍的答案GET使用URL或Cookie传参。而POST将数据放在BODY中。GET的URL会有长度上的限制,则POST的数据则可以非常大。POST比GET安全,因为数据在地址栏上不可见。这个答案还是Google搜索的头版头条,但是他们都不对。下面简单解释一下。1. GET和POST与数据如何传递没有关系GET和POST是由HTTP协议定义的。在HTTP协议中,M
2013-09-08 15:13:36
1341
转载 一行代码添加的页面效果
进入网页时淡入淡出的效果在头部head之间加入此代码,你会发现点击链接的时候,网页现实的是淡入淡出的效果。此代码含义如下:Page-Exit"(离开网页)、"Site-Enter"(进入站点)、"Site-Exit"(离开站点)其中"Duration=1.0″可以设定每个周期的时间为多久,单位是秒(现在设置的是每周期1秒)。彻底屏蔽鼠标右键此段代码加入区
2013-09-08 14:51:44
1137
原创 jquery1.9不支持browser对象的解决方案
最近因项目需要,要用jquery的cycle插件,但是项目里面一直用的都是jquery1.9,不支持browser对象,百度一下,找到了解决方案。在cycle插件的源码里面直接加上下面这段代码就可以了:(function(jQuery){ if(jQuery.browser) return; jQuery.browser = {}; jQuery.browser.mozilla
2013-09-05 11:00:49
1751
原创 mustache.js的使用说明
Mustache 是个不错的js模板引擎,源码:https://github.com/janl/mustache.jsmustache的一些说明:http://mustache.github.com/mustache.5.html下面是自己总结的一些小说明1、简单的变量替换{{name}} eg:var data={"name":"Jhon"};
2013-09-04 14:39:07
2591
原创 jquery转化为seajs模块
学习了模块化之后,接下来就该是各种实践了。因为习惯了用jquery,所以首先想到的一个问题肯定就是怎么把jquery转化为模块。要转化为模块,首先给jquery源码外面套一层define(function(require,exports,module){})然后对外暴露接口,用一种最简单的方式吧,通过return语句,即在jquery源码之后再加一句:return jQuery.n
2013-09-04 14:28:28
3126
原创 seajs配置
seajs.config({ // 别名配置 alias: { 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe', 'json': 'gallery/json/1.0.2/json', 'jquery': 'jquery/jquery/1.10.1/jquery' }, // 路径配置 p
2013-09-04 14:19:48
2223
原创 seajs--模块启动
首先引入seajs,然后使用seajs.use(“./a",[callback])seajs还可以并发加载多个模块:// // 并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调seajs.use(['./a', './b'], function(a, b) { a.init(); b.init();});seajs.use与DOM ready事件没有任何关系,若
2013-09-04 14:12:24
1718
原创 seajs的模块标识符和访问规则
模块标识是一个字符串,用来标识模块。在 require、 require.async 等加载函数中,第一个参数都是模块标识。Sea.js 中的模块标识是 CommonJS 模块标识 的超集: 1. 一个模块标识由斜线(/)分隔的多项组成。 2. 每一项必须是小驼峰字符串、 . 或 .. 。 3. 模块标识可以不包含文件后缀名,比如 .js 。 4.
2013-09-04 14:09:56
1385
原创 seajs使用说明
seajs是淘宝的前UED玉伯写的,可以在http://seajs.org/docs/看到更全面的说明在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:define(factory);def
2013-09-04 14:07:18
2037
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人