JavaScript - 随笔分类 - 杨君华

深入Vue响应式原理

摘要：深入Vue.js响应式原理一、创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h => h(App), }).$mount('#app'); 二、实例化一个Vue应用到底发生了什么？ v 阅读全文

posted @ 2019-08-18 23:01 杨君华阅读(613) 评论(0) 推荐(0) 编辑

Native/Webview bridge for Hybrid

摘要：Native/Webview bridge for Hybrid 安装 npm i --save webview-bridge 特点支持自定义app URL scheme 支持多种处理方式（全部涵盖）支持Promise处理回调使用 import Bridge from 'hybride-web 阅读全文

posted @ 2017-11-15 22:02 杨君华阅读(800) 评论(0) 推荐(0) 编辑

JavaScript日期集合（今日，昨日，本周一，周末，月初，月末）

摘要：闲聊：新年第一天上班，看着自己15年年底写的代码，真心觉得很烂，因为年底没时间去写，一想着做后台管理需要获取一周的开始和结束日期，就慌了，项目赶着测试呢，还有好多事情未做，就直接抄袭了网上的一段错误代码，其实真的很简单，今天重新花点时间封装一下，以备后用，大神勿喷，谢谢！一、封装为jQuery版日阅读全文

posted @ 2016-02-14 14:19 杨君华阅读(4492) 评论(1) 推荐(1) 编辑

自定义select控件开发

摘要：目的：select下拉框条目太多(上百)，当用户选择具体项时会浪费用户很多时间去寻找，因此需要一个搜索框让用户输入关键字来匹配列表，便于用户选择示例图：1、html结构 [{"id": "1", "name": "1嘉实多级护全合成油SN级5W-30"}, {"id": "11... 阅读全文

posted @ 2015-11-09 12:54 杨君华阅读(4008) 评论(1) 推荐(2) 编辑

Zepto.js touch模块深入分析

posted @ 2015-01-28 16:51 杨君华阅读(5553) 评论(0) 推荐(0) 编辑

2014年下半年学习备注

摘要：2014年下半年学习备注1、jQuery 中文APIhttp://jquery.cuishifeng.cn/2、Zepto 中文APIhttp://www.css88.com/doc/zeptojs_api/https://github.com/madrobby/zepto3、git 学习教程htt... 阅读全文

posted @ 2015-01-21 14:46 杨君华阅读(821) 评论(2) 推荐(3) 编辑

jQuery.lazyload使用及源码分析

摘要：前言：貌似以前自己也写过图片懒加载插件，但是新公司使用的是jQuery.lazyload插件，为了更好的运用，自己还是把源码看了遍，分别记录了如何使用，插件原理，各个配置属性的完整解释，demo实例，源码分析(较简短)，源码分析可以配合使用，配置属性，原理进行阅读，如需转载，请注明出处博客园华子y... 阅读全文

posted @ 2014-07-27 18:56 杨君华阅读(18619) 评论(2) 推荐(4) 编辑

2014年前端面试经历

摘要：前言：最近离职了，工作快三年了，第二次离职，两次离职都带着沉重的心态，或许还有点依依不舍，或许。。。说多了都是泪，哈哈；这个时间点工作也不好找，投了很多家公司，发现90%的公司在招移动端人才；面试了近十家公司，有移动端、互联网电商、金融证券、医疗、广告、还有创业型公司，接下来讲的主要是一些面试题。面... 阅读全文

posted @ 2014-06-28 17:24 杨君华阅读(2471) 评论(17) 推荐(0) 编辑

JavaScript简易缩放程序

摘要：一、前言：上一篇随笔中已经把拖动程序完成了，这篇主要把缩放程序完成，后面合并后可以做成一个图片裁剪的功能简易缩放程序DEMO：http://jsfiddle.net/UN99R/ 限制缩放程序DEMO：http://jsfiddle.net/kHWQZ/ 二、设计思路：1、在一个可以缩放元素中，共有8个触发点(上、下、左、右、左上、右上、左下、右下)，首先分别设置好它们的CSS属性cursor值。 2、同拖放程序一样，在触发点上绑定鼠标按下事件，在文档(document)上绑定鼠标移动、弹起事件处理程序，在移动事件中，完成拖放元素css的操作， ... 阅读全文

posted @ 2014-02-26 22:40 杨君华阅读(1662) 评论(1) 推荐(0) 编辑

JavaScript 实现鼠标拖动元素

摘要：一、前言最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点，用于固定定位，然后在复制HTML，粘贴在页面的开发代码中，就是这么一个功能，实现了很多遍，都没有做好，不得已采用了jQuery.fn.draggable插件，在接触一些资料和别人的思路，今天终于把这个拖动功能给完善了，下面就来看看它的实现DEMO1：http://jsfiddle.net/Jj9qA/4/DEMO2:http://jsfiddle.net/gUYdg/1/二、设计思路在拖动元素上绑定鼠标按下事件，在文档对象中绑定鼠标移动，鼠标弹起事件；为什么不把三个事件都绑定在拖动元素上，这是因为鼠标移动太快时，鼠标移动和弹起阅读全文

posted @ 2014-02-21 13:28 杨君华阅读(5744) 评论(0) 推荐(3) 编辑

jQuery回调、递延对象总结（下篇) —— 解密jQuery.when方法

摘要：前言：前一篇文章中重点总结了一下then方法，它主要用来处理多个异步任务按顺序执行，即前一个任务处理完了，再继续下一个，以此类推；而这一章节jQuery.when方法也是处理多个异步任务，它把多个异步任务(Promise对象)合并为一个Promise对象，这个合并后的Promise对象到底是如何来更新它的状态，即何时执行，拒绝？让我们继续往下看吧！jQuery回调、递延对象总结篇索引：jQuery回调、递延对象总结（上篇）—— jQuery.Callbacks jQuery回调、递延对象总结（中篇) —— 神奇的then方法 jQuery回调、递延对象总结（下篇) —— 解密jQuery.wh 阅读全文

