js处理层级数据结构的方法小结_心病_前端开发者

心病阅读(33)

开发者对复杂的数据结构的处理能力也是体现开发者水平的一个度量吧。。。最近发现自己对一些嵌套数据结构、层级数据结构的处理能力不大足。。。经常被这些把自己绕晕。。。严重影响开发效率。。。就稍微低总结了一下下。。。

一、mongodb设计层级关系数据(这里主要说的是mongoose)

①假设有这样的一个场景。某个文章下面有评论,每个评论可以被回复,每个回复又可以被回复…

首先,我们知道,普通的一对多的关系,可以通过引用,populate操作找出相应的引用对象,如:

var essaySchema = new mongoose.Schema({ //文章schema
 user:{
 type: mongoose.Schema.Types.ObjectId, //发布者的引用
 ref: 'user', //引用自User Model
 require: true //非空
 },
 ...
});

文章与评论的关系,就是一对多。自然也是按照这种处理方式即可。

但是,评论与回复的关系,就有点意思了。首先,评论和回复,回复与该回复的回复虽然是不同的东西(看着就拗口),但是这些的shema的信息都是由相同的字段构成。也就是说,可以说是自己嵌套了多个自己。

这个时候,就要这样处理了:

//评论Schema定义
var commentSchema = new mongoose.Schema({
 content: {
 type: String,
 require: true
 },
 created: {
 type: Date,
 "default": Date.now
 },
 user: {
 type: mongoose.Schema.Types.ObjectId, //用户的引用
 ref: 'user', //引用自User Model
 require: true //非空
 },
 subComment: [this], //自评论的类型为评论类型,也就是本身类型
});

最关键就是最后一句,实质上就是递归地引用了自身。查找的时候,也确实是需要根据上一层的subComment找到自己。套了深层的时候,查找的时候会容易绕晕,而且查找速度也会降低。建议做层级限制。

实践小项目:一个简单版node+express+mongodb的图片分享

二、实际开发场景中的层级关系数据

①假设有这样的一个场景,有一个商品数组,每个商品有两个维度,颜色和规格。颜色和规格的组合会产生的sku(可以理解为每种组合情况的一个标识)数量为颜色数量*规格数量。当我们渲染完毕之后,顾客每切换一个规格,都要找到相应的sku。

设想一下,假如顾客每切换一个规格,我们就根据第几个商品,切换的规格,没有被切换的规格去查找。那么每次都是一个三重循环。。。

这种情况下,比较好的做法就是,初始化获得数据的时候,建立三维数据,即Array[商品index][颜色][规格]。这样每次切换,只要读取相应的项就可以找到sku了。

但是,假若商品的维度不是二维,而是多维呢,而且不一定每种组合都存在这样的商品的呢?

构造数据的方法,就显得不大明智了,一是组合数过多,并不是每种组合商品都存在,而是循环太多重。

这个时候,又要利用对象去构造数据了。

第一步,根据展示需要构造。展示的时候,只需要知道,某个商品的某个维度是某个值即可。即:

var obj = {[
{'商品':'1',sku:'','维度1':'...','维度2':'...',...}
]}

当点击切换维度的时候,首先根据原来的维度信息,更新用户新选的维度。遍历该新的维度对象,与维度信息数据比较,如果一一相符则找到新的sku。然后再更新即可。  

在这里就要明确自己的”筹码”与”目标”,根据哪些东西,通过哪些途径可以到达目标。将每一步拆分成一个小方法去做。。。

②假设有这样的一个场景,首先要根据一些规则合并一些请求去请求不同的数据(即返回的数据,是多个参数结合在一起的,必须还要解析出数据原先的对应关系),然后获得部分数据。再用获得的部分数据中某条数据的参数去请求第二个接口。然后获得不同的一些数据。

首先想到的可能是用promise处理,待两个接口都请求完毕后再进行处理。但是假如,第一个接口获得的是大部分主要的数据,第二个是小部分的数据。这个时候,等待第二个接口似乎就有点”不划算”了,特别是在用户体验上,当一个用户打开某个页面的时候,白屏就不好啦。  

这个时候,我们就要善于利用对象去构造符合我们的数据对象了。

我们可以这样初始化一个对象:

var obj = {
 '唯一的参数1'+‘_'+'唯一的参数1的id' : {
 第一次请求的数据 : [],
 第二次请求的数据 : [], 
 },
 '唯一的参数2'+‘_'+'唯一的参数2的id' : {
 第一次请求的数据 : [],
 第二次请求的数据 : [], 
 },
 ...
}

总之,就是要找到唯一的东西,来构造对象。然后再根据这个唯一的值把相应的数据填上。好吧,我都说晕了。看个例子:

for(var i = 0;i < data.length; i++){
 for(var j = 0;j < data[i].params.length; j++){
 obj[data[i].groupId + '_' + data[i].params[j].pcId] = {};
 }
}
//请求数据回来后
for(var i = 0;i < data.length; i++){
 for(var j = 0;j < data[i].params.length; j++){
 obj[data[i].groupId + '_' + data[i].params[j].pcId][firstItem] = data[i].params[j].list;
 }
}
//第二次数据回来后
for(var i = 0;i < data.length; i++){
 for(var j = 0;j < data[i].params.length; j++){
 obj[data[i].groupId + '_' + data[i].params[j].pcId][moreItem] = data[i].params[j].list;
 }
}

注意,如果是用vue,因为第二次请求的数据参数来自第一次,所以请二次数据回来之后,需要用全局api,set方法处理才会生效。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

angularjs ocLazyLoad分步加载js文件实例_冘醉_前端开发者

冘醉阅读(277)

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此:

问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>ui-router-lazyload</title>
  <link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
  <script src="../angular/angular.min.js"></script>
  <script src="../angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="../oclazyload/dist/ocLazyLoad.min.js"></script>
  <script src="index.js"></script>
</head>
<style>
  body{
    font-family: "Microsoft JhengHei UI";
  }
  .navigator{
    width: 500px;margin: 0 auto
  }
  .navigator li{
    color: #000;font-size: 14px;
  }
</style>
<body ng-controller="myController">
<ul class="navigator nav nav-pills">
  <li role="presentation" class="active"><a href="#home" ng-click="isActive($event)">主页</a></li>
  <li role="presentation" class="active"><a href="#child">子页面</a></li>
  <li role="presentation" class="active"><a href="#third" ng-click="isActive($event)">三级页面</a></li>
</ul>
<div ui-view style="width: 500px;margin: 50px auto 0"></div>
</body>
</html>

js代码:

var myApp=angular.module("myApp",["ui.router","oc.lazyLoad"]);
myApp.config(function ($stateProvider,$urlRouterProvider) {
  $urlRouterProvider.when("","/home");
  $stateProvider.state('home',{
    url:"/home",
    templateUrl: 'homepage.html',
    resolve:{
      loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
        return $ocLazyLoad.load({
          name:"homeApp",
          files:["homepage.js"]
        })
      }]
    }
  });
  $stateProvider.state('index',{
    url:"/home",
    templateUrl:'index.html'
  });
  $stateProvider.state('child',{
    url:"/child",
    templateUrl:'child.html',
    resolve:{
      loadMyCtrl:function ($ocLazyLoad) {
        return $ocLazyLoad.load({
          name:'childApp',
          files:["child.js"]
        })
      }
    }
  })
  $stateProvider.state('third',{
    url:"/third",
    templateUrl:'third.html',
    resolve:{
      loadMyCtrl:function ($ocLazyLoad) {
        return $ocLazyLoad.load({
          name:'grandApp',
          files:["third.js"]
        })
      }
    }
  })
  
});
myApp.controller("myController",function ($state,$scope,$location) {
  $scope.turnPage=function () {
    // $state.go('home');
    $location.path('/home')
  }
});

页面初始效果如下图,打开浏览器控制台,可以看到child.js以及third.js在页面载入时并没有加载:

 页面初始化:

当点击子页面和三级页面时,会依次加载所依赖的js文件.实现分步加载.

点击子页面:

三级页面:

 填坑:网上关于angular按需加载的文章也蛮多的,也有人使用的是requireJS来进行这个操作,而且ocLazyLoad的使用方法也有很多.之前按照一些文档的方法,在配置路由时,加了下面的蓝色代码,页面是能跳转,但是homepage.html的js代码却执行了两次,难道是控制器加载了两次么.对于这个坑,我还在探索中,也希望大家能够发表意见或者建议.

$stateProvider.state('home',{
     url:"/home",
     controller:'homeController',
     templateUrl: 'homepage.html',
     resolve:{
       loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
         return $ocLazyLoad.load({
           name:"homeApp",
           files:["homepage.js"]
         })
       }]
     }
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

用原生js做单页应用_苏颜_前端开发者

苏颜阅读(13)

最近在公司接到一个需求,里面有一个三级跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦。所以可以用js把这一块做成单页应用的样子。。。

主要思路

通过改变url的hash值,跳到相应模块。先把默认模块显示出来,其他模块隐藏,分别给三个模块定义三个hash值,点击默认模块的选项的时候,改变hash值,同时在window上监听hashchange事件,并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退,而且用户体验也比较好。

下面详细来看看,现在有一个场景,选择顺序是:车牌子->车型->车系。

首先HTML部分。默认显示车牌子选择列表,其他两个模块隐藏。

<div class="wrap">
 <div id="Brand">
  <div>品牌</div>
   <ul class="mycar_hot_list">
    <li>
     <p>大众</p>
    </li>
   </ul>
  </div>
  <div id="Type" style="display:none">
   <dl>
   <dt>比亚迪汽车</dt>
   <dd>宋</dd>
  </dl>
 </div>
 <div id="Series" style="display:none">
  <ul class="mycar_datalist">
    <li>
     2013年款
    <li>
  </ul>
 </div>
</div>

js逻辑控制部分

①定义一个变量对象,存储三个模块中分别选择的数据、定义hash值、相应模块的处理逻辑函数。

info={
      brand:'',
      carType:'',
      carSeries:'',
      pages:['Brand','Type','Series'] 
    };
info.selectBrand=function(){
   document.title = '选择商标';
   brandEvent();
}
//选择车型
info.selectType=function(){
   document.title = '选择车型';
   document.body.scrollTop = 0; //滚到顶部
    window.scrollTo(0, 0);
    typeEvent(); //为该模块的dom绑定事件或做其他逻辑
}
//选择车系
info.selectSeries=function(){
   document.title = '选择车系';
   document.body.scrollTop = 0;
   window.scrollTo(0, 0);
   seriesEvent();
}

②dom绑定事件&其他逻辑

 function brandEvent(){
//绑定跳转
  $('#Brand ul li').click(function(){
    info.brand=$(this).find('p').text();
    goPage('Type');
  })
 }
 function typeEvent(){
//绑定跳转
  $('#Type dd').click(function(){
    info.carType=$(this).text();
    goPage('Series');
  })
 }
 function seriesEvent(){...}

③goPage逻辑跳转控制

function goPage(tag) {
  if ((tag == 'Brand')&&(location.hash.indexOf('Type')!=-1)){ // 后退操作
      history.back();
      document.title = '选择商标'; 
  }else if ((tag == 'Type')&&(location.hash.indexOf('Series')!=-1)){
      history.back();
      document.title = '选择车型';
  }else {
    location.hash = tag;
  }
}

④js入口文件(这里用了zepto.js来选择dom)

window.onload=function(){
    info.selectBrand(); //为默认显示的模块中的元素绑定相应的事件及其他逻辑
    $(window).on("hashchange", function (e) {
      doHashChange();
    });
}

⑤最重要的hash改变逻辑控制

