![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript学习笔记
chengyu_wang
爱学习,爱编程,爱静静
展开
-
JavaScript闭包
闭包就是一个外部函数,可以直接引用内部函数中的变量.简单概念function log(){ let name = 'Chengyu' function tell(lover){ return `${name} love ${lover}` } return tell('JingJing')}console.log(log()) // Chengyu原创 2017-12-14 22:12:57 · 151 阅读 · 0 评论 -
JS正则的方法
test()/reg/.test(str);正则去匹配字符串,如果匹配成功返回true,否则返回falsesearch()str.search(/reg/)正则去匹配字符串,如果匹配成功,返回第一个匹配成功的位置,否则返回-1match()str.match(/reg/)正则去匹配字符串 - 如果匹配成功返回匹配成功的数组. 1. 一个结果. 数组中存储匹配到的字符串.但是可以使用 arr.原创 2017-05-12 15:22:57 · 314 阅读 · 0 评论 -
Vue.js学习笔记(三)
通过一个简单的实例加深对Vue的学习列表渲染v-for指令根据一组数组的选项列表进行渲染语法:value,key in itemsvalue,key of items对数组进行操作,使用Vue提供的一组方法,会触发视图更新push()pop()shift()unshift()splice()sort()reverse()事件处理器v-on指令用来监听DOM事件触发的代码语法:v-原创 2017-04-30 17:39:17 · 479 阅读 · 1 评论 -
Vue.js学习笔记(二)
Vue指令:v-bind 动态的绑定数据 ,简写为: v-on 绑定事件监听器,简写为@ v-text 更新数据,会覆盖已有结构 v-html 可以解析数据中的html结构 v-show 根据值的真假切换元素的display属性 v-if 根据值的真假,切换元素会被销毁、重建 v-else-if 多条件判断,为真则渲染 v-else 条件都不符合渲染 v-for 基于源数据多次渲染元原创 2017-04-27 15:09:18 · 349 阅读 · 0 评论 -
underscore 源码解析
(function() { // 先判断全局环境是什么,如果存在 self 那就是浏览器端,如果存在 global 那就是 node 端。如果是其它的神奇的地方,那就是 this 或者 {} var root = typeof self == 'object' && self.self === self && self || typ...原创 2018-02-13 20:35:44 · 926 阅读 · 0 评论 -
vuex 源码解析
目录分析# 首先 clone 一下项目git clone https://github.com/vuejs/vuex.git# 然后进入源码目录cd ./vuex/src# 源码目录结构.├── helpers.js // 提供 action、 mutations 以及 getters 的查找 API├── index.esm.js├── inde...原创 2018-03-01 10:56:12 · 3221 阅读 · 0 评论 -
node 使用 sequelize 操作数据库不完全指北
开始步骤npm init -y安装依赖npm i sequelize mysql2 standard --save连接数据库建立连接 新建一个 db.js// 引入依赖let Sequelize = require('sequelize')// 导出新建的连接数据库实例,方便在其它文件中引用module.exports = new ...原创 2018-03-11 14:15:37 · 2903 阅读 · 0 评论 -
Koa2 入门实践
第一个例子:启动初始化项目,安装环境# -y 就是不想自己逐条配置,直接全部使用默认配置npm init -y# 安装 koa 并写入 package.json 中npm i koa --save# 好的代码规范还是必要的npm i standard --save-dev# 安装 nodemon 用于开发环境快速自动重启npm i -g nodemon配...原创 2018-03-18 15:56:11 · 2005 阅读 · 0 评论 -
react registerServiceWorker.js
registerServiceWorker.js首先我们查看一个这个js文件的说明就可以看出其主要的含义了// In production, we register a service worker to serve assets from local cache.// This lets the app load faster on subsequent visits in pr...原创 2018-04-27 15:42:37 · 10817 阅读 · 0 评论 -
工作一年,重新思考闭包
功能延长变量生存周期一个经典的例子,这个时候我们就可以看到变量会随着函数的退出而随着作用域销毁。如果我们想要长久的保存这个变量怎么办,这个时候,我们就可以用到闭包了。再举一个例子,我们都知道 Object.prototype.toString.call(this) === '[object XXXX]' 用来判断类型是一个非常好用的例子,如果我们需要判断多个类型的话。当然不...原创 2018-06-02 16:08:22 · 439 阅读 · 2 评论 -
使用原生 js 复制内容到剪贴板
let oInput = document.createElement('input') oInput.value = 'some message' document.body.appendChild(oInput) oInput.select() document.execCommand("Copy") ...原创 2018-06-19 19:46:02 · 5095 阅读 · 0 评论 -
redux 源码解析
目录结构.├── applyMiddleware.js // 使用中间件模块,有了它就可以组合中间件一起使用├── bindActionCreators.js├── combineReducers.js├── compose.js // 组成函数,用于把函数列表组合成一个嵌套执行的函数├── createStore.js├── inde...原创 2018-09-25 14:08:29 · 229 阅读 · 0 评论 -
ES6 模块语法
ES6 模块语法ES6 中引入了 export, import 来用于导入与导出。export 导出使用 export 关键字来导出一个变量(常量)export const someValue = 1234export const someValue0 = '1234'export const someValue1 = {}export let someValue2 = 12...原创 2018-09-28 11:54:03 · 1028 阅读 · 0 评论 -
Node 全局变量
Node 全局变量 global除去一些 ES 中的全局对象、方法与变量, Node 还提供一些全局的内置方法、对象与变量用于帮助程序的执行。这些对象与方法能被应用在所有的模块中。可以使用 console.log(global)命令来查看全局对象与方法现在我们来查看一下这些全局的对象与方法。对象globalglobal用于挂载全局对象与方法。console控制台对象,用...原创 2018-12-03 20:39:24 · 1514 阅读 · 0 评论 -
自用 cookie 操作函数
;module.exports = (function () { return { set: function ( name, value, duration = 3600 * 24, path = '/', domain = window.location.domain, secure = false )...原创 2018-12-11 17:23:05 · 254 阅读 · 0 评论 -
Koa 源码解析
github链接原创 2019-04-24 11:34:19 · 181 阅读 · 0 评论 -
js中方法的封装
为什么要进行方法的封装?在平时的生产环境中,我们经常写出这样的代码:function fAdd(iA,iB){ return iA+iB;}function fMul(iA,iB){ return iA-iB;}其本质上是这样的:var fAdd = function(iA,iB){ return iA+iB;}var fMul = function(iA,iB){原创 2017-07-25 11:11:54 · 915 阅读 · 0 评论 -
ES5 中 JavaScript的继承
在ES5 中,js 的继承主要分为以下几类:类式继承function fFatherClass(){};fFatherClass.prototype.fAlert = function{ alert(hello,i'am father class); }function fChildClass(){};fChildClass.prototype = new fFatherC原创 2017-08-21 08:29:55 · 379 阅读 · 0 评论 -
JavaScript隐式类型转换
JavaScript中,正常是不会报类型错误的,因为会有隐式的类型转换.例外情况调用一个非函数对象试图选择null'hello'()null.toString()12331()正常情况let log = console.log.bind(null)log(3 + true) // 4log(2 + 3) // 5log('17' * 3) // 51log('hello' + '原创 2017-12-14 14:05:08 · 206 阅读 · 0 评论 -
JS日常随笔:DOM事件
DOM事件级别 DOM 事件级别 例子 DOM 0 element.onclick = function(){} DOM 2 element.addEventListener(‘click’,function(){},false} DOM 3 element.addEventListener(‘keyup’,function(){},false}因为DOM 1一般只有原创 2017-12-07 19:12:38 · 381 阅读 · 0 评论 -
JS日常随笔: 使用JS获取元素的宽高
如果我们遇到这么一个需求,要在JS运行时获取到某个指定的元素的宽高,那我们应该如何操作?// 下面我们所有的例子操作都是基于这个节点var oDomNode = document.queryselector('body')dom.style.widthconsole.log(oDomNode.style.width)console.log(oDomNode.style.height)我们可以原创 2017-12-06 16:14:53 · 2487 阅读 · 0 评论 -
js 多线程
什么是多线程? 多线程(multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的的计算机因有硬件支持的能力而能够在同一时间执行多于一个线程的,进而提升整体处理性能.具有这种能力的系统包括对称多处理机,多核心处理器以及芯片级多处理或同时多线程处理器.在一个程序中,这些独立运行的程序片段叫作线程(Thread),利用它编程的概念就叫做”多线程处理”原创 2017-09-22 13:42:45 · 1968 阅读 · 0 评论 -
js 接收后台数据推送
* 本文章仅包含数据推送,前端部分内容 *Comet基于HTTP长连接的服务器推送技术 就是前端向后台发送一个请求,后台进行一个死循环,一直向前端发送信息. 1. 使用jQueryfunction conn(){ $.ajax({ url:'/action' type:'get', dataType:'json',原创 2017-09-21 13:33:32 · 7924 阅读 · 0 评论 -
js 适配器模式
将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户的需求,使类(对象)之间的接口不兼容问题通过适配器得以解决.class Basketball { playBasketball () { console.log('投篮') } basketballTeam () { console.log('五个人') }}class Football {原创 2017-09-20 17:33:06 · 373 阅读 · 0 评论 -
js 高级函数特性
惰性函数 指的是函数只在第一次执行的时候进行检查运行环境的功能特性,并动态修改函数.以后再次执行的时候,就可以避免重复性检查环境比如,以前我们创建一个XHRHttpRequest请求的时候会这么写function createXHR(){ var xhr = null try{ xhr = new XMLHttpRequest() }catch(e){原创 2017-09-20 15:56:48 · 297 阅读 · 0 评论 -
js 面向切面编程
概念 (AOP)面向切面编程,主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程的某个步骤或者阶段,以获得逻辑过程中各部分之间低耦合性的隔离效果. 也就是说,在业务逻辑开始之前与结束之后进行操作,不干扰业务逻辑的具体过程.Function.prototype.before = function(fn){ var _self = this retur原创 2017-09-20 11:56:08 · 1374 阅读 · 0 评论 -
ES6 Promise对象学习笔记
Promise 是ES6中新增的异步编程解决方案,体现在代码中它是一个对象,可以通过Promise构造函数来实例化进程的三种状态graph LRPending进行中-->Resolved已完成Pending进行中-->Rejected已失败两个原型方法Promise.prototype.then()Promise.prototype.catch()简单实例let action = new原创 2017-09-13 13:29:12 · 330 阅读 · 0 评论 -
js 外观模式
为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更容易.没想到吧,在javascript中最基础的事件绑定就是一个外观模式的实现.不多说,上代码,用心用体会function addEventToDOM(dom,type,fn){ if(dom.addEventListener){ dom.addEventListener(type,fn,f原创 2017-09-12 11:26:52 · 519 阅读 · 0 评论 -
js 伪造static静态变量
var staticVar = (function(){ var myStaticVar = { MAX : 100, MIN : 0, COUNT : 10 } return { //取值器方法 get : function(name){ return myStaticV原创 2017-09-12 10:40:26 · 5567 阅读 · 0 评论 -
js 建造者模式
将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。var shirt = function(params){ this.color = params && params.color || '无色'; this.size = params && params.size || 'big';}shirt.prototype = { wear : fun原创 2017-08-30 19:45:02 · 635 阅读 · 0 评论 -
js 抽象工厂模式
抽象类的主要作用:定义一个产品簇,声明必备的方法,如果子类没有重写就会抛出错误.var abstructFactory = function(child,father){ if(typeof abstructFactory[father] === 'function'){ function tempClass(){}; tempClass.prototype原创 2017-08-30 15:37:42 · 306 阅读 · 0 评论 -
js 安全的工厂模式
工厂方法模式配音是说将实际创建对象推迟到子类中.这样核心类就成了抽象类.安全模式类可以屏蔽对类的错误操作而正确创建类var factory = function(type,contant){ if(this instanceof factory){ var obj = new this[type](contant); return obj; }else{原创 2017-08-29 16:05:39 · 977 阅读 · 0 评论 -
js 简单工厂模式
简单工厂模式,又叫静态工厂模式.由一个工厂对象决定创建某一种产品对象的实例.主要用于创建某一类对象.var basketball = function(){ this.title = '篮球';}basketball.prototype = { getMenberNum :function(){ console.log('5个人'); }, g原创 2017-08-29 16:04:57 · 502 阅读 · 0 评论 -
js方法的封装
为什么要进行方法的封装?在平时的生产环境中,我们经常写出这样的代码:function fAdd(iA,iB){ return iA+iB;}function fMul(iA,iB){ return iA-iB;}其本质上是这样的:var fAdd = function(iA,iB){ return iA+iB;}var fMul = function(iA,iB){原创 2017-08-21 08:31:03 · 10177 阅读 · 0 评论 -
webpack 源码解析一之启航
webpack 源码解析首先我们上 github 上面 clone 一份源码,我这里 clone 的是 4.30 版本的 webpack 源码git clone https://github.com/webpack/webpack.git起步首先,看一个源码的初始步骤就是打开 package.json 找到它的入口文件"main": "lib/webpack.js",确定了 ...原创 2019-05-17 14:42:36 · 686 阅读 · 0 评论