js代码

一 clientHeight,offsetHeight,scrollHeight的区别 　　clientHeight在各个浏览器中基本是一样的，一致认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，不包括滚动条，不包括margin，但包括padding，也就是说实际的clientHeight = 当前对象可视区域的高度 + padding值，如下图所示 clientHeight = 对象可视区域高度(300) + 上下padding值(20) = 320 在不同浏览器都实用的javascript方案: var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHeight; 　　offsetHeight = 当前对象的高度 + 滚动条 + borde值 + padding值，上图中当前对象的高度和可视区域高度是一样的，所以offsetHeight = 300 + padding(20px ) + border(10px) = 330 　　scrollHeight是网页内容的实际高度，最小值就是clientHeight

1.编程语言 html+css标记语言 js：轻量级的交互语言->全栈编程语言 面向对象： C++ JAVA PHP C# (.net doc) JS 面向过程 C java与javascript没有关系 2.js学习哪些部分？ ECMAScript(es) 艾克马 斯奎普特 DOM :document object model 文档对象模型 API（属性和方法）让JS可以获取操作页面中的dom元素 BOM ：browser object model 浏览器对象模型。提供各种api，让js操作浏览器 3.变量（varible） 它不是具体的值，只是用来存储具体值的容器，值可以改变。 基于es语法规范，js创建变量 var (es3) function (es3) 创建函数，函数也是变量，存储的值是函数类型 let (es6)创建变量 const （es6） import 基于es6的模块规范导出需要的信息 class 基于es6创建类 var [ 变量名 ] = 值； var num = 12 ; let [ 变量名 ] = 值； const [ 变量名 ] = 值； function 函数名（） { function Fn ( ) { } } ... var n = 13 ; n = 14 ; alert ( n + 10 ) ; => 弹出来 24 ，此时n代表 14 ；

前端打包工具有webpack、grunt、gulp等，这里主要介绍webpack. 一、webpack的基本能力：处理依赖、模块化、打包 1、依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块 2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，配合uglify.js可以减少、优化代码的体积 3、各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误 二、webpack的工作原理 简单的说就是分析代码，找到“require”、“exports”、“define”等关键词，并替换成对应模块的引用。 在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体，通过一个给定的主文件 （index.js），webpack将从这个文件开始找到你的项目的所有的依赖文件，使用loaders处理他们，最后打包为一个浏览器可 以识别的js文件。 在没有使用webpack之前： 举个例子：index.html里面有一大堆的css和js文件，如a.js b.js c.js等等 （1）a.js要用到b.js里面的饿一个函数，则a.js要放在b.js后面 （2）c.js要用到a.js里面的一个函数，则c.js要放在a.js后面 （3）b.js又要用到某个js文件里面的函数

vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue。 Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现，因为vue主要是通过数据劫持来实现的，通过get、set来完成数据的读取和更新。 从上面可以看到通过get获取数据，通过set监听到数据变化执行相应操作，还是不明白的话可以去看看Object.defineProperty文档。 流程图 js调用 Vue结构 1、Vue constructor 构造函数主要是数据的初始化 2、proxyData 数据代理 3、observer 劫持监听所有数据 4、compile 解析dom 5、compileText 解析dom里处理纯双花括号的操作 6、Watcher 更新视图操作 Vue constructor 初始化 上面主要是初始化操作，针对传过来的数据进行处理 proxyData 代理data 上面主要是代理data到最上层， this.xxx 的方式直接访问data observer 劫持监听 同样是使用Object.defineProperty来监听数据，初始化需要订阅的数据。 把需要订阅的数据到push到watcherTask里，等到时候需要更新的时候就可以批量更新数据了。👇下面就是；

一、基本认识 1、JavaScript 定义： javaScript的简写形式就是JS，是由Netscape公司开发的一种脚本语言，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。 组成部分： 核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM） 描述： Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。 Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。 Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。 主流的javaScript框架有：YUI ,Dojo，Prototype，jQuery... 2、Ajax 定义：

前段时间，在浏览javaeye论坛，看见有人征集如何在java中运行数学表达式。 结果方案五花八门： 1.jakarta commons JEXL. 2.Beanshell 3.Java Math Expression Parser jep 4.parse combinator jparsec 5.jdk 6.0的 script 6.利用SQL 7.自己写语法分析 如果自己写语法分析，没有个2000行估计搞不定。有人用sql来运行数学表达式，比较另类。 不过由于前段时间较深入的学习了一些java的javascript引擎，我给出的方案就是用javascript来计算了。 java中比较著名的js引擎当属mozilla开源的rhino，不过jdk6已经把它收归帐下，成了正规军。 public class MathEval { public static void main(String[] args) { Context cx = Context.enter(); try { Scriptable scope = cx.initStandardObjects(); String str = "9*(1+2)"; Object result = cx.evaluateString(scope, str, null, 1, null); double res = Context

有时我们看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。 推荐：使用jquery图片延迟加载插件jquery.lazyload实现图片延迟 实现原理： 把所有需要延时加载的图片改成如下的格式： <img lazy_src="图片路径" border="0"/> 然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）： JS代码： lazyLoad = (function() { var map_element = {}; var element_obj = []; var download_count = 0; var last_offset = -1; var doc_body; var doc_element; var lazy_load_tag; function initVar(tags) { doc_body = document.body; doc_element = document.compatMode ==

缘由 今天看到一段代码 return Object.assign(func1, func2); 心生疑惑，为什么 Object.assign 的参数可以是函数？ 于是有了下面这一堆东西，其实都是老生常谈的东西，可能是岁数大了吧，有些片段都快丢失了，哈哈 prototype js 中 万物皆是对象！！！ proto （隐式原型）与 prototype（显式原型） 对象具有属性 proto ，可称为隐式原型 实例(对象)的 proto === 构造(该实例)函数的 prototype 函数 Function 是特殊的对象，除了有 proto 外，还有自己的特有的属性 - 原型对象(prototype) 原型对象有一个属性 - constructor，指回 x.prototype 的 x(原函数) 所以 函数 还是 构造函数的函数(Function)都会指回 Object // 特例 function aa() {} aa.prototype; // => {constructor: ƒ} Function.prototype; // => ƒ () { [native code] } 函数也是对象哦 // 所以 Function.prototype.constructor // => ƒ Function() { [native code] } Function.prototype

◆ JavaScript库： 即 library，是一个封装好的特定的集合（方法和函数）。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。 ◆ 常见的JavaScript 库： jQuery Prototype YUI Dojo Ext JS 移动端的zepto等 这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的。 来源： CSDN 作者： 宅羽 链接： https://blog.csdn.net/sky6even/article/details/103456576

1. 全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?_ biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=0324iTRH12WbXL5VDxXnEhH8&key=710a5d99946419d938a0ffc16a3c72118eefbe33f3f8312ed218bccbde126b60e818c8eb1068a9b07bdc8116a077b911&ascene=0&uin=NDIzMjM3MDk1&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.10.5+build(14F27)&version=11000006&pass ticket=xdp3crkTJPuOH6ggUMKnwvfDGKEnMUvwC5V%2FdxlW%2FKdNO9R8zI1xsDFSR4ZJECUU 仔细的对比了一遍，感谢tim yang和庆丰校长的整理，非常严谨，比我讲的要好，另外感谢霍老板封我是StuQ明星讲师[呲牙][呲牙] 1.1. 主要内容 Why Node.js ？ 历史 槽点 架构平衡和选择 企业级 我眼中的Node.js核心 快速开发实践