function doHashChange(){
  //获取hash的值
  var hash = location.hash.split('|')[0],
    tag = hash.replace(/#/g, '');
  if (info.pages.indexOf(tag) == -1) {
    tag = 'Brand';
  }
  $('.wrap').children('div').hide();  
  //执行每个模块不同的方法
  if(typeof(info['select' + tag]) == "function"){
    info['select' + tag]();
  }
  //展示对应dom
  $('#' + tag).show();
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

微信小程序实战之运维小项目_婳祎_前端开发者

婳祎阅读(17)

前言

自从微信推出小程序以来,现在业界炒的非常的火,具说叫微信小程序是因为某公司不让叫应用号,我在朋友圈也看过pony的和张小龙朋友圈关于名字的讨论截图,不知道是真是假,反正名字是定了,叫啥无所谓,还是知道它是干啥的比较重要, 像网上说什么新风口了,原生APP以后没活路了等相关文章喜欢的可以多看看, 我们今天不会在产品层面上去介绍小程序,因为我们是搞运维的,所以我还是在运维层面怎么使用小程序。

今天我们用实际例子来讲解和普及小小程序如何使用,来实现类似IP138的功能,输入IP可以查看IP的详细信息,包括归属,地点等。

我们先看下完成后的效果:

实现分析

基本功能就是做一个IP查询的页面,输入ip,能够查询IP的详细信息,后台调用的淘宝的IP库,OK,界面和功能就是这样了,比较简单,接下来我们来介绍小程序的基本概念和使用。

第一步,先下载微信小程序开发者工具,这个是必须的,因为只能在这个工具里去调试你的代码,但写代码不一定要在这个工具里去写,在Sublime 里写也可以,但调试你必须在这工具里,关于怎么下怎么装这我就不多说了,如果这步都没搞定我觉得往下看也没啥意义了,当然是开个玩笑,如果有问题的,可以给我留言。

实现方法

安装后,第一次运行需要用微信扫描,来识别开发者,然后添加项目,微信开发者工具可以帮你生成一个简单的demo项目,生成项目后如图:

我们先看app.js、app.json、app.wxss 这三个,其中

app.js 是小程序的脚本代码,可以定义全局变量, 指定小程序的生命周期函数(onLaunch,onShow,onHide,其它),

app.json文件是配置文件,主要配置小程序的页面,所有的页面设置都要写在这个文件里

app.wxss 是公共样式表文件。

除了这些文件,我们还有两个目录,这2个目录展示的是index 页面和 logs 页面,每个目录下如果完整的情况下都会有4个文件:

如上图所示,现在每个目录下分别是index.js、index.wxml、index.wxss,其中.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件(非必须),.wxss 后缀的是样式表文件(非必须),.wxml 后缀的文件是页面结构文件。

以上就是小程序的基本概念了,了解了这些,就可以开始我们的小项目开发了。

首先我们先写index.wxml。

代码如下:

因为界面我加了一部分样式,所以要写index.wxss样式文件,代码如下:

有了这些只是个壳子,输入IP点击查询时没有效果的, 因为我们还需要从后台获取数据,现在开始写我们的index.js文件,因为js文件内容比较多,我们分开介绍,先说下下初始化部分,

刚开始都是空,然后是我们的核心函数,先判断IP是否为空,如果是就提示IP不能为空,如果有IP,就调用wx.request发请求,将获得的数据然后通过setData来赋值,如网络有问题,就报网络请求失败,代码如下:

最后,查询完后需要重新输入,当用户点重置时清空所有的内容,包括刚获取的值,代码如下:

完成以上代码就可以在开发者工具里调试下了,如果都正常,这个小项目就算完成了,等微信开发公测的时候就可以传到微信小程序市场里,然后每个人就可以下载去使用了。

关于小程序的内容我就介绍到这里,我这里就算是抛砖引玉了,喜欢的小伙伴可以帮忙转发下,让更多的小伙伴可以学习到新的知识,另外因为小程序是非常新的东西,想更深入了解的可以去看小程序的官方文档。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

vue.js学习笔记:如何加载本地json文件_柠浓_前端开发者

柠浓阅读(11)

在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发。但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来。(此时项目是由webpack打包而成)。

整个项目是由webpack打包而成。具体项目结构如下:

1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux

2:我们找到bulid>dev-server.js,然后打开

3:在里面加入这段代码,大概在17行)。

var app = express() //从这后面开始加

var appData = require('../data.json');

var seller = appData.seller;

var goods = appData.goods;

var ratings = appData.ratings;

 

var apiRoutes = express.Router();

 

apiRoutes.get('/seller',function (req,res) {

 res.json({

  errno:0,

  data:seller

 });

});

 

apiRoutes.get('/goods',function (req,res) {

 res.json({

  errno:0,

  data:goods

 });

});

 

apiRoutes.get('/ratings',function (req,res) {

 res.json({

  errno:0,

  datta:ratings

 });

});

app.use('/api',apiRoutes);

4:使用方法:

你可以在浏览器地址栏填写http://localhost:8080/api/seller  或者http://localhost:8080/api/goods  或者http://localhost:8080/api/ratings   查看数据

因为加载的json数据没有格式,看起来很乱,所以我们可以使用谷歌的扩展程序JSONView。

贴上读取数据的页面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

React快速入门教程_白澜_前端开发者

白澜阅读(14)

简介

Facebook官网介绍:React 是一个用来构建用户界面的 JavaScript 库。相当于 MVC 架构的 V 层。

React 的核心思想是:封装组件,各个组件维护自己的状态和UI,当状态变更,自动重新渲染整个组件。

React的优点(React为什么这么火?):

组成  

React构建界面的三要点:组件、路由、状态管理。

React 的核心内容:JSX和虚拟 DOM。

一个最基本的 React 组件由数据和JSX两个主要部分构成,我们先来看看数据。

这是一个简单完整的React组件(类),props 主要作用是提供数据来源,可以简单的理解为 props 就是构造函数的参数。 state 唯一的作用是控制组件的表现,用来存放会随着交互变化状态,比如开关状态等。JSX 做的事情就是根据 state 和 props 中的值,结合一些视图层面的逻辑,输出对应的 DOM 结构。

在组件内部,可以通过this.props来访问props

React的一大创新,就是把每一个组件都看成是一个状态机,组件内部通过state来维护组件状态的变化,这也是state唯一的作用。

传统 Web App:是直接和DOM交互,由App来控制DOM的构建和渲染、元素属性的读写、事件的注册和销毁等。

React Web App:是通过虚拟DOM来交互。虚拟DOM是在DOM的基础上建立了一个抽象层,我们对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。(渲染效率高)

React目前支持的事件列表:

生命周期

大体可以分为三个过程:初始化、更新和销毁,在组件生命周期中,随着组件的props或者state发生改变,它的虚拟DOM和DOM表现也将有相应的变化。

一、初始化:

解析:

  1. 组件类在声明时,会先调用 getDefaultProps() 方法来获取默认props值,这个方法会且只会在声明组件类时调用一次,这一点需要注意,它返回的默认props由所有实例共享。
  2. 在组件被实例化之前,会先调用一次实例方法 getInitialState() 方法,用于获取这个组件的初始state。
  3. 实例化之后就是渲染,componentWillMount方法会在生成虚拟DOM之前被调用,你可以在这里对组件的渲染做一些准备工作,比如计算目标容器尺寸然后修改组件自身的尺寸以适应目标容器等等。
  4. 接下来就是渲染工作,在这里你会创建一个虚拟DOM用来表示组件的结构。

对于一个组件来说,render 是唯一一个必须的方法。render方法需要满足这几点:

    1)只能通过 this.props 或 this.state 访问数据

    2)只能出现一个顶级组件

    3)可以返回 null、false 或任何 React 组件

    4)不能对 props、state 或 DOM 进行修改

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

基本DOM节点操作_淋雪_前端开发者

淋雪阅读(12)

1、获取元素节点

getElementById():获取指定唯一id的元素。

getElementByTagName():获取指定元素标签名的元素数组。

getElementByName():获取具有指定属性name的元素数组。

2、子节点

element.childNodes:返回该元素的子节点数组。注意:换行在浏览器中作为text节点,需要进行过滤

element.firstChild:该元素的第一个子节点。

element.lastChild:该元素最后一个子节点。

3、父节点

element.parentNode

4、兄弟节点

element.previousSibling:返回相同的树层级中的前一个节点,如果没有,则为null

element.nextSibling:返回相同的树层级中的后一个节点,如果没有,则为null

5、创建节点

createElement() 按指定标签名创建节点

6、复制节点

clonedNode = Node.cloneNode(boolean) 传入布尔值,true表示复制该节点下的所有子节点

7、加入节点

parentNode.appendChild(childNode) 将新节点加入到子节点末尾

parentNode.insertBefore(newNode, targetNode) 将newNode 加入到targNode之前

8、移除目标节点

parentNode.removeChild(childNode)

9、替换目标节点

parentNode.replace(newNode, targetNode) 使用newNode 替换targetNode

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

动态加载css方法实现和深入解析_清玖_前端开发者

清玖阅读(13)

一、方法引用来源和应用

此动态加载css方法 loadCss,剥离自Sea.js,并做了进一步的优化(优化代码后续会进行分析)。

因为公司项目需要用到懒加载来提高网站加载速度,所以将非首屏渲染必需的css文件进行动态加载操作。

二、优化后的完整代码

/*
* @function 动态加载css文件
* @param {string} options.url -- css资源路径
* @param {function} options.callback -- 加载后回调函数
* @param {string} options.id -- link标签id
*/
function loadCss(options){
 var url = options.url,
 callback = typeof options.callback == "function" ? options.callback : function(){},
 id = options.id,
 node = document.createElement("link"),
 supportOnload = "onload" in node,
 isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536, // webkit旧内核做特殊处理
 protectNum = 300000; // 阈值10分钟,一秒钟执行pollCss 500次
 node.rel = "stylesheet";
 node.type = "text/css";
 node.href = url;
 if( typeof id !== "undefined" ){
 node.id = id;
 }
 document.getElementsByTagName("head")[0].appendChild(node);
 // for Old WebKit and Old Firefox
 if (isOldWebKit || !supportOnload) {
 // Begin after node insertion
 setTimeout(function() {
  pollCss(node, callback, 0);
 }, 1);
 return;
 }
 if(supportOnload){
 node.onload = onload;
 node.onerror = function() {
  // 加载失败(404)
  onload();
 }
 }else{
 node.onreadystatechange = function() {
  if (/loaded|complete/.test(node.readyState)) {
  onload();
  }
 }
 }
 function onload() {
 // 确保只跑一次下载操作
 node.onload = node.onerror = node.onreadystatechange = null;
 // 清空node引用,在低版本IE,不清除会造成内存泄露
 node = null;
 callback();
 }
 // 循环判断css是否已加载成功
 /*
 * @param node -- link节点
 * @param callback -- 回调函数
 * @param step -- 计步器,避免无限循环
 */
 function pollCss(node, callback, step){
 var sheet = node.sheet,
  isLoaded; 
 step += 1;
 // 保护,大于10分钟,则不再轮询
 if(step > protectNum){
  isLoaded = true;
  
  // 清空node引用
  node = null;
  callback();
  return;
 }
 if(isOldWebKit){
  // for WebKit < 536
  if(sheet){
  isLoaded = true;
  }
 }else if(sheet){
  // for Firefox < 9.0
  try{
  if(sheet.cssRules){
   isLoaded = true;
  }
  }catch(ex){
  // 火狐特殊版本,通过特定值获知是否下载成功
  // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"
  // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
  // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"
  if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){
   isLoaded = true;
  }
  }
 }
 setTimeout(function() {
  if(isLoaded){
  // 延迟20ms是为了给下载的样式留够渲染的时间
  callback();
  }else{
  pollCss(node, callback, step);
  }
 }, 20);
 }
}

三、解析代码

一、参数

本方法支持三个参数,可进行扩展。

1.1 opations.url

url是需要引入的css资源路径,也即标签的href属性内容。

1.2 options.id

id是标签的id属性。这个参数为非必要参数,可不传。主要作用是标记当前标签,方便js进行查找,以确定是否已加载某个css文件。

1.3 options.callback

callback是css文件加载完成后会调用的回调函数。也存在特殊场景下,文件加载失败,回调函数仍旧执行的情况。

二、生成标签,并插入头部head,进行加载资源

var url = options.url,
 callback = typeof options.callback == "function" ? options.callback : function(){},
 id = options.id,
 node = document.createElement("link");
