wenjuanzhao-CSDN博客

原创 Angular的开发

angular的简介1、angular的模块化 angular中的一切都是由模块开始的2、angular的双向绑定多用于表单中3、angualr的自定义指令4、angular的MVC模式前端开发环境代码编辑环境断点调试工具版本管理工具代码合并和混淆工具依赖管理工具单元测试工具集成测试工具模拟用户的输入来对产品进行完整的测试安装...

2018-11-25 20:49:43 200

原创 1、React介绍

优点1、能够实现服务器端的渲染，便于搜索引擎优化。这一点要比Backbone, Angular 1.x和Ember早期强 2、能够很好的和现有的代码结合。React只是MVC中的View层，对于其他的部分并没有硬性要求。意味着很多公司在选择用Angular全部重构和用3、React部分重构的时候，选择了React部分重构因为一切都是component，所以代码更加模块化，重用代码更容易 4、

2017-08-28 09:37:33 316

原创 BootStrap

Bootstrap介绍html5的一个最为流行的框架，是Twitter的两名技术工程师研发的一个基于html、css、js的开源框架，移动端优先，兼容PC端。最重要的部分是响应式布局。bootstrap的特点1、跨设备、跨浏览器 2、响应式布局 3、提供全面的组件 4、内置jquery（js的一个库）插件 5、支持html5和css3 6、支持.less动态样式下载bootstraphtt

2017-01-16 19:27:45 542

原创延迟加载和预加载

延迟加载在网页刚开始打开的时候，并没有加载这些图片，滚动条移动到一定的位置才加载这些图片，这就是延迟加载的一个例子。延迟加载的好处：使用延迟加载节约大量的流量资源。预加载在网页打开某一张大图的时候，这个图片的前一张和后一张都已经加载了。

2017-01-13 16:08:46 544

原创动画

