第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]

React - ES6 - Ajax获取接口数据渲染到UI组件【完整示例】

[不指定 2016/09/24 01:22 | by 刘新修 ]

本站PHP后端接口:  http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1

本实例用 ES5 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES5/

JavaScript代码
  1. /****** ES6输入文件[调用模块依赖] ******/  
  2. import React, { Component, PropTypes } from 'react'  
  3. import $ from 'n-zepto'  
  4.   
  5. /****** ES5输入文件[调用模块依赖] ******/  
  6. //var React=require('react');  
  7. //var $=require('n-zepto');  
  8.   
  9. //import * as from './commentList.js'  
  10. //import list from './commentList.js';  
  11.   
  12.   
  13. /****** 本地模拟Array数据******/  
  14. var movies = [  
  15.     {  
  16.         id: 1,  
  17.         name: '速度与激情001',  
  18.         date: 2011  
  19.     },  
  20.     {  
  21.         id: 2,  
  22.         name: '速度与激情002',  
  23.         date: 2009  
  24.     }  
  25. ];  
  26.   
  27. /****** 外部子组件map数组当做模板之用 ES5 + JSX 语法编写 ******/  
  28. var MoviesList = React.createClass({  
  29.     render: function () {  
  30.         // this.props 用于从组件外部传入数据  
  31.         var _movies = this.props._movies;  
  32.         return (  
  33.             <li className="datali">  
  34.         {_movies.id}-{_movies.name}  
  35.             </li>  
  36.         )  
  37.     }  
  38. });  
  39.   
  40. /****** 外部子组件map数组当做模板之用 ES6 + JSX 语法编写 ******/  
  41. let CommentList=class CommentList extends Component {  
  42.     constructor(props) {  
  43.         super(props);  //ES6调用父类构造函数super不能少！  
  44.         this.state = {  
  45.              wording: '你好呀, '  
  46.         };  
  47.     }  
  48.   
  49.     /****** Ajax子组件中[主体模板] ******/  
  50.     render(){  
  51.         return <ul>{this.props.comments.map(this.renderComment)}</ul>;  
  52.     }  
  53.   
  54.     /****** Ajax子组件中[嵌套模板] ******/  
  55.     renderComment({plat,type,name,guid,cre_time,lottery}){  
  56.         return (  
  57.             <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>  
  58.         )  
  59.     }  
  60.   
  61. }  
  62.   
  63. /****** 使用ES6 + JSX 语法编写 class xx extends React.Component{} 创建一个组件 ******/  
  64. class CommentListContainer extends Component {  
  65.     /****** [ES6-constructor||ES5-getInitialState] ******/  
  66.     constructor(){  
  67.         super();  
  68.         this.state = {  
  69.             loading: true,  
  70.             title: '我喜欢的电影',  
  71.             movies: [],  
  72.         comments: []  
  73.     }  
  74.     }  
  75.   
  76.     componentDidMount(){  
  77.         $.ajax({  
  78.               type: 'GET',  
  79.               url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',  
  80.               data: {GUID:'1'},  
  81.               dataType:'jsonp', //告诉Ajax调用$jsonp  
  82.               jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  83.               success: function(data){  
  84.                   var yy=JSON.stringify(data);  
  85.                   var tlist=JSON.stringify(data.enttityList);  
  86.                   //console.log(tlist);  
  87.                   //console.log(this.state.title+'22');  
  88.                   this.setState({  
  89.                         comments:data.enttityList,  
  90.                         lottery:data.enttityList[0].lottery  
  91.                   });  
  92.                   var commentsStr=JSON.stringify(this.state.comments);  
  93.                   console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
  94.                   //console.log(this.state.comments+'33')  
  95.               }.bind(this),  
  96.               error: function(xhr, type){  
  97.                   alert(xhr+type+'Ajax error!');  
  98.               }  
  99.         });  
  100.         //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  101.     }  
  102.   
  103.     render(){  
  104.         return <CommentList comments={this.state.comments}/>;  
  105.     }  
  106. }  
  107.   
  108.   
  109. /****** ES5输出给router ******/  
  110. //module.exports=DemoComponent;  
  111.   
  112. /****** ES6输出给router ******/  
  113. export default CommentListContainer;  
Tags: , , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(6718)

React - ES5 - Ajax获取接口数据渲染到UI组件【完整示例】

[不指定 2016/09/23 21:11 | by 刘新修 ]

本站PHP后端接口:  http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1

 本实例用 ES6 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES6/

JavaScript代码
  1. //import React, { Component, PropTypes } from 'react'  
  2. //import $ from 'n-zepto'  
  3. var React=require('react'); //Es-5
  4. var $=require('n-zepto');   //Es-5
  5.   
  6. //import * as from './commentList.js'  
  7. //import list from './commentList.js';  
  8.   
  9.   
  10. /****** 外部子组件map数组当做模板之用 ******/  
  11. var MoviesList = React.createClass({  
  12.     render: function () {  
  13.         // this.props 用于从组件外部传入数据  
  14.         ar _movies = this.props._movies;  
  15.         return (  
  16.             <li className="datali">
  17.                 {_movies.id}-{_movies.name}
  18.             </li>  
  19.         )  
  20.     }
  21. });  
  22.   
  23. /****** 本地模拟Array数据******/  
  24. var movies = [  
  25.     {  
  26.         id: 1,  
  27.         name: '速度与激情001',  
  28.         date: 2011  
  29.     },  
  30.     {  
  31.         id: 2,  
  32.         name: '速度与激情002',  
  33.         date: 2009  
  34.     }  
  35. ];  
  36.   
  37.   
  38. /****** 使用Es5语法 React.createClass 创建一个组件 ******/  
  39. var DemoComponent = React.createClass({  
  40.     /****** 使用 getInitialState 的返回值作为数据的默认值 ******/  
  41.     getInitialState: function () {  
  42.     // this.state 用于存储数据comments被Ajax赋值要先定义个名称  
  43.         return {  
  44.             loading: true,  
  45.             title: '我喜欢的电影',  
  46.             movies: [],  
  47.         comments: []  
  48.         }  
  49.     },  
  50.   
  51.     componentDidMount: function() {  
  52.     $.ajax({  
  53.         type: 'GET',  
  54.         url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',  
  55.         data: {GUID:'1'},  
  56.         dataType:'jsonp', //告诉Ajax调用$jsonp  
  57.         jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  58.         success: function(data){  
  59.             var yy=JSON.stringify(data);  
  60.             var tlist=JSON.stringify(data.enttityList);  
  61.             console.log(tlist);  
  62.             //console.log(this.state.title+'22')  
  63.             this.setState({  
  64.                 comments:data.enttityList,  
  65.                 lottery:data.enttityList[0].lottery  
  66.             });  
  67.             var slist=JSON.stringify(this.state.comments);  
  68.             console.log(slist)  
  69.             //console.log(this.state.comments+'33')  
  70.         }.bind(this),  
  71.         error: function(xhr, type){  
  72.             alert(xhr+type+'Ajax error!'); //error
  73.         }  
  74.     });  
  75.     //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  76.     },  
  77.   
  78.     render: function () {  
  79.         // this.state 用于存储当前的数据  
  80.         var comments = this.state.comments;  
  81.   
  82.         //var dataHtml=movies.map(<p>{name}</p>);// 注意这里 bind(this) 修正了上下文  
  83.   
  84.     /****** Movies子模板 ******/  
  85.         function renderMovies({id,name}){  
  86.             return <li>{id}-{name}</li>;  
  87.         }  
  88.     /****** Movies大模板[内嵌子模板] ******/  
  89.         //var dataHtml = movies.map(renderMovies);  
  90.   
  91.     /****** Movies大模板[外调子模板] ******/  
  92.         var dataHtml = movies.map(function(movies){  
  93.             return (  
  94.                 <MoviesList _movies={movies}/>  
  95.             )  
  96.     }.bind(this));// 注意这里 bind(this) 修正了上下文  
  97.     //console.log('movies:'+movies+'--'+'dataHtml:'+dataHtml);  
  98.   
  99.   
  100.     /****** Ajax子模板******/  
  101.         function renderComment({plat,type,name,guid,cre_time,lottery}){  
  102.             return <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>;  
  103.         }  
  104.     /****** Ajax大模板 ******/  
  105.         var AjaxHtml = this.state.comments.map(renderComment);  
  106.     //var AjaxHtml='11'  
  107.     console.log('comments:'+comments+'--'+'AjaxHtml:'+AjaxHtml);  
  108.   
  109.     return (  
  110.         <ul>{AjaxHtml}</ul>  
  111.     )  
  112.     }  
  113. });  
  114.   
  115. /****** ES5输出给router ******/  
  116. module.exports=DemoComponent;  
  117.   
  118. /****** ES6输出给router ******/  
  119. //export default DemoComponent;  

 

Tags: , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(5077)

React 速记

[不指定 2016/09/23 21:06 | by 刘新修 ]

使用ES5||ES6 -- 输入文件示例 [调用所依赖的模块]：

JavaScript代码
  1. /****** ES5调用依赖模块[require]被打包会自动生成关联代码 ******/  
  2. var MyComponent = require('./components/movie-list');  
  3.   
  4. /****** ES6调用依赖模块 ******/  
  5. import MyComponent from './components/movie-list';  

使用ES5||ES6 -- 输出文件示例[输出给被依赖模块]：

JavaScript代码
  1. /****** ES5输出给router ******/
  2. module.exports=DemoComponent;
  3.  
  4. /****** ES6输出给router ******/  
  5. //export default DemoComponent;  
  6.  

使用ES5 -- 创建一个组件：

JavaScript代码
  1. /****** 使用Es5语法 React.createClass 创建一个组件 ******/  
  2. var DemoComponent = React.createClass({  
  3.     /****** 使用 getInitialState 的返回值作为数据的默认值(!return) ******/  
  4.     getInitialState: function () {  
  5.         return {  
  6.             loading: true,  
  7.             title: '我喜欢的电影',  
  8.             // 注意这里将 外部传入的数据赋值给了 this.state  
  9.             movies: []  
  10.         }  
  11.     },  
  12.     /****** 输出HTML模板，此处可以调用子组件******/  
  13.     render: function () {  
  14.         return (  
  15.             <div className="component-hello">  
  16.         {this.state.title}  
  17.             </div>  
  18.         )  
  19.     }  
  20. });  

使用ES5 -- map遍历当前Array并调用渲染数据的[外部]子组件：

JavaScript代码
  1. /****** 使用Es5语法 遍历数组并调用外部子组件 ******/  
  2. var MoviesList=React.createClass({...});  
  3. var dataHtml = movies.map(function(movies){  
  4.    return (  
  5.         <MoviesList _movies={movies}/>  
  6.    )  
  7. }.bind(this));// 注意这里 bind(this) 修正了上下文  
  8. return (  
  9.    <ul>{dataHtml}</ul>  
  10. )  
  11.   
  12.   
  13. /****** 外部子组件map数组当做模板之用 ******/  
  14. var MoviesList = React.createClass({  
  15.     render: function () {  
  16.         // this.props 用于从组件外部传入数据  
  17.         var _movies = this.props._movies;  
  18.         return (  
  19.             <li className="datali">  
  20.         {_movies.id}-{_movies.name}  
  21.             </li>  
  22.         )  
  23.     }  
  24. });  

使用ES5 -- map遍历当前Array并调用渲染数据的[内部]子组件：

JavaScript代码
  1. /****** 使用Es5语法 遍历数组并调用内部子组件 ******/  
  2. function renderMovies({id,name}){  
  3.    return <li>{id}-{name}</li>;  
  4. }  
  5. var dataHtml = movies.map(renderMovies);  
  6. return (  
  7.    <ul>{dataHtml}</ul>  
  8. )  

Ajax获取接口数据并设置到state :

JavaScript代码
  1. componentDidMount(){  
  2.     $.ajax({  
  3.           type: 'GET',  
  4.           url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php', //JSONP接口
  5.           data: {GUID:'1'},  
  6.           dataType:'jsonp', //告诉Ajax调用$jsonp  
  7.           jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  8.           success: function(data){  
  9.               var yy=JSON.stringify(data);  
  10.               var tlist=JSON.stringify(data.enttityList);  
  11.               //console.log(tlist);  
  12.               //console.log(this.state.title+'22');  
  13.               this.setState({  
  14.                     comments:data.enttityList,  
  15.                     lottery:data.enttityList[0].lottery  
  16.               });  
  17.               var commentsStr=JSON.stringify(this.state.comments);  
  18.               console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
  19.               //console.log(this.state.comments+'33')  
  20.           }.bind(this),  
  21.           error: function(xhr, type){  
  22.               alert(xhr+type+'Ajax error!');  
  23.           }  
  24.     });  
  25.     //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  26. }  

react 的事件调用分类

C#代码
  1. 触摸事件：onTouchCancel\onTouchEnd\onTouchMove\onTouchStart  
  2. (只会在移动设备上接受)  
  3.    
  4. 键盘事件：onKeyDown\onKeyPress\onKeyUp  
  5.    
  6. 剪切事件：onCopy\onCut\onPaste  
  7.    
  8. 表单事件：onChange\onInput\onSubmit  
  9.    
  10. 焦点事件：onFocus\onBlur  
  11.    
  12. UI元素：onScroll(移动设备是手指滚动和PC的鼠标滑动)  
  13.    
  14. 滚动事件：onWheel(鼠标滚轮)  
  15.    
  16. 鼠标类型:onClick\onContextMenu(右键)\onDoubleClick\onMouseDown\onMouseEnter\  
  17.      onMouseLeave\onMouseMove\onMouseOut\onMouseOver\onMouseUp  
  18.   onDrag\onDrop\onDragEnd\onDragEnter\onDragExit\onDragLeave\onDragOver\onDragStart  

 

Tags: , , , , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3698)

react 嵌套路由相关

[不指定 2016/09/21 12:58 | by 刘新修 ]

 /src/js/app.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. import {render} from 'react-dom';   //render((_component),Dom);  
  3. //import ReactDOM from 'react-dom';     //ReactDOM.render((_component),Dom);  
  4. import getRouter from './getRouter';  
  5. import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router';  
  6.   
  7. /* using an ES6 transpiler, like babel */  
  8. //import { createHistory } from 'history/createBrowserHistory'  
  9. //import createBrowserHistory from 'history/createBrowserHistory';  
  10.   
  11. /* Import Component */  
  12. import Hello from '../components/hello/hello.jsx'  
  13. import Other from '../components/other/other.jsx'  
  14.   
  15. /* ensure test */  
  16. require.ensure(['./test'],function(require){  
  17.     var aModule = require('./test');  
  18.     console.log("xxxx");  
  19. },'test');  
  20.   
  21. /* create history for router */  
  22. //const history = createHistory()  
  23.   
  24. /* Router Config */  
  25. render((  
  26.   <Router history={hashHistory}>  
  27.     <Route path="/" component={getRouter}>  
  28.       <IndexRoute component={Hello} />  
  29.       <Route path="other" component={Other} />  
  30.     </Route>  
  31.   </Router>  
  32. ), document.getElementById('app'));  

/src/js/getRouter.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. export default React.createClass ({   
  3.   render() {  
  4.     return <div>  
  5.       {this.props.children}  
  6.     </div>  
  7.   }  
  8. });  

/src/components/hello/hello.jsx

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2.   
  3. /* 导入组件样式hello.css */  
  4. import styles from './css/hello.css';  
  5.   
  6. //require("./css/hello.css");  
  7.   
  8. class Hello extends React.Component {   
  9.     render(){   
  10.         return (  
  11.         <div className="hello">  
  12.         <p>Hello World!!!!!!!...</p>  
  13.         <p>cll不错！</p>  
  14.         </div>  
  15.         );   
  16.     };  
  17. };  
  18. export default Hello;  

/src/components/other/other.jsx

JavaScript代码
  1. class Other extends React.Component {  
  2.   render() {  
  3.         return (  
  4.         <div>  
  5.         <p>this is other component!!!</p>  
  6.         <p>111111111cll不错！</p>  
  7.         </div>  
  8.         )  
  9.   }  
  10. }  
  11.   
  12. export default Other;  
Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4412)

关于setTimeout传参的思考

[不指定 2016/09/14 16:15 | by 刘新修 ]
JavaScript代码
  1. function countdown(n){  
  2.     //var i=10;if(!n)n=i;  
  3.     function _show(o){  
  4.         return function(){  
  5.             countdown(o);  
  6.         }  
  7.     }    
  8.     if(n>0){  
  9.         console.log(n);n--;  
  10.         setTimeout(_show(n),1000);  
  11.     }  
  12. };countdown(10);  
Tags:
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4300)