node.rel = "stylesheet";
node.type = "text/css";
node.href = url;
if( typeof id !== "undefined" ){
 node.id = id;
}
document.getElementsByTagName("head")[0].appendChild(node);

生成一个dom节点,然后配置好rel、type、href等必需的属性值,以便浏览器能正常解析链接的资源。

接着,查找到head节点,将节点插入。

三、实现css资源下载状态监控的pollCss方法

pollCss方法的职责是判断插入的link节点,也即node变量反馈资源是否已加载完成。

3.1 判断的主要依据

浏览器加载css资源,会给该link节点生成sheet属性,可以根据浏览器不同,读取sheet属性相关内容,来判断是否已经加载完成。所以第一句语句var sheet = node.sheet首先要做的就是获取sheet属性值。

3.2 普通浏览器判断

try{
 if(sheet.cssRules){
 isLoaded = true;
 }
}catch(ex){
 // 火狐特殊版本,通过特定值获知是否下载成功
 // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"
 // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
 // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"
 if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){
 isLoaded = true;
 }
}

如果读取sheet.cssRules有值,证明css资源已经链接进页面,并开始解析。此时可以判断资源加载成功。

如果读取失败,则根据抛错内容,判断是否有特定name属性ex.name === “NS_ERROR_DOM_SECURITY_ERR”。存在,则代表是低版本火狐(9.0以前),且资源已经加载成功。

3.3 旧webkit内核浏览器判断

var isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536; // webkit旧内核做特殊处理
if(isOldWebKit){
 // for WebKit < 536
 if(sheet){
 isLoaded = true;
 }
}

如果是webkit旧内核浏览器,则只需要判断sheet属性值存在,则代表资源加载完成。

3.4 增加多次循环检测

setTimeout(function() {
 if(isLoaded){
 // 延迟20ms是为了给下载的样式留够渲染的时间
 callback();
 }else{
 pollCss(node, callback, step);
 }
}, 20);

触发pollCss方法后,可能第一次检测sheet值,会检测不到。也就代表还没加载完成。所以需要进行轮询。这里是隔20ms进行一次问询,直到资源加载完成为止。

3.5 轮询容错(针对Sea.js源码的优化)

css资源加载也有可能出错的时机存在,而且存在不触发onerror方法的可能性。如果不加一个保护,则轮询可能一直持续下去,所以需要有一个极限阈值。

var protectNum = 300000, // 阈值10分钟,一秒钟执行pollCss 500次
 step = 0;
// 很多代码....
step += 1;
// 保护,大于10分钟,则不再轮询
if(step > protectNum){
 isLoaded = true;
 // 清空node引用
 node = null;
 callback();
 return;
}

这里的阈值是轮询10分钟,如果10分钟后,仍然不符合条件,则默认资源已下载完成,执行callback方法,并清空node引用。

四、确定触发pollCss检查的时机

4.1 pollCss轮询的应用场景

当浏览器内核是旧的webkit内核时,或者不支持节点触发onload方法时,才使用pollCss进行轮询。

// for Old WebKit and Old Firefox
if (isOldWebKit || !supportOnload) {
 // Begin after node insertion
 setTimeout(function() {
 pollCss(node, callback, 0);
 }, 1);
 return;
}

五、现代浏览器直接用onload和onreadystatechange做判断

现代浏览器用这种方式判断,可以避免轮询的弊端。判断也更加准确及时。

5.1 onload方法

function onload() {
 // 确保只跑一次下载操作
 node.onload = node.onerror = node.onreadystatechange = null;
 // 清空node引用,在低版本IE,不清除会造成内存泄露
 node = null;
 callback();
}

onload方法触发执行后,应立即将多个相关方法进行重置,以避免callback多次触发。

node = null;将node重置为null,是为了避免低版本的IE出现内存溢出问题,及时清除没用的dom节点。

最后,执行callback方法。

5.2 支持onload方法浏览器的处理

if(supportOnload){
 node.onload = onload;
 node.onerror = function() {
 // 加载失败(404)
 onload();
 }
}

5.3 不支持onload方法浏览器的处理

if(supportOnload){
 // 代码...
}else{
 node.onreadystatechange = function() {
 if (/loaded|complete/.test(node.readyState)) {
  onload();
 }
 }
}

四、后记

选择剥离Sea.js方法进行改造的原因:因为该js库使用人群很广泛,如果出问题,作者也会及时修复。所以,以此代码为蓝本进行改造契合公司的用户群,避免大面积出现问题。

在产品上应用该方法后,到目前为止,未有客户反馈样式异常问题。所以,看本文章的程序猿们,可以放心使用。

ps:公司用户群有1千多万的用户量,涉及大大小小繁杂的浏览器,从IE6到chrome都有。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

基于jQuery制作小图标上下滑动特效_莺呼_前端开发者

莺呼阅读(9)

一个小图标特效,挺有趣的,代码也很容易懂。

 jQ小图标上下滑动特效:

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="css/normalize.css">
  <style>
   .tubiao{
    width: 300px;
    height: 100px;
    margin: 100px auto;
   }
   a{
    position: relative;
    padding: 10px;
    display: inline-block;
    text-decoration: none;
    color: #000;
    text-align: center;
   }
   i{
    position: absolute;
    left: 5px;
    top: -20px;
    opacity: 1;
   }
  </style>
  <body>
    <div class="tubiao">
      <a href="#"><i><img src="imges/小图标/1.png" alt="1" ></i><p>我的</p></a>
      <a href="#"><i><img src="imges/小图标/2.png" alt="2" ></i><p>你的</p></a>
      <a href="#"><i><img src="imges/小图标/3.png" alt="3" ></i><p>他的</p></a>
      <a href="#"><i><img src="imges/小图标/4.png" alt="4" ></i><p>好的</p></a>
      <a href="#"><i><img src="imges/小图标/5.png" alt="5" ></i><p>坏的</p></a>
    </div>/*css和html不解释*/
    <script src="js库/jquery.js"></script>/*jquery库,路径这里用汉字,我是看的方便,实际建议用英文*/
    <script>
      $(function(){
        $("a").mouseenter(function(){<br>                /*mouseenter和mouseover 都是 触摸事件,前者是不冒泡,后者必然冒泡,解释还是有点差强人意,前者也会发生不一样的情况,就是超出子元素范围,点在祖先元素还是会发生*/
          $(this).find("i").stop().animate({top:"-30px",opacity:"0"},300,function(){ <br>                   /*这里关键说一个,就是在anmiate()前面加stop(),是取消上一次事件,再继续,接下来的*/
            $(this).css({top:"-15px"});<br>                        /*这里是再次出现的关键,就是因为opacity是0嘛,我们就先悄悄的把top值,移到正常位置的下面一点点,然后再让他出现,即产生了绕了180deg的错觉*/
            $(this).animate({top:"-20px",opacity:"1"},300)
          });
        })
      })
    </script>
  </body>
</html>

jQuery实现别踩白块儿网页版小游戏_莺呼_前端开发者

莺呼阅读(11)

大致介绍

终于结束了考试,放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点,基本的思路都差不多。

这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

思路

这个小游戏可以抽象化分为3层

 ◆最底下的一层是基本的样式(可见的)

 ◆中间的层是最主要的,是一个4×3的二维数组,游戏中我们都是对这个二维数组进行操作(不可见的)

 ◆最上面的一层也是一个4×3的二维数组,是用户能最终看见的

我们通过最底下的一层显示最基本的12个小方格,不同的颜色,每个格子对应的中间的层有不同的值,最上面的一层负责显示样式

基本结构与样式

基本的结构和样式都挺简单,直接看代码

结构:

<body>
 <div id="header">
 <h1>别踩白块儿</h1>
 <div id="timer" >0.0000</div>
 </div>
 <div id="container">
 <div class="grid" id="grid-0-0"></div>
 <div class="grid" id="grid-0-1"></div>
 <div class="grid" id="grid-0-2"></div>
 <div class="grid" id="grid-1-0"></div>
 <div class="grid" id="grid-1-1"></div>
 <div class="grid" id="grid-1-2"></div>
 <div class="grid" id="grid-2-0"></div>
 <div class="grid" id="grid-2-1"></div>
 <div class="grid" id="grid-2-2"></div>
 <div class="grid" id="grid-3-0"></div>
 <div class="grid" id="grid-3-1"></div>
 <div class="grid" id="grid-3-2"></div>
 </div>
</body>

样式:

body{
 background-color: #008694;
 font: 12px/20px "黑体" ,arial;
}
#header {
 display: block;
 margin: 0 auto;
 width: 500px;
 text-align: center;
}
#header h1 {
 font-family: Arial;
 font-size: 40px;
 font-weight: bold;
}
#timer {
 z-index: 4;
 font-size: 24px;
 color: #fa3c3c;
 font-weight: 700;
 text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)
}
#container{
 width: 302px;
 height: 402px;
 margin: 50px auto;
 background-color: #55d769;
 border: 5px solid #000;
 position: relative;
}
.grid {
 width: 100px;
 height: 100px;
 background-color: #fff;

 border: 1px solid #000;
 position: absolute;
}
.block {
 width: 100px;
 height: 100px;
 border: 1px solid #000;
 font-family: Arial;
 font-weight: bold;
 font-size: 20px;
 color: #fff;
 text-align: center;
 position: absolute;
}
.coBlock{
 background-color: #000;
}
.gameover {
 display: block;
 margin: 0 auto;
 width: 300px;
 text-align: center;
 vertical-align: middle;
 position: absolute;
}
.gameover p {
 font-family: Arial;
 font-size: 50px;
 color: white;
 margin: 50px auto;
 margin-top: 150px;
 }
 .gameover span {
 font-family: Arial;
 font-size: 50px;
 color: white;
 margin: 50px auto;
 }
 .restartGame {
 display: block;
 margin: 20px auto;
 width: 180px;
 padding: 10px 10px;
 background-color: #8f7a66;
 font-family: Arial;
 font-size: 30px;
 color: white;
 border-radius: 10px;
 text-decoration: none;
 }
 .restartGame:hover {
 background-color: #9f8b77;
 }

这里并没有设置每个格子的位置,位置由js代码来设置,以及第二层的二维数组、第三层的显示层都由js来设置,这里和 jQuery编写网页版2048小游戏 并没有什么大的区别

代码:

