- 博客(45)
- 收藏
- 关注
RSS订阅原创 javascript --- > js中prototype、__proto__、[[Propto]]、constructor的关系
首先看下面一行代码:function Person(name){ this.name = name;}var person1 = new Person;console.log(person1.__proto__ === Person.prototype);console.log(person1.constructor === Person);控制台打印如下:可以看见,当使用构...
2019-04-30 21:31:40
347
转载 javascript --- > typeof方法和instanceof方法
ES5中:原始类型包括:Number、String、Boolean、Null、Undefined原始封装类型包括:Number、String、Boolean引用类型包括:Array、Function、RegExp、Error、Date、Error变量对象原始类型的实例成为原始值,它直接保存在变量对象中.引用类型的实例成为引用值,它作为一个指针保存在变量对象内,该指针指向实际对象在内存中...
2019-04-30 09:25:59
151
转载 es6 --- > co模块的源码
function co(gen) { var ctx = this; return new Promise(function(resolve, reject) { if (typeof gen === 'function') gen = gen.call(ctx); if (!gen || typeof gen.next !== 'fun...
2019-04-28 21:00:30
294
转载 es6 --- > Thunk函数的作用
首先了解一下javascript里面的Thunk函数的含义:将多参数函数,替换成一个只接受回调函数作为参数的单参数函数// 一个具体的例子// 正常版本的readFile(多参数函数)fs.readFile(filename, callback);// Thunk版本的readFile(单参数版本)var Thunk = function (fileName) { retur...
2019-04-27 21:08:07
422
转载 es6 --- > Thunkify源码分析
首先看一个例子:读取package.json下的文件,并将读取的数据(若读取失败)打印出来// 导入fs和thunkify模块var thunkify = require('thunkify');var fs = require('fs');// 定义读取文件的函数readvar read = thunkify(fs.readFile);// 调用read函数读取package.j...
2019-04-27 16:52:12
198
转载 es6 --- > 对任意对象部署可遍历接口
有时候需要对对象进行遍历,下面提供一个比较方便的接口,其基本思路是,首先得到对象的所有键(key),然后将其放在yield* 后面.yield* 可以通过 for … of … 循环遍历具体实现如下:function* iterEntries (obj) { let keys = Object.keys(obj); for ( let i =0; i < keys....
2019-04-27 13:44:52
150
转载 es6 --- > 正确获取Generator函数内部的this对象&使其可以使用new
首先看2个例子function * g() { this.a = 11;}let o = g();console.log(o.a);可以看见Generator函数里面的this指向的对象取不出来.再看下一个例子:function* F() { yield this.x = 2; yield this.y = 3;}new F();可以看出Gen...
2019-04-27 10:04:53
414
转载 es6 --- > 使用yield*命令遍历完全二叉树
首先定义二叉树的结构:// 定义二叉树的结构function Tree(left, label, right) { this.left = left; this.label = label; this.right = right;}// 对二叉树采用中序遍历function* inorder(t) { if(t) { yield* ino...
2019-04-26 21:50:09
317
转载 es6 --- > Promise.catch
Promise.prototype.catch(): 是.then(null, rejection)的别名,用于指定发生错误时的回调函数p.then( (val) -> console.log('fulfilled:', val)) .catch( (err) => console.log('rejected', err));// 等同于p.then( (val) =>...
2019-04-25 14:29:49
719
转载 es6 --- > promise.prototype.then的链式引用
很多时候,我们需要使用ajax请求获取数据A.并使用A中的数据A.a来进行下一步的Ajax操作…下面使用promise.prototype.then的链式引用来实现// 首先封装一个getJSON的方法.var getJSON = function (url) { var promise = new Promise(function (resolve, reject) { ...
2019-04-25 10:52:44
176
转载 es6 --- > 用promise对象实现Ajax操作的一个实例
首先回顾一下Ajax请求的步骤var client = new XMLHttpRequest(); client.open("GET", url);client.onreadystatechange = handler;client.responseType = "json";client.setRequestHeader("Accept", "application/json");c...
2019-04-25 10:13:03
535
转载 es6 --- > Reflect的静态方法
Reflect.get(target, name, receiver): 查找并返回 target对象的 name属性,若没有,返回undefinedvar myObject = { foo: 1, bar: 2, get baz() { return this.foo + this.bar; },}Reflect.get(myObject,...
2019-04-25 08:46:59
238
转载 es6 --- >Proxy的属性(get、set除外)
apply()： 拦截函数的调用、call和apply操作var target = function () { return 'I am the target';};var handler = { apply: function () { reuturn 'I am the proxy'; }};var p = new Proxy(target, hand...
2019-04-24 19:40:19
786
转载 es6 --- > Proxy实例的get方法
写一个拦截函数,访问目标对象不存在属性时,会抛出不存在该属性的错误如果存在该属性时,就返回其值.var person = { name: "张三"};var proxy = new Proxy(person, { get: function(target, property) { if (property in target) { ...
2019-04-24 16:27:13
984
转载 es6 --- > 使用node的memoryUsage检测WeakMap()
打开node命令行$ node --expose-gc// --expose-gc:表示允许手动执行垃圾回收机制// 手动执行一次垃圾回收,保证获取的内存使用状态准确> global.gc();// 查看内存占用的初始状态,> process.memoryUsage();可以发现初始用了4.7MB左右// 创建一个WeakMap()实例wm> let...
2019-04-24 11:30:04
653
转载 es6 --- > set实现并集(Union)、交集(Intersect)和差集(Difference)
Set:类似于数组,但是成员的值都是唯一的let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);// 并集let union = new Set([...a, ...b]);// 交集let intersect = new Set([...a].filter(x => b.has(x)));// 差级let diff...
2019-04-23 20:01:27
676
转载 es6 --- > 内置的Symbol值
Symbol.hasInstance// Symbol.hasInstanceclass MyClass { [Symbol.hasInstance] (foo) { return foo instanceof Array; }}[1, 2, 3] instanceof new MyClass() // true// symbol.hasInstance...
2019-04-23 16:56:05
350
转载 javascript --- > Object.assign()浅复制解决方法
Object.assign()是浅复制(即:只复制对象得引用而,而不是新实例).它无法正确复制get属性和set属性.看下面得例子:// 定义一个source对象,含set方法const source = { set foo(value) { console.log(value); }};// 使用Object.assign进行赋值const targ...
2019-04-23 11:13:31
269
转载 javascript --- > __proto__属性的实现
Object.defineProperty(Object.prototype, '__proto__', { get() { let _thisObj = Object (this); return Object.getPrototypeOf(_thisObj); }, set(proto) { if (this === undefin...
2019-04-23 08:10:12
219
2
转载 javascript --- > 尾递归优化的实现
考虑一个正常的递归函数function sum(x, y) { if (y > 0) { return sum (x + 1, y - 1); } else { return x; }}sum(1, 100000000);超出调用栈的最大次数…下面使用尾递归优化实现:function tco(f) { var v...
2019-04-22 16:20:52
115
转载 javascript --- > 函数的优化(尾调用优化)
从一个熟悉的Fibonacci数列的实现开始:function Fibonacci (n) { if ( n <= 1) { return 1}; return Fibonacci(n -1) + Fibonacci(n-2);}以上代码很简单…但执行以下代码console.log(Fibonacci(100));会发现编译工具,卡住不动.原因在...
2019-04-22 15:38:46
204
转载 JavaScrpt --- > es5实现ES6的Number扩展(部分)
ES6对数值对象Number进行了扩展,// ES实现Number.isFinite()(function (global) { var global_isFinite = global.isFinite; Object.defineProperty(Number, 'isFinite', { value: function isFinite(val...
2019-04-21 21:48:14
295
转载 javascript --- > 实现Ajax的代码
直接上代码,(前几天项目出差部署去叻)const ajax = function (options = {}) { option.type = (options.type || 'GET').toUpperCase(); let data = []; for(let i in options.data) { data.push(encodeUR...
2019-04-20 20:58:04
228
原创 vue --- > 模块从子组件获取数据
我们希望:点击"+1",总数加1;点击"-1"总数减1. 且数据是来自子组件…首先写html<div id = "app"> <p>总数 {{ total }} </p> <my-component @increase="handleTotal" @reduce="handleTotal"> </div><...
2019-04-14 21:44:02
477
原创 vue --- > 从模块从父元素获取数据
vue的精彩之处在于其组件的可复用性.下面谈谈组件(component)如何从父元素获取数据模块引用首先说说,如何引用模块<div id="app"> <my-component ></my-component> </div><script src=“unpkg.com/vue/dist/vue.min.js”> &l...
2019-04-12 16:36:32
1163
原创 vue --- > 购物车页面
下面我看开始自己写一个购物车的页面.我们希望得到如下的效果:说明:购买数量最小为0购买数量变化时,对应的总价随之变化点击移除操作对应的商品会移除掉,总价随之改变每个商品作为一个list表的一个对象每个对象,包含id、name、price、count等属性index.html (整体代码最后给出)导入依赖(从上往下)// 样式表<link rel="styles...
2019-04-12 10:46:03
517
转载 vue --- > 使用vue在html上显示当前时间
希望如下效果(时间按秒钟更新)导入Vue依赖的CDN<script src="https://unpkg.com/vue/dist/vue.min.js"> </script>创建视图<div id="app">{{date}}</div>Model<script> var app = new Vue({ ...
2019-04-11 15:42:10
3313
转载 html5 --- > 使用canvas画一个渐变矩形
我们希望得到如下效果:首先准备画布// HTML<canvas width="500" height="375" id ="a"> </canvas>// JS// 获取画布的DOM元素var a_canvas = document.getElementById("1");// 获取画布的上下文元素(之后,就可以使用canvas的特性了)var ct =...
2019-04-11 10:18:01
512
转载 html5 --- > canvas绘制网格并画x、y轴
效果如下:// 代码如下:<body> <canvas width="500" height="375" id="c"></canvas> <script> (function draw_a() { var a_canvas = document.getElementById("c"); var context = a_...
2019-04-11 09:43:46
1748
转载 html5 --- > 特性检测
使用Moderniz库可以对H5的特性进行检测,下载网址: https://modernizr.com// 在HTML 中的head标签中导入<script src="/modernizr.min.js"></script>// ps:注意src的路径画布(canvas)特性检测:if (Modernizr.canvas){ // 开始画...} e...
2019-04-10 17:18:38
251
转载 bootstrap --- > 鼠标停留提示事件
使用bootstrap可以很简单的实现鼠标停留,提示的效果<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right" class="btn btn-primary">工具提示</a>data-toggle=“tooltip”:代表了提示类data-placem...
2019-04-09 09:41:40
2565
转载 bootstrap --- > 标签页切换
很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现…首先导入bootstrap的依赖:jquery的依赖、bootstrap的依赖注意: jquery的依赖要在bootstrap依赖的前面导入,原因是:bootstrap的某些功能是在jquery的基础上实现的在 https://www.bootcdn.cn/jquery/ 导入jquery的CDN<script ...
2019-04-09 09:34:43
12992
2
转载 bootstrap --- > 弹出对话框
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 点击触发模态对话框</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidde...
2019-04-09 09:10:00
1356
转载 bootstrap --- > 面板
基本样式<div class="panel panel-default"> <div class="panel-heading">面板头...</div> <div class="panel-body">面板身体...</div> <div class="panel-footer">面板脚...</div...
2019-04-08 21:28:40
145
转载 bootstrap --- > 分页
// bootstrap中给无序列表的ul元素添加pagination类即可.<ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</...
2019-04-08 20:30:29
958
转载 bootstrap --- > 按钮
<head> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRA...
2019-04-08 16:10:54
285
转载 bootstrap --- > 表单
// HTML >>> 第一种样式<!DOCTYPE html><html><head> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn538...
2019-04-08 15:42:15
108
转载 bootstrap --- > 表格
几个可选类:.table-bordered: 为表格加上边框.table-striped: 为表格加上斑马效果.table-hover: 鼠标悬停在表格行上时展现不同得颜色.table-condensed: 更为紧凑的表格样式// 导入样式,从bootstrap官网导入CDN// HEAD<link rel="stylesheet" href="https://cdn.boo...
2019-04-08 15:16:50
523
转载 css --- > 弹性盒子
左右两侧按1:1自适应,中间固定宽度500px// CSS/* 首先定义 container ，关注display *//* webkit 是Chrome、Safari 的浏览器前缀 */.container{ margin: auto; display: -webkit-box; width: 80%； height: 200px;}/* 开始定义...
2019-04-08 09:55:19
107
转载 css --- > 应用媒介查询制作响应式导航栏
以上导航会自动适应各个尺寸的屏幕代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="apple-m...
2019-04-08 09:13:07
410
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人