JS把数组类型转换为JSON对象或JSON字符串

[不指定 2016/09/13 13:01 | by 刘新修 ]
JavaScript代码
  1. var a = ['a','b','c'];  
  2. var json = {};  
  3. for(var i=0;i<a.length;i++)  
  4. {  
  5.     json[i]=a[i];  
  6. }  
  7. var jsonStr=JSON.stringify(json);//结果："{'1':'a','2':'b','3':'c'}"  
  8. var jsonObj=JSON.parse(jsonStr); //结果：[object Object]  

JS Array To Json 加强版：

1. 自然数自动递增并设置K值

2. 取偶数Length为Json数组的K值

JavaScript代码
  1. /******** 获取客户端请求的header整体头部信息 ********/  
  2. this.rawHeaders=function(state){  
  3.     var json={};  
  4.     if(!state){  
  5.         for(var i=0;i<req.rawHeaders.length;i++){  
  6.             var s,s=i;  
  7.             if(i%2==0){  
  8.                 s++;json[req.rawHeaders[i]]=req.rawHeaders[s];  
  9.             }  
  10.         }  
  11.     }  
  12.     if(state){  
  13.         for(var i=0;i<req.rawHeaders.length;i++){  
  14.             json[i]=req.rawHeaders[i];  
  15.         }  
  16.     }  
  17.     var jsonStr=JSON.stringify(json);//结果："{'1':'a','2':'b','3':'c'}"  
  18.     var jsonObj=JSON.parse(jsonStr); //结果：[object Object]  
  19.     return jsonObj;  
  20. };  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3052)