function init(){
 timerRan = 0.000;
 keyDown = true;
 for(var i=0;i<4;i++){
 board[i] = [];
 for(var j=0;j<3;j++){
  board[i][j] = [];
  var grid = $('#grid-'+ i +'-'+ j);
  grid.css({
  'top':getPosTop(i,j),
  'left':getPosLeft(i,j)
  });
  $('#container').append('<div class="block" id="block-'+ i +'-'+ j +'"></div>');
  var block = $('#block-'+ i +'-'+ j);
  block.css({
  'top':getPosTop(i,j),
  'left':getPosLeft(i,j)
  });
  board[i][j] = 0;
 }
 }
function getPosTop(i,j){
 return i*100;
}
function getPosLeft(i,j){
 return j*100;
}

初始化

游戏开始时,要在每一行随机的位置显示一个黑色的方块,并且在最下面的那一行的黑色方块上要有提示信息

代码:

for(var i=0;i<4;i++){
 var randj = parseInt(Math.floor(Math.random() * 3));
 if(i >0 && board[i-1][randj] == 1){
  randj = parseInt(Math.floor(Math.random() * 3));
 }
 $('#block-'+ i +'-'+ randj).addClass('coBlock');
 board[i][randj] = 1;
 }
 $('#block-3-0').text('按J开始游戏');
 $('#block-3-1').text('按K开始游戏');
 $('#block-3-2').text('按L开始游戏');

基本操作

我们通过switch循环,来根据用户不同的输入进行不同的操作

代码:

$(document).keydown(function(event) {
 switch(event.keyCode){
 case 74:
  if(board[3][0] == 1 && keyDown){
  timeRan();
  clearText();
  moveDown();
  }else{
  isgameover();
  }
  break;
 case 75:
  if(board[3][1] == 1 && keyDown){
  timeRan();
  clearText();
  moveDown();
  }else{
   isgameover();
  }
  break;
 case 76:
  if(board[3][2] == 1 && keyDown){
  timeRan();
  clearText();
  moveDown();
  }else{
  isgameover();
  }
  break; 
 }
});

在这里设置 keyDown 这个全局变量的目的是为了防止用户在游戏结束时,继续按键。

timeRan()这个函数是显示游戏时间的

代码:

function timeRan(){
 clearTimeout(timer);
 timerRan += 0.001;
 $('#timer').text(timerRan.toString().slice(0,5));
 timer = setTimeout(function(){
 timeRan();
 },1);
}

clearText()这个函数是在游戏开始后,将最下面一行的提示信息去掉

代码:

function clearText(){
 $("#block-3-0").text("");
 $("#block-3-1").text("");
 $("#block-3-2").text("");
}

moveDown()这个函数是方块移动的最主要函数,因为方块要向下移动,所以我们要从最下面开始遍历二维数组,如果该格子是黑色的并且是最下面一行的,就只是简单的把该格子的颜色变回白色,如果该格子是黑色的并且是第一行至第三行的,这个格子变为白色,并且它的正下方的一个格子变为黑色,最后,在第一行的随机位置上显示一个黑色的格子

代码:

function moveDown(){
 for(var i=3;i>=0;i--){
 for(var j=2;j>=0;j--){
  if(board[i][j] == 1){
  if(i == 3){
   $('#block-'+ i +'-'+ j).removeClass('coBlock');
   board[i][j] = 0;
  }else{
   $('#block-'+ i +'-'+ j).removeClass('coBlock');
   board[i][j] = 0;

   $('#block-'+ (i+1) +'-'+ j).addClass('coBlock');
   board[i+1][j] = 1;

  }
  }
 }
 }
 var randj = parseInt(Math.floor(Math.random() * 3));
 $('#block-0-'+ randj).addClass('coBlock');
 board[0][randj] = 1;
}

isgameover()是显示游戏结束样式的函数,比较简单

代码:

function isgameover(){
 keyDown = false;
 clearTimeout(timer);
 $('#container').append('<div id="gameover" class="gameover"><p>本次用时</p><span>'+ timerRan.toString().slice(0,5) +'</span><a href="javascript:restartGame()" class="restartGame">重新开始</a></div>');
 var gameover = $("#gameover");
 gameover.css("width", "300px");
 gameover.css("height", "400px");
 gameover.css("background-color", "rgba(0, 0, 0, 0.5)");
}
function restartGame(){
 $('#timer').text('0.000');
 $('#gameover').remove();
 $('.block').remove();
 init();
}

总结

这个小游戏,如果学会了之前的 jQuery编写网页版2048小游戏,就会觉得这个挺简单的,基本的思想和方法都大同小异,如果有任何的建议如果或者想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

jQuery无刷新上传之uploadify简单代码_晴枙_前端开发者

晴枙阅读(17)

先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章。前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了无刷新上传的功能,不过个人觉得不是很完美。

昨天在网上找到了一个叫做uploadify的jquery上传插件,看到园子里有几篇文章也是介绍这个插件的,心想何不用这个试试。

 不过园子里的这几篇文章用到的uploadify还是以前的旧版本uploadify-v2.1.0,我在官网上下载的是uploadify-v3.1版,其中的一些参数以及调用方法也不同了,还好官网有帮助文档。

(唯一感觉不爽的一点就是这个开发包是针对php的,官网并没有.NET版本,但至少原理都是一样的,简单的修改一下就可以了。还是那句话“不仅要知其然,还要知其所以然”,知其所以然了,一切都是浮云啊)

好了,废话不多说。先上个效果图,有图有真相:

一:从官网下载开发包添加到项目中,我对这个开发包做了一个精简,删去了那些php方面的文件:

项目基本结构:

二:添加对css和js文件的引用:

注意jquery.js文件和uploadify.js文件的调用顺序。

三:Default.aspx页面的代码如下:

<head runat="server">
  <title></title>
  <link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  <script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
    $(function () {
      $("#uploadify").uploadify({
        //指定swf文件
        'swf': 'js/uploadify/uploadify.swf',
        //后台处理的页面
        'uploader': 'UploadHandler.ashx',
        //按钮显示的文字
        'buttonText': '上传图片',
        //显示的高度和宽度,默认 height 30;width 120
        //'height': 15,
        //'width': 80,
        //上传文件的类型 默认为所有文件  'All Files' ; '*.*'
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeDesc': 'Image Files',
        //允许上传的文件后缀
        'fileTypeExts': '*.gif; *.jpg; *.png',
        //发送给后台的其他参数通过formData指定
        //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
        //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
        //'queueID': 'fileQueue',
        //选择文件后自动上传
        'auto': true,
        //设置为true将允许多文件上传
        'multi': true
      });
    });
  
  </script>
</head>
<body>
  <div>
    <%--用来作为文件队列区域--%>
    <div id="fileQueue">
    </div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
      <a href="javascript:$('#uploadify').uploadify('upload')">上传</a>| 
      <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>
    </p>
  </div>
</body>
</html>

四:一般处理程序UploadHandler.ashx简单代码如下:

public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";

      //http://www.cnblogs.com/babycool/
      //接收上传后的文件
      HttpPostedFile file = context.Request.Files["Filedata"];
      //其他参数
      //string somekey = context.Request["someKey"];
      //string other = context.Request["someOtherKey"];
      //获取文件的保存路径
      string uploadPath =
        HttpContext.Current.Server.MapPath("UploadImages" + "\\");
      //判断上传的文件是否为空
      if (file != null)
      {
        if (!Directory.Exists(uploadPath))
        {
          Directory.CreateDirectory(uploadPath);
        }
        //保存文件
        file.SaveAs(uploadPath + file.FileName);
        context.Response.Write("1");
      }
      else
      {
        context.Response.Write("0");
      } 

    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }

五:用到的参数介绍:

通过查看jquery.uploadify-3.1.js中的默认设置并参考官方文档可得知:

 参数不重新指定则保持默认:

swf:uploadify.swf 文件的相对路径

uploader:后台处理程序的相对路径

buttonText:按钮显示的文字

上传文件的类型默认为所有文件  ‘All Files’    ‘*.*’

可以通过以下两参数指定,指定方法见步骤三中的代码:

fileTypeDesc;fileTypeExts;

auto:为true表示选择文件后自动上传;如果不想自动上传,需设定为false,并通过

 <a href="javascript:$('#uploadify').uploadify('upload')">上传</a>| 
 <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>

来指定是上传还是取消上传;

multi:设置为true将允许多文件上传;

method: 提交方式Post 或Get 默认为Post;

queueSizeLimit:当允许多文件上传时,设置选择文件的个数,默认值为999 ;

另外,取消上传图片的路径是设置在css文件中的;

其他更多设置可以参考官网的帮助文档。

六:将上传完成后显示的Complete显示为中文

英文的Complete不能改成中文”,这可能是之前的版本不能进行修改。我通过查看源代码 jquery.uploadify-3.1.js找到了上传完成时显示的内容:

再参考官方的帮助文档,可以得知,在“

onUploadSuccess” 事件中可以设置上传完成后所执行的代码,则修改后的代码为:

       //选择文件后自动上传
        'auto': true,
        //设置为true将允许多文件上传
        'multi': true,
        //上传成功后执行
        'onUploadSuccess': function (file, data, response) {
          $('#' + file.id).find('.data').html(' 上传完毕');

        } 

还有一个需要注意的一点是:一般在设定了选择上传文件路径时比如只允许上传*.jpg;*.png;*.gif格式的图片文件,则除了指定fileTypeDesc;fileTypeExts;两个参数外,还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断,以防一些用户跳过客户端验证上传恶意文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

微信小程序 登陆流程详细介绍_晚秋_前端开发者

晚秋阅读(14)

微信小程序 登陆流程

1:session_key和openId是什么?session_key

官方说明为:

session_key是微信服务器生成的针对用户数据进行加密签名的密钥

session_key的用途

(1)对wx.getUserInfo()接口得到“用户信息中的密文”进行解密。
(2)对它“稍作处理”,用作维护小程序的登录态。

“稍微处理”大体为:

(1)生成一个随机数(官方把他叫做3rd_session)
(2)把这个随机数当session的key,session_key + openid为value。

即:session[3rd_session]=session_key+openid

openIdopenId:用户唯一标识

即:每个微信用户在你的小程序的唯一的标识。

 2:如何获得session_key和openId官方提供了HTTP接口:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

获取步骤:

(1)获得appid,secret,js_code 
(2)用appid,secret,js_code分别替换如上接口地址的APPID、SECRET、JSCODE,其他不变,组装成完整的地址。

例如:

 

3:在“浏览器打开此地址”或者“在后台模拟浏览器的GET执行此地址”就可返回如下的JSON数据(包含openid、sessionkey)

微信小程序获得session_key和openId(加解密、签名系列)

总结:从1,2,3步骤可知,只要获得appid,secret,js_code就可得到session_key和openId

 4:appid和secret的获得

appid为小程序ID

secret为小程序密钥(AppSecret)

获得方法:小程序后台登录网址:https://mp.weixin.qq.com/

打开小程序后台网址、注册、登录后,按如下图所示就可找到你的AppID和AppSecret。

微信小程序获得session_key和openId(加解密、签名系列)

注意:目前小程序个人不能注册,开放注册范围:企业、政府、媒体、其他组织;当然用这个办法,个人也能注册了。

传送门:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=495

5:js_code如何获得调用wx.login()接口就可获取登录凭证(js_code)

微信小程序获得session_key和openId(加解密、签名系列)

 6:总结整个session_key获取的流程

(1)注册微信小程序、登录后台在设置中获得appId和secret(密钥)
(2)调用wx.login()接口获取登录凭证js_code
(3)调用wx.request()接口把js_code发送到服务器后台
(4)在服务器后台,已知appId、secret、js_code

然后调用如下官方提供的http接口,即可返回获取openId、session_key

官方提供了http接口地址为:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解_白澜_前端开发者

白澜阅读(13)

微信小程序 缓存

关于本地缓存

1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)

可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB

2.localStorage 是永久存储

一、异步缓存

wx.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容

wx.setStorage({

 key:"key",

 data:"value"

})

 

wx.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

wx.getStorageInfo(OBJECT)

异步获取当前storage的相关信息

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

wx.removeStorage(OBJECT)

从本地缓存中异步移除指定 key 。

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

 二、同步缓存

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

wx.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

wx.getStorageInfoSync

同步获取当前storage的相关信息

wx.removeStorageSync(KEY)

从本地缓存中同步移除指定 key 。

三、清理缓存

wx.clearStorage()

清理本地数据缓存。

wx.clearStorageSync()

同步清理本地数据缓存

关于同步缓存和异步缓存的区别

