├── .DS_Store ├── CssAndHTML ├── 01css基础 │ ├── 000css基础-属性.md │ ├── 001css基础-选择符-重要.md │ ├── 010-width 百分比取值相对基准问题.md │ ├── 011-varticalAlign.md │ ├── 012-清除浮动的方式：.md │ ├── 013-怪异盒模型box-sizing.md │ ├── 014line-height重要.md │ ├── 018html基础.md │ ├── 019mouseout-mouseleave和mouseover-mouseenter的区别.md │ ├── 020css3新增特性.md │ ├── 022compositionEnd事件.md │ ├── 023less-Overview.md │ ├── 024.verticalAlign和lineHeight.md │ ├── 026DomNodeAPI.md │ ├── 027css属性适用基础.md │ ├── 02margin auto position.md │ ├── 03-居中的N中方式.md │ ├── 04style和getComputedstyle区别.md │ ├── 05transition transform body渐变色填充.md │ ├── 06 伪类选择符 关系选择符.md │ ├── 07background-position.md │ ├── 08定位布局.md │ └── 09-CSS3 background 背景.md ├── 02css进阶 │ ├── 000css-html-style-guide.md │ ├── 001css技巧总结.md │ ├── 002伪对象使用技巧.md │ ├── 003适配iphoneX.md │ ├── 004前端冷知识.md │ ├── 015flex布局.md │ ├── 016BFC特性.md │ ├── 017如何解决移动端两栏自适应的问题？.md │ ├── 021Css Animation.md │ ├── 025css 案例.md │ ├── 028position属性详解-包含块.md │ ├── 029margin合并.md │ ├── 030float属性详解.md │ └── 031css两列布局-三列布局.md ├── 03css世界 │ └── 01css世界-流.md ├── 04基础知识回顾 │ ├── 01HTML最基础-DOM.md │ ├── 02HTML最基础-BOM.md │ ├── 02JS最基础.md │ └── 03CSS最基础.md └── 文章链接.md ├── Docker ├── 01-docker命令.md ├── 02Dockerfile.md └── README.md ├── Flutter ├── 01dart语法基础-变量-函数-类.md └── 01dart语法基础-异常-泛型-库.md ├── HTTP ├── 001CDN.md ├── 002DNS.md ├── 003XSS和CSRF.md ├── 004HTTP常见误区总结.md ├── 005DNS原理.md ├── 006HTTP请求头和响应头.md ├── 007jsonp的基本实现.md ├── 008.浏览器对url长度的限制.md ├── 009encode-decode.md ├── 00HTTP权威指南-读书笔记.md ├── 017HTTP协议.md ├── 019HTTP缓存机制详解-重要.md ├── 01HTTP权威指南-读书笔记.md ├── 020-websocket.md ├── 021-from disk cache 和 from memory cache.md ├── 021HTTP-MDN.md ├── 02HTTP权威指南-读书笔记.md ├── 137httpstatus.md ├── 62-HTTP协议-跨域.md ├── 75-MIME类型对应表格.md ├── 82-HTML5 Storage 本地存储.md └── 83-HTML本地存储cookies篇.md ├── IOS ├── C语言 │ ├── 00Q&A.md │ ├── 01-数据类型和变量.md │ ├── 02-存储类和运算符.md │ ├── 02c-标准库.md │ ├── 03-c语言常用方法总结.md │ └── 04c语言预处理器和头文件.md ├── Object-C │ ├── 01-oc-base.md │ ├── 02-IOS-animation.md │ ├── 03-IOS-http.md │ ├── 04-IOS-MVC.md │ └── 05AppDelegate-View生命周期.md └── README.md ├── JavaScript ├── .DS_Store ├── ES6 │ ├── .DS_Store │ ├── 001Symbol.md │ ├── 002ES6Promise.md │ ├── 003ES6-Promise源码分析.md │ ├── 004Promise静态方法源码.md │ ├── 004async-await.md │ ├── 004async-await进阶.md │ ├── 004async-await进阶2.md │ ├── 004javascript异步.md │ ├── 004实例promise-reject源码解析.md │ ├── 004实例promise-resolve源码解析.md │ ├── 005fetch请求(promise的封装).md │ ├── 006解构赋值.md │ ├── 007ES6新特性 箭头函数.md │ ├── 008ES6小特性总结.md │ ├── 009ES6class.md │ ├── 010ES6Object新词法.md │ ├── 011ES6-import.md │ ├── 012ES6-Set-Map.md │ ├── 013ES6-Iterator.md │ ├── 014V8引擎处理事件队列的机制.md │ ├── 015reduce函数用法总结.md │ ├── 016ES6数组对象的扩展.md │ ├── 017ES6_class类.md │ ├── 018ES6 set get 结合 class .md │ ├── 019实现ES6的extends.md │ ├── 021.Reflect.md │ ├── 022装饰器.md │ ├── 20event-loop.md │ ├── README.md │ └── imgs │ │ └── reflect.png ├── babel │ ├── 00babel基础.md │ ├── 01babel使用.md │ ├── 02babel-进阶.md │ ├── 03babel-webpack.md │ ├── 04babel-generator源码.md │ ├── 05babel-parser源码.md │ ├── 06babel-webpack.md │ ├── 07babel-loader源码解析.md │ ├── 08编译解析器.md │ ├── 09.如何写bable-plugin.md │ └── README.md ├── javascript1-基础 │ ├── .DS_Store │ ├── 00JS隐式转换规则.md │ ├── 03opacity和rgba 改变透明度的区别.md │ ├── 04jquery中position 方法.md │ ├── 07DOM juqery里面操作元素的属性节点：ele.md │ ├── 08DOM元素和jquery对象的互相转化.md │ ├── 100-类数组转化为数组.md │ ├── 102-重要-作用域 执行上下文.md │ ├── 103-template模板.md │ ├── 104-数组的sort方法-原理详解！.md │ ├── 105重要-javascript this 和= 经典面试题 .md │ ├── 106-字符串的方法总结.md │ ├── 107-从chorm开发者工具看return 以及闭包的执行.md │ ├── 108-函数专题 函数域函数式编程.md │ ├── 109-js乱炖.md │ ├── 10GitandCMDcommand.md │ ├── 112-toString和valueOf的区别.md │ ├── 113-利用defineProperty获取闭包内部数据.md │ ├── 114-Canvas.md │ ├── 115-ES5 数组Array新增API.md │ ├── 116-Object 新增API Object.defineProperty(obj,prop,descripter).md │ ├── 118-javascript中的类型比较中的隐式转化是如何进行的？.md │ ├── 119-Object　API.md │ ├── 11hexo 命令.md │ ├── 123-元素选择器.md │ ├── 124-文档坐标和视口坐标的区别-重要.md │ ├── 125-文本编辑命令.md │ ├── 12HTMl5 file相关API .md │ ├── 13-HTML5 web存储：.md │ ├── 130Git command detailBranch.md │ ├── 132GitCommandDetailReset.md │ ├── 134HTML5ApplicationCache.md │ ├── 135apacheVirtual以及Ajax.md │ ├── 136GetAndSet.md │ ├── 138Object-assign.md │ ├── 139重要-遍历对象的属性.md │ ├── 14-HTML5的全屏API拖拽API.md │ ├── 140HTML5postMessage.md │ ├── 141windowObject.md │ ├── 145CritialRenderingPath.md │ ├── 149URLoperation.md │ ├── 15-重要-javascript 常用API总结：.md │ ├── 150Arrayfrom API.md │ ├── 151如何实现不同标签页之间的通信.md │ ├── 152div居中的几种方式.md │ ├── 153cookie设置-读取-删除操作.md │ ├── 154Ajax-如何处理缓存.md │ ├── 157AngularJS-Initialization.md │ ├── 158DOMContentLoaded.md │ ├── 159AngularJsModule.md │ ├── 16-jquery中 get() 和 index().md │ ├── 161AngularJsModule.md │ ├── 162AngularJsdirective.md │ ├── 165AngularJsService.md │ ├── 169XMIHttpRequest-Level2-FormData.md │ ├── 17-jQuery js offset系列的不同.md │ ├── 17-事件对象参数中 offsetx clientx pagex screenx；.md │ ├── 171web中的path路径浅析.md │ ├── 172ClientRenderOrServerRender.md │ ├── 174Angular-Js-MVVM-双向数据绑定如何实现.md │ ├── 175Angular-Js-directive.md │ ├── 176src和href的区别.md │ ├── 177提高网页性能的方法.md │ ├── 178几种缓存的总结.md │ ├── 179AngularJs中的link和compile.md │ ├── 18-jQuery中筛选的总结.md │ ├── 181svn.md │ ├── 187isNaN-And-NumberisNaN.md │ ├── 19-transform(3d)：.md │ ├── 20-封装函数 innerText textContent innerHTML .md │ ├── 209return小结.md │ ├── 22-HTML5 data 属性的运用：.md │ ├── 224ImmutabaleJS.md │ ├── 228for循环.md │ ├── 23-拖拉事件.md │ ├── 27-js jQuery offset scroll client.md │ ├── 28-移动端 touch事件以及事件对象参数解析.md │ ├── 29-webstorm编辑器运用小技巧.md │ ├── 32-HTML5Drag.md │ ├── 39-媒体查询响应式开发.md │ ├── 41-Bootstrap框架总结总结.md │ ├── 43-jQuery核心及源码分析.md │ ├── 45-js和jQuey的事件对象参数的区别：.md │ ├── 48-less程序化编译CSS.md │ ├── 49-underscorejs template模板引擎的使用.md │ ├── 53-js 和 jquery 的事件区别.md │ ├── 55-js jQuery绑定与移除事件的比较.md │ ├── 56-事件冒泡.md │ ├── 61-cmd常用命令行.md │ ├── 63-for-in foreach .md │ ├── 64PHP 基础语法：.md │ ├── 65js和jQuery的 AJAX 底层实现.md │ ├── 66XML.md │ ├── 68JSON数据处理的方法.md │ ├── 69jseval 和 JSON parse.md │ ├── 72-typeof instance 以及null undefined区别.md │ ├── 74-jQuery 对象serialize()方法的使用.md │ ├── 75-MIME类型对应表格.md │ ├── 76-事件委派.md │ ├── 78-如何更改github-hexo博客的主题？.md │ ├── 80-window对象.md │ ├── 84-Javascritp代码性能优化方法.md │ ├── 85-从源代码角度分析内置对象.md │ ├── 87-Javscript中this详解-重要.md │ ├── 88-form表单 属性常用总结.md │ ├── 89-对象-伪对象.md │ ├── 90-js中原型prototype属性 _ _ proto_ _ 属性 以及原型链的总结.md │ ├── 91-hasOwnProperty(property)和in的区别.md │ ├── 92-Javasript垃圾回收机制.md │ ├── 93-select 的值选择的哪一个？.md │ ├── 94-apply call bind 对比分析.md │ ├── 96-重要-Javascript 闭包(closure).md │ ├── 98-重要-Javascript中运算符.md │ ├── README.md │ ├── hello-world.md │ └── live or life.md ├── javascript2 │ ├── 001变量提升和 this .md │ ├── 002表单提交的方式.md │ ├── 003递归分析-数据结构.md │ ├── 004浏览器环境小结.md │ ├── 005如何用 JavaScript 下载文件.md │ ├── 006文件和二进制对象.md │ ├── 007ajax请求分类.md │ ├── 008BrowserSync初试.md │ ├── 009Immutable.md │ ├── 00内置全局变量-函数.md │ ├── 014javascript遍历对象属性的方法.md │ ├── 020String小节.md │ ├── 021Array小结.md │ ├── 022chorm开发者工具使用指南.md │ ├── 025tableAPI.md │ ├── 026常用代码片段.md │ ├── 030XMLHttpRequest源码实现.md │ ├── 031代码优化细节.md │ ├── 032实现多面板的排序和搜索.md │ ├── 034ajax结合hostory实现无刷新同时可前进后退.md │ ├── 035细节问题.md │ ├── 036多种方法实现转化ajax传输对象.md │ ├── 037浏览器的重绘和重排.md │ ├── 038从深浅拷贝案例分析对于函数入参的判断.md │ ├── 039try-catch.md │ ├── 040终止for循环.md │ ├── 10javascript基础.md │ ├── README.md │ └── img │ │ └── image1.jpg ├── javascript高级 │ ├── .DS_Store │ ├── 00javascript-style-guide.md │ ├── 00性能优化指南.md │ ├── 019web-socket.md │ ├── 020web事件传播.md │ ├── 02函数的节流.md │ ├── 11setTimeout.md │ ├── 12Array数组API.md │ ├── 13String字符串API-NUmberAPI.md │ ├── 13实现bind.md │ ├── 14-JS异步加载的实现方式总结.md │ ├── 15js-EventLoop.md │ ├── 16-javascript代码片段.md │ ├── 17函数式编程.md │ ├── 18-数据流的处理-同步和异步.md │ └── 19定时器.md ├── js基础复习-2021 │ └── 01.数据类型.md ├── 代码规范 │ └── 00如何让保证代码更健壮.md ├── 数据结构与算法 │ ├── .DS_Store │ ├── 01数据结构-链表.md │ ├── 02数据结构-栈-队列.md │ ├── 03数据结构-堆.md │ ├── 04javascript数据结构.md │ ├── 04对称二叉树.md │ ├── 04数据结构-二叉树搜索树.md │ ├── 05javascript数据结构.md │ ├── 05集合-字典-散列表.md │ ├── 06javascript递归.md │ ├── 06数据结构-图.md │ ├── 07javascript排序算法.md │ ├── 08算法复杂度.md │ ├── 101JS中深拷贝和浅拷贝.md │ ├── 10javascript乱序算法-数组拍平算法.md │ ├── 11算法-Math.md │ ├── 12算法dfs-bfs-Search-深拷贝.md │ ├── 13算法-functionalProgramming.md │ ├── 14蛇形遍历二维数组.md │ ├── 15-二分查找算法.md │ ├── 16算法-动态规划.md │ └── README.md ├── 构建工具 │ ├── .DS_Store │ ├── 000npm官网学习.md │ ├── 001packagejson.md │ ├── 002package-lock.json详解.md │ ├── 003如何从头至尾创建一个react-webpack项目.md │ ├── 005webpack配置文件解读.md │ ├── 006iTerm 教程.md │ ├── 007git命令 .md │ ├── 007git学习实践.md │ ├── 008终端使用.md │ ├── 010打包工具的运行基本原理.md │ ├── 011Mac.md │ ├── 012vscode快捷键.md │ ├── 013fis3学习.md │ ├── 015webpack路径解析.md │ ├── 016npm包学习.md │ ├── 017lerna-manage pkkg.md │ ├── 021eslint.md │ ├── 14持续集成.md │ ├── 196npm命令.md │ ├── 199webpack.md │ ├── 200webpack-foundation.md │ └── 214webpack模块路径解析规则.md ├── 模块化开发 │ ├── 001seajs源码.md │ ├── 002commonJS.md │ ├── 003requirejs.md │ ├── 004requirejs.md │ ├── 005AMD-语法规范.md │ ├── 006seajs基础.md │ ├── 007seajs核心.md │ ├── 008seajs源码实现.md │ ├── 009seajsuse实例应用与理解.md │ ├── 010seajs模块加载.md │ ├── 011babel的作用.md │ └── 012.commonjs和ES module的区别.md ├── 正则 │ ├── 00正则基础.md │ ├── 01正则基础-进阶.md │ ├── 02正则分组引用.md │ ├── 03正向先行断言.md │ ├── 04正则面试.md │ └── 127RegExpReview.md ├── 算法题学习 │ ├── 0.两数之和-无重复字符最长子串.md │ ├── 1.盛水最多容器-整数反转.md │ └── 2.电话号码的字母组合.md ├── 设计模式实际应用总结 │ ├── 00设计模式-编程思想.md │ ├── 01单例-策略-代理-模式.md │ ├── 02订阅者-迭代器-工厂模式.md │ ├── 03观察者模式.md │ ├── 04职责链-中介者模式.md │ ├── 05职责链模式-模版模式-状态模式.md │ ├── 06组合模式-装饰着模式-.md │ ├── README.md │ └── Untitled.md └── 面试题汇总 │ ├── 01 数组相关.md │ ├── 02 汇总各类.md │ ├── 02汇总各类2.md │ ├── 03 算法面试题目.md │ ├── 04 html 和 css 相关.md │ ├── 05数据结构相关.md │ ├── 06call-apply-bind实现.md │ └── 07.业务实战开发.md ├── Mobx源码 └── 01mobx入门.md ├── NodeJS ├── .DS_Store ├── README.md ├── express源码解析 │ ├── 01基本使用.md │ ├── 02express-api-fallback.md │ ├── 02express上的get-post-use等源码解析.md │ ├── 03express-utils文件源码.md │ └── 173Nodejs-Express.md ├── images │ ├── req-header.png │ ├── req.png │ ├── res-header.png │ ├── res.png │ └── router.png ├── koa源码解析 │ ├── 01-koa-base.md │ ├── 02koa-delegate.md │ └── 03koa-router.md └── nodeBase │ ├── 00nodeJS .md │ ├── 01NodeJsEventEmitter.md │ ├── 02NodeJSProcess.md │ ├── 02NodeJSchildProcess.md │ ├── 03NodeJsBuffer.md │ ├── 05NodeJsFS.md │ ├── 07NodeJsModuleSystem.md │ ├── 08NodeJs事件驱动.md │ ├── 09NodeJs中的path路径浅析.md │ ├── 10NodeJSHTTP.md │ ├── 11NodeJs-Util-net.md │ ├── 12NodeJS-Util-url.md │ ├── 13NodeJsStream.md │ ├── 14Node-API.md │ ├── 15NodeJSUtil.md │ ├── 16NodeJsPath.md │ ├── 17NodeJS-Modules.md │ ├── 18NodeJS-OS.md │ ├── 19NodeJS-HTTP-req-res类.md │ ├── 20NodeJS-vm.md │ └── 21NodeJS-require基本原理.md ├── PHP └── 01php基础.md ├── README.md ├── React ├── README.md ├── React16-learn │ ├── 01React基础知识回顾.md │ └── README.md ├── React基础 │ ├── 000React常见概念总结.md │ ├── 001jsx.md │ ├── 002React概览.md │ ├── 003React-Redux-Router学习路线.md │ ├── 004React-redux Demo案例.md │ ├── 005react-Event.md │ ├── 006react-元素渲染和组件.md │ ├── 007reactStateAndLifeCycle.md │ ├── 008react-Compare-Vue.md │ ├── 009react-lifting-State-Up.md │ ├── 010高阶组件.md │ ├── 011React加载图片.md │ ├── 012jsx-in-depth.md │ ├── 013React实现搜索延迟功能.md │ ├── 014Refs-And-DOM.md │ ├── 015React-Optimizing-Performance.md │ ├── 016Redux-React-基本环境的搭建.md │ ├── 017React-概览学习笔记.md │ ├── 018react状态管理中的坑.md │ ├── 019react中this的解惑.md │ ├── 020.为什么不用mixins.md │ ├── 021.react生命周期.md │ └── 022.react事件系统.md ├── React性能优化.md ├── React源码分析系列 │ ├── 001React-createElement.md │ ├── 002创建React组件方式以及源码解析.md │ ├── 003react中context updater到底是如何传递下去的.md │ ├── 004React中的注册机制.md │ ├── 005React源码setState实现分析.md │ └── 006虚拟DOM .md ├── Redux源码 │ ├── 001Redux.md │ ├── 002Redux-createStore源码.md │ ├── 003Redux-compose源码.md │ ├── 004Redux-combineReducers源码bindCreateAction.md │ ├── 005Redux-applyMiddleware源码.md │ ├── 006Redux-Provider-Connect.md │ ├── 007Redux-thunk,Redux-logger源码.md │ ├── 008Redux中订阅者模式解读.md │ └── 009enhancer-Store实现.md ├── Router源码 │ ├── 001React-router-Foundation.md │ ├── 002React-router.md │ ├── 003React-router-中的Route组件详解.md │ ├── 004React-router-Prompt.md │ ├── 005源码React-router-Switch-Redict.md │ ├── 006Router Switch Route源码解析.md │ └── 007createBrowserHistory源码.md ├── img │ ├── reducer.JPG │ ├── setState.jpg │ └── subscribe.JPG └── 源码-应用 │ └── 01-工具函数.md ├── ReactNative └── 01macRN快捷键.md ├── VueLesson ├── 01VueBase │ ├── 00Vue中小细节.md │ ├── 01Vue概览.md │ ├── 02Vue中组件之间的通信机制.md │ ├── 03Vue组件实例属性.md │ ├── 04路由守卫.md │ ├── 05Vue指令的使用.md │ └── 06vue中的mixin.md ├── 02Vue-SourceCode │ ├── 00new Vue参数的形式.md │ ├── 01Vue构造函数.md │ ├── 02new Vue构造函数.md │ ├── 03vnode对象是如何生成的？.md │ ├── 04Vnode对象的真正渲染patch函数.md │ ├── 05initState中是如何操作数据的.md │ ├── 06Vue双向数据绑定实现原理2.md │ ├── 06Vue双向数据绑定的原理.md │ ├── 07Vue静态方法.md │ ├── 08Vue细节注意.md │ ├── 09Vue.prototype.$nextTick源码.md │ ├── 10Vue中的内置组件slot组件源码实现.md │ ├── 11Vue中的内置组件keep-alive源码实现.md │ ├── 12Vue中内置组件transition component.md │ ├── 13Vue中事件源码.md │ ├── 14Vue中异步组件加载源码.md │ ├── 15Vue组件生命周期-异步更新根源.md │ ├── 16Vue中provide和inject.md │ ├── 17Vue中的virtualDom-转.md │ ├── 18vue-AST是如何转化的.md │ └── README.md ├── 03VueRouter-SourceCode │ ├── 01VueRouter源码实现.md │ ├── 02matcher和history创建源码解析.md │ ├── 03RouterView和RouterLink的实现.md │ └── 04router的基础知识.md ├── 04Vuex-SourceCode │ ├── 01Vuex源码实现.md │ ├── 02Vuex实例化对象ModuleCollection实现.md │ ├── 03Vuex实例化store对象的核心源码.md │ ├── 04Vuex对象中的辅助函数源码.md │ ├── 05Vuex中的数组函数reduce巧用.md │ └── 06store实例对象的dispatch和commit源码实现.md ├── 05Vue-axios源码 │ ├── 01axios源码实现.md │ └── 02code-matrix.md ├── 06VueUI │ └── elemet.ui │ │ ├── 01element.ui入口文件.md │ │ ├── 02ele-directive.md │ │ ├── 03ele-emitter.md │ │ └── README.md ├── 07源码-应用 │ ├── 01递归和对象属性的遍历.md │ └── 02工具函数源码.md ├── 08SSR │ └── 01ssr基础.md ├── 09@vuecli-3 源码取经 │ └── 01入口.md ├── QS.md ├── README.md └── img │ ├── computed.png │ ├── data.png │ ├── dep.png │ ├── newVue.JPG │ ├── vuexModules.png │ ├── watcher1.png │ └── watcher2.png ├── Weex └── 00weex-cml开发注意点.md ├── Wx ├── 00小程序配置.md ├── 01.小程序原理性文章.md ├── 01小程序原理2.md ├── 01小程序原理性.md ├── 02.小程序生命周期.md ├── 03.小程序运行时.md ├── 04.小程序直播.md ├── 05.小程序基础能力.md ├── 06.小程序开放能力.md ├── 07.小程序组件.md ├── 08小程序API.md └── README.md ├── gitbook └── README.md ├── img ├── .DS_Store ├── 1650a9fbd11d0cd7 ├── 1691020-07332dda269bdd88.webp ├── PrintRequest(1).pdf ├── String.prototype.match() _ MDN.html ├── array_erchadui .png ├── binaryTree.png ├── classset.png ├── duiyouxu.png ├── event1.png ├── event2.png ├── event3.png ├── eventloop.png ├── git.jpg ├── huisu1.png ├── huisu2.png ├── huisu3.png ├── huisu4.png ├── ios-life.gif ├── ios-life2.png ├── ios.png ├── js_event_loop2.png ├── layers.png ├── line1.jpg ├── line2.gif ├── line3.gif ├── link.png ├── nginx-design.png ├── nginx-proxy.png ├── nginx.png ├── package-npm.png ├── setget.png ├── shell.png ├── sort.jpeg └── webpack.jpg ├── shell ├── 001-linux&shell.md ├── 002Vim使用入门.md ├── 003shell中的括号使用总结.md ├── 004shell 命令使用总结.md ├── 005shell中的特殊字符.md ├── 006shell-basic-program.md ├── 007执行shell命令方式总结.md ├── 008shell操作符.md ├── 009shell中的字符串包含.md ├── 022ssh.md └── README.md ├── typeScript ├── 00.base-ts.md ├── 01typeScript.md ├── 02typescript基础命令.md ├── README.md ├── ts-help.png ├── ts-starter.svg ├── ts.png └── tsconfig.json.md ├── webpack && npm ├── .DS_Store ├── 00-webpack.config.js.md ├── 01webpack入口-输出-配置类型.md ├── 02webpack-devServer.md ├── 03webpack-plugins.md ├── 04webpack-loader.md ├── 05webpack-代码分离.md ├── 06webpack构建速度-包体积优化.md ├── 07webpack启动构建.md ├── 09webpack-tapable源码解析.md ├── 10tapable源码解析-转.md ├── 11 npm包学习2.md ├── 12 package.json解析版本号.md ├── 13clean-webpack-plugin源码.md ├── 14plugin-hooks.md ├── 15html-webpack-plugin源码解析.md ├── 16file-loader源码.md ├── 17webpack打包后代码分析.md ├── 18webpack-externals.md ├── 19 webpack-target.md ├── 20webpack-代码拆分.md ├── 21tree-shaking.md ├── 22npm包集成travis.md ├── 23commonsChunkPlugin源码.md ├── 24 webpack-hash深入理解.md ├── 25webpack-plugin-api.md ├── 26webpack-noParse.md ├── 26webpack-常用plugin.md ├── 27webpack4默认配置.md ├── 28package.json字段含义.md ├── 29.package.json入口文件.md ├── 29neo-async源码 │ ├── 01Each.md │ ├── 02.EachSeries.md │ └── 02Each.md ├── README.md ├── imgs │ ├── npm-after.png │ └── npm-before.png └── 前端工程化-剖析npm的包管理.md ├── webpack4 ├── 01webpack4.md ├── 08webpack源码解析.md └── README.md ├── workflow ├── 01git-commit规范.md ├── 02eslint规范编码.md ├── 03eslint源码解析.md ├── 04单元测试-mocha.md └── README.md ├── 后端 ├── 01mongoDB.md ├── 02nginx.md ├── 03nginx负载均衡.md ├── 04浅谈nginx.md └── 05前端应知应会nginx基础.md ├── 学习资源汇总 └── 常用各种库.md ├── 性能优化 ├── 01.性能监控-异常监控.md ├── 02.性能优化-细节点.md └── README.md ├── 技术架构 ├── .DS_Store ├── 01.小程序.md ├── 02.技术架构.md ├── 03.前端项目设计总结.md ├── 04.团队规范.md ├── 05.项目文件检测.md └── imgs │ ├── wx-framework2.png │ └── wx-frameworkpng.png ├── 浏览器相关 ├── .DS_Store ├── 01浏览器-优化.md ├── 02WebKit工作原理.md ├── 03前端安全-target=blank.md ├── 04.浏览器架构原理.md └── imgs │ ├── .DS_Store │ ├── DOM-CSS.png │ ├── html-parser.png │ ├── major-components.png │ ├── page-life.png │ ├── webkit-architecture.png │ ├── webkit-jscore.png │ ├── webkit-render.png │ └── what-is-webkit.png └── 移动开发 ├── 000viewport的理解.md ├── 001设置自适应rem值.md ├── 002移动端300ms延迟和点击穿透.md ├── 003zepto.md ├── 004 charles使用文档.md ├── 005JS-bridge.md ├── 156移动端高清多屏适配的解决方案.md └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/.DS_Store -------------------------------------------------------------------------------- /CssAndHTML/01css基础/010-width 百分比取值相对基准问题.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: width 百分比取值基准 3 | date: 2016-11-22 12:36:00 4 | categories: html 5 | tags : html 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | **对于inline元素，宽度由内容决定，不能设置宽度，无效** 12 | 13 | **对于inline-block block 元素可以设置宽高** 14 | 15 | width 百分比取值相对基准问题 16 | 17 | 可能的值 18 | 值 描述 19 | auto 浏览器计算内边距。 20 | length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。 21 | inherit 规定应该从父元素继承相应属性。 22 | 23 | % 重点理解：width 是 基于父元素的 width 计算的值 24 | height 是基于父元素的 height 计算的值 25 | padding 和 margin 的无论上下左右 值 都是基于父元素的宽度 26 | 27 | 一 ：标准流下，父元素不定位，不浮动，子元素的100% width相对于哪个元素的width进行取值 28 | 29 | 二：脱离标准流之后，父元素设置了定位或者浮动之后，子元素的100% width相对于哪个元素的width进行取值 30 | 31 | 注意理解： 32 | 33 | * 当**子元素**`是`**标准流**的元素的时候，(包括子元素设置position:relative，也是永远相对于父元素的宽高为基准) 34 | 35 | 无论**父元素是否是标准流** 的元素，**子元素**的width和height的百分比取值永远都是**相对于父元素**的; 36 | 37 | 此时无论父元素是否设置定位，子元素的width height padding margin 通过百分数取值的时候，都是相对于其**直接父元素**。 38 | 39 | * 当**子元素**`不是`**标准流**的时候，比如子元素设置了position:absolute； 40 | 41 | 此时子元素的宽高百分比设置的时候，百分比的宽高基准是顺着DOM元素往上寻找最近的一个设置了定位了父元素的宽高为基准，如果祖先元素都没有定位的话，那么就是相对于body的宽高；注意position除了static的父元素 ； 42 | 43 | 注意**position除了static的父元素** ； 44 | 45 | * 其实绝对定位的子元素的 margin padding 等值的百分比都是相对于顺着DOM节点树向上第一个设置了除了static定位之外的position 的元素的宽度为基准的； 46 | 47 | * % 重点理解：width 是 基于父元素的 width 计算的值  48 | height 是基于父元素的 height 计算的值  49 | padding 和 margin 的无论上下左右 值 都是基于DOM树节点祖先元素中第一个设置了除了static定位之外的第一个祖先元素的宽度  50 | 51 | ​ 52 | 53 | ​ 54 | 55 | ​ 56 | 57 | ​ -------------------------------------------------------------------------------- /CssAndHTML/01css基础/011-varticalAlign.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vertivalAlign 3 | date: 2016-08-27 12:36:00 4 | categories: html 5 | tags : html 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | vertical-align 12 | 13 | 1 在一行中，行内元素默认是以baseline为基准进行垂直对齐的，行内元素包括 img a span 等 14 | 15 | 2 baseline 基线:可以简单的理解为是在四线格中字母x的底部的那根线 16 | 17 | 3 img标签默认对齐行内的文本的基线 18 | 19 | 4 那么由于图片默认对齐基线，会在下面出现几像素的间隙，如何去除该间隙？ 20 | 21 | 5 先来看看间隙的产生：(注意浏览器默认字体大小，所以对于所有的DOM元素都有) 22 | 23 | ```html 24 | .div1{ 25 | font-size:50px; 26 | } 27 |
28 | 该行的基线以文本的baseline为基准 29 |
30 | ``` 31 | 32 | 一 : 既然产生间隙的根源是**行内元素** 默认以**文本**的基线为基准的对齐方式导致的，那么只需要将改行的文本字体大小设置为font-size 为0 即可这行代码将图片所在行的文本大小设置为0 ，由于文本相关属性的继承性，该元素内所有元素的文本大小均为0px，所以此时可以消除间隙 33 | 34 | ```html 35 | .div1 { 36 | font-size:0px ; 37 | } 38 | ``` 39 | 40 | 二:既然间隙是有行内元素默认以改行的文本的baseline为基准进行垂直方向的对齐，那么将图片设置为块级元素，也可以消除间隙： 41 | 42 | ```html 43 | .div1>img{ 44 | display: block; 45 | } 46 | ``` 47 | 48 | 三 利用vertical-align属性：设置元素的对齐方式 可能值 baseline top bottom middle text-top text-bottom 49 | 50 | ```html 51 | .div1>img{ 52 | vertical-align:bottom; 53 | } 54 | ``` 55 | 56 | 四 如果想要更好地理解vertical-align属性的作用，可以将图片width="20px"，改成可以和字体比较的大小，然后文本设置font-size设置大一些，然后看效果，有助于理解vertical-align的属性。 -------------------------------------------------------------------------------- /CssAndHTML/01css基础/012-清除浮动的方式：.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 清除浮动的方式 3 | date: 2016-09-28 12:36:00 4 | categories: html 5 | tags : html 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 清除浮动的方式： 12 | 13 | 第一：给父元素设置高度 14 | 15 | 第二：给父元素设置 overflow:hidden ，zoom:1 (zoom :1用来兼容IE6)触发BFC，父元素仍然会被设置了浮动的子元素的高度撑开(如果父元素没有设置高度的话) 16 | 17 | 第三：伪元素，在当前元素的前后添加伪元素，使该伪元素设置：clear:both;注意height必须设置为0 ，否则该元素回避实际高出若干像素； 18 | 19 | ```css 20 | clearfix::before,clearfix::after { 21 | content:""; 22 | display:block; 23 | visibility:hidden;//伪元素不可见 24 | line-height:0; 25 | height:0 ; 26 | } 27 | ``` 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /CssAndHTML/01css基础/013-怪异盒模型box-sizing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: box-sizing 3 | date: 2016-09-18 4 | categories: css 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | 怪异盒模型:box-sizing 11 | 12 | box-sizing:content-box || border-box ; 13 | 14 | * content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 15 | 16 | 此属性表现为标准模式下的盒模型。 17 | 18 | * border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 19 | 20 | 浏览器对盒模型的解释是IE6之前的版本下相同，此时内容的宽高可以由定义的 width height 减去相应方向上的padding和border; 21 | 此属性表现为怪异模式下的盒模型。 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /CssAndHTML/01css基础/020css3新增特性.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: css3新增特性 3 | date: 2018-02-26 12:36:00 4 | categories: css 5 | --- 6 | 7 | * 长度单位 8 | 9 | 绝对长度单位 mm. cm. in. pt. px. pc q(1/4mm). : 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px 10 | 11 | 相对长度单位 rem ex(相对于字母x) vh. vw (相对于视口被均分为100份之后的单位) vmin. vmax (相对于视口高度或者宽度较大的一个) 12 | 13 | -------------------------------------------------------------------------------- /CssAndHTML/01css基础/023less-Overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:less-OverView 3 | --- 4 | 5 | * ​ 6 | 7 | ``` 8 | //@import 导入选项 9 | 10 | --@import 可以至于任何你需要导入的地方 11 | 在标准的CSS，@import在规则必须先于所有其他类型的规则。但Less.js不关心 12 | example: 13 | .test(){ 14 | color:#ff6a00; 15 | } 16 | .study{ 17 | .test; 18 | } 19 | @import "studyLess.css"; 20 | 21 | //output css 22 | @import "studyLess.css"; 23 | .study { 24 | color: #ff6a00; 25 | } 26 | 27 | --@import 可以根据文件扩展名不同而用不同的方式处理 28 | 如果文件是.css的扩展名，将处理为CSS和@import语句保持原样。 29 | 如果为其他的扩展名将处理为less导入。 30 | 如果没有扩展名，将会为他添加.less扩展名，作为less导入。 31 | example: 32 | @import "foo"; // foo.less 导入为less文件 33 | @import "foo.less"; // foo.less 导入为less文件 34 | @import "foo.php"; // foo.php 导入为less文件 35 | @import "foo.css"; // 语句保持原样，导入为css文件 36 | 37 | 以下选项可用于覆盖此行为。 38 | 语法：@import (keyword) "filename"; 39 | reference: 使用该less文件但是不输出它 40 | inline: 包括在源文件中输出，但是不作处理 41 | less: 将该文件视为less文件，无论其扩展名为什么 42 | css: 将文件视为css文件，无论扩展名为什么 43 | once: 该文件仅可导入一次 (默认) 44 | multiple: 该文件可以多次导入 45 | optional: 当没有发现文件时仍然编译 46 | 47 | 多个关键字 @import 是允许的，你必须使用逗号分隔关键字： 48 | example: @import (optional, reference) "foo.less"; 49 | ``` -------------------------------------------------------------------------------- /CssAndHTML/01css基础/024.verticalAlign和lineHeight.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vertical-align line-height 3 | date: 2018-04-12 12:36:00 4 | categories: css 5 | --- 6 | 7 | 前提注意 8 | 9 | **1. ** -------------------------------------------------------------------------------- /CssAndHTML/01css基础/026DomNodeAPI.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM-Node-API 3 | date: 2018-05-08 12:36:00 4 | categories: html 5 | --- 6 | 7 | ### 1 Node 属性 8 | 9 | * nodeValue 10 | * nodeType 11 | * nodeName 12 | * childrenNodes 13 | * textContent 14 | * nextSibling 15 | * previousSibling 16 | 17 | 18 | 19 | ### 2 Node 方法 20 | 21 | * contains( ) : method returns a [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) value indicating whether a node is a descendant of a given node, i.e. the node itself, one of its direct children ([`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)), one of the children's direct children, and so on. 22 | * appendChild( ) : The `**Node.appendChild()**` method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, `appendChild()` moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node). -------------------------------------------------------------------------------- /CssAndHTML/01css基础/027css属性适用基础.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: css属性适用基础 3 | --- 4 | 5 | ### 1 块容器适用 css 属性总结： 6 | 7 | ```css 8 | text-align：适用于块级容器，默认值 start;可取值：left center right justify start end 9 | 10 | 11 | ``` 12 | 13 | ### 2 内联级元素适用 css 属性总结 14 | 15 | ```css 16 | vertical-align:适用于内联级元素以及某些 table-cell 元素 17 | ``` 18 | 19 | ### 3 css技巧 20 | 21 | * 文本垂直居中 22 | 23 | ```css 24 | vertical-align: middle; 25 | display: table-cell; 26 | ``` 27 | 28 | * 图片垂直居中 29 | 30 | ```css 31 | div { line-height: 240px; font-size: 0; } 32 | img { vertical-align: middle; } 33 | ``` 34 | 35 | * 多行文字垂直居中 36 | 37 | ```html 38 | 51 | 52 |
53 | 54 | 你好
55 | 世界 56 | 57 |
58 | ``` 59 | 60 | * 文字少的时候居中显示，文字多的时候居左显示 61 | 62 | ```css 63 | .box{ 64 | height:200px; 65 | background-color: antiquewhite; 66 | /* display:inline-block; */ 67 | text-align:center; 68 | width:50px; 69 | } 70 | .content{ 71 | display:inline-block; 72 | text-align:left; 73 | } 74 | ``` 75 | 76 | -------------------------------------------------------------------------------- /CssAndHTML/02css进阶/002伪对象使用技巧.md: -------------------------------------------------------------------------------- 1 | --- 2 | title： 伪对象使用技巧 3 | --- 4 | 5 | ```html 6 | 65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 | ``` 73 | 74 | -------------------------------------------------------------------------------- /CssAndHTML/02css进阶/003适配iphoneX.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/CssAndHTML/02css进阶/003适配iphoneX.md -------------------------------------------------------------------------------- /CssAndHTML/02css进阶/021Css Animation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:Css Animation 3 | --- 4 | 5 | ### 1 transition实现 6 | 7 | ```css 8 | .rightSlide{ 9 | background-color: #F6F7FB; 10 | border-left:@border; 11 | transition:width .3s ease-in 12 | } 13 | .rightSlideActive{ 14 | width:300px; 15 | } 16 | .rightSlideUnActive { 17 | width:50px; 18 | } 19 | ``` 20 | 21 | ```html 22 |
23 | 24 |
25 | 28 | ``` 29 | 30 | ```javascript 31 | document.getElementById('btn').onclick = function(){ 32 | document.getElementById('el').className = 'rightSlide rightSlideUnActive' 33 | } 34 | ``` 35 | 36 | -------------------------------------------------------------------------------- /CssAndHTML/04基础知识回顾/02JS最基础.md: -------------------------------------------------------------------------------- 1 | --- 2 | JS最基础 3 | --- 4 | 5 | ### 1.JS Array 对象 6 | 7 | 注意：API使用方式、参数、返回值、回调函数中的this指向等 8 | 9 | -------------------------------------------------------------------------------- /CssAndHTML/04基础知识回顾/03CSS最基础.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/CssAndHTML/04基础知识回顾/03CSS最基础.md -------------------------------------------------------------------------------- /CssAndHTML/文章链接.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | [background-image使用svg无法改变颜色](https://www.cnblogs.com/lovesong/p/7648163.html) 6 | 7 | [flex-basic](https://www.jianshu.com/p/17b1b445ecd4) 8 | 9 | [font-face-张鑫旭](https://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/) 10 | 11 | -------------------------------------------------------------------------------- /Docker/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | [docker入门教程](https://yeasy.gitbooks.io/docker_practice/introduction/what.html) 10 | 11 | [掘金docker](https://juejin.im/search?query=docker&type=all) 12 | 13 | [docker中文文档](http://www.docker.org.cn/book/docker/what-is-docker-16.html) 14 | 15 | [docker-从入门到实践PDF]([chrome-extension://cdonnmffkdaoajfknoeeecmchibpmkmg/assets/pdf/web/viewer.html?file=https%3A%2F%2Flegacy.gitbook.com%2Fdownload%2Fpdf%2Fbook%2Fyeasy%2Fdocker_practice](chrome-extension://cdonnmffkdaoajfknoeeecmchibpmkmg/assets/pdf/web/viewer.html?file=https%3A%2F%2Flegacy.gitbook.com%2Fdownload%2Fpdf%2Fbook%2Fyeasy%2Fdocker_practice)) 16 | 17 | [docker-从入门到实践](https://yeasy.gitbooks.io/docker_practice/) 18 | 19 | [docker-nodejs](https://github.com/nodejs/docker-node/blob/master/docs/BestPractices.md#cmd) 20 | 21 | [docker-nodejs2](https://juejin.im/post/5a9626abf265da4e9d225f4f) 22 | 23 | -------------------------------------------------------------------------------- /HTTP/001CDN.md: -------------------------------------------------------------------------------- 1 | --- 2 | titile:CDN 3 | --- 4 | 5 | ### 1.CDN定义 6 | 7 | 内容分发网络（Content Delivery Network，CDN）是建立并覆盖在承载网上，由不同区域的服务器组成的分布式网络。将源站资源缓存到全国各地的边缘服务器，供用户就近获取，降低源站压力。 8 | 9 | 10 | 11 | 12 | 13 | [参考](https://help.aliyun.com/product/27099.html?spm=a2c4g.11186623.6.540.5f01219fLjNpzY) -------------------------------------------------------------------------------- /HTTP/004HTTP常见误区总结.md: -------------------------------------------------------------------------------- 1 | --- 2 | title： HTTP常见误区总结 3 | --- 4 | 5 | ### 1 get和post的区别 6 | 7 | 基本的区别，可能就是如下表所示: 8 | 9 | | | GET | POST | 10 | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 11 | | 后退按钮/刷新 | 无害 | 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 | 12 | | 书签 | 可收藏为书签 | 不可收藏为书签 | 13 | | 缓存 | 能被缓存（ 用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。） | 不能缓存（ post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。） | 14 | | 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 | 15 | | 历史 | 参数保留在浏览器历史中。 | 参数不会保存在浏览器历史中。 | 16 | | 对数据长度的限制 | 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。 | 无限制。 | 17 | | 对数据类型的限制 | 只允许 ASCII 字符。 | 没有限制。也允许二进制数据。 | 18 | | 安全性 | 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！ | POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。 | 19 | | 可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 | 20 | 21 | 22 | 23 | 从技术的本质上来说，get/post是HTTP协议中的两种发送请求的方法；而HTTP的底层是 TCP/IP；本质上讲 get和post请求是没有什么区别的，因为他们都是通过 TCP/IP协议在传输数据而已，那么上述的区别是在哪里被加上的呢？ 24 | 25 | ##### 显而易见，是浏览器！ 26 | 27 | 不同的浏览器在发起http请求的时候，通常会对 get 请求的url 的长度进行限制等； 28 | 29 | ##### 也就是说GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 30 | 31 | 那么抛开浏览器导致的get 和 post请求的区别来看，它们两个还有什么其他的差别? 32 | 33 | * get 请求只产生一个tcp数据包，浏览器会把http Header和data一起发送出去，服务器响应200 34 | * post 请求会产生两个tcp数据包，浏览器先发送header，服务器响应 100 continue,浏览器在发送data,服务器响应200 0k; 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /HTTP/007jsonp的基本实现.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:JSONP的基本实现 3 | --- 4 | 5 | 注意点 6 | 7 | * script标签的删除 8 | 9 | * 全局事件的删除 10 | 11 | * 是否有超时时间处理 12 | 13 | * script标签的onload事件是在该标签被加载并且执行之后才会触发 14 | 15 | 16 | ```javascript 17 | function formateData(data){ 18 | let arr = []; 19 | for(let key in data){ 20 | if(Object.prototype.hasOwnProperty.call(data,key)){ 21 | arr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])) 22 | } 23 | } 24 | } 25 | function JSONP(opts){ 26 | let url = opts.url; 27 | function noop (){}; 28 | let successFn = opts.successFn || noop; 29 | let failFn = opts.failFn || noop; 30 | let callbackName = opts.callbackName || 'callback';//支持外部自定义和后端约定回调函数名字 31 | let timeout = opts.timeout || 6000; 32 | let timer = null; 33 | let id = opts.id || `__jp${Math.random().toString(36).substr(2)}`;//支持自定义id 34 | let params = opts.params || {}; 35 | params.callbackName = id; 36 | 37 | let head = document.getElementsByTagName('head')[0]; 38 | let script = document.createElement('scripit'); 39 | let qs = formateData(params); 40 | script.src = `${url}?${qs}` 41 | function cleanup(){ 42 | window[id] = noop; 43 | head.removeChild(script); 44 | if(timer){ 45 | clearTimeout(timer); 46 | } 47 | } 48 | if(timeout){ 49 | timer = setTimeout(function(){ 50 | cleanup() 51 | failFn(new Error('failed')) 52 | },timeout) 53 | } 54 | window[id] = function(result){ 55 | cleanup(); 56 | successFn(result); 57 | } 58 | head.appendChild(script); 59 | function cancel(){ 60 | if(window[id]){ 61 | cleanup() 62 | } 63 | } 64 | return cancel; 65 | } 66 | ``` 67 | 68 | -------------------------------------------------------------------------------- /HTTP/008.浏览器对url长度的限制.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/HTTP/008.浏览器对url长度的限制.md -------------------------------------------------------------------------------- /HTTP/009encode-decode.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 查询字符串的编码与解码 6 | 7 | `xxx.html?a=x&b=x&url=xxxx/xx/x.html?aa=1` 8 | 9 | ``` 10 | encodeURIComponent('?') 11 | "%3F" 12 | 我们又 encode一遍这个符号 13 | 14 | encodeURIComponent('=') 15 | "%3D" 16 | encodeURIComponent('%3D') 17 | "%253D" 18 | encodeURIComponent('%253D') //百分号不会再被encode了 19 | "%253D" 20 | encodeURIComponent('/') 21 | "%2F" 22 | encodeURIComponent('%2F') 23 | "%252F" 24 | encodeURIComponent('%252F') //百分号不会再被encode了 25 | "%252F" 26 | ``` 27 | 28 | 易出现问题一：编码解码问题 url的值没有经过编码 xxx.html?a=x&b=x&url=redict.html?aa=1 29 | 30 | ```javascript 31 | 'xxx.html?a=x&b=x&url=redict.html?aa=1'.split('?') 32 | 33 | ["xxx.html", "a=x&b=x&url=redict.html", "aa=1"] 34 | 35 | 开发直接拿到 'xxx.html?a=x&b=x&url=xxxx.html?aa=1'.split('?')[1] 机型解析，那么 redict.html 后面的参数肯定全部都丢了 36 | ​``` 37 | ``` 38 | 39 | 易出现问题二：开发某些情况下拼成如右所示字符串 xxx.html??a=xb=x 带有两个问号 40 | 41 | ```javascript 42 | 'xxx.html??a=x&b=x'.split('?') 43 | ['xxx.html','','a=x&b=x'] 44 | 45 | ``` 46 | 47 | -------------------------------------------------------------------------------- /HTTP/020-websocket.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1 websocket概念 6 | 7 | 我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 8 | 9 | 答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。 10 | 11 | 举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。 12 | 13 | 它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于[服务器推送技术](https://en.wikipedia.org/wiki/Push_technology)的一种。 14 | 15 | 其他特点包括： 16 | 17 | （1）建立在 TCP 协议之上，服务器端的实现比较容易。 18 | 19 | （2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。 20 | 21 | （3）数据格式比较轻量，性能开销小，通信高效。 22 | 23 | （4）可以发送文本，也可以发送二进制数据。 24 | 25 | （5）没有同源限制，客户端可以与任意服务器通信。 26 | 27 | （6）协议标识符是`ws`（如果加密，则为`wss`），服务器网址就是 URL。 28 | 29 | > -------------------------------------------------------------------------------- /IOS/C语言/00Q&A.md: -------------------------------------------------------------------------------- 1 | ### 1 c语言中的变量的声明和定义声明区别 2 | 3 | ```c 4 | extern int a ;//声明，不是定义 5 | int a; //声明也是定义 6 | a = 5 ;//变量的初始化 7 | ``` 8 | 9 | * 寄存器和RAM的区别？ -------------------------------------------------------------------------------- /IOS/C语言/02c-标准库.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1 [stdio.h](http://www.runoob.com/cprogramming/c-standard-library-stdio-h.html) 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /IOS/C语言/03-c语言常用方法总结.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1 字符串 6 | 7 | | 序号 | 函数 & 目的 | 8 | | ---- | ------------------------------------------------------------ | 9 | | 1 | **strcpy(s1, s2);** 复制字符串 s2 到字符串 s1。 | 10 | | 2 | **strcat(s1, s2);** 连接字符串 s2 到字符串 s1 的末尾。 | 11 | | 3 | **strlen(s1);** 返回字符串 s1 的长度。 | 12 | | 4 | **strcmp(s1, s2);** 如果 s1 和 s2 是相同的，则返回 0；如果 s1s2 则返回大于 0。 | 13 | | 5 | **strchr(s1, ch);** 返回一个指针，指向字符串 s1 中字符 ch 的第一次出现的位置。 | 14 | | 6 | **strstr(s1, s2);** 返回一个指针，指向字符串 s1 中字符串 s2 的第一次出现的位置。 | 15 | 16 | -------------------------------------------------------------------------------- /IOS/Object-C/02-IOS-animation.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | 参考资料： 6 | 7 | [animation1](https://www.jianshu.com/p/457357a5897a) 8 | 9 | [github-demo](https://github.com/ildream/CAAnimationDemo) 10 | 11 | [animation-demo汇总](http://code.cocoachina.com/list/33/5?order=downloads) 12 | 13 | [IOS开发步骤](https://www.jianshu.com/p/73f4e11524e9) 14 | 15 | xcode面板详解： 16 | 17 | [xcode官方教程-重要且准确-墙裂推荐-用时 1 小时即可完全掌握xcode用法](https://help.apple.com/xcode/mac/current/) 18 | 19 | 左侧面板最后一个：[IOS构建日志](http://beyondvincent.com/2013/11/21/2013-11-23-123-build-process/) 20 | 21 | [IOS-animation-demo合集](https://segmentfault.com/a/1190000016181681) 22 | 23 | [基础动画](https://github.com/manofit/BabyPigAnimation.git) 24 | 25 | 26 | 27 | xcode文档总结 28 | 29 | ### 1 user interface file 30 | 31 | A *user interface file* is a type of macOS file (a file with a `.storyboard` or `.xib` filename extension) that contains the source for the user interface of an app. A storyboard (`.storyboard`) file contains a set of view controllers and their views, and the relationships between the view controllers. A xib file (`.xib`) usually contains one view controller or menu bar. The contents of `.xib` and `.storyboard`files are stored in XML format. At build time, the `.xib` and `.storyboard` files are compiled into binary files called `nibs`. At runtime, nibs are loaded and the objects they contain are instantiated 32 | 33 | All projects created from a template contain a `Main.storyboard` file that contains the user interface for your app. For watchOS apps, the file is called `Interface.storyboard`. For iOS apps, there’s also a `LaunchScreen.storyboard` file for the view that is displayed while the app is launching. A storyboard (`.storyboard`) file contains a set of view controllers and their views. To open Interface Builder in a separate window, Control-click the user interface file in the Project navigator, then choose Open in New Window from the pop-up menu. -------------------------------------------------------------------------------- /IOS/Object-C/03-IOS-http.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | #### 1. iOS中发送HTTP请求的方案 6 | 7 | 在iOS中，常见的发送HTTP请求的方案有 8 | 苹果原生（自带） 9 | **NSURLConnection：用法简单，最古老最经典最直接的一种方案 NSURLSession：功能比NSURLConnection更加强大，苹果目前比较推荐使用这种技术（2013推出，iOS7开始使用的技术）** 10 | CFNetwork：NSURL*的底层，纯C语言 11 | 12 | 第三方框架 13 | **AFNetworking：简单易用，提供了基本够用的常用功能，维护和使用者多** 14 | ASIHttpRequest：外号“HTTP终结者”，功能极其强大，可惜早已停止更新 15 | MKNetworkKit：简单易用，产自印度，维护和使用者少 16 | 17 | **为了提高开发效率，我们开发用的基本是第三方框架，但是我们同样也需要掌握苹果原生的请求方案** 18 | 19 | 20 | 21 | 22 | 23 | [参考-IOS网络请求-同步异步](https://www.kancloud.cn/digest/data/106703) -------------------------------------------------------------------------------- /IOS/Object-C/04-IOS-MVC.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 0 MVC 6 | 7 | Model 8 | Model定义了你的应用是什么(What)。Model通常是纯粹的NSObject子类（Swift中可以是Struct/Class），仅仅用来表示数据模型。 9 | 10 | Controller 11 | Controller定义了Model如何显示给用户(How)，并且View接收到的事件反馈到最后Model的变化。Controller层作为MVC的枢纽，往往要承担许多Model与View同步的工作。 12 | 13 | View 14 | View是Model的最终呈现，也就是用户看到的界面。 15 | 16 | 首先系统会在我们应用目录下（MainBundle）的 Info.plist 文件中查找`UIMainStoryBoardFile`的值，如果找到了，则会在`_loadMainInterfaceFile`中调用`_loadMainStoryboardFileNamed:bundle:`使用 Storyboard 文件初始化主视图。和`NSMainNibFile`，没找到则会继续查找`NSMainNibFile`，找到后在`_loadMainInterfaceFile`中调用`_loadMainNibFileNamed:bundle:`使用 Nib 文件初始化主视图。初始化完成后的主视图会自动赋值给当前应用的 UIWindow 的`rootViewController`属性。 17 | 18 | 如果两个都没找到，我们还可以在`UIApplicationDelegate`类的`- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions;`方法中手动创建 UIWindow 和 RootViewController（创建 UIViewController 后将其赋值给 UIWindow 的 rootViewController 属性）。当然，如果我们之前在 Info.plist 文件中正确设置了`UIMainStoryBoardFile`或`NSMainNibFile`，这里创建的 RootViewController 则会将其取代掉。手动创建 UIWindow 和 RootViewController 的方法会在后面给出。 19 | 20 | 那么，如果我们在`didFinishLaunching`方法中也没创建，那么这个 iOS 应用就没有 UI 了，启动后会显示黑屏，并且`window`也会为`nil`。 21 | 22 | 1. UIApplicationDelegate 23 | 24 | 每个 iPhone 应用程序都有一个 UIApplication，UIApplication 是 iPhone 应用程序的开始并且负责初始化并显示 UIWindow，并负责加载应用程序的第一个 UIView 到 UIWindow 窗体中。UIApplication 的另一个任务是帮助管理应用程序的生命周期，而 UIApplication 通过一个名字为 UIApplicationDelegate 的代理类来履行这个任务。尽管 UIApplication 会负责接收事件，而 UIApplicationDelegate 则决定应用程序如何去响应这些事件，UIApplicationDelegate 可以处理的事件包括应用程序的生命周期事件（比如程序启动和关闭）、系统事件（比如来电、记事项警 告），本文会介绍如何加载应用程序的 UIView 到 UIWindow 以及如何利用 UIApplicationDelegate 处理系统事件。 25 | 26 | ### 1 Controller 27 | 28 | UIViewController的生命周期 29 | ​ ViewController生命周期会经历初始化、加载视图、销毁视图、生命结束等过程。 30 | 31 | 1）init方法 32 | 33 | 初始化ViewController本身。 34 | 35 | 2）loadView方法 36 | 37 | 当view需要被展示而它却是nil时，viewController会调用该方法，如果代码构建View的话需要重写此方法。 38 | 39 | 3）viewDidLoad方法 40 | 41 | 执行完loadView后继续执行viewDidLoad，loadView时还没有view，而viewDidLoad时view已经创建好了。 42 | 43 | 4）viewDidUnload方法 44 | 45 | 当系统内存吃紧的时候会调用该方法。 46 | 47 | 5）dealloc 48 | 49 | 释放其他资源或内存 50 | -------------------------------------------------------------------------------- /IOS/README.md: -------------------------------------------------------------------------------- 1 | ### 1 学习资料汇总 2 | 3 | [教程1](https://www.yiibai.com/) 4 | 5 | [菜鸟教程](http://www.runoob.com/) 6 | 7 | [oc](https://www.yiibai.com/objective_c) -------------------------------------------------------------------------------- /JavaScript/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/.DS_Store -------------------------------------------------------------------------------- /JavaScript/ES6/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/ES6/.DS_Store -------------------------------------------------------------------------------- /JavaScript/ES6/003ES6-Promise源码分析.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ES6-Promise源码分析 3 | date: 2017-06-15 12:36:00 4 | categories: ES6 5 | tags : promise 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 12 | 13 | 现在回顾下Promise的实现过程，其主要使用了设计模式中的观察者模式： 14 | 15 | 1. 通过Promise.prototype.then和Promise.prototype.catch方法将观察者方法注册到被观察者Promise对象中，同时返回一个新的Promise对象，以便可以链式调用。 16 | 2. 被观察者管理内部pending、fulfilled和rejected的状态转变，同时通过构造函数中传递的resolve和reject方法以主动触发状态转变和通知观察者。 17 | 18 | [Promise源码](https://github.com/jimwmg/promise/blob/master/src/core.js) -------------------------------------------------------------------------------- /JavaScript/ES6/015reduce函数用法总结.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: reduce函数的作用 3 | date: 2018-01-23 4 | categories: ES6 5 | --- 6 | 7 | ### 1 数组转化为枚举 8 | 9 | ```javascript 10 | var arr = ['GROUP','USER','COMPONY']; 11 | function enmu(arr){ 12 | //不考虑入参的判断 13 | return arr.reduce((prev,next)=>{ 14 | prev[next] = next; 15 | return prev; 16 | },{}) 17 | }; 18 | console.log(enmu(arr)); 19 | ``` 20 | 21 | ### 2 千分位分割符 22 | 23 | ```javascript 24 | var str = '123456789'; 25 | //[9,8,7,6,5,4,3,2,1] 26 | function formatCash(str) { 27 | //不考虑入参的判断 28 | return String(str).split('').reverse().reduce((pre, next, index) => { 29 | return (index % 3) ? (next + "" + pre) : (next + ',' + pre); 30 | }) 31 | } 32 | 33 | console.log(formatCash(str)); 34 | ``` 35 | 36 | 另外一种优化算法，因为字符串在 js 每次变化都会重新开辟内存，所有转化为数组会更加便捷； 37 | 38 | ```javascript 39 | function f(str) { 40 | const ret = Array.from(str).reverse().reduce((result,next,i,arr) => { 41 | if((i+1)%3 === 0 && (i+1) !== arr.length) { 42 | result.push(next,',') 43 | return result; 44 | } 45 | result.push(next); 46 | return result; 47 | // return (index % 3) ? (next + "" + pre) : (next + ',' + pre); 48 | },[]) 49 | return ret.reverse().join(''); 50 | } 51 | ``` 52 | 53 | 网友评论的一些‘蒂花之秀’ 54 | 55 | [toLocalString](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) 56 | 57 | ### 3 根据路径查询确定对象 58 | 59 | ```javascript 60 | var state = { 61 | a:{name:'Jhon'}, 62 | b:{ 63 | c:{age:12}, 64 | d:{gender:'male'} 65 | }, 66 | e:{ 67 | f:{age:12}, 68 | g:{ 69 | gender:'male', 70 | h:{address:'china'} 71 | } 72 | } 73 | } 74 | var mapPath = { 75 | root :[], 76 | a:['a'], 77 | bd:['b','d'] 78 | } 79 | var ret = mapPath.root.reduce(function(state,key){ 80 | return state[key] 81 | },state); 82 | var retA = mapPath.a.reduce(function(state,key){ 83 | return state[key] 84 | },state) 85 | console.log(mapPath.bd) 86 | var retBD = mapPath.bd.reduce(function(state,key){ 87 | return state[key] 88 | },state) 89 | console.log(ret,retA,retBD); 90 | ``` 91 | 92 | -------------------------------------------------------------------------------- /JavaScript/ES6/017ES6_class类.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:ES6——class类 3 | --- 4 | 5 | [ES6系列文章](https://github.com/jimwmg/JiM-Blog/tree/master/JavaScript/ES6) 6 | **首先明确原型链查找属性，如果找不到会去该对象的`__proto__`属性上去查找** 7 | 8 | ### extends关键字的核心作用 9 | 10 | ```javascript 11 | class Basic { 12 | static getBasicDefault(){ 13 | console.log('staticBasic') 14 | } 15 | constructor(){ 16 | this.basie = 'basic' 17 | } 18 | basic1(){ 19 | console.log('basic1') 20 | } 21 | } 22 | //一个类的构造函数也是指向该类本身 23 | console.log(Basic.getBasicDefault == Basic.prototype.constructor.getBasicDefault) //true 24 | class Manager extends Basic { 25 | static getManageDefault(){ 26 | console.log('staticManage'); 27 | } 28 | manage1(){ 29 | console.log('manage1') 30 | } 31 | } 32 | //extends关键字作用核心：1 实现原型的继承 33 | console.log(Manager.prototype.__proto__== Basic.prototype) // true 34 | //extends关键字作用核心：2 实现静态方法继承 35 | console.log(Manager.__proto__ == Basic) //true 36 | 37 | console.dir(Basic) 38 | console.dir(Manager) 39 | 40 | ``` 41 | -------------------------------------------------------------------------------- /JavaScript/ES6/018ES6 set get 结合 class .md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ES6 set get 结合 class 3 | --- 4 | 5 | ### 1 对象的扩展 6 | 7 | ```javascript 8 | let o = { 9 | _name : 'Jim', 10 | get name(){ 11 | console.log('222'); 12 | return this._name 13 | }, 14 | set name(v){ 15 | this._name = v 16 | } 17 | } 18 | Object.defineProperty(o,'testSet',{ 19 | enumerable:true, 20 | configurable:true, 21 | set() { 22 | console.log('testSet') 23 | }, 24 | get() { 25 | return 'getTEST' 26 | } 27 | }) 28 | console.dir(o); 29 | console.log(o._name) 30 | console.log(o.name) 31 | o.name = 'Jhon' 32 | console.log(o._name) 33 | ``` 34 | 35 | 36 | 37 | ![输出](../../img/setget.png) 38 | 39 | ### 2 class 定义类的时候，使用对象的扩展语法 40 | 41 | ```javascript 42 | class Test { 43 | constructor() { 44 | this.name = 'Jim'; 45 | this.age = '12'; 46 | } 47 | get address() { 48 | return 'jhon' 49 | } 50 | set address(val) { 51 | console.log(333); 52 | this.age = val; 53 | } 54 | otherFunc() { 55 | console.log('otherFunc') 56 | } 57 | } 58 | console.dir(Test) 59 | console.dir(Test.prototype.address) 60 | console.dir(new Test()) 61 | console.dir(new Test().address) 62 | ``` 63 | 64 | ![](../../img/classset.png) 65 | 66 | ### 3 核心还是在于 class 这个语法糖，其实等价于 67 | 68 | ```javascript 69 | function Test() { 70 | this.name = 'Jim'; 71 | this.age = '12'; 72 | } 73 | Test.prototype = { 74 | get address() { 75 | return 'jhon' 76 | }, 77 | set address(val) { 78 | console.log(333); 79 | this.age = val; 80 | }, 81 | otherFunc() { 82 | console.log('otherFunc') 83 | }, 84 | } 85 | ``` 86 | 87 | -------------------------------------------------------------------------------- /JavaScript/ES6/019实现ES6的extends.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 实现ES6的extends 3 | --- 4 | 5 | ### 1 ES6 中extends的核心作用 6 | 7 | ```javascript 8 | class Parent{ 9 | constructor(){ 10 | 11 | } 12 | parentMethod() { 13 | console.log('parentMethod') 14 | } 15 | } 16 | class Child extends Parent{ 17 | constructor(){ 18 | 19 | } 20 | childMethod() { 21 | console.log('childMethod'); 22 | } 23 | } 24 | console.log(Child.prototype.__proto__ === Parent.prototype); // true 25 | console.log(Child.__proto__ === Parent) // true 26 | console.dir(Parent); 27 | console.dir(Child); 28 | ``` 29 | 30 | ### 2 实现 extends 31 | 32 | `Object.setPrototypeOf(obj,proto)` ==> `obj.__proto__ = proto` 33 | 34 | ```javascript 35 | // Only works in Chrome and FireFox, does not work in IE: 36 | Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) { 37 | obj.__proto__ = proto; 38 | return obj; 39 | } 40 | ``` 41 | 42 | ```javascript 43 | function myExtends(child,parent) { 44 | Object.setPrototypeOf(child,parent); 45 | Object.setPrototypeOf(child.prototype,parent.prototype) 46 | } 47 | ``` 48 | 49 | ```javascript 50 | class Parent{ 51 | constructor(){ 52 | 53 | } 54 | parentMethod() { 55 | console.log('parentMethod') 56 | } 57 | } 58 | class Child { 59 | constructor(){ 60 | 61 | } 62 | childMethod() { 63 | console.log('childMethod'); 64 | } 65 | } 66 | myExtends(Child,Parent); 67 | console.log(Child.prototype.__proto__ === Parent.prototype); // ture 68 | console.log(Child.__proto__ === Parent) // true 69 | console.dir(Parent); 70 | console.dir(Child); 71 | ``` 72 | 73 | -------------------------------------------------------------------------------- /JavaScript/ES6/022装饰器.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:装饰器 3 | --- 4 | 5 | ### 1.装饰器基本定义 6 | 7 | **装饰器是一个对类进行处理的函数。装饰器函数的第一个参数，就是所要装饰的目标类** 8 | 9 | 官网的一些案例 10 | 11 | (examples are from proposal) 12 | 13 | Simple class decorator 14 | 15 | ```js 16 | @annotation 17 | class MyClass { } 18 | 19 | function annotation(target) { 20 | target.annotated = true; 21 | } 22 | 23 | Copy 24 | ``` 25 | 26 | Class decorator 27 | 28 | ```js 29 | @isTestable(true) 30 | class MyClass { } 31 | 32 | function isTestable(value) { 33 | return function decorator(target) { 34 | target.isTestable = value; 35 | } 36 | } 37 | 38 | Copy 39 | ``` 40 | 41 | Class function decorator 42 | 43 | ```js 44 | class C { 45 | @enumerable(false) 46 | method() { } 47 | } 48 | 49 | function enumerable(value) { 50 | return function (target, key, descriptor) { 51 | descriptor.enumerable = value; 52 | return descriptor; 53 | } 54 | } 55 | 56 | Copy 57 | ``` 58 | 59 | 此语法需要结合 babel 插件使用 @babel/plugin-proposal-decorators 60 | 61 | 装饰器基本的行为类似于 62 | 63 | ```javascript 64 | @decorator 65 | class A {} 66 | 67 | // 等同于 68 | 69 | class A {} 70 | A = decorator(A) || A; 71 | ``` 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /JavaScript/ES6/README.md: -------------------------------------------------------------------------------- 1 | ##这里主要是自己对ES6相关的常用特性和语法规则的看法和理解 -------------------------------------------------------------------------------- /JavaScript/ES6/imgs/reflect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/ES6/imgs/reflect.png -------------------------------------------------------------------------------- /JavaScript/babel/01babel使用.md: -------------------------------------------------------------------------------- 1 | ---- 2 | 3 | [babel-runtime](https://segmentfault.com/q/1010000005596587?from=singlemessage&isappinstalled=1) 4 | 5 | [.babelrc](https://babeljs.io/docs/en/options) 6 | 7 | [babel-polyfill & babel-runtime](https://juejin.im/post/5b2cc31f51882574d02facff) 8 | 9 | [babel-preset-env](http://2ality.com/2017/02/babel-preset-env.html) 10 | 11 | -------------------------------------------------------------------------------- /JavaScript/babel/03babel-webpack.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1 babel 结合webpack 6 | 7 | [babel官方](https://babeljs.io/setup#webpack) 8 | 9 | [babel-6.26:注意很多配置选项和babel7不一样](https://segmentfault.com/a/1190000011155061) 10 | 11 | -------------------------------------------------------------------------------- /JavaScript/babel/04babel-generator源码.md: -------------------------------------------------------------------------------- 1 | Babel-generator 2 | 3 | ---- 4 | 5 | ### 1 ast解析 6 | 7 | [参考]() 8 | 9 | #### ast节点 10 | 11 | 所有的节点都有的属性值如下，描述该节点的类型以及位置信息 12 | 13 | ```javascript 14 | { 15 | type:String,节点类型 16 | start:Number,该节点的起始位置 17 | end:Number,该节点的结束位置 18 | loc:{ 19 | start:{ 该节点开始行和列的描述 20 | line:Number,该节点所在行数 21 | column:Number,该节点所在列数 22 | } 23 | end:{ 24 | line:Number,该节点所在行数 25 | column:Number,该节点所在列数 26 | } 27 | } 28 | } 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /JavaScript/babel/07babel-loader源码解析.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/babel/07babel-loader源码解析.md -------------------------------------------------------------------------------- /JavaScript/babel/08编译解析器.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:编译解析器 3 | --- 4 | 5 | ### 1.编译解析器 6 | 7 | https://github.com/starkwang/the-super-tiny-compiler-cn 8 | 9 | https://github.com/jamiebuilds/the-super-tiny-compiler 10 | 11 | -------------------------------------------------------------------------------- /JavaScript/babel/09.如何写bable-plugin.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | ### 1.目录结构 4 | 5 | ``` 6 | -.babelrc 7 | - plugin.js 8 | - index.js 9 | - package.json 10 | ``` 11 | 12 | [bable-cli](https://babeljs.io/docs/en/babel-cli) 13 | 14 | ### 2.具体内容 15 | 16 | .bablerc 17 | 18 | ```javascript 19 | { 20 | "presets": [ 21 | "@babel/preset-flow", 22 | ["@babel/preset-env",{ 23 | "useBuiltIns":"usage", 24 | }], 25 | ], 26 | "plugins":[ 27 | ["./plugin.js"] 28 | ] 29 | } 30 | ``` 31 | 32 | plugin.js 33 | 34 | ```javascript 35 | module.exports = function (...args) { 36 | debugger; 37 | // 38 | console.log(args) 39 | return { 40 | visitor: { 41 | Identifier(...args) { 42 | debugger; 43 | debugger; 44 | console.log('sss',args) 45 | // args:[NodePath,PluginPass] 46 | const name = path.node.name; 47 | // reverse the name: JavaScript -> tpircSavaJ 48 | path.node.name = name.split("").reverse().join(""); 49 | } 50 | } 51 | }; 52 | } 53 | ``` 54 | 55 | index.js 56 | 57 | ```javascript 58 | const JavaScript = 'JavaScript' 59 | ``` 60 | 61 | > npx bable index.js 62 | 63 | 生成内容 64 | 65 | ```javascript 66 | 67 | ``` 68 | 69 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/javascript1-基础/.DS_Store -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/03opacity和rgba 改变透明度的区别.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: opacity和rgba 改变透明度的区别 3 | date: 2016-10-17 12:36:00 4 | tags: css 5 | categories: css html 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 一 opacity和rgba 改变透明度的区别 12 | 13 | 需要注意，rgba() 14 | 15 | * 仅仅改变的是背景的透明度， 16 | * 不会对文本造成影响，不具有继承性 17 | 18 | 然而，opacity 19 | 20 | * 不仅会改变背景的透明度， 21 | * 还会改变文本的透明度，并且具有继承性 22 | * 除了具有继承性，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。 23 | opacity属性指定了一个元素的不透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。 24 | 25 | 当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。 26 | 27 | 28 | 29 | 二 代码演示： 30 | 31 | ```html 32 | 40 |
这一段话是div里面的文字,opacity 透明度会改变字体的透明度 ，rgba 则不会 41 |

这一段话是p里面的文字，如果对div设置透明度的时候，用opacity那么将会被继承，如果用rgba设置 透明度的时候，则不会被继承 42 |

43 |
44 | ``` 45 | 46 | ```html 47 | 55 | ``` 56 | 57 | 三 总结：在做项目的时候，尽量用rgba 来改变透明度，因为opacity透明度具有继承性，并且还会改变文本的透明度，会造成一些影响 58 | 59 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/04jquery中position 方法.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jquery中position 方法 3 | date: 2016-12-15 12:36:00 4 | tags: jQuery 5 | categories: html 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### position() jquery DOM 12 | 13 | 一 相关position定位基准建议回顾： 14 | 15 | 1 DOM 中获取元素定位相关属性的方法： 16 | 17 | obj.style.property obj.currentStyle(attr) window.getComputedStyle(element,null)[attr] 18 | 19 | 将attr设置为 定位的 left top 等 即可。 20 | 21 | 2 jquery中获取定位元素的偏移，官方文档定义：获取匹配元素相对父元素的偏移。 22 | 23 | 返回的对象包含两个整型属性：top 和 left。 24 | 25 | 嗯，就是这么简洁。初学者需要注意,官方文档说的很模糊，我在这里详细说明一下： 26 | 27 | 二 代码： 28 | 29 | ```html 30 | 50 |

这是一个段落

51 | 52 | 58 | ``` 59 | 60 | 定位还是按原来的走： 61 | 62 | * 如果父元素有除了static定位以外的定位，那么就相对于父元素进行定位； 63 | * 如果父元素没有定位，那么就相对于body定位 64 | * 定位的基准是 ：子元素整体(margin +border+padding+content)的最外边界，相对于有定位的父元素或者body的内边界。 65 | 66 | 如果给div加一个定位 67 | 68 | ```html 69 | position: absolute; 70 | ``` 71 | 72 | 此时： 73 | 74 | console.log(pos);//object 75 | console.log(pos.top);//0 76 | console.log(pos.left);//0 77 | 三：总结，jquery中position( )方法不能对定位进行设置，只能获取定位的top left 值，如果要设置定位的坐标，还是的用 css( ) 方法。 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/08DOM元素和jquery对象的互相转化.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM元素和jquery对象的互相转化 3 | date: 2016-12-22 21:02:00 4 | tags: [DOM] 5 | categories: jQuery 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | DOM元素和jquery对象的互相转化 12 | 13 | 1 DOM对象转化为jquery对象,语法：$(DOM对象)：用js一些固有的操作获取页面元素。比如 document.getElementById(),getElementsByTagName()，等js方法获取页面元素的所得为DOM对象,将DOM对象放在中括号里面所得便是jquery对象； 14 | 15 | 2 jquery对象转化为DOM对象，语法：jquery对象[ index]或者 jquery对象.get(index); 用jquery方法获取页面元素，通过jquery选择器，筛选器进行选择，所得结果为jquery对象，jquery对象有两种方法可以转化为DOM对象：jqueryObj[index] 和 jqueryObj . get(index);(如果不写参数的话，那么则将匹配到的所有的jquery对象转化为DOM对象) 16 | 17 | 3 DOM中this代表DOM对象 jquery中$(this)代表jquery对象。 18 | 19 | 4 栗子说明下： 20 | 21 | ```html 22 |
23 |
    24 |
  • 我是体育模块
    • 25 |
  • 我是娱乐模块
    • 26 |
  • 我是新闻模块
    • 27 |
  • 我是综合模块
    • 28 |
29 |
30 | console.log($(".hd>span"));//jquery对象 31 | console.log($(".hd>span:first-child"));//jquery对象 32 | console.log($(".hd>span").get(1));//DOM对象 33 | console.log($(".hd>span").get());//DOM对象 34 | console.log($(".hd>span")[1]);//DOM对象 35 | ``` 36 | 37 | 5 注意jQuery对象和DOM对象的方法不能通用， 38 | 39 | DOM对象只能用 innerHTML，innerText ，属性操作 setAttribute() 、getAttribute() 、ele.style.property ； 40 | 41 | jQuery对象只能用html() text(), 属性操作，attr() 、prop( )、 css( ); 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/112-toString和valueOf的区别.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: toString()和valueof()的区别 3 | date: 2015-10-28 12:36:00 4 | categories: javascript 5 | tags: javascript 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ## toString()和valueof()的区别 12 | 13 | ## 1.存在环境 14 | 15 | ``` 16 | 所有的对象都继承了这两个方法，甚至于包装对象Number、String和Boolean。 17 | ``` 18 | 19 | 20 | ## 2.具体细节 21 | 22 | ``` 23 | 对于不同类型的对象，js定义了多个版本的 toString 和 valueOf 方法 24 | toString: 25 | （1）普通对象，返回 "[object Object]"; 26 | （2）数组，返回数组元素之间添加逗号合并成的字符串; 27 | （3）函数，返回函数的定义式的字符串; 28 | （4）日期对象，返回一个可读的日期和时间字符串; 29 | （5）正则，返回其字面量表达式构成的字符串; 30 | valueOf: 31 | （1）日期对象，返回自1970年1月1日到现在的毫秒数; 32 | （2）其它均返回对象本身;比如数组，函数，对象等以及number 布尔类型 字符串的valueof()都将返回本身 33 | ``` 34 | 35 | ```javascript 36 | Object.prototype.valueOf() 37 | 用 MDN 的话来说，valueOf() 方法返回指定对象的原始值。 38 | JavaScript 调用 valueOf() 方法用来把对象转换成原始类型的值（数值、字符串和布尔值）。但是我们很少需要自己调用此函数，valueOf 方法一般都会被 JavaScript 自动调用。 39 | ``` 40 | 41 | ```javascript 42 | toString() 方法返回一个表示该对象的字符串。 43 | 每个对象都有一个 toString() 方法，当对象被表示为文本值时或者当以期望字符串的方式引用对象时，该方法被自动调用。 44 | ``` 45 | 46 | 原始类型 47 | 48 | ```javascript 49 | Number String Boolean Undefined Null 50 | 在 JavaScript 进行对比或者各种运算的时候会把对象转换成这些类型，从而进行后续的操作 51 | ``` 52 | 53 | 54 | 55 | ## 3.应用场景——类型转换 56 | 57 | ``` 58 | String类型转化 对象到字符串 59 | （1）执行toString，如果返回了一个原始值，则将其转化为字符串 60 | （2）否则执行valueOf方法，如果返回了一个原始值，则将其转化为字符串 61 | （3）否则抛出类型错误 62 | 如果 toString 方法存在并且返回原始类型，返回 toString 的结果。 63 | 如果 toString 方法不存在或者返回的不是原始类型，调用 valueOf 方法，如果 valueOf 方法存在，并且返回原 始类型数据，返回 valueOf 的结果。 64 | 其他情况，抛出错误。 65 | Number类型转化 对象到数字 66 | （1）执行valueOf，如果返回了一个原始值，如果需要，则将其转化为数字 67 | （2）否则执行toString，如果返回了一个原始值，则将其转化为数字并返回 68 | （3）否则抛出类型错误 69 | 70 | 如果 valueOf 存在，且返回原始类型数据，返回 valueOf 的结果。 71 | 如果 toString 存在，且返回原始类型数据，返回 toString 的结果。 72 | 其他情况，抛出错误。 73 | 74 | 以上两种方式转换的情况，我们可以通过重写对象的valueOf()方法和toString()方法来看下javascript是如何选择执行的以及执行的顺序 75 | ``` 76 | 77 | ## 4.类型转换与关系操作符(>、<等，不包括===和!==) 78 | 79 | ``` 80 | - 两个都是数值，则比较数值 81 | - 两个都是字符串，则比较字符编码值 82 | - 其中一个是数值，则要把另个转化成数值进行比较 83 | - 如果其中一个是对象，则调用valueOf，若没有返回原始值则调用toString，再进行前面的比较 84 | - 如果有一个是布尔值，则将其转化成数值 85 | ``` 86 | 87 | 注：日期对象只调用 valueOf ，不会调用 toString 方法 88 | 89 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/113-利用defineProperty获取闭包内部数据.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 利用defineProperty获取闭包内部数据 3 | date: 2016-11-30 12:36:00 4 | categories: javascript 5 | tags: object 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### 利用defineProperty获取闭包内部数据 12 | 13 | 1 defineProperty的使用方法: 14 | 15 | ```javascript 16 | Object.defineProperty(obj,property,{ 17 | value:"属性值", 18 | writable:false,//控制属性是否可以重新赋值 19 | configurable:false,//控制属性是否可以被删除 20 | enumerable:false,//是否可枚举 21 | get:function(){ 22 | return this.propertyValue; 23 | }, 24 | set:function(value){ 25 | this.propertyValue = value; 26 | } 27 | }) 28 | ``` 29 | 30 | 2 利用给定接口获取闭包内部数据 31 | 32 | ```javascript 33 | var o = (function() { 34 | var person = { 35 | name: 'Vincent', 36 | age: 24, 37 | }; 38 | return { 39 | run: function(k) { 40 | return person[k]; 41 | }, 42 | } 43 | }()); 44 | //在不改变上面的代码情况下， 怎么得到原有的 person 对象？ 45 | //解决： 46 | Object.defineProperty(Object.prototype, 'self', 47 | { 48 | get: function() { 49 | return this; 50 | }, 51 | configurable: true 52 | }); 53 | o.run('self'); // 输出 person 54 | ``` 55 | 56 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/11hexo 命令.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: hexo 命令 3 | date: 2016-01-17 12:36:00 4 | tags: 5 | categories: hexo 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | hexo 命令 12 | 13 | * 初始化博客 14 | 15 | $ mkdir blog 创建一个名为blog 的文件夹 16 | 17 | $ hexo init 将会在目标文件夹下建立博客需要的所有文件 18 | 19 | $ npm install 进行依赖包安装 20 | 21 | * 配置博客 22 | * 创建博文 23 | 24 | $ hexo new myhello 创建一个makedown文件在drafts目录里面 25 | 26 | $ hexo n myhello 等价 27 | 28 | $ hexo publish myhello 将文件从drafts移到post目录 29 | 30 | $ hexo server 启动服务器 31 | 32 | $ hexo s 也可以启动服务器 33 | 34 | * 如何将博客发布到GitHub上？ 35 | 36 | $ npm install hexo-deployer-git --save 安装hexo git插件 37 | 38 | * 部署 39 | 40 | $ hexo clean 清除一些莫名其妙的问题 41 | 42 | $ hexo generate 生成静态页面 此时会将/source的.md文件生成到/public中，形成网站的静态文件。 43 | 44 | 等价于 45 | 46 | $ hexo g 47 | 48 | $ hexo deploy 将生成的博客静态页面上传GitHub上 ；该操作会将hexo生成的静态内容部署到配置的仓库中，请看下面介绍。 49 | 50 | 部署网站之前需要生成静态文件，即可以用 `$ hexo generate -d` 直接生成并部署。等价于 51 | 52 | $ hexo d 53 | 54 | $ hexo clean # 删除 已经生成的静态页面 55 | 56 | $ cd your-hexo-site 57 | 58 | $ git clone + http 地址可以创建主题 59 | 60 | 然后修改root/config.yml theme 61 | 62 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/123-元素选择器.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 元素选择器 3 | date: 2016-04-11 12:36:00 4 | categories: javascript 5 | tags: array 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ## 元素选择器 12 | 13 | 一 : 即时匹配元素 14 | 15 | 1 document.querySelector( ) 匹配选中的第一个HTML元素，如果没有匹配到，则返回 null ; 16 | 17 | 2 document.querySelectorAll( ) 匹配的是对象并不是实时的，后续更新的文档并不会被匹配到，它只包含当前调用时刻选择器所匹配的元素，如果匹配不到则返回一个空的nodelist对象； 18 | 19 | 二 实时匹配元素 20 | 21 | 1 getElementById getElementsTagName getElementsByClassName 等获取元素都是实时的； 22 | 23 | 三 对于有id属性的元素，可以直接通过window.id 获取到该元素 24 | 25 | ```html 26 |
27 | 30 | ``` 31 | 32 | 四 对于form表单元素，如果form表单元素有id和name属性，可以直接通过name属性和id拉访问form属性，也可以直接通过元素document.forms来访问，这个获取的是一个HTMLCollection类数组 33 | 34 | ```html 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 | 46 |
47 | 48 |
49 | 65 | 66 | 67 | ``` 68 | 69 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/125-文本编辑命令.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: the Methods of String 3 | date: 2016-04-11 12:36:00 4 | categories: javascript 5 | tags: array 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### 文本编辑命令 12 | 13 | 1 给元素设置contenteditable属性，可以设置该元素中的内容是否可以被编辑 14 | 15 | ```html 16 |
click to rewrite
17 | ``` 18 | 19 | 2 给文档设置 design 20 | 21 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/13-HTML5 web存储：.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML5 web存储 3 | date: 2016-07-01 12:36:00 4 | categories: HTML5 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | HTML5 web存储： 11 | 12 | 1 window.localStorage.setItem(key[string],data[string]); 可以将数据存储在用户端； 13 | 14 | 2 window.localStorage.getItem(key[string]);可以将setItem存储的数据取出来； 15 | 16 | 3 window.localStorage.clear(),会将客户端存储的数据全部清空； 17 | 18 | 4 window.localStorage.removeItem(key) ; 可以删除客户端指定的已经存储起来的数据； 19 | 20 | ```html 21 | 22 |

请输入你的名字

23 | 姓名 24 | 年龄 25 | 26 | 27 | 28 | 56 | ``` 57 | 58 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/130Git command detailBranch.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git command detail Branch 3 | date: 2016-09-15 12:36:00 4 | categories: git 5 | comments : true 6 | tags : git 7 | updated : 8 | layout : 9 | --- 10 | 11 | 在不同的分支上的内容是不一样的，切换到不同分支，工作区的文件内容也是不一样的 12 | 13 | ### 分支管理 14 | 15 | * 创建与合并分支 16 | * git branch 可以查看当前分支状态，分支的个数 此时master一个分支 17 | * git checkout -b newBranch 新建一个分支 newBranch 18 | * git branch 此时分支多了一个newBranch 19 | * git add index.html 将文件的变动添加到newBranch分支上 20 | * git commit -m'newBranch first' 新建分支第一次commit,新建分支线延长 21 | * git checkout master 回到master主分支 22 | * 在newBranch分支上对文件做的改动并没有在master分支上的文件上显示 23 | * git merge newBranch 将新建的分支和主分支合并 24 | * 此时在新建的分支上做的变动会在之分支上显示出来 25 | 26 | ### 解决冲突 27 | 28 | * echo 'content' > index.html 可以向文件中写入内容，会先清空文件中的内容 29 | * echo 'content' >> index.html 可以向文件中添加内容，原来的内容不会被清空 30 | * git checkout -b newBranch2 31 | * git add index.html 32 | * git commit -m'commitNewBranch2' 33 | * 以上操作在 newBranch2 将文件内容改动，commit一次 34 | * git checkout master 35 | * git add index.html 36 | * git commit -m'commitmaster2' 37 | * 以上操作在master主分支将文件改动，commit一次 38 | * git merge newBranch2 此时合并会发生冲突，根本原因是master分支和newBrach2分支都提交了 39 | * 注意这个时候必须先手动解决冲突，然后再次提交 40 | * 在主分支上再次commit 41 | * git add index.html 42 | * git commit -m' conflict fix' 43 | * git log --graph --pretty=oneline --abbrev-commit 可以查看分支合并的状况 44 | 45 | 在分支合并之后可以选择将被合并的分支删除 46 | 47 | * git branch -d newBranch 可以删除newBranch 分支 48 | 49 | ### 分支管理策略 50 | 51 | 通常，合并分支时，如果可能，Git会用Fast forward模式，但这种模式下，删除分支后，会丢掉分支信息。如果要强制禁用Fast forward模式，Git就会在merge时生成一个新的commit，这样，从分支历史上就可以看出分支信息。 52 | 53 | 合并分支时，加上--no-ff`参数就可以用普通模式合并，合并后的历史有分支，能看出来曾经做过合并，而`fast forward`合并就看不出来曾经做过合并 54 | 55 | * git merge --on-ff -m'merge with --on-ff' dev dev是一个新的分支，在这个新的分支上做改动 56 | 57 | 和远程仓库进行对接 58 | 59 | * 本地master ——>push本地master ——>远程就有了master分支 ——> 本地新建分支teacher——> push本地teacher——> 60 | 61 | merge之后可以删除分支，不删除也可以 62 | 63 | 当从远程仓库克隆的时候，仅仅克隆的是master分支，如果想要远程其他分支上的数据，比如master2分支 64 | 65 | * 可以在本地新建一个分支master2，用于存放pull下来的分支 66 | * 然后切换到本地该分支，进行pull远程仓库那个分支 git pull origin master2 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/132GitCommandDetailReset.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git command detail Reset 3 | date: 2016-09-30 12:36:00 4 | categories: git 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | 1 撤销修改 11 | 12 | git checkout -- index.html 13 | 14 | 一种是readme.txt自修改后还没有被放到暂存区，现在，撤销修改就回到和版本库一模一样的状态； 15 | 16 | 一种是readme.txt已经添加到暂存区后，又作了修改，现在，撤销修改就回到添加到暂存区后的状态。 17 | 18 | 总之，就是让这个文件回到最近一次 git commit 或 git add 时的状态。 19 | 20 | git reset HEAD index.html 21 | 22 | git reset 命令既可以回退版本，也可以把暂存区的修改回退到工作区；也就是说将添加到暂存区的修改退回到工作区；当我们用HEAD时，表示最新的版本。 23 | 24 | 再用git status查看一下，现在暂存区是干净的，工作区有修改： -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/134HTML5ApplicationCache.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML5 Application Cache 3 | date: 2016-08-13 12:36:00 4 | categories: HTML5 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/139重要-遍历对象的属性.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 遍历对象的属性 3 | date: 2016-09-22 22:00:00 4 | categories: javascript 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | 遍历对象的属性 11 | 12 | ```javascript 13 | var obj = Object.create({foo:0},{ 14 | bar1:{ // 不可枚举； 15 | value:1//descriptor默认值 enumerable fasle configurable false writable false 16 | }, 17 | bar2:{ 18 | value:2, 19 | enumerable:true 20 | } 21 | }); 22 | console.log(obj);//Object {bar2: 2, bar1: 1} 这个对象的 __proto__ {foo:0} 23 | ``` 24 | 25 | for in 可以遍历属性和原型属性 中可以枚举的 ，包括原型上的属性 26 | 27 | ```javascript 28 | for(var key in obj){ 29 | console.log(key); // bar2 foo 30 | } 31 | ``` 32 | 33 | Object.keys(obj) 返回自身所有**可以枚举的**属性组成的数组，不包括原型上的属性，不包括自身不可枚举和Symbol属性 34 | 35 | ```javascript 36 | 37 | console.log(Object.keys(obj));//["bar2"] 38 | ``` 39 | 40 | Object.getOwnPropertyNames(obj) 返回可以**枚举以及不可枚举**的属性组成的数组，不包括原型上的属性 41 | 42 | ```javascript 43 | 44 | console.log(Object.getOwnPropertyNames(obj));//["bar1", "bar2"] 45 | ``` 46 | 47 | `**Object.getOwnPropertySymbols()**` 方法返回一个给定对象自身的所有 Symbol 属性的数组。 48 | 49 | Object.assign()方法只能复制可以枚举的属性，不能复制不可枚举以及原型上的属性 50 | 51 | ```javascript 52 | 53 | console.log(Object.assign({},obj));//Object {bar2: 2} 54 | ``` 55 | 56 | JSON.stringify(obj) 只能将对象可枚举的属性转化 57 | 58 | ```javascript 59 | console.log(JSON.stringify(obj));//'{"bar2":2}' 60 | console.log(typeof JSON.stringify(obj));//string 61 | ``` 62 | 63 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/141windowObject.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: window Object 3 | date: 2016-08-02 12:36:00 4 | categories: javascript window 5 | tags : window 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。 12 | 13 |  window.self 14 | 15 | 功能：是对当前窗口自身的引用。它和window属性是等价的。 16 | 17 | 语法：window.self 18 | 19 | 注：window、self、window.self是等价的。 20 | 21 |  window.top 22 | 23 | 功能：返回顶层窗口，即浏览器窗口。 24 | 25 | 语法：window.top 26 | 27 | 注：**如果窗口本身就是顶层窗口，top属性返回的是对自身的引用。** 28 | 29 |  window.parent 30 | 31 | 功能：返回父窗口。 32 | 33 | 语法：window.parent 34 | 35 | 注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。 36 | 37 | parent 38 | 39 | parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如：A页面中有一个iframe或frame，那么iframe 40 | 或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。 41 | 42 | 在框架网页中，一般父窗口就是顶层窗口，但如果框架中还有框架，父窗口和顶层窗口就不一定相同了。 43 | 44 |  判断当前窗口是否在一个框架中： 45 | 46 | 50 | 51 | 你应当将框架视为窗口中的不同区域，框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架，一个单个的框架也可以分成其它多个框架，即所谓的嵌套框架 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/149URLoperation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: URL operation 3 | date: 2016-10-22 12:36:00 4 | categories: javascript URL 5 | tags : URL 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 如何操作查询字符串，返回一个查询字符串包含信息的对象 12 | 13 | ```javascript 14 | var url ='http://www.myvirtual.com?username=Jhon&age=12';//将查询字符串转换为js对象 15 | function queryParam(url){ 16 | var newUrl = url.slice(url.indexOf('?')+1); 17 | var urlArr = newUrl.split('&'); 18 | var ret = {} 19 | for(var i = 0 ; i < urlArr.length ; i++){ 20 | var arr = urlArr[i].split('='); 21 | ret[arr[0]] = arr[1]; 22 | } 23 | return ret ; 24 | } 25 | 26 | queryParam(url); 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/150Arrayfrom API.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Arrayfrom API ES6 3 | date: 2016-10-13 12:36:00 4 | categories: javascript ES6 5 | tegs : ES6 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | Array.from(arrayLike[, mapFn[, thisArg]]) 该方法从一个类似数组或可迭代对象创建一个新的数组实例 12 | 13 | * 第一个参数是一个类数组对象， 14 | * 第二个参数作为map函数的callback执行， 15 | * 第三个参数是执行mapFn时候的this指向 16 | * 返回值是一个新的数组实例 17 | 18 | 关于类数组对象只要该对象中有length属性， 即可认为是类数组对象 19 | 20 | 1 将类数组转化为数组 21 | 22 | 先抛出一个问题，这个也是在网上看到的 23 | 24 | **如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？** 25 | 26 | 以下测试均在chorm浏览器，火狐有的版本会直接初始化为undefined 27 | 28 | ```javascript 29 | //很多人第一步如下 30 | var arr = Array(100);//但是这个是稀疏数组 31 | console.log(arr) ;//[] 32 | ``` 33 | 34 | 如果使用Array.from就很简单了 35 | 36 | ```javascript 37 | Array.from(arr);//这就成功创建了一个密集数组，所有的值都被初始化未undefined 38 | Array.from({length:100});//这个和上面达成的效果是一致的 39 | //[undefined,undefined,undefined···········] 40 | ``` 41 | 42 | 然后通过Object.keys(obj) 该方法返回obj对象的所有可枚举的**属性的键值**组成的 **数组**； 43 | 44 | ```javascript 45 | Object.keys(Array.from({length:100})) 46 | //[1,2,3,4······100] 47 | ``` 48 | 49 | 当然了上面这些是ES6的新特性，如何在ES5中达到类似的效果呢？方法其实也很多 50 | 51 | 方法1 : 52 | 53 | ```javascript 54 | var arrayLike = {length:100}; 55 | var arr1 = []; 56 | arr1.push.apply(arr1,arrayLike ); 57 | console.log(arr1);////[undefined,undefined,undefined···········] 58 | ``` 59 | 60 | 方法2 : 61 | 62 | ```javascript 63 | var arrayLike = {length:100}; 64 | var arr2 = Array.apply(null,arrayLike ); //Array方法也是为了创建一个新的数组 65 | //注意必须用apply，apply会将传入的数组或者类数组对象中的属性一一传入调用apply的函数中 66 | console.log(arr2);////[undefined,undefined,undefined···········] 67 | ``` 68 | 69 | 然后同样调用Object.keys(obj)方法即可； 70 | 71 | 2 将类数组转化的数组实例通过mapFn函数加工，返回一个加工后的数组 72 | 73 | ```javascript 74 | var arrayLike = {0:11,1:12,2:13,length:3}; 75 | var newArr = Array.from(arrayLike,item => item*2); 76 | console.log(newArr);//[22,24,26] 77 | ``` 78 | 79 | 3 对于HTMLLIST这样的类数组，不能通过原型访问数组的一些API 80 | 81 | ```javascript 82 | var divs = document.getElementsByTagName('div'); 83 | Array.prototype.map.call(divs,function(div){ 84 | console.log(div) 85 | }) 86 | ``` 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/151如何实现不同标签页之间的通信.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 如何实现不同标签页之间的通信 3 | date: 2016-08-15 12:36:00 4 | categories: cookies storage 5 | tags : cookies 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 1 通过cookie进行通信 12 | 13 | cookie简单理解就是一种可以让服务器在客户端的硬盘或者内存里面存储少量数据,或者说从客户端硬盘读取数据的技术. 14 | 15 | 1.1 cookie可以是**同域之间**的不同标签页进行通信 16 | 17 | 假设在域名www.myvirtual1.com有以下文件 18 | 19 | 01 cookies.html 20 | 21 | ```html 22 | 29 | ``` 30 | 31 | 02 cookies.html 32 | 33 | ```html 34 | 38 | ``` 39 | 40 | 1.2 不同域之间的标签页如何通过cookies进行通信呢？由于同源策略的影响，这个时候需要跨域来实现，这个时候需要设置cookie的domain属性 41 | 42 | 2 通过localStorage进行通信 43 | 44 | 假设在域名www.myvirtual1.com有以下文件 45 | 46 | 01localStorage.html 47 | 48 | ```html 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 66 | 67 | 68 | ``` 69 | 70 | 02localStorage.html 71 | 72 | ```html 73 | 80 | ``` 81 | 82 | storageEvent事件对象参数有以下常用属性 83 | 84 | ```javascript 85 | key 属性用来表示storage存储的键值对属性的键 86 | oldValue 属性用来表示storage存储的原来的属性值 87 | newValue 属性用来表示storage存储的原来的属性值 88 | ``` 89 | 90 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/152div居中的几种方式.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: div居中的几种方式 3 | date: 2016-06-02 12:36:00 4 | categories: css 5 | tags : css 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | div居中的几种方式 12 | 13 | ```css 14 | * 水平居中：给div设置一个宽度，然后添加margin:0 auto属性 15 | 16 | div{ 17 | width:200px; 18 | margin:0 auto; 19 | } 20 | 21 | * 让绝对定位的div居中 22 | 23 | div { 24 | position: absolute; 25 | width: 300px; 26 | height: 300px; 27 | margin: auto; 28 | top: 0; 29 | left: 0; 30 | bottom: 0; 31 | right: 0; 32 | background-color: pink; /* 方便看效果 */ 33 | } 34 | 35 | * 水平垂直居中一 36 | 37 | 确定容器的宽高 宽500 高 300 的层 38 | 设置层的外边距 39 | 40 | div { 41 | position: relative; /* 相对定位或绝对定位均可 */ 42 | width:500px; 43 | height:300px; 44 | top: 50%; 45 | left: 50%; 46 | margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */ 47 | background-color: pink; /* 方便看效果 */ 48 | 49 | } 50 | 51 | * 水平垂直居中二 52 | 53 | 未知容器的宽高，利用 `transform` 属性 54 | 55 | div { 56 | position: absolute; /* 相对定位或绝对定位均可 */ 57 | width:500px; 58 | height:300px; 59 | top: 50%; 60 | left: 50%; 61 | transform: translate(-50%, -50%); 62 | background-color: pink; /* 方便看效果 */ 63 | 64 | } 65 | 66 | * 水平垂直居中三 67 | 68 | 利用 flex 布局 69 | 实际使用时应考虑兼容性 70 | 71 | .container { 72 | display: flex; 73 | align-items: center; /* 垂直居中 */ 74 | justify-content: center; /* 水平居中 */ 75 | 76 | } 77 | .container div { 78 | width: 100px; 79 | height: 100px; 80 | background-color: pink; /* 方便看效果 */ 81 | } 82 | ``` 83 | 84 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/153cookie设置-读取-删除操作.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: cookie设置 读取 删除操作 3 | date: 2016-08-10 12:36:00 4 | categories: cookies storage 5 | tags : cookies 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### cookie设置，读取，删除 12 | 13 | ```html 14 | 69 | ``` 70 | 71 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/154Ajax-如何处理缓存.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ajax 如何处理缓存 3 | date: 2016-04-17 12:36:00 4 | categories: http ajax 5 | tags: http 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 1.GET请求缓存处理，不想要缓存GET请求？ 12 | 13 | 浏览器会缓存GET请求，不会缓存POST请求，因此解决为： 14 | 15 | 浏览器就会在本地硬盘上 查找 与该 URL 相关联的 Cookie 。如果该 Cookie 存在，浏览器就将它添加到 request header的Cookie字段中，与 http请求`一起发送到该站点 16 | 17 | 方法1：GET请求URL后加随机数，让服务器认为是不同的请求，如："http://www.example.com/index.jsp?class=articele&page=5&t"+new Date().getTime(); 18 | 19 | 或者 URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了 20 | 21 | 方法2：在ajax发送请求前加上xmlHttpRequest.setRequestHeader("If-modified-since","0"); 22 | 23 | 方法3：在ajax发送请求前加上xmlHttpRequest.setRequestHeader("Cache-Control","no-cache"); 24 | 25 | 方法4：若为[jQuery](http://lib.csdn.net/base/jquery) ajax, 设置ajax属性cache:false;(注意：cache属性对post没有用，对get才有用)或者 26 | 27 | beforeSend :function(xmlHttp){ 28 | xmlHttp.setRequestHeader("If-Modified-Since","0"); 29 | xmlHttp.setRequestHeader("Cache-Control","no-cache"); 30 | }, 31 | 32 | 方法5：在服务器端响应请求时加上response.setHeader("Cache-Control","no-cache,must-revalidate"); 33 | 34 | 方法6：使用POST代替GET,浏览器不会对POST做缓存 35 | 36 | 37 | 38 | 注意：为什么cache属性对post没有用，对get才有用？ 39 | 40 | 因为1.浏览器缓存url请求原理就是判断url是否相同，url相同则读取缓存，url不相同则读取服务器 41 | 42 | 2.使用GET方式提交url类似"http://www.example.com/index.jsp?class=articele&page=5“，而POST方式提交url类似http://www.example.com/index.jsp，参数是在请求 head里的，不在url上，请求参数url始终相同 43 | 44 | 3.jquery ajax GET方式提交： data: "t=" + new Date().getTime(),  或者 data:{"t": new Date().getTime()}或者cash:false都是在请求后面加上不同的参数，cach:false会启动生成参数附加在url请求里，因此浏览器认为是不同的请求，就重新请求服务器 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/16-jquery中 get() 和 index().md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery核心 3 | date: 2016-09-24 12:36:00 4 | categories: jQuery 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | 1 核心 $("selector"):这个函数接收一个包含 CSS 选择器的**字符串**，然后用这个字符串去匹配一组元素。**注意**：如果**选择器字符串**含有**变量** 的话需要进行**字符串拼接**。 11 | 12 | ``` 13 |
14 |
    15 |
  • 我是体育模块
    • 16 |
  • 我是娱乐模块
    • 17 |
  • 我是新闻模块
    • 18 |
  • 我是综合模块
    • 19 |
20 |
21 | 如果index是以变量的形式存在的话，那么，第一行代码获取对应索引位置的li元素是无法获取的，第二行字符串的拼接才是正确的写法。 22 | var index = 2 ； 23 | $(".bd li:eq(index)").prop("class","current");//错误写法 24 | $(".bd li:eq("+index+")").prop("class","current"); 25 | ``` 26 | 27 | 2 jquery中 get() 和 index() 如何区分DOM对象和jquery对象的区分 28 | 29 | * get()方法：这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数,也就是说此时将jquery对象转化成了DOM对象； 30 | 31 | jqueryObj.get():如果不传参数index，那么将返回匹配到的所有对象组成的DOM元素集合； 32 | 33 | jqueryObj.get(index):如果传入index参数，那么将返回匹配到元素集合中的第几个DOM元素，其中index代表索引值； 34 | 35 | **注意返回值是DOM元素，不能用jquery方法** ；get(index)方法中的index索引值是从0 开始的； 36 | 37 | * index()方法：如果不传参数，那么返回值是当前jquery对象在其同辈元素中的索引值(从0 开始) 38 | 39 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/161AngularJsModule.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Angular Js angularModule 3 | date: 2016-10-17 12:36:00 4 | categories: javascript 5 | comments : true 6 | tags : [Angular,module] 7 | updated : 8 | layout : 9 | --- 10 | 11 | 1 模块的定义 12 | 13 | module是angular中重要的模块组织方式，它提供了将一组内聚的业务组件（controller、service、filter、directive…）封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装，然后利用module的依赖注入其关联的模块内容，使得我们能够更好的”分离关注点“，达到更好的”高内聚低耦合“。”高内聚低耦合“是来自面向对象设计原则。内聚是指模块或者对象内部的完整性，一组紧密联系的逻辑应该被封装在同一模块、对象等代码单元中，而不是分散在各处；耦合则指模块、对象等代码单元之间的依赖程度，如果一个模块的修改，会影响到另一个模块，则说明这两模块之间是相互依赖紧耦合的。 14 | 15 | 同时module也是我们angular代码的入口，首先需要声明module，然后才能定义angular中的其他组件元素，如controller、service、filter、directive、config代码块、run代码块等。 16 | 17 | 关于module的定义为：angular.module(‘com.ngbook.demo’, [])。关于module函数可以传递3个参数，它们分别为： 18 | 19 | 1. name：模块定义的名称，它应该是一个唯一的必选参数，它会在后边被其他模块注入或者是在ngAPP指令中声明应用程序主模块； 20 | 2. requires：字符串的参数列表；模块的依赖，它是声明本模块需要依赖的其他模块的参数。特别注意：如果在这里没有声明模块的依赖，则我们是无法在模块中使用依赖模块的任何组件的；它是个可选参数。 21 | 3. configFn： 模块的启动配置函数，在angular config阶段会调用该函数，对模块中的组件进行实例化对象实例之前的特定配置，如我们常见的对$routeProvider配置应用程序的路由信息。它等同于”module.config“函数，建议用”module.config“函数替换它。这也是个可选参数。 22 | 23 | 我们可以打印出来angular全局对象和angular.module()这个方法返回的对象来更深入的了解它们之间的关系 24 | 25 | ```html 26 | 27 | 28 | 29 | 30 | mudule submit 31 | 32 | 33 | 34 | 38 | 39 | 40 | ``` 41 | 42 | 2 声明module之后，其他组件元素，如controller、service、filter、directive、config代码块、run代码块也就可以在对应的模块上使用了。 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/169XMIHttpRequest-Level2-FormData.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: XMIHttpRequestLevel2FormData 3 | date: 2016-09-22 4 | categories: ajax 5 | tags : Http 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 1 首先来看下声明是FormData (查看MDN官方文档) 12 | 13 | XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的[send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件. 14 | 15 | 2 看下之前上传文件的限制 16 | 17 | 3 用这个新特性上传文件的优势 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/17-jQuery js offset系列的不同.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery js offset系列的不同 3 | date: 2016-11-10 12:36:00 4 | categories: css 5 | tags: css 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | jQuery中和DOM中 offset系列的不同； 12 | 一　offset 13 | 14 | * jQuery中offset( ) 方法获取元素距离边界的值，该方法返回两个整形数值，一个代表left,一个代表top，其始终是获取的当前jquery对象相对于文档的边界的距离； 15 | 16 | 不写参数：jqueryObj.offset().left jqueryObj.offset().top 可以获取相应值 17 | 18 | 传入键值对参数：jQueryObj.offset({left:30,left:50});可以将匹配的元素设置距离边界的距离。 19 | 20 | * DOM中的offsetLeft offsetTop 获取**元素**距离边界值， 21 | 22 | 1)如果父元素有定位，那么DOM子元素是相对于父元素的border内边界的距离； 23 | 24 | 2)如果父元素没有定位，那么子元素是相对于文档边界的距离； 25 | 26 | 3)offsetLeft offsetTop 只能获取值，不能设置值，是一个只读属性； 27 | 28 | 4)offsetLeft 经常结合定位进行轮播图的封装，因为offsetLeft指的是子元素border外边界相对于父元素border内边界的距离，而定位的left值代表的也是这一段距离。 29 | 30 | 二，事件对象参数的offsetX offsetY clientX clientY的区别 31 | 32 | 先总结下区别： 33 | 34 | **event.clientX、event.clientY** 35 | 36 | 鼠标相对于[浏览器](http://www.2cto.com/os/liulanqi/)窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 37 | 38 | **event.pageX、event.pageY** 39 | 40 | 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 41 | 42 | **event.offsetX、event.offsetY** 43 | 44 | 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。 45 | 46 | **event.screenX、event.screenY** 47 | 48 | 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性 49 | 50 | ![图xy2 :执行完rotateZ(90deg)](img/2014091409260873.png) 51 | 52 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/17-事件对象参数中 offsetx clientx pagex screenx；.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery中和DOM中 offset系列的不同 3 | date: 2016-08-17 12:36:00 4 | tags: jQuery 5 | categories: css 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | jQuery中和DOM中 offset系列的不同； 12 | 13 | 一 、jQuery中offset( ) 方法获取元素距离边界的值，该方法返回两个整形数值，一个代表left,一个代表top，其始终是获取的当前jquery对象相对于文档的边界的距离； 14 | 15 | 不写参数：jqueryObj.offset().left jqueryObj.offset().top 可以获取相应值 16 | 17 | 传入键值对参数：jQueryObj.offset({left:30,left:50});可以将匹配的元素设置距离边界的距离。 18 | 19 | DOM中的offsetLeft offsetTop 获取**元素**距离边界值， 20 | 21 | 1)如果父元素有定位，那么DOM子元素是相对于父元素的border内边界的距离； 22 | 23 | 2)如果父元素没有定位，那么子元素是相对于文档边界的距离； 24 | 25 | 3)offsetLeft offsetTop 只能获取值，不能设置值，是一个只读属性； 26 | 27 | 二，事件对象参数的offsetX offsetY clientX clientY pageX pageY screenX screenY的区别 28 | 29 | 先总结下区别：(注意这些值都是整形的数值，代表事件源距离不同边界的以px计 的距离) 30 | 31 | **event.clientX、event.clientY** 32 | 33 | 鼠标相对于[浏览器](http://www.2cto.com/os/liulanqi/)窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 34 | 35 | **event.pageX、event.pageY** 36 | 37 | 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 38 | 39 | **event.offsetX、event.offsetY** 40 | 41 | 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。 42 | 43 | offsetX offsetY(偏移) 获取鼠标点击事件源相对于元素(content+padding)的左上角的坐标值,如果点击在border边界上的话，那么值为负数； 44 | 45 | **event.screenX、event.screenY** 46 | 47 | 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性 48 | 49 | ![图xy2 :执行完rotateZ(90deg)](img/2014091409260873.png) 50 | 51 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/172ClientRenderOrServerRender.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ClientRenderOrServerRender 3 | date: 2016-09-12 12:36:00 4 | categories: template 5 | tags : render 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 模板引擎 （Template Engine）是Web开发中将展现层和数据分离的一项技术。模板引擎根据一定的语义，将数据填充到模板中，产生最终的HTML页面。模板引擎渲染的位置可分为客户端和服务器端。 12 | 13 | **服务器端渲染**：模板引擎在服务器端将模板和数据合成，返回最终的HTML页面 14 | 15 | - 客户端渲染通常使用JavaScript脚本，如果某些客户端不支持JavaScript，就需要在服务器端渲染； 16 | - 搜索引擎通常不执行JavaScript脚本，要做到SEO友好，就必须实现服务器端渲染； 17 | - SEO 很多爬虫是不认的。 18 | - 首次打开速度，各种加载 速度很慢。 19 | 20 | **客户端渲染**：将模板和数据分别传送到客户端，在客户端由JavaScript模板引擎渲染出最终的HTML视图。 21 | 22 | - 可以对模板文件（相对静态）进行缓存和负载平衡，对于流量很大的公众站点非常有价值； 23 | - 由于将模板渲染的计算转移到客户端，可降低服务器负荷； 24 | - 各种原来服务器做的事情丢给客户端做了，减少开销。 25 | - 如果一个前端页面的内容分别来自多个后台系统，而这些后台的架构各不相同（Java、.NET、Ruby等），则服务器端渲染需要采用不同的技术，模板资源无法共享。客户端渲染则不存在这个问题，不同的后台系统可采用相同的客户端渲染技术，这样互相之间的模板资源可以公用，前端页面的整合非常容易； 26 | 27 | 注意问题 28 | 29 | * 客户端渲染和服务端渲染的时候，文件的语法格式不能一样，否则会冲突 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/175Angular-Js-directive.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Angular Js directive 3 | date: 2016-10-21 4 | categories: javascript 5 | tags : [Angular,directive] 6 | updated : 7 | layout : 8 | --- 9 | 10 | ### 1 自定义指令中的scope属性详解 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/176src和href的区别.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: src和href的区别 3 | date: 2016-09-13 12:36:00 4 | categories: javascript 5 | tegs : [src,href] 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 写代码的时候就经常把这两个属性弄混淆，到底是href还是src，**href**标识超文本引用，用在**link**和**a**等元素上，**href**是引用和页面关联，是在当前元素和引用资源之间建立联系，**src**表示引用资源，表示替换当前元素，用在**img**，**script**，**iframe**上，src是页面内容不可缺少的一部分。 12 | 13 | 　　**src**是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求**src**资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。 14 | 15 | \当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。 16 | 17 | \当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。 18 | 19 | 20 | 21 | 补充：link和@import的区别 22 | 23 | 两者都是外部引用CSS的方式，但是存在一定的区别： 24 | 25 | 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 26 | 27 | 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 28 | 29 | 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 30 | 31 | 区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/178几种缓存的总结.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 几种缓存的总结 3 | date: 2016-10-19 12:36:00 4 | categories: javascript 5 | tegs : cache 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 几种缓存的总结 12 | 13 | ### 1 DNS缓存 14 | 15 | * 为了增加访问效率，计算机有域名缓存机制，当访问过某个网站并得到其IP后，会将其域名和IP缓存下来，下一次访问的时候，就不需要再请求域名服务器获取IP，直接使用缓存中的IP，提高了响应的速度。当然缓存是有有效时间的，当过了有效时间后，再次请求网站，还是需要先请求域名解析。 16 | * 但是域名缓存机制也可能会带来麻烦。例如IP已变化了，仍然使用缓存中的IP来访问，将会访问失败。再如 同一个域名在内网和外网访问时所对应的IP是不同的，如在外网访问时通过外网IP映射到内网的IP。同一台电脑在外网环境下访问了此域名，再换到内网来访问此域名，在DNS缓存的作用下，也会去访问外网的IP，导致访问失败。根据情况，可以手动清除DNS缓存或者禁止DNS缓存机制。 17 | 18 | ### 2 CDN缓存 19 | 20 | * 用户在浏览网站的时候，浏览器能够在本地保存网站中的图片或者其他文件的副本，这样用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了下载量意味着提高了页面加载的速度。 21 | * 如果中间加上一层CDN，客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接响应用户请求，此时一个完成http请求结束；如果数据已经过期，那么CDN还需要向源站发出回源请求（back to the source request）,来拉取最新的数据 22 | 23 | ### 3 浏览器端缓存 24 | 25 | http缓存 localStorage缓存 sessionStorage缓存 cookies缓存 application cache缓存 26 | 27 | ### 4 服务器缓存 28 | 29 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/18-jQuery中筛选的总结.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery选择器 3 | date: 2016-09-17 12:36:00 4 | tags: jQuery 5 | categories: jQuery 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | jQuery中筛选的总结： 12 | 13 | 1 查找子代 children( ),如果不加选择器，那么将选择所有的子代元素，可以加一个选择器进行筛选；注意仅仅匹配子代元素，不匹配后代（子代的子代）； 14 | 15 | 查找所有后代 find( " selector" ),可以选择所有的后代元素，包括子代的子代； 16 | 17 | 2 查找同辈元素：next() prev( ) 查找当前匹配到所有的对象的紧邻的后(前)一个元素；nextAll( ) prevAll( ),查找当前匹配对象的所有的对象的后面(前面)的所有元素； 18 | 19 | 3 查找匹配元素：first( ) last( ) ，查找匹配元素的第一个或者最后一个元素； 20 | 21 | ```html 22 | 34 | $("#ulist").children() 35 | $("#ulist").children("li");//不包括最里面的li 36 | $("#ulist").find("li");//包括最里面的Li 37 | $("#list").prev();//获取list item1 38 | $("#list").prevAll();//获取当前对象前面的所有的同辈元素 39 | $("li").first();//查找匹配元素的第一个或者最后一个元素,此时匹配的是listitem0 40 | ``` 41 | 42 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/187isNaN-And-NumberisNaN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: isNaN And NumberisNaN 3 | date: 2017-04-19 12:36:00 4 | categories: ES6 5 | tags : [NaN] 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | Document 19 | 20 | 21 | 54 | 55 | 56 | ``` 57 | 58 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/224ImmutabaleJS.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/javascript1-基础/224ImmutabaleJS.md -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/228for循环.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: for循环 3 | date: 2016-06-09 22:00:00 4 | categories: javascript 5 | tags : for 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### 1 for-in循环用来获取对象或者数组的 **键名** (包括ES6的Map和Set数据结构) 12 | 13 | ``` 14 | let arr = ['bar',,'foo'] 15 | console.log(arr.length) 16 | for(let a in arr ){ 17 | console.log(Object.prototype.hasOwnProperty.call(arr,a)) 18 | console.log(a) // 0 2 19 | } 20 | 如果arr是不是可遍历的结构，那么该循环则不会执行。 21 | ``` 22 | 23 | ### 2 for-of 循环用来遍历获取对象或者数组的 **键值** (包括ES6的Map和Set数据结构) 24 | 25 | ```javascript 26 | for (let a of arr){ 27 | console.log(a) //bar undefined foo 28 | } 29 | //for-of 循环会将数组中定义或者未定义的键值都遍历 30 | ``` 31 | 32 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/29-webstorm编辑器运用小技巧.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: webStorm 运用快捷键 3 | date: 2016-09-12 12:36:00 4 | categories: javascript 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | webstorm编辑器运用小技巧 11 | 12 | 1 如何比较两份文件的区别：先复制，然后与剪贴板进行比较: 视图-->与剪贴板比较 13 | 14 | 2 webstorm默认是没有换行的: 15 | 16 | * 单个文件设置：视图--活跃编辑器--启用自动换行 17 | * 系统设置，每个文件都要自动换行：文件--设置--编辑器--softwraps--启用软换行 18 | 19 | 3 鼠标点击某个方法或者某个类，按住ctrl+鼠标左键，可以直接进入该方法或者类所在文件 20 | 21 | 4 快捷键设置 22 | 23 | ```html 24 | 快捷键配置 25 | 点击“File”-> “settings” 26 | 27 | Webstorm预置了其他编辑器的快捷键配置，可以点击 28 | 29 | 30 | 31 | 默认配置-Eclipse的常用快捷键对照表 32 | 查找/代替 33 | Webstorm快捷键 Eclipse快捷键 说明 34 | ctrl+shift+N ctrl+shift+R 通过文件名快速查找工程内的文件（必记） 35 | ctrl+shift+alt+N ctrl+shift+alt+N 通过一个字符快速查找位置（必记） 36 | ctrl+F ctrl+F 在文件内快速查找代码 37 | F3 ctrl+K 查找下一个 38 | shift+F3 ctrl+shift+K 查找上一个 39 | ctrl+R ctrl+F 文件内代码替换 40 | ctrl+shift+R 指定目录内代码批量替换 41 | ctrl+shift+F ctrl+H 指定目录内代码批量查找 42 | 界面操作 43 | 44 | Webstorm快捷键 Eclipse快捷键 说明 45 | ctrl+shift+A ctrl+shift+A 快速查找并使用编辑器所有功能（必记） 46 | alt+[0-9] alt+[0-9] 快速拆合功能界面模块 47 | ctrl+shift+F12 ctrl+shift+F12 最大区域显示代码（会隐藏其他的功能界面模块） 48 | alt+shift+F alt+shift+F 将当前文件加入收藏夹 49 | ctrl+alt+s ctrl+alt+s 打开配置窗口 50 | ctrl+tab ctrl+tab 切换代码选项卡（还要进行此选择，效率差些） 51 | alt+←/→ alt+←/→ 切换代码选项卡 52 | ctrl+F4 ctrl+F4 关闭当前代码选项卡 53 | 代码编辑 54 | Webstorm快捷键 Eclipse快捷键 说明 55 | ctrl+D ctrl+shift+↑ 复制当前行 56 | ctrl+W alt+shift+↑ 选中单词 57 | ctrl+←/→ 58 | ctrl+←/→ 59 | 以单词作为边界跳光标位置 60 | alt+insert alt+insert 新建一个文件或其他 61 | ctrl+alt+L ctrl+alt+L 格式化代码 62 | shift+tab/tab shift+tab/tab 减少/扩大缩进（可以在代码中减少行缩进） 63 | ctrl+Y ctrl+D 删除一行 64 | shift+enter shift+enter 重新开始一行（无论光标在哪个位置） 65 | 导航 66 | 67 | Webstorm快捷键 Eclipse快捷键 说明 68 | esc esc 进入代码编辑区域 69 | alt+F1 alt+F1 查找代码在其他界面模块的位置，颇为有用 70 | ctrl+G ctrl+L 到指定行的代码 71 | ctrl+]/[ ctrl+]/[ 光标到代码块的前面或后面 72 | alt+up/down ctrl+shift+up/down 上一个/下一个方法 73 | ``` 74 | 75 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/61-cmd常用命令行.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CMD command 3 | date: 2016-04-11 12:36:00 4 | categories: window 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | cmd常用命令行 11 | 12 | #### 1 IP地址 13 | 14 | 所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话需要一个号码一样) 15 | 16 | 查看本机IP地址 ping、ipconfig、ifconfig（linux） 17 | 18 | > ipconfig ... 显示信息 19 | > ipconfig /all ... 显示详细信息 20 | > ipconfig /renew ... 更新所有适配器 21 | > ipconfig /renew EL* ... 更新所有名称以 EL 开头 22 | 的连接 23 | > ipconfig /release *Con* ... 释放所有匹配的连接， 24 | 例如“有线以太网连接 1”或 25 | “有线以太网连接 2” 26 | > ipconfig /allcompartments ... 显示有关所有隔离舱的 27 | 信息 28 | > ipconfig /allcompartments /all ... 显示有关所有隔离舱的 29 | 详细信息 30 | #### 2、域名 31 | 32 | 由于IP地址基于数字，不方便记忆，于是便用域名来代替IP地址，域名是一个IP地址的“面具” 33 | 34 | 查看域名对应的IP地址 ping 35 | 36 | #### 3、DNS服务 37 | 38 | DNS（Domain Name System）因特网上作为域名和IP地址相互映射的一个分布式数据库， 能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。 39 | 40 | 简单的说就是记录IP地址和域名之间对应关系的服务。 41 | 42 | **查找优先级 本机hosts文件、DNS服务器** 43 | 44 | ipconfig /flushdns 刷新DNS 45 | 46 | #### 4、端口 47 | 48 | 端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。 49 | 50 | *现实生活中，银行不同的窗口办理不同的业务。* 51 | 52 | 查看端口占用情况 netstat -an 53 | 54 | 常见端口号 80、8080、3306、21、22 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/63-for-in foreach .md: -------------------------------------------------------------------------------- 1 | --- 2 | title: forin 遍历数组和对象细节 3 | date: 2015-09-19 12:36:00 4 | categories: javascript 5 | comments : true 6 | updated : 7 | layout : 8 | --- 9 | 10 | ## for in 11 | 12 | ```javascript 13 | //for in 遍历的是数组的索引 ，而不是数组的值 14 | var arr= ["name","age","address"] 15 | for (let key in arr ){ 16 | console.log(key); 17 | } 18 | //--------------------------------------- 19 | //遍历对象的时候，遍历的是对象的属性，而不是属性值 20 | var obj = {name:"Jhon",age:14}; 21 | for(let key in obj){ 22 | console.log(key); 23 | } 24 | 25 | ``` 26 | 27 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/66XML.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: XML base 3 | date: 2015-11-09 4 | categories: javascript 5 | tags: xml 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | XML 12 | 13 | 1 XML声明以及基础语法 14 | 15 | ```xml 16 | 17 | 19 | 20 | George 21 | John 22 | Reminder 23 | Don't forget the meeting! 24 | 25 | 26 | 27 | ..... 28 | 29 | 30 | ``` 31 | 32 | 注意:xml如何形成良好的语法习惯 33 | 34 | - 1)XML 文档必须有根元素 2) XML 文档必须有关闭标签 3)XML 标签对大小写敏感 35 | - 4)XML 元素必须被正确的嵌套 5)XML 属性必须加引号 36 | 37 | | < | < | 小于 | 38 | | ------ | ---- | ---- | 39 | | > | > | 大于 | 40 | | & | & | 和号 | 41 | | ' | ' | 单引号 | 42 | | " | " | 引号 | 43 | 44 | 2 xml命名规则:可使用任何名称，没有保留的字词。 45 | 46 | - 1)名称可以含字母、数字以及其他的字符 2)名称不能以数字或者标点符号开始 47 | - 3)名称不能以字符 “xml”（或者 XML、Xml）开始 4)名称不能包含空格 48 | 49 | 3 xml元素和属性:元数据（有关数据的数据）应当存储为属性，比如id 用来查找元素的，可以存储为属性；而数据本身应当存储为元素。 50 | 51 | 因使用属性而引起的一些问题,请尽量使用元素来描述数据。而仅仅使用属性来提供与数据无关的信息 52 | 53 | - 1)属性无法包含多重的值（元素可以） 2)属性无法描述树结构（元素可以） 54 | - 3)属性不易扩展（为未来的变化） 4)属性难以阅读和维护 55 | 56 | 57 | 4 xmlDOM XMLHttpRequest对象:XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/76-事件委派.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: eventDelegate 3 | date: 2016-04-11 4 | categories: javascript 5 | tags: event 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### 事件委派 12 | 13 | 1 jQuery事件委派:可以理解为，本来应该下属做的事情，却由领导做了 14 | 15 | ```html 16 | 21 | 33 | ``` 34 | 35 | 以上两种绑定事件的方式所实现的效果是一样的，但是需要注意 36 | 37 | 第一种绑定方式 click 38 | 39 | * 1 很耗费资源，因为这种方式是给每个li都加上了事件，li的个数少的话还没事，如果li多的话会很耗费资源。 40 | 41 | 2 如果后期动态添加li，不会拥有这个弹出事件。 42 | 43 | 第二种绑定方式 delegate 44 | 45 | * 1 可以解决耗费资源的问题，只绑定给ul元素一个事件处理程序 46 | * 2 后期动态添加的子元素，也会拥有该事件处理程序 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/88-form表单 属性常用总结.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: form 3 | date: 2016-04-11 12:36:00 4 | categories: javascript 5 | tags: form 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### form表单属性常用总结 12 | 13 | 1 enctype 设置或返回表单用来编码内容的 MIME 类型；规定在发送表单数据之前如何对其进行编码。 14 | 15 | * enctype 属性可设置或返回用于 **编码表单内容** 的 MIME 类型。如果表单没有 enctype 属性，那么当提交文本时的默认值是 "application/x-www-form-urlencoded"。 16 | * 当 input type 是 "file" 时，必须设置是 "multipart/form-data"。 17 | * 注意enctype属性是 用来设置如何对提交的内容进行编码的 属性 18 | 19 | 20 | | 值 | 描述 | 21 | | --------------------------------- | ---------------------------------------- | 22 | | application/x-www-form-urlencoded | (默认) 在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。 | 23 | | multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 | 24 | | text/plain | 空格转换为 "+" 加号，但不对特殊字符编码。**如果设置该属性,这不会对上传数据进行编码** | 25 | 26 | 2 method 属性,规定表单以何种方式向服务器发送数据 27 | 28 | ​ 2.1 get方式发送数据 这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。 29 | 30 | **如果不指定method属性值，默认以get方式发送数据** 31 | 32 | ```html 33 |
34 | 35 | 36 | 37 |
38 | 地址栏显示:http://127.0.0.1/03-ajxa/mycode/35-form.php?username=txt&psw=password 39 | ``` 40 | 41 | ​ 2.2 post 方式发送数据 浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数 42 | ```html 43 |
44 | 45 | 46 | 47 |
48 | 地址栏显示:http://127.0.0.1/03-ajxa/mycode/35-form.php 49 | ``` 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/91-hasOwnProperty(property)和in的区别.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: hasOwnProperty和in的区别 3 | date: 2016-04-11 12:36:00 4 | categories: javascript 5 | tags: array 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ## hasOwnProperty("property") 和 in 的区别 12 | 13 | 1 先看各自应用 14 | 15 | ```html 16 | 28 | ``` 29 | 30 | 2 "property" in obj 返回布尔类型，用于判断某个对象上是否有某个属性，包括其实例化的属性，以及原型链上的属性 31 | 32 | obj.hasOwnProperty("property") 返回布尔类型，用于判断某个对象上是否有某个属性，但是仅仅指的是实例化的属性，不包括原型上的属性,也不包括属性指向一个对象当中的属性； 33 | 34 | "property" in obj 可以判断一个对象是否有原生属性或者原型属性; 35 | 36 | obj.hasOwnProperty("property") 只能判断原生属性，不能判断原型属性 37 | 38 | **注意属性一定要用引号括起来** 39 | 40 | 3 我们可以进行一个封装，用来判断某个属性是否在原型上 41 | 42 | ```javascript 43 | function hasProperty (property,obj){ 44 | if(property in obj && !obj.hasOwnProperty(property)){ 45 | return true ;//该属性在原型上 46 | }else{ 47 | return false; 48 | } 49 | } 50 | //注意property传入字符串属性 51 | var result1 = hasProperty("foo",test1); 52 | console.log(result1);//false 53 | var result2 = hasProperty("name",test1); 54 | console.log(result2);//true 55 | ``` 56 | 57 | 4 对于下面这种情况也要引起注意 58 | 59 | ```javascript 60 | var obj = { 61 | name:"Jhon", 62 | age:13, 63 | address:"American", 64 | InnerObj:{ 65 | gender:"man" 66 | } 67 | } 68 | console.dir(obj); 69 | console.log( obj.hasOwnProperty("name"));//true 70 | console.log("name" in obj); //true 71 | console.log("gender" in obj); //fasle 72 | //"gender"并不是实例化对象的属性，也不是在原型上的属性 73 | console.log( obj.hasOwnProperty("gender"));//false 74 | ``` 75 | 76 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/93-select 的值选择的哪一个？.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: select 值提交选择哪一个？ 3 | date: 2016-03-11 12:36:00 4 | categories: javascript 5 | tags: form 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ### select 的值选择的哪一个？ 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 25 | 26 | 27 | 42 | 49 | 50 | 51 | ``` 52 | 53 | 每次改变选择的值的时候，都会输出 select 的value值，那么这个value的值到底指的是哪一个？ 54 | 55 | 这里总结如下： 56 | 57 | * 如果option标签有value属性，那么当选中该option选项的时候，select的value值就是option标签的value属性的值；如果value属性值为为空字符串，那么就是空字符串 58 | * 如果option标签没有value属性，那么当选中该option选项的时候，select的value值就是option标签的文本节点的值； 59 | * 对于select的value取值 : option标签的value属性值优先于option标签的文本节点的值 -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/README.md: -------------------------------------------------------------------------------- 1 | 2015-2017 一些基础的博客和总结； -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hello World 3 | date: 2015-07-29 4 | --- 5 | Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues). 6 | 7 | ## Quick Start 8 | 9 | ### Create a new post 10 | 11 | ``` bash 12 | $ hexo new "My New Post" 13 | ``` 14 | 15 | More info: [Writing](https://hexo.io/docs/writing.html) 16 | 17 | ### Run server 18 | 19 | ``` bash 20 | $ hexo server 21 | ``` 22 | 23 | More info: [Server](https://hexo.io/docs/server.html) 24 | 25 | ### Generate static files 26 | 27 | ``` bash 28 | $ hexo generate 29 | ``` 30 | 31 | More info: [Generating](https://hexo.io/docs/generating.html) 32 | 33 | ### Deploy to remote sites 34 | 35 | ``` bash 36 | $ hexo deploy 37 | ``` 38 | 39 | More info: [Deployment](https://hexo.io/docs/deployment.html) 40 | -------------------------------------------------------------------------------- /JavaScript/javascript1-基础/live or life.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: live for life ? or live to life 3 | date: 2017-03-25 12:36:00 4 | categories: 随笔 5 | tegs : 随笔 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | ## life or live ? 12 | 13 | 1 有时候，为了生活或者更好的生活，为了父母可以有个安稳的、健康的晚年，为了未来的家庭可以安稳，自己总要去经历很多，孤军奋战，默默地去努力，去奋斗. 14 | 15 | ​ 时光就是像沙漏，它溜走的速度超过你的想象，在北京漂泊总是回想过去的日子，有人陪你玩，有人陪你笑 16 | 17 | ​ 很多人说，孤独吗？那就对了，孤独就是你成长的时候； 18 | 19 | ​ 也有很多人说，能承受多大的委屈和孤独，就能撑起多大的梦想和责任； 20 | 21 | 其实我觉得，幸福感才是最重要的，一个人的幸福感来自于他对于生活节奏的把控，对于时间管理的合理化；如果感到了孤独，那就联络下朋友，新朋友，老朋友都可以；如果感到委屈了，那就去努力去忘掉那些委屈，没有谁的生活是不委屈的，没有背景，没有依赖，那就得靠自己； 22 | 23 | 2 很多人知道马云那句:梦想还是要有的，万一实现了呢？ 24 | 25 | 我觉得 梦想可以有， 26 | 27 | 无论能不能实现，不放弃，不浮躁，埋下它的种子， 28 | 29 | 实现了则为它喝彩， 30 | 31 | 不实现，至少我们曾经为了它真正的战斗过； 32 | 33 | 坚持一下下，阳光总会来的； 34 | 35 | 3 毕业转眼两年了，对于市面上的各种鸡汤从来不感冒，一直觉得一个人的强大不在于外在的力量驱使，也不在于别人的鼓励和支持，一个人真正的强大来自于过去所有的时间的打磨和沉淀，或者说，一个人的不强大来自于过去所有的时间的打磨和沉淀； 36 | 37 | 愿我们每个正值青春奋斗的年纪的各位，走在路上，并且健康、积极的走在路上，成为自己想要成为的人，过自己想要的生活。 38 | 39 | 4 一个人要有自己的爱好，对于我来说，音乐和篮球是我爱好的主战场，有了它们，确实会让我感到平静许多；每次触摸到篮球，我就会感到充实和快乐；浮躁的时候听一些自己喜欢的音乐，会让自己安静下来。 40 | 41 | 有爱好的人是幸福的，它会让我们感到存在。 42 | 43 | 5 最近一段时间确实感到很累，记一笔吧。 44 | 45 | 46 | 47 | ​ 2017.3.20 12:48 48 | 49 | 继续学习，一点点啃掉各个技术难点。 -------------------------------------------------------------------------------- /JavaScript/javascript2/001变量提升和 this .md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/javascript2/001变量提升和 this .md -------------------------------------------------------------------------------- /JavaScript/javascript2/006文件和二进制对象.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 文件和二进制对象 3 | date: 2017-07-06 4 | categories: html5 5 | tags: file 6 | 7 | --- 8 | 9 | ## 文件和二进制对象 10 | 11 | ### 1 Blob对象是其他文件或者二进制数据对象的基类：包括 12 | 13 | - File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件； 14 | - FileList对象：File对象的网页表单接口； 15 | - FileReader对象：负责将二进制数据读入内存内容； 16 | - URL对象：用于对二进制数据生成URL。 17 | 18 | 1.1 Blob对象生成方法 19 | 20 | 构造函数的方法 21 | 22 | ```javascript 23 | var htmlParts = ["hey!<\/b><\/a>"]; 24 | var myBlob = new Blob(htmlParts, { "type" : "text\/xml" }); 25 | ``` 26 | 27 | Blob对象的slice方法，将二进制数据按照字节分块，返回一个新的Blob对象。 28 | 29 | ```javascript 30 | var newBlob = oldBlob.slice(startingByte, endindByte); 31 | ``` 32 | 33 | 1.2 Blob对象的属性 34 | 35 | - size：二进制数据的大小，单位为字节。 36 | - type：二进制数据的MIME类型，全部为小写，如果类型未知，则该值为空字符串。 37 | 38 | 1.3 Blob对象的一一般使用 39 | 40 | * 通过a标签的href以及download属性进行文件下载 41 | * 通过img的src和background 的url属性都可以通过接收图片的网络地址或base64来显示图片 42 | * 两者都需要用到window.URL对象，将Blob对象转化为一个网络地址 43 | 44 | 例子 45 | 46 | ```javascript 47 | //通过url下载 48 | createDownload("download.txt","download file"); 49 | 50 | function createDownload(fileName, content){ 51 | var blob = new Blob([content]); 52 | var link = document.createElement("a"); 53 | link.innerHTML = fileName; 54 | link.download = fileName; 55 | link.href = URL.createObjectURL(blob); 56 | document.getElementsByTagName("body")[0].appendChild(link); 57 | } 58 | 59 | ``` 60 | 61 | -------------------------------------------------------------------------------- /JavaScript/javascript2/007ajax请求分类.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 浏览器环境小结 3 | date: 2017-07-11 4 | categories: javascript 5 | tags: sync 6 | --- 7 | 8 | -------------------------------------------------------------------------------- /JavaScript/javascript2/00内置全局变量-函数.md: -------------------------------------------------------------------------------- 1 | title: 2 | 3 | --- 4 | 5 | ### isNaN 6 | 7 | ```javascript 8 | var isNaN = function(value) { 9 | var n = Number(value); 10 | return n !== n; 11 | }; 12 | ``` 13 | 14 | ```javascript 15 | isNaN('ss') //true 16 | isNaN(NaN); 17 | 18 | Number.isNaN('ss') //false 19 | 20 | NaN === NaN //false 21 | ``` 22 | 23 | ### isFinite 24 | 25 | 你可以用这个方法来判定一个数字是否是有限数字。`isFinite` 方法检测它参数的数值。如果参数是 `NaN`，正无穷大或者负无穷大，会返回`false`，其他返回 `true`。 -------------------------------------------------------------------------------- /JavaScript/javascript2/020String小节.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:String小结 3 | date: 2017-08-28 4 | categories: string 5 | tags: 6 | --- 7 | 8 | ### 1 字符串的操作在工作中用的很频繁，每个API的一些基本用法以及细节，技巧等需要我们掌握的透彻，才能融会贯通 9 | 10 | ### 2 基本API 11 | 12 | * str.charAt(index) :index的值是0-str.length,index如果没有提供值，则默认是0，该方法返回字符串指定位置处的字符； 13 | 14 | ​ 如果index值超过了索引范围，那么返回空字符串； 15 | 16 | * str.charCodeAt(index):index的值是0-str.length,index如果没有提供值，则默认是0,该方法返回字符串指定位置处字符的UTF-16的数值，如果index值超过了索引值，那么返回NaN； 17 | 18 | * str.indexOf(searchValue,[,fromIndex]) : searchValue是要搜索的字符串，如果在str中找到了要被搜索的字符串，则返回该字符串第一次出现的索引，如果在str中找不到要搜索的字符串，则返回-1；fromIndex的值 19 | 20 | * str.substr(start,[,length] ) : start开始截取 的字符串位置，length从开始截取的字符串位置，的字符个数。如果没有赋值，则截取从开始到最后的所有字符；并不改变原来的字符串； 21 | 22 | ```javascript 23 | eg: var str = 'http:aaa/bb/ccc ' str.substr(0,str.lastIndexOf('/')) // http:aaa/bb 24 | ``` 25 | 26 | * str.replace(regexp|substr, newSubStr|function) ：该方法并不会改变原来的字符串，而是生成一个新的字符串； 27 | 28 | 如果是function,那么function接受的参数包括match(匹配的字符串) p1….pn. 正则中由（）扩起来的匹配到的表达式，offset 匹配到的字符串在原字符串中的偏移量（从0开始） string 被匹配的字符串；需要注意的是p1..pn，如果正则表达式中没有用（） 扩起来的正则表达式，那么function函数则不会被传递p1...pn参数； 29 | 30 | * str.match(reg) ：当一个字符串与一个正则表达式匹配的时候，match方法检索匹配项，如果正则带g标志，那么返回匹配到的所有字符串组成的数组，如果不带g标志，那么返回第一个匹配的的正则的数组；如下 31 | 32 | ```javascript 33 | var str = 'nameaammmgagagegeagage' 34 | var r = str.match(/a/g); 35 | console.log(r) 36 | VM196:1 (7) ["a", "a", "a", "a", "a", "a", "a"] 37 | var arr = str.match(/a/) 38 | console.log(arr) 39 | VM252:1 ["a", index: 1, input: "nameaammmgagagegeagage"] 40 | ``` 41 | 42 | * 静态 **String.fromCharCode()** 方法返回由指定的UTF-16代码单元序列创建的字符串。 -------------------------------------------------------------------------------- /JavaScript/javascript2/021Array小结.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:Array小结 3 | date: 2017-08-28 4 | categories: array 5 | tags: 6 | --- 7 | 8 | ### 1 数组的length属性，可读同时可写 9 | 10 | 同时，length属性仅仅记录数组中元素下标是数字的;数组的`length`属性返回值为Number类型，返回一个比该数组最大下标大1的整数，即数组的最大下标 + 1。 11 | 12 | JS中数组的 `length` 属性不是只读的，这意味着我们可以设置length属性的值。如果 length 属性被赋了一个比原先值小的数值，则该数组将被截断，所有数组下标等于或者大于新 length 属性值的元素都将丢失。如果为 length 属性赋一个比先前值大的值，则该数组在形式上被扩展，但不创建新元素。此外 length 的赋值必须是一个非负数，否则会引发范围错误`RangeError` 13 | 14 | ```javascript 15 | function extend(e,c){ 16 | for(var g in c){ 17 | if(!e[g]){ 18 | e[g] = c[g]; 19 | } 20 | } 21 | return e 22 | } 23 | var obj = {name:'Jhon',age:13}; 24 | var arr = [] 25 | var ret = extend(arr,obj); 26 | console.log(ret); 27 | arr['a'] = 'hello'; 28 | //以上操作，数组的length属性为0，此时是将数组作为对象 29 | console.log(arr); 30 | 31 | //arr[0] = 'he'; 32 | //此时arr的length属性值为1 ； 33 | //arr[1] = 'he'; 34 | //此时arr的length属性值为2 ； 35 | console.log(arr); 36 | ``` 37 | 38 | 如何判断一个对象确实的obj对象，而不是数组 39 | 40 | ```javascript 41 | function _isObj = function (a) { 42 | return (a != null && typeof(a) == "object" && typeof(a.length) == "undefined") 43 | }; 44 | ``` 45 | 46 | ### 2 常用API 47 | 48 | Array.prototype.some(cb) :对数组中的每个元素应用cb函数，如果某一个元素返回一个真值,那么不再执行后续的数组元素；如果所有的元素执行完毕仍得不到真值，那么返回false; 49 | 50 | -------------------------------------------------------------------------------- /JavaScript/javascript2/022chorm开发者工具使用指南.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:chorme开发者工具使用指南 3 | date: 2017-08-29 4 | categories: chorme 5 | tags: 6 | --- 7 | 8 | ## 前端开发调试工作在前端越来越重要，掌握了如何使用开发者工具，将大大提高我们的开发效率和找bug效率，同样对于优化网站性能等也有着举足轻重的指导性。 9 | 10 | * 压缩的代码可以进行美化 { } 左下角 11 | * sources下打开文件，实时编辑之后保存，可以直接执行编辑后的代码，无需重新加载； 12 | * [performance面板指南-原来的timeline](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool) 13 | * 通过source面板下的call-stack项，可以看到函数作用堆栈，以及该函数如何一步步触发的； 14 | 15 | 16 | 17 | 18 | 19 | 20 | 推荐几个链接 21 | 22 | 23 | [谷歌开发者文档](https://developers.google.com/web/fundamentals/?hl=zh-cn) 24 | 25 | [chorme开发者工具文档](http://www.css88.com/doc/chrome-devtools/evaluate-performance/timeline-tool/) 26 | 27 | [关键请求](https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651226883&idx=1&sn=f4f58586fd8c6fe05110e9328f01b93f&chksm=bd495a878a3ed391e48beaa64ee8432c25f1a3dcb7b5934b83eb61a406ea0a1ff3143090aa41&mpshare=1&scene=1&srcid=0829aT8C9o0PaGTQB5qd4jJc&key=a9f0cd582f409b4e7aff422960dba04eff7c89449317ed7f7c929479e686b47f728f06396d55888171cb6ceccface74695fc6a41d5f1cbcad0cfb26f638c2377fd8293910cf177f8dd35f2a264c92102&ascene=0&uin=MjIzMzEwNzk0MQ%3D%3D&devicetype=iMac+MacBookPro12%2C1+OSX+OSX+10.12.6+build(16G29)&version=12020810&nettype=WIFI&fontScale=100&pass_ticket=xW4ilmA62VrYQTM8nfTJxbq%2BsepCOePbffegYlRSW4G8WWi%2FeJDcXpcYe0nAmkNv) 28 | 29 | [开发者工具官方中文文档](https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn) 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /JavaScript/javascript2/025tableAPI.md: -------------------------------------------------------------------------------- 1 | ``` 2 | var _cCount = 5 ; 3 | var e = document.createElement("DIV"); 4 | var c = [""]; 5 | for (var a = 0; a < _cCount; a++) { 6 | c.push("") 7 | } 8 | c.push("
"); 9 | e.innerHTML = c.join(""); 10 | console.dir(e.firstChild); 11 | console.dir(e.firstChild.rows[0]); 12 | console.dir(e.firstChild.rows[0].cells); 13 | document.body.appendChild(e); 14 | var cloneE = e.cloneNode(true); 15 | document.body.appendChild(cloneE); 16 | ``` 17 | 18 | ====table对象有一个rows接口，可以获取到所有的tr对象 19 | 20 | ====tr对象有一个cells接口，可以获取所有的td对象 21 | 22 | ====cloneNode() 方法创建节点的拷贝，并返回该副本。 23 | 24 | cloneNode() 方法克隆所有属性以及它们的值。 25 | 26 | 如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。 -------------------------------------------------------------------------------- /JavaScript/javascript2/032实现多面板的排序和搜索.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:实现多面板的排序和搜索功能 3 | date: 2017-12-06 4 | categories: javascript 5 | 6 | --- 7 | 8 | ```javascript 9 | var gridData = [ 10 | { name: 'Jackie Chan', power: 7000 }, 11 | 12 | { name: 'Chuck Norris', power: Infinity }, 13 | { name: 'Bruce Lee', power: 9000 }, 14 | { name: 'Jet Li', power: 8000 } 15 | ] 16 | //filterKey为搜索的内容 17 | function sortByFilter(filterKey,data){ 18 | var filterKey = filterKey && filterKey.toLowerCase(); 19 | console.log(data) 20 | return data.filter(function(row){ 21 | //Array.prototype.some在测试数组中的元素是否通过测试，如果找到了，则返回true,不在进行后续检测，如果检测了 所有的元素读找不到通过测试的，那么返回false; 22 | // debugger; 23 | return Object.keys(row).some(function(element){ 24 | return String(row[element]).toLowerCase().indexOf(filterKey) > -1 25 | }) 26 | }) 27 | }; 28 | //key 的值为name或者power 29 | function sortByKey(key,data){ 30 | var key = key && key.toLowerCase(); 31 | return data.slice().sort(function(a,b){ 32 | a = a[key]; 33 | b = b[key]; 34 | return a === b ? 0 :a>b? 1:-1; 35 | }) 36 | } 37 | var sortbyfilter = sortByFilter('Ch',gridData); 38 | console.log(sortbyfilter); 39 | var sortbykey = sortByKey('name',gridData); 40 | console.log(sortbykey) 41 | ``` 42 | 43 | -------------------------------------------------------------------------------- /JavaScript/javascript2/034ajax结合hostory实现无刷新同时可前进后退.md: -------------------------------------------------------------------------------- 1 | http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ 2 | 3 | ```javascript 4 | var eleMenus = $("#choMenu a").bind("click", function(event) { 5 | var query = this.href.split("?")[1];//this指的是某个a标签，href上对应该a标签的后台地址； 6 | if (history.pushState && query && !$(this).hasClass(clMenuOn)) { 7 | /* 8 | ajax载入~~ 9 | */ 10 | 11 | // history处理 12 | var title = "上海3月开盘项目汇总-" + $(this).text().replace(/\d+$/, ""); 13 | document.title = title; 14 | if (event && /\d/.test(event.button)) { 15 | history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query); 16 | } 17 | } 18 | return false; 19 | }); 20 | 21 | var fnHashTrigger = function(target) { 22 | var query = location.href.split("?")[1], eleTarget = target || null; 23 | if (typeof query == "undefined") { 24 | if (eleTarget = eleMenus.get(0)) { 25 | // 如果没有查询字符，则使用第一个导航元素的查询字符内容 26 | history.replaceState(null, document.title, location.href.split("#")[0] + "?" + eleTarget.href.split("?")[1]) + location.hash; 27 | fnHashTrigger(eleTarget); 28 | } 29 | } else { 30 | eleMenus.each(function() { 31 | if (eleTarget === null && this.href.split("?")[1] === query) { 32 | eleTarget = this; 33 | } 34 | }); 35 | 36 | if (!eleTarget) { 37 | // 如果查询序列没有对应的导航菜单，去除查询然后执行回调 38 | history.replaceState(null, document.title, location.href.split("?")[0]); 39 | fnHashTrigger(); 40 | } else { 41 | $(eleTarget).trigger("click"); 42 | } 43 | } 44 | }; 45 | if (history.pushState) { 46 | window.addEventListener("popstate", function() { 47 | fnHashTrigger(); 48 | }); 49 | 50 | // 默认载入 51 | fnHashTrigger(); 52 | } 53 | ``` 54 | 55 | -------------------------------------------------------------------------------- /JavaScript/javascript2/035细节问题.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3 | --- 4 | 5 | * Array.prototype.slice() ;会创建一个新的数组对象返回； 6 | * 如果数组内容是对象，那么仅仅是拷贝该引用 7 | * 如果数组内容是基本数据类型，那么则复制该数据 8 | 9 | ```javascript 10 | var currentListeners = [1,2,3]; 11 | var nextListeners = currentListeners; 12 | console.log(currentListeners===nextListeners); //true 13 | if(currentListeners===nextListeners){ 14 | nextListeners = currentListeners.slice(); 15 | }; 16 | console.log(currentListeners===nextListeners); //false slice方法返回一个新的数组对象，所以两者指向的不是同一个内存地址了； 17 | ``` 18 | 19 | * Array.prototype.indexOf() 20 | 21 | 这里进行比较的是使用的 全等号 === ，如果在数组中找到了对应的值，则返回该值在数组中的下标，如果找不到，则返回-1 22 | 23 | ```javascript 24 | var arr = [1,2,3,4] 25 | console.log(arr.indexOf("3")) //-1 26 | console.log(arr.indexOf(3)) //2 27 | ``` 28 | 29 | 30 | 31 | * Object.assign(target,source)：会将source中可枚举属性，浅拷贝至target对象上，返回target对象（引用地址) 32 | 33 | ```javascript 34 | var target = {name:'jhon'}; 35 | var source = {age:12}; 36 | var newTarget= Object.assign({},target,source); 37 | console.log(target === newTarget);//false 38 | ``` 39 | 40 | ```javascript 41 | var newTarget= Object.assign(target,source); 42 | console.log(target === newTarget);//true 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /JavaScript/javascript2/036多种方法实现转化ajax传输对象.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:ajax传给后台的data字符串序列化的多种方式 3 | date: 2017-12-07 4 | categories: javascript 5 | 6 | --- 7 | 8 | * 直接拼接（这种方式效率最低，因为字符串的不可变性，每次都会开辟新的内存来存放字符串） 9 | 10 | ```javascript 11 | 12 | function param(obj) { 13 | var str = ""; 14 | for (var key in obj) { 15 | //console.log(key); 16 | str += key + "=" + obj[key] + "&" 17 | } 18 | console.log(str); 19 | str = str.substr(0, str.length - 1); 20 | 21 | console.log(str); 22 | 23 | return str; 24 | } 25 | } 26 | ``` 27 | 28 | ```javascript 29 | var data = {name:'jhon=gini',age:12}; 30 | console.log(param(data));//name=jhon=gini&age=12 ;如果将这个字符串传递给后台，明显不是我们想要结果 31 | ``` 32 | 33 | **注意上面是一个很不严谨并且消耗内存的错误示例，对于key-value的值都没有进行encodeURIComponent编码,后台拿到数据之后，在解析的时候，很容易出现错误**； 34 | 35 | * 进行编码 36 | 37 | ```javascript 38 | function param(data){ 39 | var str = ''; 40 | for(var key in data){ 41 | str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'; 42 | }; 43 | return str.substring(0,str.length-1); 44 | } 45 | ``` 46 | 47 | ```javascript 48 | var data = {name:'jhon=gini',age:12}; 49 | console.log(param(data));//name=jhon%3Dgini&age=12;这样传递给后台的数据才是正确 50 | ``` 51 | 52 | * 该用数据数据拼接(这个也是jQuery内部的大致实现) 53 | 54 | ```javascript 55 | function param(data){ 56 | var a = []; 57 | for(var key in data){ 58 | a[a.length] = encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) 59 | }; 60 | return a.join('&'); 61 | }; 62 | ``` 63 | 64 | ```javascript 65 | var data = {name:'jhon=gini',age:12}; 66 | console.log(param(data));//name=jhon%3Dgini&age=12;这样传递给后台的数据才是正确 67 | ``` 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /JavaScript/javascript2/037浏览器的重绘和重排.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:浏览器的重绘和重排 3 | date: 2017-12-15 4 | categories: javascript 5 | 6 | --- 7 | 8 | ## 1 触发条件 9 | 10 | ### 重绘(Repaint) 11 | 12 | 重绘是元素改变外观时所触发的浏览器行为, 不包括修改元素的几何属性。例如改变visibility, outline, background等属性。浏览器会根据新的属性重新绘制, 使元素呈现新的外观。重绘不一定会带来新的布局, 并不一定伴随着重排。 13 | 14 | ### 重排（Reflow) 15 | 16 | 1. DOM元素的几何属性变化 17 | 当DOM的几何属性变化时, 渲染树中的相关节点就会失效, 浏览器会重新构建渲染树中失效的节点。而且, 当前元素的重排也许会带来相关元素的重排。例如, 容器节点渲染树改变时, 会触发子节点的重新计算, 也会触发后续兄弟节点的重排, 祖先节点需要重新计算大小, 最后, 每个元素可能都会进行重绘。可见, 重排一定会引起重绘, 并且因为重排的元素很多, 导致重排从性能上来说比重绘更差。一个元素的重排通常都会带来一系列反应, 甚至触发整个文档的重绘和重排, 性能代价是高昂的。 18 | 19 | 2. DOM树的结构变化 20 | 当DOM树的结构变化时, 例如节点的增加, 减少, 删除, 也会触发重排。浏览器引擎渲染DOM树类似前序遍历, 也就是说当前元素不会影响前面已经遍历过的元素。所以, 如果在body前面插入一个元素, 就会导致整个文档的重新渲染, 而在其后插入一个元素, 就不会影响到前面元素的布局。 21 | 22 | 比如用户在input框中输入文字（Content changes, such as a user typing text in 23 | an input box） 24 | 25 | 3. 获取某些属性 26 | 浏览器会对重排进行优化, 可能会等到有足够数量的变化发生, 或者等到一定时间, 或者等一个线程结束, 再一起处理。这样就只会发生一次重排。但如果渲染树直接发生变化, 当获取一些属性时, 浏览器为了取得正确的值也会触发重排。这样就使得浏览器的优化失效。这些属性包括: offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行缓存。 27 | 28 | 4. 其他: 比如改变元素的某些样式, 29 | 30 | 调整浏览器窗口等等也会触发重排 31 | 32 | 改变字体（Changing the font） 33 | 34 | ## 2 对比和优化 35 | 36 | Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。**在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程是非常痛苦和耗电的**。 37 | 38 | **注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。** 39 | 40 | ### 对应的优化措施 41 | 42 | 1 , 不要一条一条的修改DOM的样式，应该通过class或者cssText集中修改DOM的样式 43 | 44 | 2，因为获取元素的某些属性的时候，也会触发重排，所以应该将获取到的元素的属性值缓存起来 45 | 46 | 3 ，**为动画的HTML元件使用fixed或absoult的position**，那么修改他们的CSS是不会reflow的。因为position为absolute或者fixed的元素不会影响其他元素的布局，所以也就只会重绘，而不是触发整个重排； 47 | 48 | 4，**千万不要使用table布局**。因为可能很小的一个小改动会造成整个table的重新布局。 49 | 50 | 5 ，由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。 51 | -------------------------------------------------------------------------------- /JavaScript/javascript2/040终止for循环.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ```javascript 6 | for(let i = 0;i < arr.length ;i++){ 7 | console.log(arr[i]) 8 | if(arr[i] === 2){ 9 | console.log('inner'); 10 | break 11 | } 12 | } 13 | ``` 14 | 15 | Break 终止当前循环，并不会终止外层循环 16 | ```javascript 17 | function twoFor(nums,target){ 18 | for(let i = 0; i < nums.length ; i++){ 19 | console.log('i',i) 20 | for(let j = 0 ; j < nums.length ; j++){ 21 | console.log('j',j) 22 | if(j === 3){ 23 | break 24 | } 25 | } 26 | } 27 | } 28 | ``` 29 | return 会直接终止函数的执行，即两个for循环直接终止 30 | ```javascript 31 | function twoFor(nums,target){ 32 | for(let i = 0; i < nums.length ; i++){ 33 | console.log('i',i) 34 | for(let j = 0 ; j < nums.length ; j++){ 35 | console.log('j',j) 36 | if(j === 3){ 37 | return 38 | } 39 | } 40 | } 41 | } 42 | ``` 43 | 44 | -------------------------------------------------------------------------------- /JavaScript/javascript2/10javascript基础.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript基础 3 | date: 2018-04-22 4 | categories: utils 5 | tags: utils 6 | 7 | --- 8 | 9 | * 运算符 10 | 11 | NOT ~ : 运算符，位运算 NOT 实质上是对数字求负，然后减 1，因此 25 变 -26。用下面的方法也可以得到同样的方法： -------------------------------------------------------------------------------- /JavaScript/javascript2/README.md: -------------------------------------------------------------------------------- 1 | 2015-2017 一些基础的博客和总结； -------------------------------------------------------------------------------- /JavaScript/javascript2/img/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/javascript2/img/image1.jpg -------------------------------------------------------------------------------- /JavaScript/javascript高级/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/javascript高级/.DS_Store -------------------------------------------------------------------------------- /JavaScript/javascript高级/00性能优化指南.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 性能优化指南 3 | 4 | --- 5 | 6 | ### DOM 7 | 8 | 对于常用的DOM查询，或者遍历的行为，如果是多次查询的时候，保存DOM 到一个变量中 9 | 10 | ### Javascript 11 | 12 | * 对于数组的遍历，我们缓存数组的长度，避免每次循环都要去重新计算数组的长度 13 | 14 | ```javascript 15 | for( let i = 0 , length = arr.length ; i < length ; i++ ) { 16 | 17 | } 18 | ``` 19 | 20 | ## 网站性能优化 21 | 22 | 1 网络请求优化 23 | 24 | 2 页面渲染优化 25 | 26 | 3 JS阻塞性能与内存泄漏 27 | 28 | 4 负载均衡 29 | 30 | ### 1 网络请求优化 31 | 32 | * 浏览器缓存（强制缓存和协商缓存） 33 | * 资源打包压缩（压缩html css js 使用cdn) 34 | 35 | ### 2 页面渲染性能优化 36 | 37 | * 减少重绘和重流； 38 | * 减少页面重新渲染和DOM嵌套 39 | 40 | ### 3 JS阻塞性能与内存泄漏 41 | 42 | * 函数防抖和节流 43 | * 注意内存泄漏 44 | 45 | ### 4 负载均衡 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /JavaScript/javascript高级/16-javascript代码片段.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:javascript代码片段 3 | --- 4 | 5 | ```javascript 6 | if(~str.indexOf(str2)) //等价于 str.indexOf(str2) > -1 7 | //('ssf'.indexOf('y') > -1 == ~'ssf'.indexOf('y')) //true 8 | 9 | ``` 10 | 11 | -------------------------------------------------------------------------------- /JavaScript/javascript高级/19定时器.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/javascript高级/19定时器.md -------------------------------------------------------------------------------- /JavaScript/js基础复习-2021/01.数据类型.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1.数据类型分类 6 | 7 | 基础数据类型：string/boolean/number/symbol/null/undefined 8 | 9 | 复杂数据类型：Object(Function/Object/Map/Set)/ 10 | 11 | ### 2.不同数据类型通用属性 12 | 13 | ``` 14 | prototype 15 | __proto__ 16 | ``` 17 | 18 | Function 19 | 20 | ``` 21 | prototype:apply bind call constructor 22 | ``` 23 | 24 | -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/数据结构与算法/.DS_Store -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/03数据结构-堆.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:数据结构-堆 3 | --- 4 | 5 | ### 1 堆 6 | 7 | **堆数据结构也是一种数组对象，他可以被视为一个完全二叉树结构，所以堆也叫做二叉堆** 8 | 9 | 二叉堆满足两个特性： 10 | 11 | * 父节点的键值总是大于或者等于（小于或者等于）任何一个字节点的键值 12 | 13 | * 每个节点的左子树和右子树都是一个二叉树 ( 二叉树是一种特殊的树，二叉树的每个节点最多只能有2个子节点) 14 | 15 | 16 | **当父节点的键值总是大于或者等于子节点的键值时，称为最大堆；当父节点的键值总是小于或者等于子节点 的键值的时候，称为最小堆** 17 | 18 | ### 2 堆的数据结构可以理解为二叉树的形状（纯数学的角度，就是每一层树中有 2^n 个节点 n = 0,1,2,3 ...) 19 | 20 | 最后生成一个树状（金字塔）形式的数据结构； 21 | 22 | * 二叉树：从一个根节点开始，每个节点连接一到**两个子节点**，一次向下展开的树形结构，叫做二叉树； 23 | * 满二叉树：在二叉树的基础上，除了最后一层节点没有任何子节点外，每一层节点都有两个子节点，且每一层都完全填满的二叉树，叫做满二叉树。（从深度和节点关系数上来看，一颗深度为k的二叉树，有 2^k - 1 个节点） 24 | * 完全二叉树：**这个概念需要重点理解下，第一，假如我们队满二叉树从左至右进行编号（具体的编号规则可以自定），如果同样一个深度为k,有n个节点的二叉树，其每个节点和深度同为k的满二叉树，在同样的编号规则下一一对应的话，那么这棵树就是完全二叉树**（另外一种理解方式：若设二叉树的高度为 h，除第 h 层外，其它各层 (1～h-1) 的结点数都达到最大个数，第 h 层**从右向左**连续缺若干结点，就是完全二叉树。也就是说如果一个结点有右子结点，那么它一定也有左子结点） 25 | 26 | 作为对比， 看看下图中左下角和右下角的两颗树， 因为按照满二叉树的编号排定方式，它们**相比起同深度的满二叉树而言， 分别在6和3的位置没有对应的节点，所以不是完全二叉树** 27 | 28 | ![binaryTree](/myWork/JiM-Blog/img/binaryTree.png) 29 | 30 | ### 3 堆有序 31 | 32 | 对于一个二叉树：如果他满足(对于数组表示的堆有序来说，最终比较的是数组中的每个元素的值之间的大小) 33 | 34 | * 任意一个父节点都小于等于它相邻的所有子节点 35 | * 任意一个父节点都大于等于它相邻的所有子节点 36 | 37 | 这两种情况可以称为堆有序（注意和二叉搜索树的不同，二叉搜索树需要满足的条件是：只允许节点有两个子节点，且左侧存储比父节点小的值，右侧存储比父节点大的值） 38 | 39 | **对于堆有序的完全二叉树，就叫做二叉堆；**二叉堆的表示方法可以用一个普通的一维数组来表示； 40 | 41 | ![duiyouxu](/myWork/JiM-Blog/img/duiyouxu.png) 42 | 43 | ### 4 二叉堆的数组表示 44 | 45 | ![array_erchadui ](/myWork/JiM-Blog/img/array_erchadui .png) 46 | 47 | 二叉堆可以用一个普通的一维数组来表示，按照从上至下，从左至右的编号，把二叉堆节点从0 至 N-1进行编号，并以此作为数组的下标，放入一个长度为 N的数组中，那么就形成了一个用数组表示的二叉堆； 48 | 49 | 在一个二叉堆中，位置为 k 的节点的父节点的位置是 `Math.floor(k/2)`,而两个子节点的位置分别是 `2k 和 2k+1`.这样的话，在该二叉堆对应的数组中，我们就可以通过计算数组的下标在堆中上下移动；通过这层数字关系，我们就可以找到任意一个堆中节点的父节点和子节点，并进行比较，在这层基础上，我们就可以来设计我们的堆有序算法了； 50 | 51 | #### 4.1 堆排序的基本算法：上浮和下沉； 52 | 53 | 堆排序的核心就是堆有序化的算法； 54 | 55 | ```javascript 56 | 57 | ``` 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | [参考](https://zhuanlan.zhihu.com/p/31440467?utm_source=ZHShareTargetIDMore&utm_medium=social&utm_oi=557638542403112960) -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/05javascript数据结构.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript数据结构 3 | date: 2017-01-03 4 | categories: javascript 5 | --- 6 | 7 | ### 1 概述 8 | 9 | * 数据结构概述 10 | 11 | | 数据结构 | 优点 | 缺点 | 12 | | ------ | -------------------------- | ---------------------------- | 13 | | 数组 | 插入快，如果知道下标，可以非常快的存取 | 查找慢，删除慢，大小固定 | 14 | | 有序数组 | 比无序数组查找快 | 删除和插入慢，大小固定 | 15 | | 栈 | 提供“后进先出”的存取方式 | 存取其他项很慢 | 16 | | 队列 | 提供“先进先出”的存取方式 | 存取其他项很慢 | 17 | | 链表 | 插入快，删除快 | 查找慢 | 18 | | 二叉树 | 如果树保持平衡，查找、插入、删除都很快 | 删除算法比较复杂 | 19 | | 红-黑树 | 树总是平衡的，查找、插入、删除都很快 | 算法比较复杂 | 20 | | 2-3-4树 | 对磁盘存储有用，树总是平衡的，查找、插入、删除都很快 | 算法比较复杂 | 21 | | 哈希表 | 插入快，如果关键字已知则存取极快 | 删除慢，如果不知道关键字则存取很慢，对存储空间使用不充分 | 22 | | 堆 | 插入、删除快，对最大数据项的存取很快 | 对其他数据项存取慢 | 23 | | 图 | 对现实世界建模 | 有些算法慢且复杂 | 24 | 25 | * 算法概述 26 | 27 | 28 | ​ 对大多数数据结构来说，都需要知道如何： 29 | 30 | - 插入一条新的数据项 31 | - 查找某一个特定的数据项 32 | - 删除某一个特定的数据项 33 | - 遍历某一数据结构中的各数据项 34 | - 排序 35 | 36 | ​ 另外，递归的概念在设计有些算法时，也是十分重要的。 -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/06javascript递归.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript递归 3 | date: 2018-01-17 4 | categories: javascript 5 | --- 6 | 7 | 8 | 9 | ```javascript 10 | const basic = [ 11 | { 12 | path: 'index', 13 | name: 'app', 14 | meta: { 15 | name: '/index', 16 | type: 'group', 17 | desc: '首页', 18 | resourceId: 'getIndex', 19 | }, 20 | component: () => import('view/index/index.vue'), 21 | }, 22 | { 23 | path: 'index', 24 | name: 'app', 25 | meta: { 26 | name: '/index', 27 | type: 'group', 28 | desc: '首页', 29 | resourceId: 'getIndex', 30 | }, 31 | component: () => import('view/index/index.vue'), 32 | children:[....] 33 | }, 34 | ] 35 | 36 | class Route { 37 | static create(parent, options, deleteKeys) { 38 | const r = []; 39 | options.forEach((option, i) => { 40 | r.push(new Route(parent, _.merge({}, { 41 | meta: { 42 | showIndex: i, 43 | selectIndex: i, 44 | }, 45 | }, option), deleteKeys)); 46 | }); 47 | if (parent) parent.children = r; 48 | r.forEach((item, i) => { 49 | const option = options[i]; 50 | if (option.children) Route.create(item, option.children, deleteKeys); 51 | }); 52 | return r; 53 | } 54 | 55 | constructor(parent, option, deleteKeys) { 56 | const defaultOption = { 57 | path: '', 58 | name: '', 59 | meta: { 60 | type: 'group', 61 | resourceId: fullPath, 62 | alwaysReach: false, 63 | selectIndex: 0, 64 | showIndex: 0, 65 | visible: true, 66 | fullPath, 67 | parentPath, 68 | }, 69 | children: [], 70 | }; 71 | _.merge(this, defaultOption, option); 72 | const { meta: { type } } = this; 73 | if (type === 'group') { 74 | this.meta.defaultOpen = true; 75 | } 76 | if (deleteKeys) { 77 | deleteKeys.forEach(key => { 78 | delete this[key]; 79 | }); 80 | } 81 | } 82 | } 83 | ``` 84 | 85 | -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/06数据结构-图.md: -------------------------------------------------------------------------------- 1 | --- 2 | title： 数据结构-图 3 | --- 4 | 5 | ### 1 基本概念 6 | 7 | 图是一种非线性数据结构； -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/08算法复杂度.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 算法复杂度 3 | date: 2018-05-18 4 | categories: javascript 5 | --- 6 | 7 | ### 1 定义 8 | 9 | * 时间复杂度：首先了解一个概念，时间频度：指的是一个算法执行所耗费的时间，一般来说通过算法中语句的执行次数来描述时间频度 f(n),时间复杂度是和时间频度同量级的函数，T(n) = O(f(n)) ; 10 | 11 | * 空间复杂度：是指算法实际占用的存储空间的总和 12 | 13 | 对于一个算法来说，空间复杂度和时间复杂度往往是相互影响的。当追求一个较好的时间复杂度时，可能会使空间复杂度的性能变差，即可能导致占用较多的存储空间；反之，当追求一个较好的空间复杂度时，可能会使时间复杂度的性能变差，即可能导致占用较长的运行时间。 14 | 15 | ### 2 常见时间复杂度基本模型 16 | 17 | ```javascript 18 | for( let i = 0 ; i < n ; i ++) { 19 | console.log(i) 20 | } 21 | // 时间复杂度为 O(n) 22 | ``` 23 | 24 | ```javascript 25 | for( let i = 0 ; i < n ; i ++) { 26 | for( let j = 0 ; j < m ; j ++) { 27 | console.log(i*j) 28 | //... 29 | } 30 | } 31 | // 时间复杂度为 O(n*m) ==> O(n^2) : 当 m n 相等的时候； 32 | // 如果再嵌套一层 for 循环，那么时间复杂度就是: O(n^3) 33 | ``` 34 | 35 | ```javascript 36 | let i = 1 ; n = 100 ; 37 | while( i < n ) { 38 | i = i*2; 39 | console.log(i) 40 | } 41 | // 时间复杂度为 O(log2n) 42 | ``` 43 | 44 | -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/13算法-functionalProgramming.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 函数式编程 3 | --- 4 | 5 | ### 1 实现compose函数 6 | 7 | ```javascript 8 | function f1(arg) { 9 | console.log('11',arg) 10 | } 11 | function f2(arg) { 12 | console.log('22',arg) 13 | 14 | return arg 15 | } 16 | function f3(arg) { 17 | console.log('33',arg); 18 | return arg 19 | } 20 | // 实现compose函数 21 | function myCompose(...funcs) { 22 | if(funcs.length === 0) { 23 | return args => args 24 | } 25 | if(funcs.length === 1) { 26 | return funcs[0]; 27 | } 28 | return funcs.reduce((a,b) => { 29 | return (...args) => { 30 | return a(b(...args)); 31 | } 32 | }) 33 | } 34 | function myComposeRight(funcs,...args) { 35 | return funcs.reduceRight((args,func) => { 36 | return func(args) 37 | },args) 38 | } 39 | myComposeRight([f1,f2,f3],3,2) 40 | 41 | // myCompose()(3) 42 | // myCompose(f1,f2,f3)(3) 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/14蛇形遍历二维数组.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 蛇形遍历二维数组 3 | --- 4 | 5 | [参考](https://www.codetd.com/article/603237) 6 | 7 | [参考](http://phpstudy.php.cn/c.php/3241.html) 8 | 9 | ###1 循环遍历二维数组（蛇形遍历） 10 | 11 | ```javascript 12 | /* 13 | [ 14 | [1,2,3,4,5] 15 | [6,7,8,9,10,11] 16 | [12,13,14,15,16] 17 | ['a','b','c'] 18 | ] 19 | ***/ 20 | const arr = [[1,2,3,4,5],[6,7,8,9,10,11],[12,13,14,15,16],['a','b','c']] 21 | const snail = function(array){ 22 | const result = []; 23 | while(arr.length) { 24 | result.push(...arr.shift()); //将二维数组第一项放入result 25 | for(let i = 0 ; i < arr.length ; i++) { 26 | result.push(arr[i].pop()); // 将二维数组每一行右边item放入result 27 | } 28 | result.push(...(arr.pop() || []).reverse()) // 将二维数组最后一项放入数组 29 | for(let i = arr.length - 1 ; i >= 0 ; i--) { //将二维数组每一行左边item放入数组 30 | result.push(arr[i].shift()); 31 | } 32 | } 33 | return result; 34 | } 35 | console.log(snail(arr)) 36 | ``` 37 | 38 | -------------------------------------------------------------------------------- /JavaScript/数据结构与算法/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | 推荐学习资源 6 | 7 | [算法](https://github.com/ConardLi/awesome-coding-js) 8 | 9 | -------------------------------------------------------------------------------- /JavaScript/构建工具/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/构建工具/.DS_Store -------------------------------------------------------------------------------- /JavaScript/构建工具/006iTerm 教程.md: -------------------------------------------------------------------------------- 1 | [链接](https://www.jianshu.com/p/7de00c73a2bb) 2 | 3 | [链接](http://blog.csdn.net/chenyufeng1991/article/details/50492626) 4 | 5 | [item2](http://blog.csdn.net/yangcs2009/article/details/45720193) -------------------------------------------------------------------------------- /JavaScript/构建工具/008终端使用.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 终端使用 3 | date: 2018-02-09 4 | categories: javascript 5 | --- 6 | 7 | ### [item2](https://segmentfault.com/a/1190000012786464) 8 | 9 | * hotKeys:全局打开终端的快捷命令 ， command 配合 `.` （点） 10 | * ​ 11 | 12 | -------------------------------------------------------------------------------- /JavaScript/构建工具/011Mac.md: -------------------------------------------------------------------------------- 1 | --- 2 | Title: Mac快捷键 3 | --- 4 | 5 | * 显示隐藏文件： Command + Shift + . 6 | * control + (shift) + tab : 切换tab页面 7 | 8 | -------------------------------------------------------------------------------- /JavaScript/构建工具/012vscode快捷键.md: -------------------------------------------------------------------------------- 1 | * ctrl + tab : 多个文件之间的切换； 2 | * ctrl + 空格键： 切换输入法 3 | * Ctrl + . : ESC下面的 . 用来打开终端； 4 | * alt + shift + F : 格式化vue文件 5 | 6 | -------------------------------------------------------------------------------- /JavaScript/构建工具/017lerna-manage pkkg.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | [lerna](https://github.com/lerna/lerna) -------------------------------------------------------------------------------- /JavaScript/构建工具/021eslint.md: -------------------------------------------------------------------------------- 1 | --- 2 | Eslint 3 | --- 4 | 5 | ### 1 配置文件 6 | 7 | ### 2 命令行 8 | 9 | ``` 10 | "eslint":"eslint ./proxy ./transform ./parser utils.js index.js", 11 | "eslint:fix":"eslint utils.js --ext .js parser --ext .js proxy --ext .js transform --fix" 12 | ``` 13 | 14 | `eslint file --fix `:修复文件； 15 | 16 | `eslint --ext .js src`:修复src文件夹下 `.js`后缀的文件； 17 | 18 | `eslint * --fix`:修复所有 19 | 20 | -------------------------------------------------------------------------------- /JavaScript/构建工具/14持续集成.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:持续集成 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | [gitlab官方文档](https://docs.gitlab.com/ee/install/README.html) -------------------------------------------------------------------------------- /JavaScript/模块化开发/005AMD-语法规范.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: AMD and CMD 3 | date: 2016-09-10 12:36:00 4 | categories: javascript requirejs 5 | comments : true 6 | tags : requirejs 7 | updated : 8 | layout : 9 | --- 10 | 11 | CMD([Common Module Definition]) AMD 12 | 13 | SeaJS 遵循 CMD 规范，RequireJS 遵循 AMD 规范。 14 | 15 | **CMD 模块依赖声明方式：** 16 | 17 | ```javascript 18 | define(function (require) { 19 | var a = require('./a'); 20 | var b = require('./b'); 21 | }) 22 | ``` 23 | 24 | **CMD 规范的弊端** 25 | 26 | 1. 不能直接压缩：`require`是局部变量，意味着不能直接的通过压缩工具进行压缩，若`require`这个变量被替换，加载器与自动化工具将无法获取模块的依赖。 27 | 2. 模块书写有额外约定：路径参数不能进行字符串运算，不能使用变量代替，否则加载器与自动化工具无法正确提取路径。 28 | 29 | **AMD 模块依赖声明方式：** 30 | 31 | ```javascript 32 | define(['./a', './b'], function (a, b) { 33 | // more code .. 34 | }) 35 | ``` 36 | 37 | **AMD 规范的弊端** 38 | 39 | 1. 依赖提前声明在代码书写上不是那么友好 40 | 2. 模块内部与 NodeJS 的 Modules 有一定的差异 41 | 42 | 其实无论是 CMD 还是 AMD 的异步模块，都无法与同步模块规范保持一致（NodeJS 的 Modules）， 43 | 只有谁比谁更像同步模块而已。AMD 要转换为同步模块，除了去掉define函数的包裹外， 44 | 需要在头部使用require把依赖声明好，而 CMD 只需要去掉define函数的包裹即可。 -------------------------------------------------------------------------------- /JavaScript/算法题学习/0.两数之和-无重复字符最长子串.md: -------------------------------------------------------------------------------- 1 | ### 1.两数之和 2 | 3 | > 给定一个整数数组和目标值，求该数组中满足和为目标值的那两个整数，并返回下标 4 | 5 | ```javascript 6 | //时间复杂度 O(n^2) 7 | function twoSum(nums,target){ 8 | for(let i = 0; i < nums.length ; i++){ 9 | for(let j = 0 ; j < nums.length ; j++){ 10 | if(nums[i] + nums[j] === target){ 11 | return [i,j] 12 | } 13 | } 14 | } 15 | } 16 | 17 | //注意考虑去重 18 | function twoSum(nums,target){ 19 | let map = new Map(); 20 | for(let i = 0; i < nums.length ; i++){ 21 | map.set(target - nums[i],i) 22 | } 23 | for(let j = 0 ; j < nums.length ; j++){ 24 | if(map.has(nums[j])){ 25 | return [map.get(nums[j]),j] 26 | } 27 | } 28 | } 29 | function twoSum(nums,target){ 30 | let map = new Map(); 31 | for(let i = 0;i < nums.length ; i++){ 32 | if(!map.has(nums[i])){ 33 | map.set(target - nums[i],i) 34 | }else{ 35 | return [map.get(nums[i]),i] 36 | } 37 | } 38 | } 39 | console.log(twoSum([1,2,3,4,7,11,8],12)) 40 | ``` 41 | 42 | 时间复杂度 O(n) 43 | 44 | ### 三数之和 45 | 46 | > 扩展：三数之和 47 | > 48 | > 给定一个包含n个整数的数组 nums,判断nums 中是否存在 a b c 使得 a+b+c = 0;请找出所有满足条件且不重复的三元组; 49 | 50 | ```javascript 51 | function 52 | ``` 53 | 54 | 排序+双指针 55 | 56 | ### 2.给定一个字符串，求无重复最长子串长度 57 | 58 | > 输入 'abcabcbb' ==> 输出 3 ： 滑动窗格思路 59 | 60 | ```javascript 61 | function longStringLength(s){ 62 | let stack = []; 63 | let max = 0;//返回值，最长子串长度 64 | for(let i = 0; i < s.length ; i++){ 65 | if(!stack.includes(s[i])){ 66 | stack.push(s[i]) 67 | }else{ 68 | max = Math.max(max,stack.length); 69 | // stack = []; 70 | stack.splice(0) 71 | stack.push(s[i]) 72 | } 73 | } 74 | return max 75 | } 76 | console.log('longStringLength',longStringLength('bbbb')) 77 | ``` 78 | 时间复杂度 O(n) -------------------------------------------------------------------------------- /JavaScript/算法题学习/1.盛水最多容器-整数反转.md: -------------------------------------------------------------------------------- 1 | ### 1.盛水最多的容器 2 | 3 | 给定 n 个非负整数 ,每个数代表坐标系中的(i,a[i]),在坐标内画n调垂直线，垂直线 i 的两个端点分别为(i,a[i])和（i，0），找出其中两条线，使得他们与X轴共同构成的容器可以容纳最多的水。 4 | 5 | 6 | 7 | 8 | 9 | ### 2.整数反转 10 | 11 | 给定一个 32 位有符号整数，将该整数每位上的数字进行反转 12 | 13 | ``` 14 | 123 15 | 321 16 | 17 | -123 18 | -321 19 | ``` 20 | 21 | -------------------------------------------------------------------------------- /JavaScript/算法题学习/2.电话号码的字母组合.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### 电话号码的字母组合 4 | 5 | 给定一个仅包含数字的 2-9 的字符串，返回所有它能表示的字母组合 6 | 7 | 给出数字到字母的映射如下（与电话按键相同），注意1 不对应任何字母 8 | 9 | ``` 10 | 1 @/. 2:abc 3 def 4 ghi 5 jkl 6 mno 7 pqrs 8 tuv 9 wxyz 0 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /JavaScript/设计模式实际应用总结/05职责链模式-模版模式-状态模式.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:职责链模式-模版模式-状态模式 3 | --- 4 | 5 | ### 1 职责链模式 6 | 7 | ```javascript 8 | class Chain { 9 | constructor(fn) { 10 | this.fn = fn; 11 | this.nextCall = null; 12 | } 13 | setNext(nextCall) { 14 | this.nextCall = nextCall; 15 | } 16 | init(...args) { 17 | console.log(args) 18 | debugger; 19 | const result = this.fn(...args) 20 | if(result === 'nextCall') { 21 | this.nextCall.init(...args) 22 | } 23 | } 24 | } 25 | let chainOne = function (...args) { 26 | if(args[0] === 'A') { 27 | console.log('A 级别人员处理') 28 | } else { 29 | return 'nextCall'; 30 | } 31 | } 32 | let chainTwo = function (...args) { 33 | if(args[0] === 'B') { 34 | console.log('B 级别人员处理') 35 | } else { 36 | return 'nextCall'; 37 | } 38 | } 39 | const newChainOne = new Chain(chainOne); 40 | const newChainTwo = new Chain(chainTwo); 41 | newChainOne.setNext(newChainOne); 42 | newChainOne.init('A',400); 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /JavaScript/设计模式实际应用总结/06组合模式-装饰着模式-.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 组合模式-装饰着模式 3 | --- 4 | 5 | ### 1 组合模式 6 | 7 | **组合模式(Composite Pattern)：组合多个对象形成树形结构以表示具有“整体—部分”关系的层次结构。组合模式对单个对象（即叶子对象）和组合对象（即容器对象）的使用具有一致性，组合模式又可以称为“整体—部分”(Part-Whole)模式，它是一种对象结构型模式。** 8 | 9 | 组合模式不用来修改子对象的方法，而用来组合其他子对象； 10 | 11 | ### 2 装饰者模式 12 | 13 | 装饰者模式用来将子对象的方法/接口实现一边，然后对其结果进行再次加工； 14 | 15 | 函数的装饰者模式其实可以看作是一个高阶函数，将函数入参 的结果进行再次加工然后返回 16 | 17 | ```javascript 18 | // 函数的装饰者模式最简单实现 19 | let func = (str) => { 20 | return str 21 | } 22 | let funcDecorator(func) { 23 | return (str) => { 24 | return func(str) + 'decorator' 25 | } 26 | } 27 | ``` 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /JavaScript/设计模式实际应用总结/README.md: -------------------------------------------------------------------------------- 1 | 设计模式相关文章推荐阅读 2 | 3 | [掘金-设计模式](https://juejin.im/post/6844904032826294286) -------------------------------------------------------------------------------- /JavaScript/设计模式实际应用总结/Untitled.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/设计模式实际应用总结/Untitled.md -------------------------------------------------------------------------------- /JavaScript/面试题汇总/02汇总各类2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title : 面试题 3 | --- 4 | 5 | * 实现一个 sleep 函数 6 | 7 | ```javascript 8 | function sleep(ms) { 9 | const expire = Date.now() + ms; 10 | while(Date.now() < ms); 11 | console.log('sleep done'); 12 | return; 13 | } 14 | // for sleep 15 | function sleep(sleepTime) { 16 | const start = +new Date() 17 | while (true) { 18 | if (+new Date() - start > sleepTime) { 19 | return 20 | } 21 | } 22 | } 23 | //async 24 | function sleep(ms){ 25 | return new Promise((resolve,reject) => setTimeout(resolve,ms)) 26 | } 27 | async function func(){ 28 | await sleep(); //睡眠ms 29 | //otherCode 30 | } 31 | ``` 32 | 33 | * 实现一个模板字符串的功能 34 | 35 | ```javascript 36 | function templateInject(template,data){ 37 | return template.replace(/\$\{([^}]*)\}/g,function(match,key){ 38 | return data[key]; 39 | }) 40 | 41 | } 42 | ``` 43 | 44 | * 实现一个继承 45 | 46 | ```javascript 47 | function inherit(subClass,superClass){ 48 | //对于函数的入参的判断和考量暂时不做处理 49 | let F = new Function();//其实等价于 let F = function(){}; 50 | F.prototype = superClass.prototype; 51 | 52 | //实现继承 53 | subClass.prototype = new F(); 54 | subClass.prototype.constructor = subClass; 55 | } 56 | console.dir(inherit); 57 | ``` 58 | 59 | ```javascript 60 | function inherit(subClass,superClass){ 61 | let tempCtor = function(){}; 62 | tempCtor.prototype = superClass.prototype; 63 | subClass.prototype = new tempCtor(); 64 | subclass.prototype.constructor = subclass; 65 | } 66 | ``` 67 | 68 | ```javascript 69 | function inherit(subClass,superClass){ 70 | subClass.prototype = Object.create(superClass.prototype,{ 71 | value:subClass, 72 | enumerable:false, 73 | writable:true, 74 | configurable:true 75 | }) 76 | } 77 | 78 | function _inheritsLoose(subClass, superClass) { 79 | subClass.prototype = Object.create(superClass.prototype); 80 | subClass.prototype.constructor = subClass; 81 | subClass.__proto__ = superClass; 82 | } 83 | ``` 84 | 85 | * 实现jsonp 86 | 87 | -------------------------------------------------------------------------------- /JavaScript/面试题汇总/04 html 和 css 相关.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/JavaScript/面试题汇总/04 html 和 css 相关.md -------------------------------------------------------------------------------- /JavaScript/面试题汇总/05数据结构相关.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:定时器 3 | --- 4 | 5 | ### 1.settimeout基本理解 6 | 7 | * 定时器返回值标记定时器id 8 | * `clearTimeout`清空定时器动作仅仅是清空定时器的任务，并不会原先的赋值操作 9 | 10 | ```javascript 11 | timer1 = setTimeout(() => { 12 | console.log('settime1') 13 | }) 14 | timer2 = setTimeout(() => { 15 | console.log('settime2') 16 | }) 17 | timer3 = setTimeout(() => { 18 | console.log('settime3') 19 | }) 20 | if(timer1){ 21 | clearTimeout(timer1) //清除定时器并不会改变 timer1 的值，这完全是两个不同的操作 22 | } 23 | console.log('timer',timer1);//1 24 | console.log('timer',timer2);//2 25 | console.log('timer',timer3);//3 26 | 27 | /* 28 | timer 1 29 | timer 2 30 | timer 3 31 | settime2 32 | settime3 33 | */ 34 | ``` 35 | 36 | ```javascript 37 | timer = setTimeout(() => { 38 | console.log('settime1') 39 | }) 40 | timer = setTimeout(() => { 41 | console.log('settime2') 42 | }) 43 | timer = setTimeout(() => { 44 | console.log('settime3') 45 | }) 46 | if(timer){ 47 | clearTimeout(timer) 48 | } 49 | console.log('timer',timer); 50 | /* 51 | timer 3 52 | settime1 53 | settime2 54 | */ 55 | ``` 56 | 57 | -------------------------------------------------------------------------------- /Mobx源码/01mobx入门.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1 mobx学习资料 6 | 7 | [文档](https://cn.mobx.js.org/intro/overview.html) 8 | 9 | [源码分析](https://juejin.im/post/5b9733036fb9a05d265942fc) -------------------------------------------------------------------------------- /NodeJS/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/NodeJS/.DS_Store -------------------------------------------------------------------------------- /NodeJS/README.md: -------------------------------------------------------------------------------- 1 | ## 主要是node核心使用以及源码分析的一些笔记； 2 | 3 | 其他学习资源： 4 | 5 | [node中GC机制](http://alinode.aliyun.com/blog/37) 6 | 7 | [ele node进阶](https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn) 8 | 9 | [nodejs-awesome-project](https://github.com/sindresorhus/awesome-nodejs#mad-science) 10 | 11 | [pm2]([https://blog.windstone.cc/back-end/node/pm2.html#%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4](https://blog.windstone.cc/back-end/node/pm2.html#常用命令)) 12 | 13 | -------------------------------------------------------------------------------- /NodeJS/express源码解析/02express-api-fallback.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:express-api-fallback 3 | --- 4 | 5 | ### 1.单页面应用 History 路由模式 6 | 7 | ```javascript 8 | const express = require('express'); 9 | 10 | const path = require('path'); 11 | const history = require('connect-history-api-fallback') 12 | const app = express(); 13 | 14 | 15 | //在express中使用的时候需要注意一点的是，该中间件必须要放在express.static中间前的前面引入，否则会出现问题。 16 | app.use(history()) 17 | 18 | app.listen(8000); 19 | ``` 20 | 21 | ## 前言 22 | 23 | 这里使用vue-router来实现的单页应用为例，访问[http://cnode.lsqy.tech](http://cnode.lsqy.tech/)，进入首页，点击下面的tab栏，一切都是很正常的，但当这时候你 `ctrl+command+R` 或 点击浏览器的刷新按钮 或 在地址栏上再敲一下回车，总之就是刷新，发现就会出现404了，比如这样的错误`Cannot GET /message/`,因为默认浏览器会认为你是在请求服务端的路由，服务端那边没有对应的处理，所以自然就会出错了，下面来引入`connect-history-api-fallback`这个中间件，来无痛使用优雅的History路由模式。 24 | 25 | ## 引入connect-history-api-fallback 26 | 27 | 首先看它的介绍`Middleware to proxy requests through a specified index page, useful for **Single Page Applications** that utilise the HTML5 History API.` 28 | 中文意思就是一个能够代理请求返回一个指定的页面的中间件，对于单页应用中使用HTML5 History API非常有用。 29 | 30 | ## 用法 31 | 32 | 经典的npm安装,注意将其作为依赖项，加上`--save` 33 | 34 | ``` 35 | npm install --save connect-history-api-fallback 36 | ``` 37 | 38 | 接下来是在express的简单使用 39 | 40 | ``` 41 | var http = require('http'); 42 | var express = require('express'); 43 | var ecstatic = require('ecstatic'); 44 | var history = require('connect-history-api-fallback'); 45 | 46 | var app = express(); 47 | 48 | app.use(history()); 49 | app.use(ecstatic({ root: __dirname + '/dist' })); 50 | 51 | http.createServer(app).listen(6565); 52 | ``` 53 | 54 | 这样配置完之后，再重新`restart`一下项目,你就会发现现在可以非常顺畅的使用了，不管你是刷新了浏览器还是直接通过`url`从外部访问都不会出现`404`的结果了。 55 | 另外，`connect-history-api-fallback`还有一些可配置的`Options`项,这个如果需要详细了解可以仔细看看其API的调用即可 56 | 57 | ## 总结 58 | 59 | 其实有时候对于单页面应用，虽然是单页的，但是也会有很多不仅仅是必须从首页进去的情况，比如要分享某个页面，这样我们希望能够直接通过这个简洁的`url`来跳到这个指定的页面，但是如果不做上面的配置的话就会出现`404`这样的错误了，其实这样的话也算是接管了传统的服务端路由，来完全交给前端来处理路由跳转了，这样以后的url就非常简洁优雅了。 60 | 61 | > reference: github地址[connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback) -------------------------------------------------------------------------------- /NodeJS/express源码解析/02express上的get-post-use等源码解析.md: -------------------------------------------------------------------------------- 1 | --- 2 | titile 3 | --- 4 | 5 | -------------------------------------------------------------------------------- /NodeJS/express源码解析/173Nodejs-Express.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nodejs Net模块 3 | date: 2016-11-30 12:36:00 4 | categories: nodejs 5 | tags : express 6 | comments : true 7 | updated : 8 | layout : 9 | --- 10 | 11 | 1 Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。[express作者jk] -------------------------------------------------------------------------------- /NodeJS/images/req-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/NodeJS/images/req-header.png -------------------------------------------------------------------------------- /NodeJS/images/req.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/NodeJS/images/req.png -------------------------------------------------------------------------------- /NodeJS/images/res-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/NodeJS/images/res-header.png -------------------------------------------------------------------------------- /NodeJS/images/res.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/NodeJS/images/res.png -------------------------------------------------------------------------------- /NodeJS/images/router.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/NodeJS/images/router.png -------------------------------------------------------------------------------- /NodeJS/nodeBase/14Node-API.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:Node_API 3 | --- 4 | 5 | ### 1 fs 6 | 7 | ```javascript 8 | fs.readdirSync(folder);//返回对应目录下所有的文件和文件夹的名称组成的数组； 9 | fs.statSync(path); //返回stats 类,该类下面的方法包括 isFile() isDirectory() 等 10 | ``` 11 | 12 | -------------------------------------------------------------------------------- /NodeJS/nodeBase/16NodeJsPath.md: -------------------------------------------------------------------------------- 1 | --- 2 | title：NodeJS-Path 3 | --- 4 | 5 | ### 1 path模块提供了一些工具函数，用于处理文件目录和路径 6 | 7 | 使用 8 | 9 | ```java 10 | const path = require('path') 11 | ``` 12 | 13 | 明确路径 14 | 15 | 绝对路径 ： 16 | 17 | ```javascript 18 | import "/home/me/file"; 19 | import "C:\\Users\\me\\file"; 20 | ``` 21 | 22 | 相对路径 23 | 24 | ```javascript 25 | import "../src/file1"; 26 | import "./file2"; 27 | ``` 28 | 29 | ### 2 API 30 | 31 | #### path.resolve() ： 方法将路径或路径片段的序列解析为绝对路径 32 | 33 | * 1 给定的路径序列从右到左进行处理，每个后续的 `path` 前置，**直到构造出一个绝对路径**。 例如，给定的路径片段序列：`/foo`、 `/bar`、 `baz`，调用 `path.resolve('/foo', '/bar', 'baz')` 将返回 `/bar/baz`。 34 | 35 | * 2 如果在处理完所有给定的 `path` 片段之后还未生成绝对路径，则再加上当前工作目录。 36 | 37 | * 3 生成的路径已规范化，并且除非将路径解析为根目录，否则将删除尾部斜杠。 38 | 39 | * 4 零长度的 `path` 片段会被忽略。 40 | 41 | * 5 如果没有传入 `path` 片段，则 `path.resolve()` 将返回当前工作目录的绝对路径。 42 | 43 | ```javascript 44 | console.log(path.resolve('/fo/barss','sfaf','./bar')) 45 | console.log(path.resolve('/fo/barss','sfaf','/bar')) 46 | console.log(path.resolve('/fo/barss','/sfaf','bar')) 47 | console.log(path.resolve()) 48 | ``` 49 | 50 | 输出 51 | 52 | ``` 53 | /fo/barss/sfaf/bar 54 | /bar 55 | /sfaf/bar 56 | /Users/didi/learn/learnSPace/08node/05fs //工作目录 57 | ``` 58 | 59 | 60 | 61 | #### path.extname(): 获取路径的扩展名； 62 | 63 | #### path.parse() : 分析路径的组成； 64 | 65 | -------------------------------------------------------------------------------- /NodeJS/nodeBase/18NodeJS-OS.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1 [Nodejs文档-OS](http://nodejs.cn/api/os.html#os_os_networkinterfaces) 6 | 7 | ### 2 API 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /NodeJS/nodeBase/20NodeJS-vm.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jimwmg/JiM-Blog/11adb268258e10b8ea6a0897cfd56d4ee83a71e9/NodeJS/nodeBase/20NodeJS-vm.md -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #### 学习资源汇总 2 | 3 | [FE-tech-list](https://github.com/alienzhou/frontend-tech-list) 4 | 5 | [web-fundamentals](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) 6 | 7 | 8 | [工具资源汇总](https://juejin.im/post/5ddbdc10e51d4523425db17f) 9 | 10 | [前端效能提升](https://juejin.im/post/5ddca3cbe51d4523601740ae) 11 | 12 | [chrome-插件](https://zhuanlan.zhihu.com/p/37373891) 13 | 14 | [值得学习开源项目汇总](https://www.jianshu.com/p/6cb49271cd2a#) 15 | 16 | [前端资源系列](https://segmentfault.com/a/1190000007062464) 17 | 18 | [git-book](https://git-scm.com/book/zh) 19 | 20 | [cryptojs-提供hash算法](https://cryptojs.gitbook.io/docs/) 21 | 22 | -------------------------------------------------------------------------------- /React/React16-learn/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title:React16相关学习资源 3 | --- 4 | 5 | [官方文档](https://react.docschina.org/docs/hello-world.html) 6 | 7 | [react-script文档](https://create-react-app.dev/docs/getting-started/) -------------------------------------------------------------------------------- /React/React基础/000React常见概念总结.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ### 1.受控组件 非受控组件 6 | 7 | In HTML, form elements such as ``, `