ArtTemplate_List 实例

[不指定 2016/08/02 16:56 | by 刘新修 ]

ArtTemplate_List 实例1

XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>basic-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <div id="content"></div>  
  11. <script id="test" type="text/html">  
  12. {{if isAdmin}}  
  13.   
  14. <h1>{{title}}</h1>  
  15. <ul>  
  16.     {{each list as value i}}  
  17.         <li>索引 {{i + 1}} ：{{value}}</li>  
  18.     {{/each}}  
  19. </ul>  
  20.   
  21. {{/if}}  
  22. </script>  
  23.   
  24. <script>  
  25. var data = {  
  26.     title: '基本例子',  
  27.     isAdmin: true,  
  28.     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']  
  29. };  
  30. var html = template('test', data);  
  31. document.getElementById('content').innerHTML = html;  
  32. </script>  
  33. </body>  
  34. </html  

ArtTemplate_List 实例2

XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>compile-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <h1>在javascript中存放模板</h1>  
  11. <div id="content"></div>  
  12. <script>  
  13. var source = '<ul>'  
  14. +    '{{each list as value i}}'  
  15. +        '<li>索引 {{i + 1}} ：{{value}}</li>'  
  16. +    '{{/each}}'  
  17. + '</ul>';  
  18.   
  19. var render = template.compile(source);  
  20. var html = render({  
  21.     list: ['摄影', '电影', '民谣', '旅行', '吉他']  
  22. });  
  23.   
  24. document.getElementById('content').innerHTML = html;  
  25. </script>  
  26. </body>  
  27. </html>  
XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>basic-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <h1>在javascript中存放模板</h1>    
  11. <div id="content"></div>    
  12. <script>  
  13. /***** 小模版 *****/  
  14. var source=''  
  15. +'<ul>'    
  16. +    '{{each list as value i}}'    
  17. +        '<li>索引 {{i+1}} ：{{value}}</li>'  
  18. +    '{{/each}}'    
  19. +'</ul>';  
  20.   
  21. /***** 定义变关联逻辑代码片段（小模版） *****/    
  22. var connectJs=template.compile(source);  
  23.   
  24. /***** 最终的数据源等于==逻辑代码关联数据 *****/  
  25. var htmlData=connectJs({  
  26.     list: ['摄影', '电影', '民谣', '旅行', '吉他']    
  27. });    
  28.   
  29. /***** 把最终处理后的数据源插入到页面 *****/    
  30. document.getElementById('content').innerHTML=htmlData;    
  31. </script>  
  32. </body>  
  33. </html>  

实例访问地址：http://code.liuxinxiu.com/jstpl/artTemplate/demo/best.html

include嵌入子模板:

XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>include-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <div id="content"></div>  
  11. <script id="test" type="text/html">  
  12. <h1>{{title}}</h1>  
  13. {{include 'list'}}  
  14. </script>  
  15. <script id="list" type="text/html">  
  16. <ul>  
  17.     {{each list as value i}}  
  18.         <li>索引 {{i + 1}} ：{{value}}</li>  
  19.     {{/each}}  
  20. </ul>  
  21. </script>  
  22.   
  23. <script>  
  24. var data = {  
  25.     title: '嵌入子模板',  
  26.     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']  
  27. };  
  28. var html = template('test', data);  
  29. document.getElementById('content').innerHTML = html;  
  30. </script>  
  31. </body>  
  32. </html>  