以Sync(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。

但是一般情况下不要用清除所有的缓存,如果想要清除相应的缓存,设置对应的缓存内容为空数组就好

 关于历史搜索

<input type="text" class="search-icon" placeholder="请输入要搜索的内容" bindinput="searchNameInput"/>
<text bindtap="setSearchStorage">搜索</text>


<view>
  <view>
    <text style="float:left;" bindtap="deleteHistory">历史搜索</text>
    <text style="float:right;" bindtap="deleteHistory">删除搜索历史</text>
  </view>
  <view>
    <view class="search-list" wx:for="{{searchData}}" wx:key="item">
      <view>{{item == null?'暂无数据':item}}</view>
    </view>
  </view>
</view>

 页面

这里有三个绑定事件

bindinput=”searchNameInput” 获取用户输入的数据

bindtap=”setSearchStorage” 设置本地存储

bindtap=”deleteHistory” 删除历史搜索

 

//获取用户输入框的值
  searchNameInput:function(e){
    var that = this;
    that.setData({
      inputValue:e.detail.value
    })
  }

e.detail.value就代表了当前输入值

 

 当点击搜索的时候,bindtap=”setSearchStorage”

//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
setSearchStorage:function(){
  var that = this
  if(this.data.inputValue != ''){
    //调用API向本地缓存存入数据
    var searchData = wx.getStorageSync('searchData') || [] 
    searchData.push(this.data.inputValue) 
    wx.setStorageSync('searchData', searchData)

    //读取用户搜索商品
    var name = this.data.inputValue
    wx.request({
     url: 'www.shop.com/home/product/search',
     data: {name:name},
     method: 'GET', 
     success: function(res){
        that.setData({
        goodsList: res.data.info,
      })
     },
    })
  }
}

 流程这么走:

1.用户输入数据,点击搜索

2.如果数据不为空,加入(设置)本地缓存

3.去服务器搜索用户想要的数据,赋值给这个页面的变量

4.点击删除,去除本地这个key的value

这里的缓存形式的  key=>value

var searchData = wx.getStorageSync(‘searchData’) || []

获取本地名字为’searchData’的缓存,如果’searchData’这个缓存不存在就相当于重新什么一个空数组,赋值给searchData这个变量

searchData.push(this.data.inputValue)

将用户输入的值PUSH进searchData这个变量里

wx.setStorageSync(‘searchData’, searchData)

调用API接口,重新设置key = ‘searchData’的这个缓存的value等于searchData

下面的wx.request是请求数据的内容,说腻了,印象够深了。

这里没有绑定获取缓存的bindtap,只要获取到,然后添加到Page里面的data

//从本地获取历史搜索数据

     var searchData = wx.getStorageSync('searchData')||[]

      this.setData({

        searchData:searchData

      })

 

deleteHistory

//删除历史搜索数据

  deleteHistory:function(){

    var that = this

    wx.showModal({

    title: '提示',

    content: '是否删除历史搜索',

    success: function(res) {

      if (res.confirm) {

        wx.setStorageSync('searchData', []);

        wx.switchTab({

          url: '/pages/index/index',

        })

       }

      }

    })

}

 

这里是将’searchData’这个key的缓存的value为空数组,而不是使用API提供的wx.clearStorageSync,这个会清除其他的所有缓存,而我只是想清除这一个key的缓存

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

javascript判断元素存在和判断元素存在于实时的dom中的方法_婳祎_前端开发者

婳祎阅读(10)

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题。

打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误。

我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样:

if ($('#a')) {
 // some code ...
 $('#b').doSomething;
 // some code ...
 }

这段代码的想要做的就是,判断下页面是否有某个id标识的元素,如果有就做一些事情。网站首页是应该没有这个元素的,不应该执行这个代码。

好吧,如果你看到这里,你肯定能猜到我不是做前端的。我期望它返回一个布尔类型的false,但它实际上返回的是一个jQuery Object,

注意这里获得的不是dom element,如果想获得真实的dom element,可以这么写$(‘#a’)[0]或者$(‘#a’).get(0)。

其实$(‘selector’)返回的永远都是一个jQuery Object,不管它找没找到元素。(关于这个返回值的问题请参考:What does jquery $ actually return? 和 How to get a DOM Element from a JQuery Selector)。

那么我该如何判断id=a的元素是否存在呢?其实可以这么做,if ($(‘#a’).length),如果没有#a则返回的object其实是个空对象,可以达到目的。

getElementById(‘a’)可以吗,它返回的是Element object的一个参考(object类型)或者是null(document.getElementById()),可以用来判断。

到此,我的问题就解决了,也就没有这篇文章了。

但我闲着没事又google了一把,然后我就在stackoverflow上发现了这个问答:How to check if element exists in the visible DOM?  问题是,如何检查元素是否存在于可见(当前实时)的dom中

这个问答里提到了好多方法,除了上面两个提到的方法,其他的比如getElementsByClassName、getElementsByName、querySelector等等,总之这些方法思路基本和上面的两个是相同的,就是简单的检查元素是否存在。

对于题主的提问,有人提供了以下两个比较有意思的方法,其中一个是:document.body.contains(element),这里面用到了node.contains(othernode)方法,它可以判断othernode是不是node的后代,并返回一个布尔值。

具体用法可以这么写:

// 先获取要判断的元素节点
const aNode = document.getElementById('a');
// 然后判断该元素节点是不是当前文档页面body节点的后代
if (aNode.ownerDocument.body.contains(aNode)) {
 // do something
}

其实,用这个方法可以写一个通用的函数来判断某个元素节点是否在某个页面上,大家可以参考下Mozilla Developer Network官网javascript手册上的代码:

 function isInPage(node) {
 return (node === document.body) ? false : document.body.contains(node);
 }

上面代码中aNode.ownerDocument是个只读属性,它返回aNode所在页面的顶级文档对象document。

另外有人还提到了这个方法:判断元素节点的baseURI是否存在。

baseURI是个只读属性,node.baseURI返回node节点的绝对的基准url地址(我把它理解为页面的绝对url地址),比如$(‘#a’)[0].baseURI,

我在chrome下试了下,#a元素存在的话就会返回一个url字符串,不存在的话报undefined错误(#a不存在自然会报这个错误),感觉这个方法在实际应用中不太好操作,要抛出和捕捉错误,感兴趣的同学可以研究下。

How to check if element exists in the visible DOM?这个问答的发起者自己写了个方法,我把代码贴到下面:

<!DOCTYPE html>
<html>
<head>
 <script>
 var getRandomID = function (size) {
   var str = "",
    i = 0,
    chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
   while (i < size) {
    str += chars.substr(Math.floor(Math.random() * 62), 1);
    i++;
   }
   return str;
  },
  isNull = function (element) {
   var randomID = getRandomID(12),
    savedID = (element.id)? element.id : null;
   element.id = randomID;
   var foundElm = document.getElementById(randomID);
   element.removeAttribute('id');
   if (savedID !== null) {
    element.id = savedID;
   }
   return (foundElm) ? false : true;
  };
 window.onload = function () {
  var image = document.getElementById("demo");
  console.log('undefined', (typeof image === 'undefined') ? true : false); // false
  console.log('null', (image === null) ? true : false); // false
  console.log('find-by-id', isNull(image)); // false
  image.parentNode.removeChild(image);
  console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
  console.log('null', (image === null) ? true : false); // false ~ should be true?
  console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
 };
 </script>
</head>
<body>
 <div id="demo"></div>
</body>
</html>

注意代码中的isNull函数,它是用来判断元素是否存在的,这个方法其实是依据元素的id是否为null来判断,思路好像和用baseURI来判断是相同的。我试了下,当元素存在时返回true,

但当元素不存在时,它会报undefined错误,感兴趣的同学可以研究下。

总结:

其实判断一个元素是否存在,用getElementById()(或其他选择元素的方法)再配合是否为null来判断,或用jQuery获取对象并判断其length,简单又直接。

但如果想判断一个元素是否在当前实时可见的dom中,那就用node.contains(othernode)方法。

参考:

1,How to check if element exists in the visible DOM?

2,What does jquery $ actually return?

2,Node.contains()

3,Node.ownerDocument

4,How to get a DOM Element from a JQuery Selector

5,https://api.jquery.com/get/

6,baseURI

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

JavaScript使用正则表达式获取全部分组内容的方法示例_蜡烛_前端开发者

蜡烛阅读(7)

本文实例讲述了JavaScript使用正则表达式获取全部分组内容的方法。分享给大家供大家参考,具体如下:

1. 需要使用正则表达式的exec

2. 需要循环

DEMO示例:(如下代码将输出 8 , 9,两个匹配到的分组内容)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS正则demo</title>
</head>
<body>
<script>
var r = /\{ab(\d)ab}/g;
while ((resultS2 = r.exec("ab{ab8ab}c{ab9ab}")) != null) {
  console.log(resultS2[1]);
} 
</script>
</body>
</html>

运行效果图如下:

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript使用delete删除数组元素用法示例【数组长度不变】_梵醉_前端开发者

梵醉阅读(6)

本文实例讲述了JavaScript使用delete删除数组用法。分享给大家供大家参考,具体如下:

javascript使用delete删除数组中的某些数值后,数组的长度是不变的。

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript delete</title>
</head>
<body>
<script>
var a = [1, 2, 3, 4, 5, 6];
for (var i in a) {
  if (a[i] % 2 == 0) {
    delete a[i];
  }
}
console.log(a);
console.log(a.length);
</script>
</body>
</html>

运行效果图如下:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

js cookie实现记住密码功能_淋雪_前端开发者

淋雪阅读(11)

 本文为大家分享了js和jQuery记住密码功能的方法,具体如下

一. js 实现记住密码功能

html:

<form id="form22" name="form22" action="checklogin.action" method="post" >
 <div class="username" style="margin-top:50px;">
  <label>用户名:</label>
  <input type="text" name="username" id="userName" />
  <span id="myuser" style="color: red; font-size:12px; font-weight: normal;"></span>
 </div>

 <div class="password">
  <label>密 码:</label>
  <input name="password" id="passWord" type="password" />
  <span id="mypass" style="color: red; font-size:12px; font-weight: normal;"></span>
 </div>

 <div class="user_type" >
  <label>  </label>
  <input type="checkbox" id="saveUserName" style="float: left; margin-top:3px;" /> 
  <span> 记住用户</span>  
 </div>

 <input type="button" value="" class="btn_login" id="btn_login" onclick="checkform();"/>

</form>

cookie.js:

function setCookie (name, value) {
  var Days = 30; //此 cookie 将被保存 30 天
  var exp = new Date();
  exp.setTime(exp.getTime() + 1000);
  if(value==""||value=="null"
   ||value=="null"||value==" "){
  }else{
  document.cookie = name + "="+ escape(value) +";expires=Sun, 17-Jan-2038 19:14:07 GMT";
  }
}
function getCookie(sName){
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
   var aCrumb = aCookie[i].split("=");
   if (sName == aCrumb[0])
   {
    return aCrumb[1];
   }
  }
  return null;
}
function checkCookieExist(name){
 if (getCookie(name))
  return true;
 else
  return false;
}

function deleteCookie(name, path, domain){
 var strCookie;
 // 检查Cookie是否存在
 if (checkCookieExist(name)){
  // 设置Cookie的期限为己过期
  strCookie = name + "=";
  strCookie += (path) ? "; path=" + path : "";
  strCookie += (domain) ? "; domain=" + domain : "";
  strCookie += "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  document.cookie = strCookie;
 }
}
function saveCookie(name, value, expires, path, domain, secure){
 var strCookie = name + "=" + value;
 if (expires){
  // 计算Cookie的期限, 参数为天数
  var curTime = new Date();
  curTime.setTime(curTime.getTime() + expires*24*60*60*1000);
  strCookie += "; expires=" + curTime.toGMTString();
 }
 // Cookie的路径
 strCookie += (path) ? "; path=" + path : "";
 // Cookie的Domain
 strCookie += (domain) ? "; domain=" + domain : "";
 // 是否需要保密传送,为一个布尔值
 strCookie += (secure) ? "; secure" : "";
 document.cookie = strCookie;
}

login.js

window.onload = function(){
 //console.log("ctx: " + "${ctx}");

 var name = getCookie("loginUserName");
 document.getElementById("passWord").value="";
 if(name != null && name != "") {
  document.getElementById("userName").value = name;      

  document.getElementById("passWord").focus();
 } else {  document.getElementById("userName").focus();
 }

}

function checkform(){
 ......
 var isChecked = document.getElementById("saveUserName").checked;
 if(isChecked) {
  setCookie("loginUserName",userName);
 } 
 ......
}

二. jquery 实现记住密码功能

参考:http://www.cnblogs.com/lindaZ/p/5069981.html

html:

<form class="form-signin">
  <input type="text" id="username" name="account" autofocus required placeholder="用户名" class="form-control" style="width: 250px; margin-bottom: 5px;">
  <input type="password" id="password" name="password" required placeholder="密码" class="form-control" style="width: 250px;">
  <br/>
  <input id="remember_me" type="checkbox" name="remember_me" onkeydown="check_enter(event)" style="width:250;">
  <span for="remember_me" onkeydown="check_enter(event)" style="width:250px">记住我</span>
  <br/><br/>
  <span class="btn btn-lg btn-primary btn-block">登 录</span>
</form>
<script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.cookie.js" type="text/javascript"></script>

判断checkbox是否被选中,若选中,则将存储cookie:

if ($("#remember_me").attr("checked")) {
    $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
    $.cookie("username", account, { expires: 7 });
    $.cookie("password", password, { expires: 7 });
}
else {
    $.cookie("rmbUser", "false", { expire: -1 });
    $.cookie("username", "", { expires: -1 });
    $.cookie("password", "", { expires: -1 });
}

在每次刷新登录页面加载js时,取出cookie中的用户名和密码,若cookie不为空,用户名和密码输入框被cookie里面的内容填充,复选框设为勾上状态:

$().ready(function(){
    //获取cookie的值
    var username = $.cookie('username');
    var password = $.cookie('password');

    //将获取的值填充入输入框中
    $('#username').val(username);
    $('#password').val(password); 
    if(username != null && username != '' && password != null && password != ''){
  //选中保存秘密的复选框
     $("#remember_me").attr('checked',true);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

浅析vue数据绑定_橘里_前端开发者

橘里阅读(7)

前言:最近团队需要做一个分享,脚进脑子,不知如何分享。最后想着之前一直想研究一下 vue 源码,今天刚好 “借此机会” 研究一下。

网上研究vue数据绑定的文章已经非常多了,但是自己写一遍,敲一遍demo和看别人的文章是完全不同的,so……搬运工来了

目前数据绑定主要有以下三种实现方式:

1.   脏值检查(angular.js)    轮询检测数据变化

DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

2、Object.defineProperty劫持对象的get、set,从而实现对数据的监控。 (vue)

3、发布/订阅者模式实现数据与视图的自动同步

Object.defineProperty的优点

  • “脏值检测”——数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变,有变化进行处理,可能进一步引发其他数据的改变,所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视图,更新页面展现
  • Object.defineProperty() 监控对数据的操作,可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。

Object.defineProperty的用法

var a = {};

Object.defineProperty(a, "b", {
 
 set: function (newValue) {
 
 console.log("我被赋值了!" + newValue);
 
 },
 
 get: function () {
 
 console.log("我被取值了!");
 
 return 2 
 }
})

a.b = 3; //我被赋值了!

console.log(a.b); //我被取值了! //打印 2

由上面的例子看出,Object.defineProperty  传人3个参数

第一个: a对象

第二个: a对象里面的b属性

第三个: 属性比较多,列举有用的 value,set,get,configurable

数据绑定原理:

1、实现一个数据监听器Observer,对数据对象的所有属性进行监听,如有变动则拿到最新值并通知 dep数组

2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据

3、实现一个dep数组 ,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,更新视图

1. 实现observer

var data = {name: 'beidan'};

observe(data);

data.name = 'test'; // 监听到值变化了 beidan 变成 test

function observe(data) {
 
 if (!data || typeof data !== 'object') {
 
 return;
 
 }
 
 // 取出所有属性遍历
 
 Object.keys(data).forEach(function(key) {
 
  defineReactive(data, key, data[key]);

 });
}
function defineReactive(data, key, val) {


 Object.defineProperty(data, key, {

 enumerable: true, // 可枚举
 
  configurable: false, // 不能再define
  get: function() {
  
   return val;
 
  },
 
  set: function(newVal) {
  
   console.log('监听到值变化了 ', val, ' 变成 ', newVal);

   val = newVal;
 
  }
 
 });
}

2. 维护一个数组

function Dep() {
 
 this.subs = [];
}

Dep.prototype = {
 
 addSub: function (sub) {
 
 this.subs.push(sub);
 
 },
 
 notify: function (val) {
 
  this.subs.forEach(function (sub) {
  
  sub.update(val)
 
 });
 
}
};
function defineReactive(data, key, val) {
 Object.defineProperty(data, key, {
 ……
 set: function(newVal) {
  if (val === newVal) return;
  console.log('监听到值变化了 ', val, ' 变成 ', newVal);
  val = newVal;
  dep.notify(val); // 通知所有订阅者 
 } 
 });
}

3. compile

bindText: function () {
 
 var textDOMs = this.el.querySelectorAll('[v-text]'),
bindText,_context = this;

 
 for (var i = 0; i < textDOMs.length; i++) {
  
 bindText = textDOMs[i].getAttribute('v-text');
 textDOMs[i].innerHTML = this.data[bindText];

 var val = textDOMs[i]

 
 var up = function (text) {
  
  val.innerText = text
 
 }

 _context.dep.addSub({
  
  value: textDOMs[i],
  
  update: up
 
 });
 
 }
},

最后,附上源码 github   https://github.com/beidan/vue_bind

参考链接:

//www.jb51.net/article/103297.htm

//www.jb51.net/article/99129.htm

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

详谈JavaScript的闭包及应用_气质_前端开发者

气质阅读(11)

闭包真的是学过一遍又一遍,Js博大精深,每次学习都感觉有新的收获。相信在大家封装前端插件时,闭包是必不可少的。闭包的真正好处我个人认为除了封装还是封装,能带个我们私有方法,和调用上的灵活方便,也会使你的代码对外的对象保持干净整洁。

进入正题

维基百科这样定义了JS闭包:在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。所以,有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。闭包在运行时可以有多个实例,不同的引用环境和相同的函数组合可以产生不同的实例。

通俗的讲,闭包不同于一般函数,它允许一个函数在立即此法调用的作用域外,仍可访问非本地变量。我还想说,闭包的语法让你的代码更加动感,下面的一段代码可能会让你有所感触。

<script>
 (function () {
 var userToken = "this is my token";
 var someConfig = "opening some function";
 var privateValue = "private";
 var publicValue = "public";
 var appObj = {};
 function myPrivateFunc() {
 alert(privateValue)
 }
 appObj.getUserToken = function () {
 //some logic
 userToken += " after some inner logic";
 return userToken;
 }
 appObj.publicVal = publicValue;
 window.application = appObj;
 }());//立即执行
 console.log(application.getUserToken());//this is my token after some inner logic
 console.log(application.publicVal);//public
 console.log(application.privateValue); //undefined
 application.myPrivateFunc(); //error
 </script>

我将appObj附加到window下面,我通常喜欢定义一个全局的名为application的对象,代表着整个应用公用的顶级对象,你可以在其中向外暴露很多公共的操作方法,也可以在其中做一些私有的处理,以防外部调用导致某些问题。在所定义的“顶级”application对象下,你也可以将你所非要不可的全局变量定义在其中,这样以防普通全局变量对应用造成的影响,又可以在你定义的闭包内,通过向外暴露的对象表达更明确的信息,我一直认为,随随便便定义一个JS全局变量实在是太可耻了。

闭包的写法加上VS强大的智能提示,你会感觉到无比的畅快。下面我又附加了一个方法

(function () {
 var baseUrl = "www.cnblogs.com/tdws/";

 application.getBaseUrl = function () {
 return baseUrl;
 }
 }());
 console.log(application.getBaseUrl());//www.cnblogs.com/tdws/

写在最后

你不觉得把变量保留起来,暴露出一系列get方法,很动感吗 ╮(╯-╰)╭ 摊手……

当然闭包也需要你恰当的使用,不要造成循环引用,因为它将导致内存泄漏。不要做无谓的闭包,造成你空间的浪费,因为闭包不会被释放。不要处处闭包,因为它将增加你代码的复杂性。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

vue双向数据绑定原理探究(附demo)_橘里_前端开发者

橘里阅读(8)

昨天被导师叫去研究了一下vue的双向数据绑定原理。。。本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊。。。自己动手写了一个。

传送门

双向绑定的思想

双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者。

双向绑定的一些方法

目前,前端实现数据双向数据绑定的方法大致有以下三种:

1.发布者-订阅者模式(backbone.js)

思路:使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。

2.赃值检测(angular.js)

思路:通过轮询的方式检测数据变动。才特定的事件触发时进入赃值检测。

大致如下:

•   DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

•   XHR响应事件 ( $http )

•   浏览器Location变更事件 ( $location )

•   Timer事件( $timeout , $interval )

•   执行 $digest() 或 $apply()

3.数据劫持(vue.js)

思路:使用Object.defineProperty对数据对象做属性get和set的监听,当有数据读取和赋值操作时则调用节点的指令,这样使用最通用的=等号赋值就可以触发了。

wue双向数据绑定小demo思路

①  构造一个Wue对象,定义该对象的属性el、data,创建对象的时候传相应数据,并执行init()方法。

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};

②  Init方法中执行bindText和bindModel方法,这两个方法分别是解析dom中绑定了w-model、w-text指令的html,并作相应处理。

init:function(){
  this.bindText();
  this.bindModel();
 }

③  bindText方法,把带有w-text指令的元素放进一个数组中,如:w-text=’demo’,然后令其innerHTML的值等于传进来的data[demo]。

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute('w-text');
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

④  bindModel方法,把带有w-model指令的元素(一般为form相关元素)放进一个数组中,如:w-model=’demo’,为每一个元素绑定keyup事件(兼容浏览器写法)。

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute('w-model');
 modelDOMs[i].value=this.data[bindModel]||'';
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener('keyup',function(event) {
  console.log('test');
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent('onkeyup',function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value; 
 },false);
 }
 } 
}

⑤  使用Object.defineProperty,定义set和get方法,并在set方法中调用bindText方法。这是利用了一旦w-model的值在input中被改变,会自动执行set方法,所以只有在这个方法中调用更新w-text的方法即可。

defineObj:function(obj,prop,value){
  var val=value||'';
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
 
  }catch (err){
  console.log('Browser not support!')
  } 
 }

⑥使用

html:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model='demo'>
 <h5 w-text='demo'></h5>
</div><br>js:
 <script src='../js/wue.js'></script>
 <script>
 new Wue({
 el:'#wrap',
 data:{
  demo:'winty'
 }
 })
 </script> 

完整demo下载:https://github.com/LuckyWinty/two-way-data

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

详解微信小程序开发之城市选择器 城市切换_旧店_前端开发者

旧店阅读(8)

移动开发中城市选择器必不可少.

空白造了个.

gif:

这里只上部分js代码:

var city = require('../../utils/city.js');

Page({
 data: {
  searchLetter: [],
  showLetter: "",
  winHeight: 0,
  tHeight: 0,
  bHeight: 0,
  startPageY: 0,
  cityList: [],
  isShowLetter: false,
  scrollTop: 0,
  city: ""
 },
 onLoad: function (options) {
  // 生命周期函数--监听页面加载
  var searchLetter = city.searchLetter;
  var cityList = city.cityList();
  // console.log(cityInfo);

  var sysInfo = wx.getSystemInfoSync();
  console.log(sysInfo);
  var winHeight = sysInfo.windowHeight;

  //添加要匹配的字母范围值
  //1、更加屏幕高度设置子元素的高度
  var itemH = winHeight / searchLetter.length;
  var tempObj = [];
  for (var i = 0; i < searchLetter.length; i++) {
   var temp = {};
   temp.name = searchLetter[i];
   temp.tHeight = i * itemH;
   temp.bHeight = (i + 1) * itemH;

   tempObj.push(temp)
  }

  this.setData({
   winHeight: winHeight,
   itemH: itemH,
   searchLetter: tempObj,
   cityList: cityList
  })

  console.log(this.data.cityInfo);
 },
 onReady: function () {
  // 生命周期函数--监听页面初次渲染完成

 },
 onShow: function () {
  // 生命周期函数--监听页面显示

 },
 onHide: function () {
  // 生命周期函数--监听页面隐藏

 },
 onUnload: function () {
  // 生命周期函数--监听页面卸载

 },
 onPullDownRefresh: function () {
  // 页面相关事件处理函数--监听用户下拉动作

 },
 onReachBottom: function () {
  // 页面上拉触底事件的处理函数

 },
 onShareAppMessage: function () {
  // 用户点击右上角分享
  return {
   title: 'title', // 分享标题
   desc: 'desc', // 分享描述
   path: 'path' // 分享路径
  }
 },
 searchStart: function (e) {
  var showLetter = e.currentTarget.dataset.letter;
  var pageY = e.touches[0].pageY;
  this.setScrollTop(this, showLetter);
  this.nowLetter(pageY, this);
  this.setData({
   showLetter: showLetter,
   startPageY: pageY,
   isShowLetter: true,
  })
 },
 searchMove: function (e) {
  var pageY = e.touches[0].pageY;
  var startPageY = this.data.startPageY;
  var tHeight = this.data.tHeight;
  var bHeight = this.data.bHeight;
  var showLetter = 0;
  console.log(pageY);
  if (startPageY - pageY > 0) { //向上移动
   if (pageY < tHeight) {
    // showLetter=this.mateLetter(pageY,this);
    this.nowLetter(pageY, this);
   }
  } else {//向下移动
   if (pageY > bHeight) {
    // showLetter=this.mateLetter(pageY,this);
    this.nowLetter(pageY, this);
   }
  }
 },
 searchEnd: function (e) {
  // console.log(e);
  // var showLetter=e.currentTarget.dataset.letter;
  var that = this;
  setTimeout(function () {
   that.setData({
    isShowLetter: false
   })
  }, 1000)

 },
 nowLetter: function (pageY, that) {//当前选中的信息
  var letterData = this.data.searchLetter;
  var bHeight = 0;
  var tHeight = 0;
  var showLetter = "";
  for (var i = 0; i < letterData.length; i++) {
   if (letterData[i].tHeight <= pageY && pageY <= letterData[i].bHeight) {
    bHeight = letterData[i].bHeight;
    tHeight = letterData[i].tHeight;
    showLetter = letterData[i].name;
    break;
   }
  }

  this.setScrollTop(that, showLetter);

  that.setData({
   bHeight: bHeight,
   tHeight: tHeight,
   showLetter: showLetter,
   startPageY: pageY
  })
 },
 bindScroll: function (e) {
  console.log(e.detail)
 },
 setScrollTop: function (that, showLetter) {
  var scrollTop = 0;
  var cityList = that.data.cityList;
  var cityCount = 0;
  var initialCount = 0;
  for (var i = 0; i < cityList.length; i++) {
   if (showLetter == cityList[i].initial) {
    scrollTop = initialCount * 30 + cityCount * 41;
    break;
   } else {
    initialCount++;
    cityCount += cityList[i].cityInfo.length;
   }
  }

  that.setData({
   scrollTop: scrollTop
  })
 },
 bindCity: function (e) {
  var city = e.currentTarget.dataset.city;
  this.setData({ city: city })
 }
})

demo代码下载 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

javascript实现页面滚屏效果_旧店_前端开发者

旧店阅读(10)

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个页面,点击数字可以切换到对应的页面,滚动鼠标滑轮可以实现数字标签的切换,页面的切换。笔者未对页面的平稳滚动进行实现,读者可自行试验研究。

这是html代码:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
 <div class="big-box" id="bigBox">
  <div class="item item1"><h1>屏幕1</h1></div>
  <div class="item item2"><h1>屏幕2</h1></div>
  <div class="item item3"><h1>屏幕3</h1></div>
  <div class="item item4"><h1>屏幕4</h1></div>
  <div class="item item5"><h1>屏幕5</h1></div>
 </div>
 <ul class="controls">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
 <script src="behavior.js"></script>
 </body>
</html>

这里是css结构代码:

*{margin:0; padding:0;}
html,body{
 width:100%;
 height:100%;
 overflow:hidden;
}
.big-box {
 width:100%;
 height:500%;
 text-align:center;
 position:absolute;
}
.big-box .item{
 height:20%;
}
.big-box .item1 {
 background-color:red;
}
.big-box .item2 {
 background-color:blue;
}
.big-box .item3 {
 background-color:purple;
}
.big-box .item4 {
 background-color:gold;
}
.big-box .item5 {
 background-color:pink;
}
.controls {
 list-style:none;
 position:absolute;
 top:20%;
 right:20px;
}
.controls li {
 width:50px;
 height:50px;
 font:bold 22px/50px "宋体";
 text-align:center;
 background-color:#000;
 color:#fff;
 cursor:pointer;
}
.controls li+li {
 margin-top:5px;
}
.controls li.active {
 background-color:#fff;
 color:red;
}

这里是JavaScript代码:

/*
 思路:
 第一步:当页面加载完后,获取所要操作的节对象
 第二步:为document添加一个滚轮滚动事件
 第三步:滚轮滚动切换
  获取当前浏览器可视区域的高度
  var viewHeight = document.body.clientHeight
  滚轮切换的目的:就是更改bigBox的top值
  top:最大0
  top:最小 viewHeight*-4
  从上到下或从下到上:最多走4次(5个页面) 每一次走viewHeight
  控制的关键点:索引 定一个索引 2
  滚轮↓
  索引+1
  滚轮↑
  索引-1
  bigBox.style.top = -索引*viewHeihgt 
*/
var bigBox = document.getElementById("bigBox");//获取bigBox节点对象
var lis = document.querySelectorAll(".controls li");//获取所有的li节点对象
var viewHeight = document.body.clientHeight;//获取当前页面高度
var flag = true;//设置开关
var index = 0;//设置索引
//封装事件,兼容浏览器
function on(obj,eventType,fn){
 if(obj.addEventListener){
 obj.addEventListener(eventType, fn);
 }else{
 obj.attachEvent("on" + eventType, fn);
 }
}
//鼠标滚动事件处理函数
function handler(e){
 var _e = window.event || e;
 if(flag){
 flag = false;
 if(_e.wheelDelta==120 || _e.detail==-3){//如果鼠标滚轮向上滚动,detail为火狐判断条件
  index--;
  if(index<0){
  index = 0;
  }
 }else{//向下滚动
  index++;
  if(index>lis.length-1){//如果索引大于页面数,就是滚到最后一张页面时,再滚动鼠标页面不再滚动
  index = lis.length-1;
  }
 }
 bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面
 for(var i=0; i<lis.length; i++){
  lis[i].className = "";//重置全部li的类
 }
 lis[index].className = "active";//设置当前li的类名
 setTimeout(function(){//页面滚动间隔一秒,防止滚动太快
  flag = true;//重新开启开关
 },1000);
 }
}
on(document,"mousewheel",handler);//滚轮滚动事件
on(document,"DOMMouseScroll",handler);//滚轮滚动事件,适配火狐浏览器
//数字标签点击处理
for(var i=0; i<lis.length; i++){
 lis[i].tag = i;
 lis[i].onclick = function(){
 for(var j=0; j<lis.length; j++){
  lis[j].className = "";
 }
 lis[this.tag].className = "active";
 bigBox.style.top = -this.tag*viewHeight + "px";
 }
}

笔者在这里进行了html,css和javascript的分离,读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明,方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现,纯javascript技术,效果稍欠人意,读者可自行学习,对这一技术进行完美实现。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

JavaScript中英文字符长度统计方法示例【按照中文占2个字符】_稚终_前端开发者

稚终阅读(7)

本文实例讲述了JavaScript中英文字符长度统计方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS中英文字符串长度计算</title>
</head>
<body>
<script>
var oriText = "一二三四五六七八九十1234567890";
// 将一个中文字符转换为两个星
var result = oriText .replace(/[^\x00-\xff]/g, '**');
alert(result.length);
// 将输出30 (10个字符+ 10个汉字×2)
</script>
</body>
</html>

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

React Router基础使用_白泊_前端开发者

白泊阅读(9)

React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术

React Router是React的路由库,保持相关页面部件与URL间的同步

下面就来简单介绍其基础使用,更全面的可参考 指南

1. 它看起来像是这样

在页面文件中

 

在外部脚本文件中

 

 

2. 库的引入

React Router库的引入,有两种方式

2.1 浏览器直接引入

可以引用 这里 的浏览器版本,或者下载之后引入

然后就可以直接使用 ReactRouter 这个对象了,我们可能会使用到其中的几个属性

let {Router, Route, IndexRoute, Redirect, IndexRedirect, Link, IndexLink, hashHistory, browserHistory} = ReactRouter;

2.2 npm 安装,通过构建工具编译引入

npm install --save react-router

安装好路由库之后,在脚本文件中引入相关属性

import {Router, Route, IndexRoute, Redirect, IndexRedirect, Link, IndexLink, hashHistory, browserHistory} from 'react-router';

因浏览器目前还不能支持import与export命令,且babel工具不会将require命令编译,所以我们还得需要如Webpack等构建工具编译引入

库引入之后,在ReactDOM的render方法中,就可以使用相关的组件了

3. 路由简单使用

最基本的,通过URL判断进入哪个页面(组件部件)

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>First</p>
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>Second</p>
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <div></div>
 }
}
render((
 <Router history={hashHistory}>
 <Route path="/" component={App} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Router>
 ),
 document.getElementById('box')
);

首先,Router是一个容器,history属性定义了是用何种方式处理页面的URL

有三种:

  • browserHistory:通过URL的变化改变路由,是推荐的一种方式,但是需要在服务器端需要做一些配置(窝目前还不知怎么配)
  • hashHistory:通过#/ ,其实就像是单页面应用中常见的hashbang方式,example.com/#/path/path.. (使用简单,这里暂且就用这种方式)
  • createMemoryHistory:Memory history 并不会从地址栏中操作或是读取,它能够帮助我们完成服务器端的渲染,我们得手动创建history对象

然后,在容器中使用Route组件定义各个路由,通过path指定路径(可以看到,是不区分大小写的),通过component指定该路径使用的组件

也可以直接在Router容器上直接用routes属性定义各个路由,如

let routes =
 <div>
 <Route path="/" component={App} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </div>;
render(<Router routes={routes} history={hashHistory}></Router>, document.getElementById('box'));

需要注意的是{routes}中只能有一个父级,所以这里加了<div>标签

另外,路由Route也可以嵌套,在上面的例子中,嵌套起来可能更符合实际情况

需要注意的是,这里的App在父级,为了获取子级的First与Second组件,需要在App组件中添加 this.props.children 获取

class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <div>{this.props.children}</div>
 }
}
render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