posted @ 2014-01-09 15:52 杨君华阅读(2809) 评论(1) 推荐(0) 编辑

jQuery回调、递延对象总结（中篇) —— 神奇的then方法

摘要：前言：什么叫做递延对象，生成一个递延对象只需调用jQuery.Deferred函数，deferred这个单词译为延期，推迟，即延迟的意思，那么在jQuery中又是如何表达延迟的呢，从递延对象中的then方法或许能找到这种延迟的行为，本文重点解读递延对象中的then方法jQuery回调、递延对象总结篇索引：jQuery回调、递延对象总结（上篇）—— jQuery.CallbacksjQuery回调、递延对象总结（中篇) —— 神奇的then方法jQuery回调、递延对象总结（下篇) —— 解密jQuery.when方法设计思路：在递延对象构造中，分别有三组回调对象，每一组回调对象都有与之对应的行阅读全文

posted @ 2014-01-07 17:55 杨君华阅读(15654) 评论(3) 推荐(0) 编辑

jQuery回调、递延对象总结（上篇）—— jQuery.Callbacks

摘要：前言：作为参数传递给另一个函数执行的函数我们称为回调函数，那么该回调又是否是异步的呢，何谓异步，如：作为事件处理器，或作为参数传递给(setTimeout，setInterval)这样的异步函数，或作为ajax发送请求，应用于请求各种状态的处理，我们可以称为异步回调，jQuery.Callbacks为我们封装了一个回调对象模块，我们先来看一个应用场景：// 为什么jQuery中的ready事件可以执行多个回调，这得益于我们的jQuery.Deferred递延对象(是基于jQuery.Callbacks回调模块)jQuery(function($) { console.log('docu 阅读全文

posted @ 2014-01-07 11:53 杨君华阅读(3937) 评论(0) 推荐(0) 编辑

jQuery.snowflake雪花飘落插件