理解部分（使用普通for循环加声明语法，进行数组遍历）1：

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>AtrTemplate</title>  
  6. </head>  
  7. <body>  
  8.     <div id="content"></div>  
  9.   
  10.     <script src="js/template-native.js"></script>  
  11.     <script id="test" type="text/html">  
  12.           
  13.         <%for( i = 0; i < content.length; i++) {%>  
  14.         <h1><%=content[i].title%></h1>  
  15.         <p>条目内容 : <%=content[i].list%></p>  
  16.         <%}%>  
  17.       
  18.     // 等同于普通的for循环，在普通的for循环上给每一行语法声明加上<% xx %>  
  19.     // 等同于普通的for循环，在普通的for循环上取值部分加上类似jsp的变量声明 <%= xx %>  
  20.         //for(i=0;i<content.length;i++){  
  21.         //  <h1><%=content[i].title%></h1>  
  22.         //  <p>条目内容 : <%=content[i].list%></p>  
  23.         //}  
  24.           
  25.     </script>  
  26.   
  27.     <script>  
  28.     /***** 自造数据，content为数组List便于测试循环 *****/  
  29.         var data={  
  30.             content:[  
  31.                 {  
  32.                     title: "artTemplate",  
  33.                     list: "新一代 javascript 模板引擎",  
  34.                 },  
  35.                 {  
  36.                     title: "特性",  
  37.                     list: "性能卓越，执行速度快"  
  38.                 }  
  39.             ]  
  40.         };  
  41.     /***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/  
  42.         var html=template('test',data);  
  43.     /***** 选择页面Dom元素，插入处理后的数据 *****/  
  44.         document.getElementById("content").innerHTML=html;  
  45.    </script>  
  46. </body>  
  47. </html>  