同样的,可以直接在Router中用routes属性定义路由

let routes =
 <Route path="/" component={App}>
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>;
render(<Router routes={routes} history={hashHistory}></Router>, document.getElementById('box'));

4. 路由的其他组件

除了基本的Route之外,IndexRoute、Redirect、IndexRedirect、Link、IndexLink等,顾名思义

  • IndexRoute: 在主页面会用到,如上个例子中,在路径”/”下我们看到的是空白页面,可以添加默认的页面组件用于导航
  • Link: 可以认为它是<a>标签在React中的实现,使用to属性定义路径,还可以通过activeClass或activeStyle定义active的样式
  • IndexLink: 类似Link,推荐用来定义指向主页面的链接,当然也可以随意定义

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <p>First
 <IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink>
 </p>
 )
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>Second</p>
 }
}
class Basic extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <ul role="nav">
 <li><IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink></li>
 <li><Link to="/first" activeStyle={{color: 'red'}}>First</Link></li>
 <li><Link to="/Second" activeClass="active">Second</Link></li>
 </ul>
 )
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }

 render() {
 return <div>
 {this.props.children}
 </div>
 }
}
render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <IndexRoute component={Basic} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);
  • Redirect: 从from路径重定向到to路径
  • IndexRedirect: 在主页面,直接重定向到to路径

