zhangr16xyz-CSDN博客

原创 vue2 项目构建（上）

项目结构Config1. dev.env.js开发环境配置：'use strict'// 合并配置const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, { CONF_ENV: `"${process.env.CONF_ENV}"`,

2017-12-07 16:48:57 714 1

原创双向数据绑定原理

1. 发布者-订阅者模式（backbone.js）一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set(‘property’, value)，虽然老套古板，这种方式的优点在于兼容ie8以下版本。2. 脏值检查（angular.js） angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，简单来说就是通过在指定的事件触发时

2017-08-19 15:04:48 2143 1

原创微信js-sdk接口

1. 概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为用户提供更优的网页体验。2. 具体步骤1 绑定域名：“公众号设置”的“功能设置”里填写“JS接口安全域名”2 引入JS文件：在需要调用JS接口的页面引入如下JS文件，（支持htt

2017-07-22 15:15:32 740

原创心得体会

1. 匿名函数自执行var x = 1;(function(){ console.log(x); x += 1; return x})();console.log(x);这个匿名函数就是「内部函数」，「外部函数」就是全局作用域从而形成闭包。 =>自定义函数，均可访问window对象中的变量。2. 解决Android手机端点击input弹出键盘遮盖问题: I

2017-07-10 17:45:46 345

原创 Vue2 ( 3 ) 过渡

1. 过渡css-类名这里v- 是类名的前缀，当有多个过渡使用<transition name="ss">区别 , 此时v-enter 替换成： ss-enter等。 <!DOCTYPE html><html> <head> <title>transition</title> <style> .fade-enter-active, .fade-leave-a

2017-06-21 16:39:30 271

原创 Vue2 （2）事件属性方法

1. 属性 & 方法每个Vue实例都会代理其data对象里的所有属性，且data里必须是函数：var data = { a: 1};var vm = new Vue({ data: data});console.log(vm);console.log(vm.a === data.a); // true// 设置属性也会影响到原始数据vm.a = 2;console.log

2017-06-20 17:45:19 1569

原创 Vue2 （1）组件化

1.组件注册创建组件构造器 ==》注册组件 ==》实例化组件<!DOCTYPE html><html> <body> <head> <title>演示Vue</title> </head> <div id="container"> <component1></component1> <component2></compone

2017-06-19 16:43:23 276

万物皆模块：在 webpack 的世界中，除了 Javascript，其他任何资源都可以当做模块的方式引用按需加载： webapp 的优化关键在于代码体积，当应用体积增大，实现代码的按需加载是刚需，这也是 webpack 出现的根本原因可定制化：任何一个工具都不可能解决所有问题，提供解决方案才是最可行的，webpack 基于可定制化的理念构建，通过插件系统，配置文件，可以实现大型项目的定制需求。1

2017-06-19 14:56:56 491

原创 Promise对象分析

1.概念 ES6 提供了原生的Promise对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。特点：new的Promise对象状态不受外界影响。 Pending(进行中），Resolved/ Fulfilled(已完成)， Rejected(已失败)，这三种状态只受异步操作的结果的内部影响。一旦状态改

2017-05-23 12:02:49 310 2

原创前端开发代码规范

一、总体注意事项：1 先看docs下的代码规范，一定要牢记。不要随便命名2 已有代码需要修改代码时，必须先获取代码，一般情况下不允许直接覆盖。可以合并3 修改代码不清楚是什么业务的，最好不要删除，可以注释。4 提交代码之前先格式化代码样式。5 尽量熟悉使用公司统一的开发环境(webstrom + svn);6 注释一定要有:建议格式：  <ul cl

2017-05-18 15:08:39 304

原创移动端开发问题总结2

1.composition事件:解决input下汉字输入法重复检测问题compositionstart：当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.compositionend：当浏览器是直接的文字输入时, compositionend会以同步模式触发.兼容ie 9+. 也就是给input事件触发截流：var node = $('input')

2017-05-09 17:56:00 292

原创移动端开发问题总结1

1.jquery点击事件在iphone端无效：经过查找资料，苹果有这么个设置：对于点击的对象，拥有cursor:pointer这个样式的设置，也就是说，鼠标放上去，能够出现“手”型的图标才被认作可以使用点击事件.placer-main { cursor: pointer;}2.iphone端滑动卡顿问题 body { -webkit-overflow-scrol

2017-04-25 15:45:32 503 1

原创前端实时搜索功能

**大部分页面都具备搜索功能。而作为前端，我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户，具体实现如下：** 1.基本布局：<div class="searcher"> <p class="searcher-main"> <i><img src="img/icon/icon-search-map.png"/></i>

2017-04-17 19:55:27 18595 1

原创（无JS）微信端纯H5的X,Y轴滑动

对于移动端这块还不是很熟悉，之前一直是用动态加减ul的transform以及设置transition属性使其左右上下移动，但是在处理动态加载数据的页面特别是不能用px做单位的情况下很尴尬。今日偶然发现用纯的H5也能实现此效果，兼容性也不差，故借此机会写下个人的第一笔：基本布局：<div class="box"> <ul> <li>品牌团</li> <li

2017-04-07 17:15:44 1988

weixin_36079296的博客