前端
文章平均质量分 83
沈鸿斌
爱生活,爱Coding
展开
-
《Web前端开发修炼之道》笔记一:高质量HTML
一、标签语义化HTML标签专注于结构,标签的职能只限于告诉你,“这是一个标题”、”这是一个段落“,并不告诉你,“这是红色的“。CSS布局弱化了标签的“布局能力”,将布局完全放到样式中进行控制。与table布局相比,css布局代码量少,结构精简,语义清晰。(代码量少,浏览器的下载时间更短;结构清晰,对搜索引擎更友好。)正确的做法是:先确定HTML,确定语义的标签,再来选用合适的C原创 2016-01-25 11:41:15 · 625 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记(七):事件
1.事件流当浏览器发展到第四代时(IE4 及 Netscape Communicator 4),浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件?要明白这个问题问的是什么,可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是纸上的所有圆。两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮原创 2016-02-27 22:48:35 · 926 阅读 · 0 评论 -
前端组件化开发和MVC
最近接触到了前端开发一些比较不错的思想:组件化开发、MVC,是我以前瞎写课程大作业的时候所不具备的。所以想写下来做个总结,也希望能给不太了解这一块的同学一点启发和帮助。这一篇,就用一个本地博客的demo,来简单地介绍一下组件化开发和MVC。前提准备:适当了解Backbone1.初步分析先看下页面长什么样:(因为主要讲编程的思想,css什么的就随意搞搞)可以看到,页面分为原创 2016-04-07 17:56:00 · 3300 阅读 · 0 评论 -
深入理解JavaScript系列(一): 函数的四种调用模式
1.四种调用模式1.方法调用模式当一个函数被保存为对象的一个属性时,我们称之为一个方法。当一个方法被调用时,this被绑定到该对象。function A() { this.x = 1; //定义a.x this.b = function () { //定义a.b this.helper = function () { //定原创 2016-03-24 22:27:31 · 2081 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记(三):面向对象
1.属性的特征用对象字面量来创建对象:var person = { name: "Nicholas", age: 29, job: "Software Engineer", sayName: function(){ alert(this.name);}}; 1. 数据属性原创 2016-02-17 16:05:16 · 997 阅读 · 0 评论 -
深入理解JavaScript系列(二): 原型、原型链与继承
1.原型1.什么是原型我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。 如果按照字面意思来理解,那么 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。原创 2016-03-28 17:01:03 · 1798 阅读 · 0 评论 -
深入理解JavaScript系列(三): 作用域链与闭包
1.作用域链1.创建时函数的[[Scope]]属性包含这个函数被定义时它所有的域对象。var name = 'scope1'; function tellScope() { console.log(name); // [[Scope]] = [{name:'scope1'}]} function testScope() { var name = 'scope2原创 2016-03-28 21:54:36 · 1530 阅读 · 1 评论 -
使用NPM + Webpack进行前端开发的示例
最近在使用Webpack来帮助进行前端开发,觉得这个东西的确挺好用。所以用一个简单的示例记录一下,供他人以及自己以后的参考。这篇文章不是Webpack的教程贴,也不分析Webpack的优缺点,只是简单的记录我自己觉得还不错的一套用法,在阅读本文前,读者需要对NPM以及Webpack有个基础的了解。1.项目结构项目名称叫webpack-demo。源代码目录是a原创 2016-08-21 21:42:20 · 19433 阅读 · 2 评论 -
JavaScript中的严格模式
最近详细了解了下严格模式,本想自己总结下,但是我太懒了,就直接转一篇总结文吧!如果不想要二手的,可以直接看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode=======================================================本文转自转载 2016-09-05 21:45:47 · 2321 阅读 · 0 评论 -
用React + Redux + NodeJS 开发一个在线聊天室
最近工作比较闲,所以学了点React相关的东西,然后又做了个简单的在线聊天室练手, 现在就记录下如何用React和Redux来构建一个项目。项目在线演示地址:https://murmuring-brook-22426.herokuapp.com/源码地址: 源码一、技术栈1.前端展示层:React2.前端数据流管理:Redux3.前端样式:Less4.后端: N原创 2016-09-29 19:33:22 · 11659 阅读 · 1 评论 -
《JavaScript高级程序设计》读书笔记(六):DOM
1.Node类型JavaScript 中的所有节点类型都继承自 Node类型 每个节点都有一个 nodeType 属性,用于表明节点的类型。节点类型由在Node 类型中定义的下列12个数值常量来表示,任何节点类型必居其一: Node.ELEMENT_NODE(1); Node.ATTRIBUTE_NODE(2);原创 2016-02-27 14:47:43 · 792 阅读 · 0 评论 -
深入理解JavaScript系列(四): 模块化编程
本文整理自 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html1.模块的写法1.原始写法模块就是实现特定功能的一组方法。只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。 function m1(){ //... } function转载 2016-03-29 22:53:41 · 8394 阅读 · 0 评论 -
《Web前端开发修炼之道》笔记二:高质量CSS(一)
还需要深入了解的知识点:1.CSS Reset2.怪异模式1.怪异模式和DTD为了向后兼容,浏览器会有怪异模式和标准模式这两种方法来解析网页。怪异模式的解析方法是不符合W3C标准的,所以一般情况下要避免(通过在html文件开头声明文件的DTD类型)。关于这个,之后要找更详细的资料阅读,再单独整理成文。2.如何组织CSS可以有多种方式,比如:按功能原创 2016-01-26 10:13:50 · 695 阅读 · 0 评论 -
《Web前端开发修炼之道》笔记三:高质量CSS(二)
还需要深入了解的:浏览器兼容文档流,z-index1.低权重原则——避免滥用子选择器CSS的选择符是有权重的,当不同选择符的样式设置有冲突时,会选用权重高的选择符设置的样式。权重规则:HTML标签的权重是1,class的权重是10,id的权重是100。所以上图1234567890的颜色是red。如果CSS选择符权重原创 2016-01-26 20:26:18 · 602 阅读 · 0 评论 -
《Web前端开发修炼之道》笔记四:高质量JavaScript(一)
1.如何避免js冲突1.切忌全局变量泛滥,可以用匿名函数把脚本包起来。比如:2.为了解决匿名函数之间的通信问题,我们可以在window作用域下定义一个全局变量,把它作为一个桥梁,完成各匿名函数之间的通信。为了控制全局变量的数量,可以使用如下方法:但是这种方法里,GLOBAL的属性很容易被不同的工程师覆盖,所以,我们可以使用命名空间原创 2016-01-27 17:18:25 · 1136 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记(一)
1.JavaScript的组成(简单介绍)一个完整的JavaScript实现应该由下列三个不同的部分组成:核心(ECMAScript)、文档对象模型(DOM )、浏览器对象模型(BOM)1.ECMAScript常见的 Web浏览器只是 ECMAScript实现可能的宿主环境之一 。既然ECMA-262 标准没有参照Web 浏览器,那它都规定了些什么内容呢?大原创 2016-02-15 18:05:55 · 1314 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记(二):引用类型
一、引用类型1.Object类型创建 Object实例的方式有两种。第一种是使用new 操作符后跟Object 构造函数 ,如:var person = new Object();另一种方式是使用对象字面量表示法。对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。原创 2016-02-16 18:19:44 · 883 阅读 · 0 评论 -
《Web前端开发修炼之道》笔记五:高质量JavaScript(二)
1.this关键字的指向2.利用map传参3.面向对象原创 2016-02-04 15:22:30 · 954 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记(四)
1.函数定义函数的方式有两种:一种是函数声明,另一种就是函数表达式。函数声明的语法是这样的:function functionName(arg0, arg1, arg2) {//函数体} 关于函数声明,它的一个重要特征就是函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明。这就意味着可原创 2016-02-18 11:43:19 · 967 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记(五):BOM
1.window对象BOM 的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数,都以window 作为其Global 对象,因此有权访问parseIn原创 2016-02-18 16:42:51 · 927 阅读 · 0 评论 -
浏览器同源策略与跨域请求的实现方法
最近在项目中遇到了跨域请求的问题,趁着这个机会详细地了解了下相关的知识,现在做个记录。Reference:http://www.ruanyifeng.com/blog/2016/04/cors.html https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS一、浏览器的同源策略1.什原创 2017-03-11 16:25:17 · 1808 阅读 · 0 评论