列队动画和同步动画列队动画就是一个动画执行完以后执行另一个，使用回调函数实现的，在判断动画执行完以后会执行这个回调函数，同步动画就是多个对象同时实现动画，使用将timer绑定在各自的对象上封装动画Base.prototype.animate = function (obj) { for (var i = 0; i < this.elements.length; i ++) {

2017-01-09 21:36:39 370

原创 express中的ejs

ejs标签有3个<%code%>js代码 <%=code%>显示替换过的html特殊字符 <%-code%>显示原始的html内容

2017-01-05 20:44:09 317

原创 ndoe.js核心模块

全局对象processprocess.argv会输出一个数组第一个是node 第二个是脚本文件名 process.stdout.write(“djidas”); 实现的也是输出的功能，但是比console.log（）更底层标砖输出流 process.stdin是标准输入流初始时是被禁止的想要使用必须先启动process.stdin.resume();process.st

2017-01-05 11:30:15 707

原创 javaScript封装成库

连缀：所谓连缀，最简单的理解就是一同时设置多个属性实现连缀的基本思想，函数本身返回的divElement，改成返回一个Base对象，在Base对象中添加其他的操作方法，同样这些方法在执行之后，都返回的是Base对象

2016-12-30 11:36:51 466

原创 Ajax技术

Ajax技术的核心是XMLHttpRequest 1、var xhr=new XMLHttpRequest(); 2、调用xhr的open方法接受3个参数准备发送 1、请求的类型2、请求的url3、同步还是异步（false同步） 3、 xhr.send(null); //发送请求 get不需要发送数据所以填null console.log(xhr.

2016-12-29 16:06:18 271

原创 JSON

JSON和XML都是结构化的数据表示方式，但是JSON的获取会比xml的获简单。 JSON的语法可以表示三种类型的值： 1、简单值：在JSON中表示字符串、数值、布尔值 2、对象 3、数组对象的表示 var box={name:"lee",age:100}; console.log(box.name);json对象的表示 '{"name":"Lee"}';但是一般都是使用比

2016-12-28 21:10:32 264

原创 xml和xpath

xml指可扩展标记语言（EXtensible Markup Language）类似于标记语言html，设计宗旨是传输数据，而非展示数据 js来读取xml var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XM

2016-12-28 19:40:53 331

原创 cookie存储

检测浏览器是支持cookiecookie是以很小的文件来保存数据，常用于：会员登录、购物车等alert(typeof document.cookie)cookie的组成name=value 完整的形式： name=value;[expires=date];[path=path];[domian=somewhere.com];[secure]写入cookie document.cookie

2016-12-20 17:17:27 350 1

原创表单处理

所有的表单都是在标签form中的得到form对象的方法1、id 2、class 3、document.forms[0]提交表单的方法使用提交按钮注意的是:如果没有action 会自动的提交到本页实现阻止事件的默认提交 var Myform=document.getElementById("Myform"); addEvent(Myform,'

2016-12-17 17:10:06 668

事件入门什么是事件事件是由用户和浏览器进行交互的操作三种事件模型内联模型内联事件模型作为html标签的一个属性存在的，但是这种模型已经不适合在大的项目中使用。onclick脚本模型但是注意的是：如果这段脚本是对整个DOM进行操作的话，必须是在DOM加载完才执行这个脚本，让事件处理函数（onclick）执行一个函数的时候，通过赋值的方式，直接将函数名赋值给事件处理函数即可，而不是为这个事件处理函数赋值

2016-12-14 21:39:16 335

原创 sass认识

scss的赖于ruby http://www.yiibai.com/sass/sass_installation.html 介绍了安装sass的过程，但是值的注意的是在装好ruby以后只需要在命令行执行gem install sass就可以安装sass 检测是否安装好sass -v scss的简单使用页在上述的网页中。

2016-12-10 21:42:40 420

原创 Vue +webpack 项目

项目环境搭建：1.安装node (node -v查看node版本)2.全局安装vue-cliNpm install -g vue-cliVue:查看是否安装成功Vue list：查看可用的模板3.创建一个基于 “webpack” 模板的新项目Vue init webpack#1.0 project-name(安装1.0版本)脚手架工具如下： -build中配置了webpack的基本配

2016-12-10 15:55:23 351

原创 Vue的事件处理器

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题， Vue.js 为 v-o

2016-12-10 15:53:16 339

原创 Vue列表循环

v-for指令的使用 <div class="test"> <div :class="[activeClass,error]">dsdsd</div> <li v-for="item in items">{{item.text}}</li> </div>js代码 var myVue = new Vue({ el: ".test",

2016-12-09 11:19:06 1727

原创 Vue的class和Style绑定

通过 v-bind:class 或者 :class 来为style或者class来绑定绑定class <div class="test"> <div :class="{active:isActive,cc:isCc}"></div> </div>js代码 var myVue = new Vue({ el: ".test", data:

2016-12-08 22:17:31 399

原创 Vue实例的计算属性

Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p> </div>js代码 var myVue = new Vue({ el: ".test", data: { mess

2016-12-08 21:01:42 600

原创 Vue模板语法

所有的Vue.js的模板都是合法的HTML，能够被遵循规范的浏览器和HTML解析器解析插值插文本 <div id="app"> <p>message is :{{message}}</p> </div>js代码 var data={message:"hello vue.js"}; var app=new Vue({ el:"#app", d

2016-12-08 20:00:33 605

原创 Vue实例

new Vue ({传进来各种参数}) 这就生成了一个vue的实例构造器每一个Vue的实例都是通过Vue这个构造函数来实现的。当然在生成一个vue实例的时候需要为其传递多个参数。同时可以扩展组件的构造器，从而与预定义可复用的组件构造器自定义一个组件构造器html代码 <div id="app"> {{message}} </div>js代码 var MyComp

2016-12-08 17:19:30 374

原创 Vue组件学习

html代码 <div id="app"> <toitem v-for="item in gor" v-bind:todo="item"> </toitem> </div>js代码 //定义了Vue的组件的实例，props来传递数据，父组件的todo作为参数传了进来父组件中通过bind绑定的 Vue.component('toitem',{

2016-12-08 16:39:54 188

原创动态加载脚本和样式

使用HTMLDOM来操作表格HTMLDOM来操作表格会快捷很多。 html代码 <table border="1" width="300"> <caption>人员</caption> <thead> <tr> <th>姓名</th> <th>年龄</th>

2016-12-07 19:54:40 299

原创 Vue.js介绍以及vue的常见指令

Vue实现的是MVVM的功能一方面，通过ViewModel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候，通过ViewModel里面数据绑定的机制，触发View里面Dom元素的变化；另一方面，又通过ViewModel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，ViewModel通过Dom树的监听机制，触发对应的Model

2016-12-05 15:21:27 453

原创 DOM对象

DOMdocument object model文档对象模型 W3C就是在逐渐的规范化DOM但是IE显示会有问题 html中整个其实是一个树DOM中的节点查找节点分类1、元素标签 div a 2、文本节点标签内的纯文本 3、属性节点标签的属性查找元素getelementById 传递一个ID值，找到对应的元素的文档对象，没有找到的话就返回null getElementsBy

2016-11-28 19:48:57 340

原创 BOM对象

BOM对象也就是浏览器对象，但是由于浏览器的供应商对整个对象都有自己的一些扩展，导致许多不兼容的性质，所以我们只能使用浏览器共有的方法。BOM本身没有标准的定义window对象js中最顶层的对象 window的6大属性，这些属性本身就是对象 window下的属性和方法可以使用window.属性或者方法也可以直接属性方法需要注意的是如果是某一个浏览器独有的方法，那么在其他的浏览器可能会

2016-11-22 21:02:31 281

原创匿名函数和闭包

匿名函数：没有名字的函数闭包是可访问一个函数作用域里变量的函数怎样使用匿名函数：1、把匿名函数赋值给一个变量 2、匿名函数的自我执行（匿名函数）（） 3、闭包函数里边放一个匿名函数演示闭包里边的匿名函数这里写代码片闭包闭包是指有权访问另一个函数作用域变量的函数，创建闭包的常见方式就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。通

2016-11-18 22:16:38 780

原创 js的面向对象

工厂模式创建对象这种方式是为了解决实例化对象产生的大量重复的问题。采用这种方法可以集中地创造多个对象 function createObject(name,age) { var obj=new Object(); obj.name=name; obj.age=age; obj.run=function () {

2016-11-10 11:29:55 259

原创内置对象

由ECMA内置对象的定义是：由ECMA实现提供的、不依赖数组环境的对象，这些对象在ECMAScript程序执行之前就已经存在了global对象但是不能调用这个对象，URI编码URI编码可以对链接进行编码，以便发送给浏览器， 1、encodeURI不会对特殊的字符进行编码，例如冒号、正斜杠、问号、和#号 2、encodeURIComponent 对特殊字符也会编码 1对应于decodeURI

2016-11-10 11:05:31 207

原创基本包装类型--String Boolean Number

为了方便操作基本类型值，ECMAScript提供了3个特殊的引用类型：Boolean、Number、String。这些类型与其他引用类型相似，但同时也具有各自的基本类型相应的特殊性为。实际上，每创建一个基本类型的值的时候，后台就会创建一个对应的基本包装类型的对象基本包装类型概述不能为上边的那3种基本数据类型动态的添加方法，但是却可以调用系统的方法 1、字面量的方法 var ss="hsajia

2016-11-09 22:03:54 266

原创变量、作用域、以及内存

变量js的变量是松散性的，非强制性的。（在特定的情况是一种特定的类型）。基本类型和引用类型的值基本类型的值：保存在栈内存的简单数据段，这种值完全保存在内存中的一个位置引用类型的值：保存在对内存中的对象，变量中保存的其实是一个指针。基本类型的值有：undefined null boolean number string在内存中的空间的大小是一个定值，是按值来访问。引用类型的值：A

2016-11-09 17:26:37 205

原创 Function类型

将函数作为值传递给另一个函数 function sum(num) { return num+10; } function mm(sum,num) { return sum(num); } console.log(mm(sum,10));函数内部属性arguments一个类数组的对象 arguments的callee属性：

2016-11-07 11:31:08 279

原创 js不常用属性

offsetDOMObject.offsetWidth；会得到的是这个DOM对象的width和padding的和。document.compatModedocument.compatMode用来判断当前浏览器采用的渲染方式。可能会得到两种答案： BackCompat：标准兼容模式关闭。 CSS1Compat：标准兼容模式开启。当document.compatMode等于BackCom

2016-10-31 17:19:34 252