摘要：一、前言前言：最近圣诞节来临，需要在页面上应用一个雪花飘落的效果，做之前产品经理给了我网络上的一个demo，地址是http://demo.lanrenzhijia.com/demo/1225/sd/，预览了一下，效果不错，但是性能可以再优化，源码中使用setInterval重复定时器，dom在不停地插入移除，这里主要优化这两个地方，使用setTimeout替换setInterval，减少页面dom的重排，其他地方可以自己调整。二、应用实例demo/** * component: jQuery.snowflake 2013/12/19 华子yjh * invoking: jQuery.snowf 阅读全文

posted @ 2013-12-19 12:13 杨君华阅读(4055) 评论(16) 推荐(4) 编辑

jQuery.imgLazyLoad图片懒加载组件

摘要：一、前言当一个页面中请求的图片过多，而且图片太大，页面访问的速度是非常慢的，对用户的体验非常不友好；使用图片懒加载，可以减轻服务器的压力，增加页面的访问量，这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad；使用该组件应在img标签中设置一个imglazyload-src属性，存放图片地址。二、应用实例demo/** * component: imgLazyLoad 2013/12/12 华子yjh * invoking: jQuery.imgLazyLoad(options) * // 配置对象 options = { container... 阅读全文

posted @ 2013-12-12 13:46 杨君华阅读(5608) 评论(2) 推荐(5) 编辑

深入分析，理解jQuery.Deferred源码

摘要：前言:如果你对jQuery.Callback回调对象不了解，或者只掌握其方法，但是没有通过阅读源码理解，可以先阅读前一章jQuery.Callbacks源码解读二，因为只有完全理解jQuery.Callback源码，才能真正的理解并掌握jQuery.Deferred递延对象。源码：// jQuery 1.10.2jQuery.extend({ Deferred: function( func ) { /* tuples包含三个数组三个数组前三项分别代表jQuery回调对象中的 fire, add, jQuery.Callback... 阅读全文

posted @ 2013-10-30 15:19 杨君华阅读(1920) 评论(6) 推荐(2) 编辑

jQuery.Callbacks 源码解读二

摘要：一、参数标记/* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中，确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false，则终止回调队列的执行 * momery: 记录上一次fire时的参数，并在add中传递给fire和执行fire，执行时firingIndex为上一次fire时的firingLength */二、源码解读分析var optionsCache = {}, // Used for splitting on whitespace core_rnotwhite = /\S+/g;// Convert... 阅读全文

posted @ 2013-10-21 19:36 杨君华阅读(1236) 评论(0) 推荐(2) 编辑

面板支持单个，多个元素的jQuery图片轮播插件

摘要：一、先附上democontenteditable ... 阅读全文

posted @ 2013-10-19 16:17 杨君华阅读(2688) 评论(1) 推荐(0) 编辑

模拟jQuery中的ready方法及实现按需加载css,js

摘要：一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码，涉及到的模块比较多，(水平有限)代码比较难看懂；自己结合了一些书籍内容，总结一下。先说一下ready函数的实现思路：变量ready通过表达式赋值，右侧为一个自执行匿名函数，在这个匿名函数中，首先为各个浏览器的事件绑定处理函数，并为isReady赋值(根据事件异步处理程序来确定)，然后返回一个传参闭包，在闭包中，主要判断isReady值来执行操作，如果dom结构准备就绪(isReady === true)，执行回调，否则将回调加入到要执行的队列(funs) 阅读全文

posted @ 2013-09-18 17:04 杨君华阅读(2313) 评论(3) 推荐(0) 编辑

JavaScript事件模拟元素拖动

摘要：一、前言：最近要实现一个元素拖放效果，鼠标拖动元素并且定位元素，首先想到的是HTML5中的拖放，在HTML5中，有一个draggable属性，且有dragstart, dragover, drop等事件，主要是通过event.dataTransfer对象方法，在dragstart事件中设置数据event.dataTransfer.setData(); 在drop事件中获取数据event.dataTransfer.getData();但是它并不能实现元素的实时拖放效果，因此还是需要用鼠标事件来模拟元素的拖放。二、实例示图三、实现原理： 1、思路：鼠标依次触发mousedown， mousemov 阅读全文

posted @ 2013-09-13 18:08 杨君华阅读(4399) 评论(2) 推荐(0) 编辑

随笔分类 - JavaScript

公告