render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <IndexRoute component={Basic} />
 <IndexRedirect to="first" />
 <Redirect from="second" to="first" />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

5. 路由的path规则

path定义的路由的路径,在hashHistory中,它的主页路径是 #/

自定义Route路由通过与父Route的path进行合并,在与主页路径合并,得到最终的路径

path的语法:

  • :paramName 匹配 URL 的一个部分,直到遇到下一个/、?、#
  • () 表示URL的这个部分是可选的
  • * 匹配任意字符(非贪婪模式),直到模式里面的下一个字符为止
  • ** 匹配任意字符(贪婪模式),直到下一个/、?、#为止
<Route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael, 和 /hello/ryan
<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/hello.html
<Route path="/**/*.jpg"> // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

而:name可以通过 this.props.params 中取到

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <p>First {this.props.params.name}
 <IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink>
 </p>
 )
 }
}
.
.
<Route path="/:name" component={First} />

通过React Dev Tool也可以看到组件的相关数据

6. 路由的onEnter、onLeave钩子

在路由的跳转中,我们可能需要在进入页面或离开页面的时候做一些特殊操作,Route 通过 onEnter 与 onLeave 定义了这两个行为

<Route path="first" component={First} onEnter={(nextState, replace) => {
 console.log(nextState);
 alert('onEnter');
 // replace('second');
 }} onLeave={() => {
 alert('onLeave');
 }}/>