理解部分（使用普通for循环加声明语法，进行双层嵌套数组遍历）2：

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.    <title>AtrTemplate -- 简介</title>  
  6. </head>  
  7. <body>  
  8.     <div id="content"></div>  
  9.   
  10.     <script src="js/template-native.js"></script>  
  11.     <script id="listtemp">  
  12.   
  13.     </script>  
  14.     <script id="test" type="text/html">  
  15.         //循环嵌套，循环数组里的数组  
  16.         <%for(i=0;i<content.length;i++){%>  
  17.         <h1><%=content[i].title%></h1>  
  18.         <ul>  
  19.             <%for(j=0;j<content[i].list.length;j++){%>  
  20.                 <li><%=content[i].list[j]%></li>  
  21.             <%}%>  
  22.         </ul>  
  23.         <%}%>  
  24.           
  25.     </script>    
  26.     <script>
  27.         var data={  
  28.             content:[  
  29.                 {  
  30.                     title: "artTemplate",  
  31.                     list:["新一代 javascript 模板引擎"]  
  32.                 },  
  33.                 {  
  34.                     title: "特性",  
  35.                     list: [  
  36.                             "性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍",  
  37.                             "支持运行时调试，可精确定位异常模板所在语句",  
  38.                             " 对 NodeJS Express 友好支持",  
  39.                             "安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）",  
  40.                             " 支持include语句",  
  41.                             "可在浏览器端实现按路径加载模板",  
  42.                             "支持预编译，可将模板转换成为非常精简的 js 文件",  
  43.                             "模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选",  
  44.                             "支持所有流行的浏览器"  
  45.                         ]  
  46.                 }  
  47.             ]  
  48.         };
  49. /***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
  50.         var html=template('test',data);
  51.  
  52. /***** 选择页面Dom元素，插入处理后的数据 *****/
  53.         document.getElementById("content").innerHTML=html;  
  54.     </script>  
  55. </body>  
  56. </html>  

 

