- 浏览: 208010 次
最新评论
文章列表
core.js种子模块
提供静态方法或属性,如$.extend(拷贝对象,首参true深拷贝)、$.each(遍历对象,返回首参对象)、$.map(遍历对象,创建新数组返回)、$.grep(过滤数组)、$.merge(拼接数组,返回首参对象)、$.proxy(改变 ...
一、queue模块的意义
处理动画事件的回调金字塔。
无queue模块:
$("#animate1").animate({heihgt:"760px"},function(){
$("#animate2").animate({width:"1280px"},function(){
console.log("end");
});
});
有queue模块:
var fns=[
function() ...
实现功能:
为文档元素、节点元素、普通对象以this.expando为键添加Data对象,对外接口获取、设置、移除该Data对象,以及判断该Data对象是否有值;
Data对象分为共有和私有两种,共有的Data对象提供外部接口获取和设置该Data对象的内容,私有的Data对象直接在内部调用构建或获取Data对象的方法,(event模块的回调函数队列通过私有的Data对象构建);
节点元素提供便捷的获取、设置、移除方法,元素的data起始的属性快速合并到Data对象中,通过$.fn.extend方法实现。
源码:
data模块外部接口实现,提供$.data|removeData ...
1.co处理延迟实现
整体回调的实现:借用生成器函数执行完成后又有generator.done标志执行完成,因此可以创建一个新的Promise对象wrapPromise作为返回值,然后调用wrapPromise的then、catch等方法注册回调函数。生成器函数执行完毕时,generator.done标志为true,调用resolve函数,以触发resolved状态下的回调函数得到执行;当生成器函数执行过程中捕获错误时,调用reject函数,以触发rejected状态下的回调函数得到执行。同类Promise处理失败回调时需要反复注册onRejected回调函数。
延迟函数的实现: ...
promise模块源码
- 博客分类:
- node
一、Promise-lib/core.js:Promise构造函数
(package.json中约定入口文件为index.js,通过index,js加载lib下的index.js文件,该index.js文件再加载core.js,作为模块输出Promise构造函数)
使用:
var fn=function(resolve,reject){
setTimeout(function(){
resolve();
},3000);
}
new Promise(fn).then(function(){
console.l ...
assert模块源码
- 博客分类:
- node
1.assert断言模块主要解决:
测试需求,提供校验值是否为真、相等/不相等、深度匹配/不匹配等调试方法,不满足校验条件的通过fail函数构造AssertionError对象并抛出。
抛出错误,构造执行函数block,通过block函数抛出错误对象E ...
1.debug日志打印模块
主要实现功能:带命名空间(模块名)、时间戳、色彩输出日志;将日志写入文件;浏览器端使用;格式化函数;支持自定义方法。
实现思路:通过环境变量设置配置项如是否启用有彩色输出、设定打印方法、设定命名空间(模块名);
也可以通过require("debug").enable(namespace)添加命名空间,require("debug").enabled.useColors是否启用有彩色输出,require("debug").enabled.log自定义打印方法,require(&q ...
Deferred源码
- 博客分类:
- jquery源码
一、由 function(args,callback){} 到 Deferred.resolve().done(fn)
主要问题:添加多个回调函数需要在function函数体内进行改写,针对resovle函数执行成功、reject函数执行失败、progress函数执行过程中三种状态分别注册回调函数较为麻烦,以及对回调函数的处理机制没有通用性,可移植性差。
功能需要:降解回调函数注册和执行的复杂度,针对失败、成功、执行中三种状态能批量添加回调函数,处理回调函数的通用功能抽象为独立的模块。
设计思路:利用Event模块事件触发、绑定事件的理念,将原回调函数执行过程call ...
Callbacks源码
- 博客分类:
- jquery源码
var callbacks=$.Callbacks(options) 创建实例
options.once 是否只执行一次,默认为否
options.memory:是否记录上次执行的回调函数参数,记录后,再次执行回调时将该参数推入queue参数数组中,默认为否
options.unique:保证回调函数的单一性,默认为否
options.stopOnFalse:当回调返回值为否时,是否终止回调函数执行,默认为否
配置项可以用字符串输入,将自动转化为对象形式,如"once"将转化为{once:true ...
1.npm install webpack --save-dev
2.安装加载器
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev //es6转码规则
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install less --save-dev
n ...
1.border绘图
原理归纳:疑似找到box中点,当邻边同样有外边距时,沿两边框长度形成的角度发射线向外绘制三角形得到每一条边上的外边距,同时形成圆角。
原理演绎:暂无浏览器渲染原理、C++造诣。
.border {
width:0px;
height:0px;
border: 50px solid;
border-color: #7cb5ec #8085e8 #90ed7d #f7a35c;
}
.border {
width:0px;
height:0px;
border: 50px solid;
border-colo ...
版本管理 github
1.设置Git的user name和email:
$ git config --global user.name "xuhaiyan"
$ git config --global user.email "haiyan.xu.vip@gmail.com"
2.生成SSH密钥:
查看是否已经有了ssh密钥:cd ~/.ssh 如果没有密钥则不会有此文件夹,有则备份删除 生成密钥:
$ ssh-keygen -t rsa -C “haiyan.xu.vip@gmail.com” ...
1.DateTimePicker
优点:支持html配置联动时间,通过startend属性约定当前输入框为起始时间或结束时间,startendelem约定另一个联动的时间输入框;
缺点:html配置和js配置在DataTiemPicker构造函数中进行比较后,进而影响方法的执行,过高的耦合度使代码的可读性(主要是数据缓存、flag标志、条件过多)变差。
/**
* Object.keys() 返回参数可被枚举的属性;
*
* $(this).prop("tagName") 获取元素的标签名;
*
* $(oDTP.settings.pare ...
对话框js插件源码汇总
- 博客分类:
- js插件源码整理
1.jquery.custombox.js
以页面元素为模板填充进对话框内容体,或者获取远程数据填充进内容体,实现PPT似的3D动效。
插件写作引入jquery,按原生js写就,效果依赖于支持css3以及Dom3级的浏览器,因此不包括ie8、ie9。
css源码:
/*
* jQuery Custombox v1.1.3 - 2014/02/18
* jQuery Modal Window Effects.
* http://dixso.github.io/custombox/
* (c) 2014 Julio De La Calle - http://d ...
css:
.chiron-search-dropdown{
padding-left: 0;
background-color: white;
list-style: none;
padding:5px 0;
font-size:14px;
border-radius:4px;
border:1px solid #ddd;
}
.chiron-search-dropdown-item a{
text-decoration:none;
display:block;
padding:2px ...