HTML5
学习笔记666
这个作者很懒,什么都没留下…
展开
-
Amaze UI React框架快速体验上手
Amaze UI ReactAmaze UI 是一个移动优先的跨屏前端框架,而Amaze UI React是用React进行封装(移植)的版本。 官网:http://amazeui.org/react/getting-started 安装 $ npm install amazeui-react 要想正确运行还需要一些babel插件$ npm install babel-plugin-trans原创 2016-08-07 13:17:18 · 5760 阅读 · 0 评论 -
延展操作符和解构的简单实际应用
延展操作符(…)function showMe(name,age){ return "名字是"+name+"年龄是"+age;}var name = "zhangsan";var age = 18;console.log(showMe(name,18));//名字是zhangsan年龄是18//或var me = ["jack",20];console.log(showMe(...原创 2016-08-04 21:49:12 · 1701 阅读 · 0 评论 -
令人振奋的Class(下):继承和实战代码示例
ES2015新引入的class有个令人兴奋的”继承”class User{ constructor(n) { this._name = n; } showme() { console.log(this._name); }}// 继承class student extends User{ constructor(sname) { supe原创 2016-08-04 21:25:30 · 410 阅读 · 0 评论 -
令人振奋的Class(上)
可以在这里测试http://babeljs.io/repl/ es2015中定义类: clss me { showName() { return "张三"; } } // 实例化类 let m = new me(); console.log(m.showName());类中属性的使用原创 2016-08-04 20:58:54 · 468 阅读 · 0 评论 -
初识ReactJS的组件化开发(九):下拉框的使用方法
js代码:// 创建组件var NavBar = React.createClass({ removeNode: function () { ReactDOM.unmountComponentAtNode(document.getElementById("container")) }, loadMovie: function () { Rea原创 2016-07-31 15:40:14 · 12510 阅读 · 1 评论 -
超自然的箭头函数学习初步
回忆一下,我们定义函数的通常写法function getName(){ return "zhangsan";}或var getName = function(){ return "zhangsan";}新的写法let getName2 = ()=>{ return "zhangsan";}或let getName2 = ()=> "zhangsan";aler原创 2016-08-03 22:16:35 · 716 阅读 · 0 评论 -
初识ReactJS的组件化开发(八):用表单做评论 :限制textarea可输入字符长度
// 评论框组件var ReviewBox = React.createClass({ getInitialState: function () { return { rtitle: "初始化标题", //评论标题 rcontent: "", rcontentnum:0 }; }原创 2016-07-31 13:58:12 · 4001 阅读 · 0 评论 -
初识ReactJS的组件化开发(七):用表单做评论 (上):获取文本框的value
// 评论框组件var ReviewBox = React.createClass({ getInitialState: function () { return { rtitle: "初始化标题" //评论标题 }; }, textChange:function (event) { this.setSt原创 2016-07-31 13:05:40 · 4805 阅读 · 0 评论 -
变量的定义:让我们的代码不再"恶心"
为了更好的学习,我们打开babel有一个很贴息的学习工具 http://babeljs.io/repl/let 有着比var 更”干净”的作用域 我们知道es2015之前变量的作用域是function。 比如 fuction showName(){ for(var i=0;i<=3;i++){} alert(i); //很恶心的在外部也能访问到i } showName原创 2016-08-03 21:01:22 · 599 阅读 · 0 评论 -
入门篇:利用Babel来转化你的ES2015脚本初步
我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) npm install babel-plugin-transform-react-jsx官网http://babeljs.io/安装ec2015的转化器,因为ec2015语法并不是所有浏览器都兼容原创 2016-08-01 20:15:18 · 8125 阅读 · 0 评论 -
使用webpack+babel来"编译"你的JS代码(上)
我常规的引用外部JS文件是 在es2015中,并不需要这样。我们使用import…from语法示例:我们在ui.js里定义2个变量let name = "jack";let age = 18;exprot{name,age}; //导出这2个变量然后在index.js引入:import{name,age} from "./ui.js";console.log(name);然后我们”编译”i原创 2016-08-01 21:56:23 · 5609 阅读 · 0 评论 -
使用webpack+babel来"编译"你的JS代码(下)
上节课我们学习了 1.安装了babel的es2015转换器 编写了一个简单的es2015语法的js代码 let name = “zhangsan”; 2.执行了 babel index.js –out-file xxx.js 把代码进行转化 3.安装了webpack,对我们的代码进行打包(非es2015代码)这节课我们来学习如何结合babel对我们的es2015代码进行webpack打包原创 2016-08-01 22:39:32 · 14558 阅读 · 0 评论 -
React-BootStrap框架快速体验上手
官方文档http://react-bootstrap.github.io/getting-started.html安装 在终端cd到你的项目目录下执行:$ npm install react-bootstrap然后需要我们手动引用css<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://max原创 2016-08-07 10:47:52 · 37722 阅读 · 3 评论 -
借助webpack-dev-server让我们的代码热编译
回忆:之前我们是怎么运行代码的? 1.配置好webpack.config.js 2.写好程序后,我们在”当前项目目录下执行” webpack 这个命令 3.但是这样会给我们开发带来比较麻烦的步骤,每次编译都需要等待一段时间。现在我们来快速学习和配置”热启动” http://webpack.github.io/docs/webpack-dev-server.html 安装$ npm inst原创 2016-08-06 22:27:58 · 17169 阅读 · 7 评论 -
让webpack打包时支持ReactJS"编译"
我们之前使用了什么? 1.最早的时候我们学习了babel,使用一个叫babel-plugin-transform-react-jsx的插件转化JSX语法 2.为了更好的理解目前流行的框架,我摸学习了ES2015。为了让我们的代码能够运行在当前浏览器中,我们学习了webpack。 2.1同样结合了babel-preset-es2015来转化新语法 2.2学习了简单的webpack配置文件,使得原创 2016-08-06 21:52:31 · 2743 阅读 · 1 评论 -
为什么要用PolyFill(JS中的修补匠)
var users = [{name:”zhangsan”,age:18},{name:”jack”,age:20}]; 这是一个对象数组。如果我们要查询名字为”jack”用户的年龄、常用的办法是什么? 很多同学会想到遍历这个数组。我们来看看新的语法:var getUser = users.find(function(finder){ return finder.name = "jack原创 2016-08-06 20:20:17 · 21721 阅读 · 2 评论 -
“传说”未来代替Ajax的Fetch入门
Fetch被称为下一代ajax继承 https://github.com/whatwg/fetch 现在还没有被W3C纳入var getObj = fetch("http://xxx.com/getData.php",{ method:"GET", headers:{}, body:"id=3&name=jack"});getObj.then(function(dat原创 2016-08-06 19:42:10 · 2888 阅读 · 0 评论 -
速学Promise传递异步消息初步
jQuery中的异步处理 基本用法$.post("http://xxx.com/getData.php",null,function(data){ alert(data);});如果这里边又出现一次回调,怎么写呢? 很low的方式$.post("http://xxx.com/getData.php",null,function(data){ $.get();});这种回调里嵌原创 2016-08-06 18:27:36 · 1121 阅读 · 0 评论 -
webpack的html插件使用
加载外部JS 手动方法就是直接 script src=”xxxx” 也曾有过很多模块加载库如 requireJS、seaJS 到了ES2015则已经有了原生的模块加载机制,由于现在的浏览器还不能全面支持,因此需要webpack+babel来转化,前面我们已经介绍过了。我们再介绍一个webpack插件 这是一个自动html模板生成插件。 安装$ npm install html-webpac原创 2016-08-05 21:52:10 · 3196 阅读 · 0 评论 -
[提高]ES2015中最惊艳特性之生成器函数初步
我们来设计一个简单无比的需求 比如我要通过简单的函数来返回 1.我的名字(zhangsan) 2.我的年龄(18岁 )往往我们需要写2个函数,如function showName/showAge 或者我们通过一个函数来返回对象function showMe(){ return {name:"zhangsan",age:18};}但是ES2015有了生成器Generatorfunct原创 2016-08-05 20:13:56 · 991 阅读 · 0 评论 -
使用webpack来"编译"你的css和图片初步
安装css-loader$ npm install css-loader style-loader前者(css-loader)是为了遍历你的css,后者(style-loader)是为了进行style标记生成 利用它就可以把css给打包了,我们加入配置文件{ test:/\.css$/, loaders:['style','css']}然后执行: webpack命令 htm原创 2016-08-03 20:30:16 · 13306 阅读 · 1 评论 -
初识ReactJS的组件化开发(六):ajax更新评论列表时的定时器bug修改
前面我们定时器加载评论数据,当评论组件被移除的时候,定时器依然在运行。我们需要在移除组件的时候,把定时器清除了// 电影评论组件var ReviewList = React.createClass({ getInitialState: function () { return { review:[], //保存电影json对象数组原创 2016-07-30 21:35:47 · 1578 阅读 · 0 评论 -
初识ReactJS的组件化开发(五):ajax加载评论列表,并定时获取更新
js代码如下:// 创建组件var NavBar = React.createClass({ loadMovie: function () { ReactDOM.render( <MovieList src="http://localhost/myphp/movies.php" />, document.getElement原创 2016-07-30 21:07:27 · 3414 阅读 · 0 评论 -
跨域 - JSONP
JSONP,简单说来这种方法就是让<h1>销售数据列表</h1><div id="sales"></div><!-- 我们的HTML中包括一个<script>元素,这个script的源实际上是一个Web服务的URL。这个Web服务将为我们提供数据的JSON对象。浏览器遇到页面中的<script>元素时再向src URL发出一个HTTP请求。 --><script src="http://g原创 2016-05-01 17:47:14 · 557 阅读 · 0 评论 -
XMLHttpRequest
1.如何从javascript做出请求<!DOCTYPE html><html><head> <title>地理定位跟踪</title></head><body><h1>销售数据列表</h1><div id="sales"></div></body><script type="text/javascript"> /* 如何从javascript做出请求原创 2016-05-01 16:37:51 · 606 阅读 · 0 评论 -
地理定位跟踪
地理定位API有一个watchPosition方法,这个方法会监视你的移动,并在位置改变时项你报告位置。实验 我们更新htm,增加一个表单和两个按钮:一个用来监视你的位置,另一个用来停止监视<form> <input type="button" id="watch" value="Watch me"> <input type="button" id="clearWa原创 2016-05-01 12:11:09 · 656 阅读 · 0 评论 -
计算地球上2点之间的距离
// 这个函数取2个坐标,一个起点坐标和一个终点坐标,并返回二者之间的距离(千米) function computeDistance(startCoords,destCoords){ var startLatRads = degreesToRadians(startCoords.latitude); var startLoingRads = degreesTo原创 2016-05-01 11:27:17 · 1891 阅读 · 0 评论 -
HTML5 - 地理定位
1.不多说,先看一个小demo<!DOCTYPE html><html><head> <title>地理定位</title></head><body> <div id="location"> your location will go here </div></body><script type="text/javascript"> wind原创 2016-04-30 13:09:35 · 577 阅读 · 0 评论 -
Canvas画矩形
你的浏览器不支持HTML5 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.strokeRect(10,10,70,40); 也可以原创 2016-04-29 14:04:44 · 565 阅读 · 0 评论 -
Canvas画线
画线 *{margin: 0;padding: 0} 你的浏览器不支持HTML5 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.lineWidth = 10; ctx.strokeStyle = "red"; ctx.lineCap = "b原创 2016-04-29 13:53:49 · 610 阅读 · 0 评论 -
HTML5 九宫格拼图游戏
设计思路根据上面的效果图来观察思考,我们要做的就是设置一个大 DIV 用来包裹里面的小 DIV,然后在里面设置 8 个小 DIV,从 1 开始给他们编号。右边设置两个按钮,点击开始的时候开始计时,完成拼图后停止计时,并弹出一个框,提示完成了。重来按钮是当用户觉得当前有难度的时候,点击重来可以重新开始一个新的拼图,把所有方块打乱顺序,然后开始计时。我们的重点就是当鼠标点击其中一个方块转载 2015-07-20 16:04:42 · 10864 阅读 · 3 评论 -
Web本地存储 - localStorage
HTML5的Web本地存储(离线存储)是利用localStorage。我们直接来看这个”便条贴”案列:<!DOCTYPE html><html><head> <title>Web本地存储</title></head><body> <form> <input type="text" id="note_text"> <input type="but原创 2016-05-02 15:02:50 · 556 阅读 · 0 评论 -
reactJS - 01初识
reactJS文件包: 写个示例:<!DOCTYPE html><html><head> <title>初始</title> <meta charset="utf-8"> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script sr原创 2016-07-24 22:33:44 · 408 阅读 · 0 评论 -
reactJS - 02分离文件
你的 React JSX 代码文件可以写在单独的文件里。创建 src/hello.js 文件,内容如下:ReactDOM.render( <h1>Hello,world</h1>, document.getElementById('demo'));然后在index.html 引用它<script type="text/babel" src="src/hello.js"></scri原创 2016-07-24 22:46:49 · 1591 阅读 · 0 评论 -
初识ReactJS的组件化开发(四):ajax加载电影列表时显示"正在加载"
定义蒙版组件:// 遮罩组件var PageMask = React.createClass({ render: function () { return <div className="mask"><p>正在加载...</p></div> }});设置蒙版的css样式:.mask{position: fixed;top: 0;left: 0;width: 100原创 2016-07-30 20:06:50 · 2346 阅读 · 0 评论 -
初识ReactJS的组件化开发(三):利用ajax渲染电影列表
我们使用zepto库来做ajax请求 安装zepto: 1.cd到项目根目录 2.执行 npm install zepto 然后发现我们的项目中就多了 因为ajax是异步的,所以我们要想成功把数据后期渲染,就必须了解reactJS组件的声明周期了。《reactJS基础学习篇》 初识reactJS的组件化开发(一):简单封装 var navBar = react.createClass(原创 2016-07-30 17:36:23 · 4319 阅读 · 0 评论 -
初识ReactJS的组件化开发(二):组件嵌套和属性的基本使用
需求:我们要在导航里组件里嵌套一个搜索框组件,并设置样式定义搜索框组件:// 搜索框组件var SearchText = React.createClass({ render: function(){ return <input type="text" placeholder="请输入关键字" className={this.props.cssClass}/> }原创 2016-07-30 16:12:11 · 2849 阅读 · 0 评论 -
初识reactJS的组件化开发(一):简单封装
var navBar = React.createClass({ render: function (){ return <ul>{nav_li}</ul> }})createClass创建react组件对应的类,描述组件的各种行为,render函数是必须实现的,表示渲染什么内容下面来看我们的代码,接着前面封装导航栏组件 nav.js// 创建组件var Na原创 2016-07-30 15:42:18 · 6734 阅读 · 1 评论 -
前端组件化思维
一、常规思维 需求:新闻列表展示 如图样式: 我们ajax去请求后端php的代码:<?php$new1 = array("news_title"=>"测试新闻标题1","news_content"=>"测试新闻内容1","news_time"=>"2016-07-08");$new2 = array("news_title"=>"测试新闻标题2","news_content"=>"测试新原创 2016-07-08 22:38:59 · 1139 阅读 · 1 评论 -
如何进行前后端分离
曾几何时的项目模式 1.前后端混合 2.数据库根据页面设计 3.需求变更后修改工作量大 4.无法形成体系化、模块化开发 5.不熟麻烦。代码可读性差。对于企业来说: 前端模块化,和后端分离,部署方便; 后端使用webAPI的方式部署; 良好的可扩展性对于程序员来说: 纯粹的前端,js框架; 后端代码java或php等; 数据库相对独立mysql、nosql等; 独立缓存服务等前原创 2016-07-08 21:47:24 · 21040 阅读 · 1 评论