通过html dom可以访问javascript html文档的所有元素。 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript ……
标签目录:前端
以下是与标签 “前端” 相关联的文章React学习6-配置react和webpack
react和webpacklian联合开发过程中涉及到一些配置的更改 1、热更新的开启
1 2 3 4 5 6 7 |
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server" }, } //给webpack-dev-server重新命名,就可以运行 npm start 来开启热更新 |
2、webpack性能设置
1 2 3 4 5 6 7 8 9 10 |
var webpack = require('webpack'); var path = require('path'); module.exports = { //性能 performance:{ hints:'warning', //级别:超出文件大小限制给出什么级别的提示 maxEntrypointSize:100000, //限制最后生成的bundle.js的大小,单位bytes maxAssetSize:450000, //对图片和文件的限制,大小bytes }, } |
3、source-map 打包后的文件被压缩过,使用source……
移动营销设计
这算是一篇读书笔记,最近看了一本关于h5的移动营销设计的书。 其实这本书还是比较适合跟技术经常做交接但是并不写代码的人,大致是那些市场、运营、设计岗位的人吧。里面很少涉及到代码层面的东西,多半是关于营销的,比如如何设计一个页面能达到传宣效果,或者说应该采用怎样的设计风格等等。 这里就不多说太多,主要记录开发同学在开发过程中可能会用到的点,……
React学习5-开发笔记
记录学习过程中的方法或者问题 1、要在render中展示一个html内容 比如里面的空格,可以进行Unicode转码后再放到render中,但是这种方法还需要提供额外的接口处理内容,不方便。
1 2 |
var username='XXXXXXX'; //html内容 <p dangerouslySetInnerHTML={{__html: username}}></p> |
这种方法其实“dangerous”,因为在JSX中安全。 2、当一个……
React学习4-开发设置
项目可以进行开发了,但是开发过程中,我们可以设置更多的东西来帮助我们开发更方便快捷。 1、及时打包
1 |
webpack --watch |
每次修改js文件,都要运行webpack打包,因为html中引用的是这个打包后的文件,所以很不方便,执行这个命令后,在js中做任何修改保存后都会自动打包 2、实时刷新浏览器 ……
React学习3-使用npm管理项目
之前在官网看到使用script进行引用的方式进行react的开发,包括在一些简单项目中,我也是引用过来后进行开发的,前期简单的使用是为了了解react的思想,在进入大的项目之前首先需要配置一个更完整的项目环境。 npm是现在比较常用的包管理工具 1、项目配置初始化
1 |
npm init |
进入一系……
chrome插件开发
这两天有一个浏览器插件的需求: 在网页上右键图片,可以把图片上传到指定的服务器! 其实后端的开发还比较简单,拿到一个图片的路径,下载下来,调用服务器接口上传,比如上传到了七牛。 主要在于前端怎么获取。插件开发网上有教程,首先有几个文件需要:manifest.json,index.html, 配置文件:manifest.json 这个文件设……
初识微信小程序,踩坑记
最近在做微信小程序的开发,遇到一些问题,做下记录 1、开发配置中一个重要的点,域名设置,不支持ip和端口号,并且只支持https 2、样式中的图片,只能采用远程图片地址,不能使用相对路径,但是js中当require另一个js可以使用相对路径 3、一个页面onload一次,onshow会多次,就是你切换也好,跳转也好,只要看到页面一次,就执……
console用法笔记
平时大家都用console.log()进行bug查找,后来查看到,有好多console的用法 console.assert(expression, object[, object…]) 接收至少两个参数,第一个参数的值或返回值为false的时候,将会在控制台上输出后续参数的值。例如: [crayon-679f32b6e4a85……
让音频在ios页面上自动播放
在ios上的页面中,有时候需要一开始就进行播放音频,但是即便你加了autoplay,在js中写了start,但是它就是不播放。 很明显这个跟ios的系统有关,那么下面这种办法就可以搞定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var isAutoplay = true; var audio = document.getElementById('musicid'); // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器或者APP自动播放问题 function musicInBrowserHandler() { if(!isAutoplay){return false;} musicPlay(true); document.body.removeEventListener('touchstart', musicInBrowserHandler); } document.body.addEventListener('touchstart', musicInBrowserHandler); // 自动播放音乐效果,解决微信自动播放问题 function musicInWeixinHandler() { musicPlay(true); document.addEventListener("WeixinJSBridgeReady", function () { musicPlay(true); }, false); document.removeEventListener('DOMContentLoaded', musicInWeixinHandler); } document.addEventListener('DOMContentLoaded', musicInWeixinHandler); } function musicPlay(isPlay) { if (isPlay && audio.paused) { audio.play(); } if (!isPlay && !audio.paused) { audio.pause(); } } if (os=='ios'){ autoPlayMusic(); } |
当然,以上其实也是有个问题的, 如果进入页面,你想过一会儿再进行播放,你可能想在mus……