【[js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示】的更多相关文章

[js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示

javascript面向对象编程方式,对于初学者来说,会比较难懂. 要学会面向对象以及使用面向对象编程,理解对象的创建在内存中的表示,至关重要. 首先,我们来一段简单的对象创建代码 var obj = new Object(); obj.userName = 'ghostwu'; obj.showUserName = function(){ return obj.userName; }; var obj2 = new Object(); obj2.userName = '卫庄'; obj2.sh…

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意的添加自定义的数据 webpack.dev.config.js文件: var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : { main : './src/js/main.js', cal…

[js高手之路] javascript面向对象写法与应用

一.什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, getElementsByTagName等等这些就是document对象支持的方法,那么我们常见的onclick, onmouseover,onmouseout等等就是document支持的属性 二.javascript创建自定义对象,常用的有两种方式: 上面是js内置的对象,如果我们需要自己常见…

[js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install webpack@3.5.6 --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目 首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这个web…

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他的配置选项的探讨. 一.chunks选项 这个属性非常有用,可以指定某个页面加载哪些chunk( 如:js文件 ) 我们可以用他做多个页面模板的生成. 比如,我们在实际开发中,做一个博客网站,一般来说有首页,文章列表页,文章详情页等等,这些页面都有一个特点,都要引入一些公共的js文件以及该页面特有的…

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢?,我们可以使用插件html-webpack-plugin,首先安装这个插件npm install html-webpack-plugin --save-dev,好的,接下来就开始用这个插件了 官方参考文档: 插件通用用法:https://webpack.j…

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 module.exports = { entry : ['./src/js/main.js', './src/js/calc.j…

[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等. 官方参考文档:https://webpack.js.org/loaders/ 我们从本文开始,重新搭建一个项目结构来解释下loader的用法. 一.项目结构搭建准备: 目录结构: demo3 dist src components modal.html modal…

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在webpack使用图片资源,我们需要用file-loader来处理. 安装file-loader: npm install file-loader --save-dev 在src目录下面新建一个文件夹( img ) 存储图片 一.demo3目录下面的index.html文件引入图片 <body> &l…

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease 1s; } 一.这是一个css3的过渡样式,我们知道,写css3的时候,需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件 安装postcss-loader: npm install postcss-loader --save-dev 安装au…