joy_zxj-CSDN博客

原创 webpack非官方学习文档

Webpack 是一个JavaScript模块打包器，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。一.前端构建工具的发展前端技术的发展伴随着各种可以提高开发效率的新思想和框架被发明。但是这些东西都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。构建就是做...

2019-05-20 20:05:02 269

原创小程序笔记

小程序技术发展史微信中的WebView 逐渐成为移动 Web 的一个重要入口，微信提供相应的 JS API，仅内部使用。对外发布一整套网页开发工具包，JS-SDK（类似于hysdk吧，可以调用一些原生功能）。但是，JS-SDK仍然没有解决移动网页遇到的体验不良的问题，比如白屏，页面切换的生硬和点击的迟滞感等问题。小程序生态。快速的加载，更强大的能力，原生的体验，易用且安全的微信数据开...

2019-04-08 16:42:16 197

原创 jQuery源码分析（一）

1.闭包结构(function(window,undefined){ .... ....})(window)jquery整体的内部实现都包含在一个立即执行函数形成的闭包里，只向外暴露jquery和$两个变量，避免了全局变量的污染。2.实例化jquery对象平时我们实例化jquery对象的时候，并不是像实例化普通对象一样，使用new来实例化，而是直接$(“XXX”)，这也是jquery的

2017-08-30 17:45:25 629

原创利用Nginx解决跨域问题