Tags:
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4045)

JS 格式化日期

[不指定 2016/07/15 21:03 | by 刘新修 ]
JavaScript代码
  1. /***** 格式化日期 *****/  
  2. function formatDate(_strTime,_format){  
  3.     var date=new Date(_strTime);  
  4.     var paddNum=function(num){  
  5.         num+="";  
  6.         return num.replace(/^(\d)$/,"0$1");  
  7.     }  
  8.     //指定格式字符  
  9.     var cfg={  
  10.         yyyy:date.getFullYear()                         //年:4位  
  11.         ,yy :date.getFullYear().toString().substring(2) //年:2位  
  12.         ,M  :date.getMonth() + 1                        //月:如果1位的时候不补0  
  13.         ,MM :paddNum(date.getMonth()+1)                 //月:如果1位的时候补0  
  14.         ,d  :date.getDate()                             //日:如果1位的时候不补0  
  15.         ,dd :paddNum(date.getDate())                    //日:如果1位的时候补0  
  16.         ,hh :date.getHours()                            //时  
  17.         ,mm :date.getMinutes()                          //分  
  18.         ,ss :date.getSeconds()                          //秒  
  19.     }  
  20.     _format||(_format="yyyy-MM-dd hh:mm:ss");  
  21.     return _format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});  
  22. }  
  23. formatDate("Tue Jul 16 01:07:00 CST 2013","yyyy-MM-dd ");  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3509)

JS FormData对象

[不指定 2016/03/31 10:43 | by 刘新修 ]

通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。但当我们使用Ajax提交时，这过程就要变成人工的了。因此，FormData对象的出现可以减少我们一些工作量。

想得到一个FormData对象：

var formdata = new FormData();

W3c草案提供了三种方案来获取或修改FormData。

方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：

var formdata = new FormData();
formdata.append("name", "呵呵");
formdata.append("url", "http://www.baidu.com/");

方案2：取得form元素对象，将它作为参数传入FormData对象中！

var formobj =  document.getElementById("form");
var formdata = new FormData(formobj);

方案3：利用form元素对象的getFormData方法生成它！

var formobj =  document.getElementById("form");
var formdata = formobj.getFormData()

利用Formdata对象，我们可以使用原生js通过ajax实现异步上传图片，当然，现在已经有jquery的批量上传插件了，实现原理就是利用了Formdata。

Tags:
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4009)

TouchEvent测试