如上,带两个参数,通过 replace 可以更新路径,把注释去掉后,进入”/first”时立马跳转值”/second”,这在检测登录时应该比较有用

更多的使用参见 指南

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

javascript操作cookie_心病_前端开发者

心病阅读(7)

前端js cookie的使用

cookie的作用:服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息,以判断在HTTP传输中的状态。Cookies最典型的应用是判定注册用户是否已 经登录网站,用户可能会得到提示,是否在下一次进入此网站时保留用户信息以便简化登录手续,这些都是Cookies的功用。另一个重要应用场合是“购物 车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品,这些信息都会写入Cookies,以便在最后付款时提取信息。

js设置cookie

document.cookie="popped=yes"

js获取cookie

function get_cookie(Name) {
  var search = Name + "="//查询检索的值
  var returnvalue = "";//返回值
  if (document.cookie.length > 0) {
   sd = document.cookie.indexOf(search);
   if (sd!= -1) {
    sd += search.length;
    end = document.cookie.indexOf(";", sd);
    if (end == -1)
     end = document.cookie.length;
     //unescape() 函数可对通过 escape() 编码的字符串进行解码。
    returnvalue=unescape(document.cookie.substring(sd, end))
   }
  } 
  return returnvalue;
}
//使用方式:
get_cookie("popped");

给cookie设置终止日期

例如:如果要将cookie设置为10天后过期,可以这样实现:

//获取当前时间
var date=new Date();
var expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString();

删除cookie

为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:

//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expires="+date.toGMTString();

下面封装上面的方法

var cookie = {
  set:function(key,val,time){//设置cookie方法
    var date=new Date(); //获取当前时间
    var expiresDays=time; //将date设置为n天以后的时间
    date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
    document.cookie=key + "=" + val +";expires="+date.toGMTString(); //设置cookie
  },
  get:function(key){//获取cookie方法
    /*获取cookie参数*/
    var getCookie = document.cookie.replace(/[ ]/g,""); //获取cookie,并且将获得的cookie格式化,去掉空格字符
    var arrCookie = getCookie.split(";") //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
    var tips; //声明变量tips
    for(var i=0;i<arrCookie.length;i++){  //使用for循环查找cookie中的tips变量
      var arr=arrCookie[i].split("=");  //将单条cookie用"等号"为标识,将单条cookie保存为arr数组
      if(key==arr[0]){ //匹配变量名称,其中arr[0]是指的cookie名称,如果该条变量为tips则执行判断语句中的赋值操作
        tips=arr[1];  //将cookie的值赋给变量tips
        break;  //终止for循环遍历
      }
    },
   delete:function(key){ //删除cookie方法
     var date = new Date(); //获取当前时间
     date.setTime(date.getTime()-10000); //将date设置为过去的时间
     document.cookie = key + "=v; expires =" +date.toGMTString();//设置cookie
    }
    return tips;
  }
}

使用方式:

cookie.set("uesr","sss",24);//设置为24天过期
alert(cookie.get("uesr"));//获取cookie

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

微信小程序 网络请求(post请求,get请求)_柠浓_前端开发者

柠浓阅读(9)

微信小程序 网络请求

1.post请求:

onLoad: function() { 
  that = this; 
  wx.request( { 
   url: "url", 
   header: { 
    "Content-Type": "application/x-www-form-urlencoded" 
   }, 
   method: "POST", 
   data: {}, 
   complete: function( res ) { 
    console.log(res.data)
    }); 
    if( res == null || res.data == null ) { 
     console.error( '网络请求失败' ); 
     return; 
    } 
   } 
  }) 
 }, 

2.GET请求

onLoad: function () {
  console.log('onLoad')
  var that = this
   wx.request({
   url: 'http://json.bmbstack.com/cinemaList',
   data: {},
   method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
   'Accept': 'application/json' 
    }, // 设置请求的 header
   success: function(res){
    that.data.items= res.data
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })
 }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

JavaScript自定义分页样式_旧址_前端开发者

旧址阅读(8)

自定义分页样式,不多废话,直接上代码~

html部分

<div id="my_id">                
  <div class="my_id">
    <table style="">
      <thead style="">
        <tr> 
          <td>购买日期</td> 
          <td>门票名称</td> 
          <td>比赛时间</td> 
          <td>比赛选手</td> 
          <td>门票数量</td>
         </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>      
</div>  

js部分

function testFun(){
  var data = [
        ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
        ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
        ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
        ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
      ];
  var inner = [];
  for(var i=0; i<10; i++){
    var trList = '<tr>'
        +'<td>'+data[i][0]+'</td>'
        +'<td>'+data[i][1]+'</td>'
        +'<td>'+data[i][2]+'</td>'
        +'<td>'+data[i][3]+'</td>'
        +'<td>'+data[i][4]+'</td>'
        +'</tr>';
    inner.push(trList);
  }
  //分页方法调用
  myPagination(my_id,inner,10);  
}


/*
 * 分页
 * a传入的是id
 * inner传入的是列表内容
 * PageSize每页显示的数目
 */
function myPagination(a,inner,PageSize){
  var pageNum = '<div class="pagination col-xs-12">'
        +'<div class="setpage">'
        +'<span>第</span><input type="text" class="currentpage" class="form-control"><span>页</span>'
        +'<span>共<font class="totalpage"></font>页</span>'
        +'<span>每页有<font class="pagesize"></font>条消息</span>'
        +'<span>当前为第<font class="current_1"></font>-<font class="current_2"></font>条消息</span>'
        +'</div>'          
        +'</div>';
  $(a).append(pageNum);
  $(a).find(".pagination").css({
    "height": "100%",
    "width": "58%",
    "float": "left",
    "padding": "3px 10px", 
    "background-color": "#fff",
    "margin": "0"
  });
  $(a).find(".setpage").css({
    "height": "100%",
    "width": "100%",
    "line-height": "30px",
    "margin": "0 auto"
  });
  $(a).find(".setpage span").css({
    "float": "left",
    "padding": "0 5px"
  });
  $(a).find(".setpage font").css({
    "color": "#DD4449",
    "padding": "0 5px"
  });
  $(a).find(".setpage input").css({
    "width": "50px",
    "float": "left",
    "border-radius":"5px"
  });
  //分页
  var Count = inner.length;//记录条数 
  var PageSize=PageSize;//设置每页示数目 
  var PageCount=Math.ceil(Count/PageSize);//计算总页数 
  var currentPage =1;//当前页,默认为1。

  $(a).find(".pagesize").html(PageSize);//显示每页示数目 
  $(a).find(".setpage .current_1").html("1");//默认当前条数1
  $(a).find(".setpage .current_2").html(PageSize);//默认当前条数2
  //设置输入页面框的范围,并设置初始值
  $(a).find(".currentpage").val(currentPage)  
  //显示默认页(第一页) 
  for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){  
    $(a).find("tbody").append(inner[i]); 
  }
  $(a).find(".totalpage").html(PageCount);//总页数
  //显示输入页的内容 
  $(a).find(".currentpage").change(function(){
    if($(this).val()<1||$(this).val()>PageCount){      
      $(a).find("tbody").html('<tr><td colspan="3">没有更多的消息......</td></tr>');
    }else{     
      var currentpage = $(this).val();
      $(a).find("tbody").html('');
      for(i=(currentpage-1)*PageSize;i<PageSize*currentpage;i++){ 
        $(a).find("tbody").append(inner[i]); 
        $(a).find(".setpage .current_1").html((currentpage-1)*PageSize+1);
        if(PageSize*currentpage<Count){
          $(a).find(".setpage .current_2").html(PageSize*currentpage);
        }else{
          $(a).find(".setpage .current_2").html(Count);
        }
      }
    }
  });
}

效果如下图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

Angularjs实现搜索关键字高亮显示效果_哒哒_前端开发者

哒哒阅读(8)

需求分析:

根据关键字搜索网页内容,并且高亮显示内容中的关键字

细节分析:

 1、每次执行搜索操作,需清空上一次结果

 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况

代码思路:

利用正则表达式匹配关键字

使用javascript字符串替换的方式,将关键字替换成<span class=’red’>关键字</span>

为了避免出现当关键字为 ‘p’ 时候,将标签<p>替换成<<span>p</span>>……等等的情况

所有匹配和替换操作只针对当前DOM元素中文本节点,通过递归函数遍历操作所有节点

前端框架:

angularjs^1.2.9

$scope.myData = '<div>woshihight<h2>womei<b>bbb</b>shihigh<span>haha</span></h2><span>1000pxhight</span><ul><li>1high</li><li>2hight span light hight< p></li></ul><a href="index.html">这个是链接地址hight</a></div>';
 $scope.myDataCp = angular.copy($scope.myData);
 $scope.key = '';
 $scope.searchKey = function() {
 if($scope.key != '') {
 searchHighLight($scope.key);
 }
 }
 function searchHighLight(key) {
 var _element = angular.element($scope.myDataCp);
 nodeRecursion(_element[0],key);
 var _htmlStr = _element[0].innerHTML.toString();
 _htmlStr = _htmlStr.replace(/_1000px_/g, '<span class="red">').replace(/_xp0001_/g, '</span>');
 $scope.myData = _htmlStr;
 }
 //循环遍历替换所有文本节点内容
 function nodeRecursion(e, key) {
 var reg = new RegExp(key, 'g');
 var _count = e.childNodes.length;
 for(var _i=0; _i < _count; _i++) {
 if(e.childNodes.item(_i).nodeType == 3) {
 var _str = e.childNodes.item(_i).data;
 if(_str.indexOf(key)!=-1) {
 _str = _str.replace(reg,'_1000px_'+key+'_xp0001_');
 }
 e.childNodes.item(_i).data = _str;
 } else {
 nodeRecursion(e.childNodes.item(_i), key);
 }
 }
 }

其他说明:

searchKey //点击搜索按钮调用该方法

$scope.myData 中的html字符串必须有一个根节点,比如这里的div

html页面中加载该html字段需要ng-bind-html指令,该指令需要加载ngSanitize模块

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

javascript中递归的两种写法_梵醉_前端开发者

梵醉阅读(9)

话不多说,请看代码

function addd(n){
 if(n==1){
  return 1;
 }
 return n*addd(n-1);
 }
 function add(n){
 var num=1;
 for(var i=1;i<n;i++){
  num=num*i;
 }
 return num;
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持前端开发者!

Javascript 两种刷新方法以及区别和适用范围_忘却_前端开发者

忘却阅读(13)

JS 两种刷新方法

在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了。

所以我就想用js刷新一下页面,于是在更新后输出了<script>window.location.reload()</script>;

可问题又来了,每次跟新后浏览器就会提示是否再次提交数据。如果点击是就会重新修改一遍,于是提示又来一遍,我靠,这是死循环啊。但是如果点击否则页面提示过期。

唉,看来window.location.reload()不行啊。

然后我想到了另外一个方法window.loation.href=window.location.href;

果然,换上去问题解决了。

 虽然是个小问题,但是也开发的一点经验。

总结一下:

JS中常用的两种刷新方法:

1.window.location.reload();

2.window.loation.href=window.location.href;

他们的区别是第一种就相当于我们点击浏览器的刷新按钮,浏览器会重新提交数据。

第二种就相当于我们点击一个链接到当前页的超链接,不会重新提交数据。

试用范围:

一般情况下两种方法都可用于刷新,但是如果页面有提交表单而又想刷新的时候就只能用第二种了。因为第一种会重新提交数据。

区别和作用知道了就知道什么时候该用什么了,一点小经验。给自己警醒,也给遇到类似问题的同学借鉴。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!