解决跨域问题的方案有很多，但多多少少都会受到浏览器种类的影响或相应数据类型之类的一些限制。利用nginx的反向代理实现跨域，相比于其他方案来说无论是性能，通用性，灵活性，都是一种更好的选择。下面直接通过一个例子看看如何实现。1.启一个node服务器。监听9000端口。var app=require("express")();app.get("/getinfo",function(req,res){

2017-07-21 20:14:06 758

原创 css知识填坑(二)——块级元素

一.块级元素1.水平格式化正常流中块级元素框中的水平部分总和就等于父元素的width。水平属性水平格式化的七大属性： margin-left+ border-left+ padding-left +width+ padding-right+ border-right margin-right =元素框的宽度=父元素的width值margin，width——可设置为auto padding，b

2017-05-09 15:33:07 398

原创 css知识填坑(一)——选择器

1.书写规则每个样式规则由选择器和声明块两部分组成，如果声明中使用了不正确的属性或者不正确的值，整个声明都会被忽略。2.选择器分类选择器有：ID选择器，类选择器，属性选择器，标签选择器，后代选择器，相邻兄弟结合符，伪类选择器，伪元素选择器，通配符。3.伪类和伪元素选择器.伪类和伪元素选择器可以为文档中不一定存在的结构指定样式。伪类可以理解为为元素指定假想类，伪元素可以理解为在文档中插入假想的元素。伪

2017-05-03 18:39:35 258

原创来写一个模块加载器吧

模块化随着前端代码量的徒然增多，前端模块化必然趋势。总的来说，起初前端模块化主要是为了解决一下问题：全局变量污染命名冲突代码复用依赖管理前端模块化的发展历程又可以分为一下几个阶段：利用自执行函数进行模块的封装，利用闭包导出公有方法nodejs的模块化规范commonjsrequirejs的模块化规范AMDseajs的模块化规范CMDES6模块化前端模块化工具模块化工

2017-04-14 16:21:40 1418 1

原创浅谈前端优化

前端可以优化的点非常多，在这里做一个小结，知道了新的方法随时补充。本文主要从三个方面谈谈前端优化：网络优化，页面优化，其他优化。一.网络优化：1.减少请求数小图片合并雪碧图(background-position实现)。css，js文件合并减少重定向2.减小请求资源大小发布前进行文件，图片压缩开启gzip压缩3.缩短请求资源距离使用CDN，将静态资源分布到离用户最近的cache服

2017-04-05 20:00:06 289

原创浅谈JS异步编程——Promise

JS单线程的特点同时也决定了JS中异步编程的必要性，起初，我们常常使用回调函数来处理异步任务，但随着任务越来越复杂，回调函数的层层嵌套使得无论是代码还是开发人员看起来都十分痛苦。。。于是，可爱的Promise出现了，将开发人员从万恶的回调地狱中解救了出来。。。一.什么是PromisePromise是一个对象，从他可以获取异步操作的消息Promise对象是一个构造函数，用来生成Promise实例

2017-04-02 16:37:42 677

原创我理解的Curry化

柯理化一直是一个我觉得很抽象的东西，之前一直都半懂不懂，今天好好研究了一下，理解上稍稍有点清晰，赶紧来记下来，以后有了更好的理解再来更新。1.函数式编程函数是第一等公民所谓”第一等公民”，指的是函数与其他数据类型一样，处于平等地位，可以赋值给其他变量，也可以作为参数，传入另一个函数，或者作为别的函数的返回值。只用”表达式”，不用”语句” “表达式”（expression）是一个单纯的运算过程，

2017-03-24 19:58:08 801

原创浅谈垂直居中

垂直居中一直是布局问题当中让人比较头疼的问题，每次遇到这类问题都是把脑子里考虑到的可能的解决方案一个个的试，自己本身也没有什么比较清晰的解决思路，今天就利用这篇文章好好总结一下。method1:利用绝对定位(1)第一个想说的方法是我们最常用的，利用绝对定位进行水平垂直居中。就像下面这样： https://jsbin.com/mahuveqaya/edit?html,css,output//css

2017-03-22 14:19:04 327

原创浅谈前端模块化

随着前端代码的业务逻辑越来越多，模块化成为了必然的趋势，要是具体说道模块化的意义，我觉得有以下几点：提高代码的复用率。提高可维护性。解决团队开放中的全局变量污染及命名冲突。依赖关系的管理。1.JS模块化历程1.最初的模块化手段。随着前端代码量的增多，开发人员在进行前端代码开发时很多问题也就跟着暴露了出来：全局代码的灾难函数命名冲突依赖关系不好管理于是，为了缓解上述的问题，开发人员想

2017-03-21 19:42:23 334

原创 goChat项目总结

1.背景概述项目概述：能够实现在线聊天功能的SPA应用。技术栈：jquery+WebSocket+nodejs+mongoose。源代码：https://github.com/zjjxj/goChat2.项目详情很久以前就想来写个项目过程记录文档，因为整个项目过程中实在时学到了太多东西想让我有记录下来的冲动。没做这个项目之前，很多次都有听说SPA应用，但是一直都是一知半解，之后看了一本SPA

2017-03-14 20:16:08 1555

原创 css基础知识小结

1.盒子模型在文档中，每个元素都被当成一个盒子模型，描述元素在文档内所占的空间。每个盒子都由四部分组成：content，padding ，border，margin。所以我们说，一个盒子所占的空间大小应该是由这四部分相加的和。但元素实际所占的宽度，应该是由border+padding+content组成的。其中的content也就是width值。盒子模型分为IE盒模型和标准盒模型，他们之间

2017-03-13 19:25:59 624

原创 HTML5知识填坑(五)——Web Workers

我们知道，js是单线程的，并且和渲染线程是互斥的。也就是说，在浏览器中，执行js代码和渲染页面不能同时进行。这种机制会造成这样一种情况，如果我们的js代码运行的时间过长，这样UI更新就没有时间进行，就会造成用户界面的锁定。为了缓解这个问题，浏览器制定了长时间运行脚本的限制。但作为web开发人员，为了良好的用户体验，我们的代码运行时间应该远远小于浏览器的限制，研究表明，单个js的运行时间不应该超过1

2017-03-12 19:58:29 367

原创 HTML5知识填坑(四)——历史状态管理

历史状态管理是现代Web开发的一个难点。尤其是在SPA应用的开发中，无刷新的前端体验同时毁掉了浏览器的前进后退按钮。要解决这个问题，我们有两个方法。第一就是浏览器的hashchange事件，这个方法也是我们在单页应用开发中通常会选用的路由管理机制。第二就是HTML5中通过更新history对象，为我们提供的新的管理历史状态的API。1.history.pushState()和history.

2017-03-11 15:08:46 878

原创 HTML5知识填坑(三)——跨文档传输消息

跨文档传输消息(XDM)也就是跨域传递消息，是实现跨域的另一种方法（突然想到我的跨域系列文章好像少写了一篇）。XDM的核心就是浏览器的postMessage()方法，这个方法看起来好熟悉，在web worker里也有用到，都是用来向另一个地方传递数据。在XDM中，“另一个地方”就是指包含在当前页面的iframe元素，或者由当前页面弹出的窗口。在还没深入了解这前，看到这里我的心里就会有个疑问。post

2017-03-11 13:47:15 1018

原创 HTML5知识填坑(二)——地理定位

五.HTML5新API和应用1.HTML5 地理定位http://www.w3school.com.cn/html5/html_5_geolocation.asp试用浏览器会弹出窗口询问用户是否允许地理定位：如果用户不同意：

2017-03-10 13:25:08 340

原创 HTML5知识填坑(一)

学了几个HTML5的API，前几天写简历的时候就很嘚瑟的说自己熟悉HTML5的新特性，最近才发现原来HTML5的新特性包含很多的方面，然后就是一脸尴尬。但简历已投，说自己不会也来不及了，决定花点事件进行一下总结，顺便复习以下相关知识。一.文档类型声明HTML5以前，进行文档类型声明非常麻烦，要好长一串。但在HTML5中却很简单。<!DOCTYPE html>文档类型声明的作用？它是指示 web

2017-03-09 20:04:59 334

原创 String类型知识点总结

一.基本包装类型我们都知道js中的字符串是一种基本类型值，从逻辑上讲，基本类型值不是对象，不应当有属性和方法，但是在日常应用中，我们仍然可以方便的调用字符串的各种属性和方法，这是为什么呢？其实，为了便于我们操作基本类型值，ECMAScript还提供了三个特殊的引用类型：String Boolean,Number，这三个特殊的引用类型与其他引用类型相似，但也有自己的特殊之处。我们来看下面这个例子：va

2017-03-08 17:40:34 444

原创浏览器缓存机制(四)——sessionStorage和localStorage

一.Web StorageWeb Storage是HTML5提出的本地存储机制，主要目的是克服cookie的一些限制，当数据需要被严格控制在客户端上时，无需持续的将数据发回服务器。优点：大量数据的存储（也有限制，因浏览器而异，每个来源2.5M/5M）数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。跨会话缺陷:因为WebStorag

2017-02-24 17:45:43 12836

原创浏览器缓存机制(三)——cookie

随着web应用程序的出现，也产生了对于能够在客户端上存储用户信息能力的需求。想法很合乎逻辑，属于某个用户的信息应该存储在该用户的机器上。一.cookiecookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。1.限制cookie在性质上是绑定在特定的域名下的，当设定了一个c

2017-02-24 16:45:03 2290

原创浏览器缓存机制(二)——application cache

一.appcacheHTML5 引入了应用程序缓存，简称appcache，是专门为开发离线web应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件(manifest file)，可以将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。应用程序缓存

2017-02-23 21:53:29 1839

原创浏览器缓存机制(一)——HTTP缓存

通过网络获取内容既缓慢，成本又高：大的响应需要在客户端和服务器之间进行多次往返通信，这拖延了浏览器可以使用和处理内容的时间，同时也增加了访问者的数据成本。因此，缓存和重用以前获取的资源的能力成为优化性能很关键的一个方面。浏览器端缓存的机制有很多种，总体归纳为九种，打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制。本文主要来了解HTTP缓存。http缓存是基于HTTP协议的浏览器

2017-02-23 16:59:43 635

原创浅谈JS继承(三)

三.其他实现方法1.通过复制属性实现继承//shallow copyfunction extend(parent,child) { var i; child=child||{}; for(i in parent){ if(parent.hasOwnProperty(i)){ child[i]=parent[i]; }

2017-02-22 00:14:56 253

原创浅谈JS继承(二)

二.原型继承原型继承是一种无类继承模式，我们的目的仅仅是：有一个想要复用的对象，并且想要创建的第二个对象需要从第一个对象中获取其功能。也就是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。//想要继承的对象var parent= { name: 'Papa'};//新对象var child=object(parent);//测试console.log(child.

2017-02-21 21:52:56 221

原创浅谈JS继承(一)

一.类式继承我们知道JS中并没有类这个概念，但因为JS具有构造函数，并且new操作符的语法和那些使用类的编程语言在语法上有很多相似之处，在使用new调用构造函数创建对象时，构造函数看起来似乎是一个类(但我们都知道，他只是一个函数)。我们把这种基于类的开发思路上实现的继承称为类式继承模式。类式继承的目的是通过一个构造函数来获取另外一个构造函数的属性，从而创建对象。1.默认模式function Pare

2017-02-21 21:15:09 549

原创浅谈跨域(五)——Web Sockets试用

出现动机建立持久连接HTTP协议是一种无状态协议，服务器端本身不具有识别客户端的能力，必须借助外部机制，比如session和cookie，才能与特定客户端保持对话。这多多少少带来一些不便，尤其在服务器端与客户端需要持续交换数据的场合（比如网络聊天），更是如此。为了解决这个问题，HTML5提出了浏览器的WebSocket API。全双工双向通信SSE对于要从服务器拉取数据的应用来说，已经能够很好的满足

2017-02-12 17:54:28 447

原创浅谈跨域(四)——SSE试用

Comet虽然实现比较简单，但是实际使用过程中并不是那么简单，还需要考虑很多实际的问题，例如连接断开如何重连。而且Comet并不是HTML5规范的一部分，并且在服务器端和浏览器端都需要第三方库的支持。幸运的是HTML5规范中新增了SSE（Server-Sent Event），直接使用SSE API就能实现和Comet一样的功能。Server-Sent EventSSE 用于创建到服务器的单向连接

2017-02-11 16:08:15 2575 3

原创浅谈跨域(三)——Comet

我们知道Ajax是一种页面向服务器请求数据的技术，那么Comet就是一种服务器向页面推送数据的技术，而且能够让信息以近乎实时地推送到页面上，我们常将它称之为“服务器推送”。用Comet来实现与跨域服务器的通信有两种方式：长轮询（long polling）和流（http streaming）。长轮询（long polling）说到长轮询，很容易就会联想到短轮询，短轮询就是不断向服务器发送请求，看看有没

2017-02-10 22:23:02 579

原创浅谈跨域(二)——CORS试用

通过XHR实现Ajax通信的一个主要限制，来呀unyu跨域安全策略。默认情况下，XHR对象只能访问同域资源。这种安全策略可以预防某些恶意行为。但是实现合理的跨域请求对于开发某些浏览器应用程序也至关重要。跨域资源共享（CORS）是一个W3C规范，它允许在浏览器端发起跨域通信。通过使用XMLHttpRequest对象，CORS允许开发者发送跨域请求，就像发起相同域的请求一样。CORS背后的思想是：使用自

2017-02-10 16:51:18 472

原创浅谈跨域(一)——图像Ping和JSONP

在CORS技术出现以前，要实现Ajax跨域通信是比较困难的。开发人员们想出了一些办法，利用DOM中能够执行跨域请求的功能，在不依赖XHR对象的情况下也能发送某种请求。例如图像ping和JSONP。图像Ping我们知道，一个网页可以从任何网页加载图像，不用担心跨域不跨域，所以，我们就可以利用图片不受“同源限制”这一点进行跨域通信。我们利用JS创建一个新的Image对象，并把src属性设置为指向请求

2017-02-10 15:02:37 2832

原创行星和飞船——项目拾金（一）

代码地址：https://github.com/zjjxj/Star-And-Airship拾金篇1.代码组织方式为了实现代码的可重用性和可分发性，有下面这三种方法：1.命名空间：避免全局量。使用对象字面量写法将不希望放入全局上下文的代码封装起来。var FOO={};FOO.x=10;FOO.add=function(x,y){ return x+y;};但命名空间有三个问题：如果

2016-12-15 21:45:36 342

原创疏理js执行细节

1.概念介绍执行环境（context）也称执行上下文，执行环境分为全局执行环境和函数执行环境。全局执行环境在全局代码开始执行的时侯会被创建，函数执行环境在函数执行时会被创建。变量对象(variableObject) 每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。在函数上下文情况下，参数列表也会被加入到变量对象中。活动对象（activationObject

2016-12-11 16:25:57 304

原创听指挥的小孩——项目拾金（一）

About CSS:1.盒模型:当你指定一个CSS元素的width和height属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加padding，border和margin。.盒子模型分为两类：W3C标准盒子模型和IE盒子模型。这两者的关键差别就在于： W3C盒子模型——height和width这两个值不包含 padding和border。 IE怪异模式中盒子模

2016-12-05 21:08:30 396

原创浅谈js单线程

一. 浏览器内核最开始想先说说浏览器内核，起初，浏览器内核指的是js引擎和渲染引擎，后来，js引擎越来越独立，浏览器内核逐渐就单指渲染引擎（也称排版引擎）。浏览器都由哪些部分组成1.用户界面 2.浏览器引擎（the browser engine）— 用来查询及操作渲染引擎的接口； 3.渲染引擎（the rendering engine）— 显示请求的内容； 4.网络 — 用来完成网络调用

2016-11-03 20:19:55 464

原创浅谈事件流

事件是文档或浏览器窗口发生的一些特定的交互瞬间，比如点击，鼠标移入移出。事件最早在IE3中出现，DOM2规范时才开始标准化DOM 事件。自此之后，除了IE8，其他所有主流浏览器都支持DOM2级事件，只有IE8还很执着的使用着自己的事件系统。学习事件时，我很头疼的一点就是关于浏览器的兼容性，所以一开始说清楚这个感觉会比较好。说到事件，就不得不说事件流，事件流描述的是页面接收事件的顺序。事件流就包括我

2016-09-29 21:31:13 326

原创浅谈this

js中的this一直是我非常头疼的一个问题，但又经常会在代码中看到，非常重要，于是最近翻了翻书，看了别的老师的博客，就在这里自己疏理一下。this是函数的一个内部对象，只能在函数内部使用。他指向调用函数的那个对象。在函数创建的时候，this的值是确定不了的，只有在调用函数的时候，生成执行上下文环境时才会给this赋值，每次调用函数的时候，都会产生新的执行环境，this的值都会重新赋。那么，问题来了，

2016-09-28 23:19:22 253

原创 JavaScript中创建对象的方法

大家都知道Javascript是一种基于对象的语言，可以说javascript里一切都是对象，那创建对象都有那些方法呢？1. 利用Object构造函数或对象字面量创建单个对象var student1=new Object(); //利用Object构造函数创建对象 student1.name="Amy"; student1.age=10;var student2={

2016-09-28 20:30:10 278

空空如也

空空如也