[不指定 2015/11/08 20:44 | by 刘新修 ]
XML/HTML代码
  1. <!-- HTML5 -->    
  2. <!DOCTYPE html>    
  3. <html>    
  4.     <head>    
  5.         <title>TouchEvent测试</title>    
  6.         <meta charset="utf-8">  
  7.     </head>    
  8.     <body>    
  9.         <h2>TouchEvent测试</h2>    
  10.         <br />    
  11.         <div id="version" style="border:2px solid black;background-color:yellow"></div>    
  12.         <br />    
  13.         <br />    
  14.         <br />    
  15.         <br />    
  16.         <br />    
  17.         <br />    
  18.         <div id="result" style="border:2px solid red; color:red;">未触发事件！</div>    
  19.         <div id="test" style="border:2px solid red">    
  20.             <ul>    
  21.                 <li id="li1">测试条目1</li>    
  22.                 <li id="li2">测试条目2</li>    
  23.                 <li id="li3">测试条目3</li>    
  24.                 <li id="li4">测试条目4</li>    
  25.                 <li id="li5">测试条目5</li>    
  26.                 <li id="li6">测试条目6</li>    
  27.                 <li id="li7">测试条目7</li>    
  28.                 <li id="li8">测试条目8</li>    
  29.                 <li id="li9">测试条目9</li>    
  30.                 <li id="li10">测试条目10</li>    
  31.                 <li id="li11">测试条目11</li>    
  32.                 <li id="li12">测试条目12</li>    
  33.                 <li id="li13">测试条目13</li>    
  34.                 <li id="li14">测试条目14</li>    
  35.                 <li id="li15">测试条目15</li>    
  36.                 <li id="li16">测试条目16</li>    
  37.                 <li id="li17">测试条目17</li>    
  38.                 <li id="li18">测试条目18</li>    
  39.                 <li id="li19">测试条目19</li>    
  40.                 <li id="li20">测试条目20</li>    
  41.             </ul>    
  42.         </div>    
  43.             
  44.         <script type="text/javascript">    
  45.             //全局变量，触摸开始位置    
  46.             var startX = 0, startY = 0;    
  47.                 
  48.             //touchstart事件    
  49.             function touchSatrtFunc(evt) {    
  50.                 try    
  51.                 {    
  52.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等    
  53.     
  54.                     var touch = evt.touches[0]; //获取第一个触点    
  55.                     var x = Number(touch.pageX); //页面触点X坐标    
  56.                     var y = Number(touch.pageY); //页面触点Y坐标    
  57.                     //记录触点初始位置    
  58.                     startX = x;    
  59.                     startY = y;    
  60.     
  61.                     var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';    
  62.                     document.getElementById("result").innerHTML = text;    
  63.                 }    
  64.                 catch (e) {    
  65.                     alert('touchSatrtFunc：' + e.message);    
  66.                 }    
  67.             }    
  68.     
  69.             //touchmove事件，这个事件无法获取坐标    
  70.             function touchMoveFunc(evt) {    
  71.                 try    
  72.                 {    
  73.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等    
  74.                     var touch = evt.touches[0]; //获取第一个触点    
  75.                     var x = Number(touch.pageX); //页面触点X坐标    
  76.                     var y = Number(touch.pageY); //页面触点Y坐标    
  77.     
  78.                     var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';    
  79.     
  80.                     //判断滑动方向    
  81.                     if (x - startX != 0) {    
  82.                         text += '<br/>左右滑动';    
  83.                     }    
  84.                     if (y - startY != 0) {    
  85.                         text += '<br/>上下滑动';    
  86.                     }    
  87.     
  88.                     document.getElementById("result").innerHTML = text;    
  89.                 }    
  90.                 catch (e) {    
  91.                     alert('touchMoveFunc：' + e.message);    
  92.                 }    
  93.             }    
  94.     
  95.             //touchend事件    
  96.             function touchEndFunc(evt) {    
  97.                 try {    
  98.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等    
  99.     
  100.                     var text = 'TouchEnd事件触发';    
  101.                     document.getElementById("result").innerHTML = text;    
  102.                 }    
  103.                 catch (e) {    
  104.                     alert('touchEndFunc：' + e.message);    
  105.                 }    
  106.             }    
  107.     
  108.             //绑定事件    
  109.             function bindEvent() {    
  110.                 document.addEventListener('touchstart', touchSatrtFunc, false);    
  111.                 document.addEventListener('touchmove', touchMoveFunc, false);    
  112.                 document.addEventListener('touchend', touchEndFunc, false);    
  113.             }    
  114.     
  115.             //判断是否支持触摸事件    
  116.             function isTouchDevice() {    
  117.                 document.getElementById("version").innerHTML = navigator.appVersion;    
  118.     
  119.                 try {    
  120.                     document.createEvent("TouchEvent");    
  121.                     alert("支持TouchEvent事件！");    
  122.     
  123.                     bindEvent(); //绑定事件    
  124.                 }    
  125.                 catch (e) {    
  126.                     alert("不支持TouchEvent事件！" + e.message);    
  127.                 }    
  128.             }    
  129.     
  130.             window.onload = isTouchDevice;    
  131.     </script>    
  132.     </body>    
  133. </html>    
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4432)
第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]